Responsive Web Design - the right prescription for my site?

What is it?

Recently, an approach to web development called Responsive Web Design (or RWD, coined by Ethan Marcotte) has been gaining favor. The primary goal of RWD is to enhance the usability and visual appeal of a web site for a given browser client by designing the layout to adapt to the available viewport. In short, it is liquid layout done right.

When you build a page or site using a RWD approach, you are allowing the page to change – not just in flow, but in layout – to best suit the client rendering it. This can be as small a change as going from a three- to two-column layout, or involve a complete redesign in the layout and elements rendered on it. Additionally, it lets content flow as the viewport is resized, so even in the same browser, you may see a considerable change in the way the site renders as you resize it.

Why do we need it?

Far more people are using mobile to view websites than ever before. Mary Meeker of Morgan Stanley estimates that within five years, the number of mobile clients on the web will outnumber the number of desktops. Add in the growing tablet computer market, and RWD starts to be a compelling case.

For a given situation, it may not be practical or desirable to build a dedicated mobile app for each of the many platforms, in addition to providing a web site, and RWD can help fill the gap here, as well as provide a malleable experience for desktop clients of varying screen sizes.

What is involved?

According to Ethan Marcotte in his book Responsive Web Design, there are three steps to RWD:

1. Build using a flexible, grid-based layout,
2. Implement flexible images and media, and
3. Use media queries.

The first two are pretty clear. As to the third:

A media query consists of a media type and zero or more expressions that check for the conditions of particular-ßmedia features. Among the media features that can be used in media queries are “width", “height", and “color". (http://www.w3.org/TR/css3-mediaqueries/)

This means you query the device to determine what features it supports, and then use that information to build the best experience possible. Dealing with those three things will go a long way towards making a site suitably responsive to the client platform, but you can take it further:

• Tabular data may need to be rendered differently as viewport width changes.
• Graphs may no longer be practical at small sizes, e.g., you may wish to substitute a short tabular data summary instead.
• Approach to site navigation may need to change, i.e., changing orientation from horizontal to vertical, or switching from buttons to a dropdown..
• You may wish to detect and respond to mobile features such as geolocation and device orientation.

Who is it for?

RWD is not for every situation, but I would argue that elements of the RWD process can help make any website better, because to do it properly you must answer questions like:

• What are the essential actions on this site?
• What are the most important text, graphic and data elements?
• What elements need to co-occur?

Pros

• Your site will be more optimized for the current device than a traditional web site. (I’d say this one counts for more than one bullet point…)
• There will be less duplication of effort than there would be building out separate dedicated sites or apps.
• RWD helps to future-proof your site against new devices.
• There can be some additional advantages such as:
• Reduced bandwidth costs.
• Increased conversion rate due to better UX.
• Traffic increase from providing a more usable site.

Cons

• Loading large resized images on small devices can be a bandwidth hog; this can be mitigated with media queries and JavaScript, but not always. (At a more subtle level, the jQuery Retina Display Plugin will let you use high-resolution images with devices that have a retina display.)
• RWD is not as optimal for any platform as a dedicated app would be.
• Not every browser supports media queries, but there are JavaScript libraries to help.
• Additional QA will be needed to ensure the layout is satisfactory for the target viewports.
• It takes more time to design and implement than non-responsive design.
• Extra mockups might need to be generated.
• The creative design must be flexible – elaborate 1024+ Photoshop designs may not lend themselves well to RWD. This is why it must be injected at the beginning of the design process.
• It may adversely affect advertising content, e.g., banners could get shrunk, or you may want to switch to ad words at certain viewport sizes..
• Specific to pharma, there may be medical/legal/regulatory issues to consider:
• The existing review process may not allow for more than one submission at one form factor.
• It may be difficult to adhere to requirements that certain text always appear in a certain place, that certain elements co-occur together, etc.

Where can I see some examples?

You’ll find links to lots of examples of Responsive Web Design over at designmodo.com. Go to any of them and play around by resizing the width of your browser to see RWD in action. The Boston Globe site by Ethan Marcotte is a good example of a content-heavy site making use of RWD. There are many subtle things to notice there, such as the way the search input box disappears below a certain width. Clicking the icon restores it, a nice compromise as space becomes tight.

What else should I know?

In addition to dealing with a fluid layout, images, and media queries, when doing RWD you may wish to go further and change elements such as data grids or navigation methods depending upon the device rendering your site. Smashing Magazine covers some of the interesting work going on here.

RWD is a creative solution to the myriad of client devices now being used to view websites, and is well worth a look. Whether you choose to implement it fully, partially, or not at all, the underlying concepts of flexibility and usability are worthy things to inject into any site design.