Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Device Experience and Responsive Design

by Luke Wroblewski
on March 28, 2012

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.

Netflix image

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 (http://itunes.apple.com/us/app/amazon-windowshop/id398554270?mt=8),
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 (http://www.alistapart.com/articles/responsive-web-design/) can help.

Responsive design (http://www.alistapart.com/articles/responsive-web-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.

Boston Globe Image

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 (http://www.lukew.com/ff/entry.asp?1390) 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.

Food Sense Image

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.

Share Your Thoughts with Us

What techniques are you using to reduce the costs of iteration for your team? We want to hear your experiences. Leave your thoughts on our blog.