Device Experience and Responsive Design

The article was originally published on Facebook's Developers Page in January 2012.

While the task of designing Web applications and sites for multiple devices can be daunting, two techniques can make the process more manageable: classifying device experiences and designing/building responsively. Here’s how these two approaches can work together to optimize interface designs across a wide range of connected devices.

Device Experiences

Device experiences are a simple way to classify the troves of connected devices available to consumers today so you can design appropriate interfaces for each. A device experience is defined by how a device is most commonly used and the technical capabilities or limitations it possesses. Specifically:

• Usage/posture: 10 foot lean-back experience on the couch, long periods of use at a desk, or quick bursts of activity in various locations throughout the day
• Input methods: remote/gestures, mouse/keyboard, touch/sensors, or keypad/trackpad
• Output/screen: wall-sized, desk-sized, lap-sized, palm-sized, or wrist-sized

Devices with differences in each category typically require unique user interface design solutions. The relative importance of primary tasks may differ (based on usage/posture), as will the layout and interaction design needed to accommodate different input methods and average display sizes.

While it’s possible to have a single user interface work across more than one device experience, developing a single interface that works across every device experience usually results in compromises or bare-bones design that doesn’t take advantage of what makes each device experience excel (or conversely, rich solutions that fail to load or work on less capable devices).

So while a connected TV could browse a text-list optimized for feature phones, it is unlikely anyone would find it enjoyable. On the other hand, a tablet-optimized Web application might feel simpler to use on a desktop Web browser because the number of actions has been reduced to work on a smaller display size and the size of the actions has been increased to accommodate touch interactions. While this interface wouldn’t be specifically tailored to a desktop computer’s context of use, input methods, or display sizes -it would be quite functional.

For some organizations, classifying device experiences is all that’s needed to cope with designing for lots of devices. Netflix, for instance, uses the technique to manage different interfaces on over 400 unique SKUs. This gives them “the freedom to experiment with different experiences on different platforms in isolation.” Netflix then takes what they learn from each experience and adopts it on other devices.

Amazon seems to take a similar approach. The Amazon Web site has been optimized for the usage/posture, input methods, and screen sizes of desktop and laptop computers. But the company has also experimented with different platforms in isolation. For example, Amazon’s mobile application, Flow, allows customers to identify and purchase products they find in the physical world using their smartphone’s video camera. This takes advantage of a mobile device’s portability and a specific input method -the video camera. Amazon’s WindowShop, on the other hand, makes use of a tablet’s larger screen and touch input methods to create an immersive visual shopping experience.

While it may work for Netflix and Amazon, a distinct interface for each device experience might be too much for other organizations to manage and support. They need a “single” solution that can adapt itself to the differences between devices and within device experiences as well.

Responsive Design

Within any device experience, there’s still a lot of variation -especially in display sizes. Connected TVs, laptops, desktops, tablets, smart phones, and feature phones all come in a variety of screen resolutions, densities, and aspect ratios. But don’t worry… responsive design can help.

Responsive design allows you to fill in the blanks within device experiences through the application of fluid grids, flexible images, and media queries. So once you have an optimized tablet solution, the difference between a 10 inch screen and a 7 inch screen is covered by responsive design and a few simple rules of adaptation like adding additional rows, increasing image sizes, and the like.

Web sites that consist mostly of standard content and interactions can even apply a responsive solution across smart phones, tablets, desktops/laptops, and TVs assuming there’s no difference in use across devices and they can manage media assets effectively. For complex web applications (i.e. a Web-based email client), adapting responsively across all device experiences is harder and separate templates may work better. But even in separate templates, fluid grids, flexible images, and media queries (the bread and butter of responsive design) can help layouts adapt more effectively to device differences.

With a set of interface solutions for an appropriate set of device experiences and responsive design, all of your Web URLs can resolve to an optimal interface for your customers online –no matter what device they use to get there.