Responsive Design tools and techniques are evolving rapidly and have proven successful in many applications, but there are still several common pitfalls to be wary of when crafting a user experience for multiple devices.
First, the term “Responsive Design” is actually a little misleading. In practice it often has less to do with design, and more to do with adopting an implementation technique that can reduce development costs and ease maintenance. While “going responsive” can yield success in these areas, it is certainly not a guarantee. As this article points out, device-specific customizations can increase code complexity and lead to last-minute “hacking” if not planned for in advance. Furthermore, the commonly touted benefits of a single code-base and shared URLs must also be weighed against an increased risk of causing unforeseen side-effects when making device specific changes.
Regardless of whether or not you employ responsive techniques, what is most important to remember is that it’s not a shortcut to creating an optimized user experience across multiple devices. Advanced planning, in the form of storyboards and interactive protoypes, is still a critical step to ensure the long-term success of your project.
While a responsive approach may be beneficial for a certain type of site or application, these benefits can be outweighed as a project’s scope broadens. With the widespread adoption of HTML5 and the line between native and browser-based experiences becoming increasingly blurry, it is important to examine in detail the scope of your project before choosing any given implementation strategy. As Google recommends in their UX best-practices guide, when designing for multiple devices you should create separate “screen maps” for each target screen size and group UX design patterns accordingly.
This technique is especially important for mobile phones where we often rely on single-pane views, larger font sizes, and deeper navigation in order to present the same information as larger screened devices. Conversely, on a tablet or desktop screen it is often necessary to increase the information density in order to prevent awkward feeling whitespace.
Creating interactive prototypes specific to each of your target devices allows you to isolate and partition critical functionality and ensure an optimal experience for every user group. Using a tool like ProtoShare you can compare user experiences side-by-side and detect problems before they become costly and risky to fix, regardless of your planned implementation.
Please read this related post on Responsive Design with ProtoShare for more information and specific techniques.