Not too long ago, websites were tested solely on a desktop computer. Now we are often testing websites across many devices including desktop computers, laptops, tablets, and an array of mobile phones. As screen sizes proliferate, how does a website keep up? That is where Responsive Web Design comes in to play. Responsive design is flexible and adjusts to any screen size by using media queries to figure out the resolution of the device it is being accessed on. The content will always be the same, but may shrink when accessed from devices with smaller screens.

What’s the big deal?

Despite Jakob Nielsen’s argument, the evolution of smartphones and tablets has left many sites feeling outdated. Not only do these limited functionality, mobile-only sites now seem obsolete, they are also trapping users in an environment that makes completing a task online confusing or impossible.

From this perspective, RWD becomes a no-brainer; do you want to limit content and functionality or, provide a consistent brand experience regardless of the device used to access the site? Additionally, how do you keep up with the mobile device explosion? Resolutions and device types continue to change and broaden. Iterating designs for each device or screen resolution would either be an endless game of catch-up or next to impossible to do. An RWD approach currently offers the best solution to these problems. When executed properly, a responsive design will work seamlessly across all screen types and, as a result, make updating content a snap. However, as many design teams are less experienced with the new fluid grids and all-in-one approach, there are often some usability hurtles to overcome.

Below are some of the most common usability issues we have seen when testing Responsive Web Designs (RWD):

1. Many feel that design RWD design should start with the mobile experience, but this can lead to a less than satisfying desktop experience.

While RWD lends itself to a simplified design style that maximizes flexibility, the mobile-first focus can lead to a desktop experience that does not seem as robust in comparison to user expectations. Users can find the scaled-back design lacks the professional feeling they seek in order to trust a website or work effectively and efficiently with what they expect from the brands they know.

While many designers do not want to “hide” content on smaller screen resolutions, there are times when this approach makes the most sense, for example, to achieve a complete and professional desktop experience.

The Boston Globe website handles this issue well; the site displays additional menus and graphics on the desktop version, but hides them on the mobile version. This gives the best possible experience to the user regardless of how they access the site.

2. Device-specific conventions do not always make sense outside of that device.

The settings menu is a prominent example. While the convention of a gear icon is easily understood in mobile, it is not conventional within the desktop experience. Even some experienced mobile users are unable to find and expand a menu using this icon from the desktop. Unlike on the desktop, users can easily find the icon within the mobile experience; therefore, context matters. For example, an icon with three horizontal lines indicates it is the menu. However, while many users may intuitively identify and understand this icon on a mobile device, they may not necessarily be able to do the same on the comparable desktop version.

Starbucks is an example of a navigation menu done right. On the desktop version, a traditional horizontal navigation menu drops down and displays subcategories. This dropdown allows for quick navigation to lower level pages of interest. The menu moves behind an easily recognizable icon when the site is resized. Here, it becomes a streamlined version of the menu with only main level categories available.

This example from Sony is an even better example. On the mobile version, they use the word ‘Menu’ as the icon label making it even easier for users to find:

3. Usability guidelines apply regardless of how users enter the site.

While we have covered basic usability guidelines before in our blog, it is still important to apply them to new designs as well. In fact, it may be helpful to revisit them to ensure users can adjust seamlessly to the new versions of your site. Here are a few places where usability principles are not being applied in responsive designs:

Disney’s website is an example. Regardless of how you enter their website, it is easy to get lost once the menu is opened. On the desktop, it drops to cover the page whereas on the mobile, it moves to the left to accommodate the menu. Again, the menu gives no indication of one’s location on the site. Also note here that we lose the site logo and therefore the visibility of the brand.

Grey Goose is another example of a site that does not adapt well to mobile. Sure, this looks like an elegantly designed website; however, when viewed on mobile devices, it lacks the ability to navigate between the main stories. To boot, the page break makes it unclear that stories are available below the fold. Unfortunately, as a result, many users may miss the gorgeous photography beautifully displayed in the desktop version:

While Crayola also designed an excellent responsive site, they forgot to speak in their customers’ language. For example, labeling their ‘Main Navigation’, just that – is not a particularly customer-friendly way of talking to consumers:

Many RWD with clear call-to-action buttons often mistakenly place this vital part of the page below the fold on smaller resolution screens. For example, Burst Creative’s site has their ‘Get Started’ button front and center on the desktop layout; however, for those accessing the site via mobile, the call-to-action is at the bottom of the page.

Now, compare Burst Creative’s site to Lanyrd.com, where the call-to-action always remains above the fold. The World Wildlife Federation (WWF) site is another example where the key calls-to-action, “Donate” and “Adopt”, always remain visible at the top of the page. These two buttons stand out on both designs and are never collapsed or deprioritized on the page.

As shown in these RWD example websites, if you keep basic usability principles at the forefront of your mind when designing your site, it can offer an excellent and consistent experience for your users. Tell us how you feel about responsive design. Are you considering it for your site?