Ethan Marcotte from A List Apart wrote an excellent blog post in May of 2010 on the subject of Responsive Web Design. While Ethan’s observations on the state of mobile browsers were valid then, with groups like Nielson telling us smartphones account for half of new mobile handset sales they are becoming imperative now. But what is this new design world of responsive design? And when does it make sense to use it?
In its simplest definition responsive design means: presenting content in a way that best suits the display available to the viewer. A more technical description might be: utilizing CSS3, HTML5, JavaScript and modern browser features to display HTML content in the most suitable format for the viewport requesting the content. Or, finally, your site will look good across smartphones, tablets, small monitors and large displays using one code base. While this definition sounds somewhat similar to “rubber layout”, “liquid design” and other similarly named methodologies, responsive design differs from these in its attempt to not only resize layouts and content, but to adapt designs to vastly different behaviors, as well as display resolutions. Therefore technical details of each responsive design implementation will rely on a relatively modern browser and, just as importantly, a new thought process in producing the design.
Given that smaller screens tend to be the most challenging, responsive design usually starts with these form factors, while regarding what may happen further up the display “food chain”. Say, for example, we want to display a table of figures on our page. On a smaller viewport device a large table can be hard to use, we must scroll up and down and left and right, or zoom out in order to see the details. In this case a chart of some kind may serve us better. The middle ground of tablet displays might use a high level chart with drill down details, while the large display real estate of a desktop allows for all of these options.
For a more general case we can look at the modes of interaction between touch screen devices and desktop/laptops using touchpads and mice. A navigation bar containing a back button might well be a better control for a mobile phone, while a more standard header could be used for desktops. At this point some proverbial “line in the sand” needs to be drawn otherwise we’re once again heading down the path of two or three separate sites, our goal is to provide the same functionality and content across the range of display sizes that we encounter. A nice rule of thumb would be – in order to consider a page to be using responsive design we should never need to do a page refresh in order to see the results of a change in display size. This is where the design becomes “responsive”. Rather than just working out the size of the display port and serving up something that fits the page, responsive design uses CSS and some JavaScript and then changes the current content to match its new constraints.
So when does responsive design make sense? Basically whenever we have content that needs to be displayed across varying form factors, and we can design from the smallest screens up to the largest. This is especially true today as responsive design gives us a great degree of future proofing against new display resolutions as we target ranges of sizes rather than absolute pixels.
When doesn’t it make sense? If we have some content whose sole purpose is to service someone using a mobile handset, then considering larger form factors is probably redundant. An augmented reality app that uses the accelerometer, camera and location services of a smartphone is a bad candidate for responsive design. This use case simply doesn’t make sense in the desktop top experience.
Some more concrete examples can be seen at the goldilocks approach and the reponsive.is/foodsense example. You can get a great sense for responsive design in action by using a webkit-based browser such as Chrome, Firefox or Safari on a desktop/laptop machine. Start with the site at full screen width at height then grab the lower right hand corner of the browser window and start to shrink it. You’ll see the design change through the various phases of screen real estate as if you were looking at the sites on different devices.
Responsive design is a great culmination of modern web technologies, along with progressive design thinking. What’s your responsive design strategy?
