UX of Responsive Web Design

What is Responsive Web Design?

Ethan Marcotte first used the term Responsive Web Design in his article in A List Apart in May of 2010. Marcotte explains that designing for every screen size and device is not practical, there are simply too many devices we need to address. He provides a method so that our pages adapt to the screen size. In this article, I’ll discuss the unique challenges to UX Responsive Web Design poses, but first a little background on what Responsive Web Design is.

Static and fluid layouts

Static layouts use fixed sizes for the elements that make up a page, such as tables, columns, headers, fonts and so on. Many designers have preferred static layouts because they can control, down to the pixel level, exactly how everything will look. A benefit and downside of this static design method is that as the size of the display changes the design remains unchanged. A downside is that on large screens the content area can be very small leaving large dead margins to the right and left of the content or on a small display such as a smart phone, the design may be cut off or rendered so small it can’t be read.

Fluid layouts solve many of the issues presented by the various displays and orientations by using percentages for page elements. By using percentages elements stay in proportion, so as the display changes the design changes proportionally. The designer must give up the total control of a static design, but in exchange the design can look acceptable in most displays.

Both layouts have issues displaying pages correctly in mobile devices. Many organizations have had to develop an additional “mobile only” site to satisfy their mobile users. The problem of developing and managing two separate sites is that it’s time consuming, error prone and expensive. Here is where Responsive Web Design comes in.

Responsive Web Design

Responsive Web Design is an extension of fluid layouts with the addition of CSS3 media queries and scalable images. A media query enables the targeting of specific attributes which controls how and when page elements appear on the page. There are many techniques used in Responsive Web Design and many more are being developed.

What about Adaptive Layouts?

Adaptive Layouts use static or fluid layouts with media queries to change the design at specific widths or breakpoints. The breakpoints are set by the developer to adapt to specific devices, alternatively in Responsive Web Design, the site works well in any device. Marc Van Den Dobbelsteen, in his article in A List Apart in December of 2006, explains one technique used to achieve an Adaptive Layout. His example clearly shows that as the window is resized, the page layout changes.

Design Options

As Josh Hughes of the University of Missouri points out in his Responsive Web Design presentation, three basic changes are done to the layout as the screen size is reduced:

1. Stack the content one below the other or (by using JavaScript) rearrange it in some other way
2. Enable the content to be hidden or shown by the user
3. Totally hide the content

The designer’s challenge is to plan for multiple versions of a design that will retain the same quality user experience. Content that had the freedom to fill a 1024 pixel screen width must also work as well at a 320 pixel width.

Principles to keep in mind

Responsive Web Design poses challenges to the User Experience (UX) of a web site. The site must have a good UX at all screen sizes; it must gracefully adapt and retain the same inherent value to the user. In the remainder of this article, I’ll discuss one UX principle and apply it to some real life examples and in following articles I’ll look at additional principles and issues to look out for.

Orientation

The user needs to know where they are, where they came from and where they are going. Orientation is often conveyed with the navigation the product provides. A 1024 pixel display may have navigation links across the top or side, shrink it down to 320 pixels and the navigation system must change to fit on the screen. Several options have emerged to adapt the navigation, a dropdown menu can be used, the navigation links can be stacked, or they can be moved to the footer. The navigation can be moved off the screen entirely and become a fly out accessed by the user.

Above, Time.com full screen version. Notice the navigation, starting with “Newsfeed” runs across the top.

     

Above, you see the 320 pixel version. Navigation is now a dropdown that is opened by tapping “Sections.” Orientation is maintained, the user can still move through the information space but now in a way that is more appropriate for the narrower display area.

Here is an example that stacks the navigation.

Above is 3200tigres.wwf.fr, notice the navigation across the top, starting with “Accueil.”

Above, you see the 320-pixel version. Navigation is stacked, the user can see all the topics, but you can’t  see anything else on the site. The navigation monopolizes the view. As you navigate from topic to topic, no actual content is revealed. The only way to see any content is to scroll down below the navigation.

The users’ orientation can be lost going from one display size to the next. Users who are accustomed to accessing your site from a PC may not recognize it on a smartphone. Keep your visual design (branding) and information hierarchy consistent as it responds to changes in screen size.

Next time I’ll take a look at another Responsive Design and discuss a key UX issue to look out for. Have a responsive design issue you think I should cover? Please send a note.