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?
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.
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?