Klick Health

Responsive Web Design – the right prescription for my site?

Chief Technical Strategist

in
Read More

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:

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:

Pros

Cons

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.

 

More About the Author

D'Arcy Rittich

D'Arcy focuses on the big picture of Klick Health's approach to technology, working on the technical relationships with our clients, particularly as a liaison to IT and business technology groups, as well as technical application development and technical sales. He is also the lead architect for Genome, our core management system.

More from this author

Go from news to action. Klick Wire

Weekly Digital Health Newsletter

Thank you! You're now signed up to get the Klick Wire every week - news from the world of digital health marketing.

Klick Health will NEVER spam you. Read our privacy policy