A couple of weeks ago, a new project has developed at my organization – to remodel a website for our sister organization. One of the ideas that came up was to remodel this using Responsive Web Design style or techniques. Although I’ve heard of the term, I didn’t actually know much about what Responsive Web Design was, so I did a little research and thought I would document that here. As an introduction to Responsive Web Design (or RWD), Wikipedia provides a decent definition.
RWD recognizes that we are no longer viewing websites on a ‘normal’ computer desktop or laptop screen, but may be viewing these web pages on tablets, notebooks, smartphones, or even 60″ TVs. In the past, websites were designed for specific viewing sizes. As more and more people are accessing websites on a wider variety of electronics with varying screen sizes, it is necessary to be ‘responsive’ or proactive so that the viewing experience is optimized. The goal is that navigation and easy viewing is accomplished with a minimum of scrolling and resizing. The main way to accomplish this is by using CSS3 media queries (based on the characteristics of the device accessing the website, usually the width of the browser), which is an extension of the @media rule. Another key piece is using a fluid grid, where page elements are sized and resized in percentages.
Ethan Marcotte first used the term ‘Responsive Web Design’ in a May 2010 article in the magazine, A List Apart. He also described the theory and practice of responsive web design in his 2011 book, Responsive Web Design. Giving further credence to this web design style, RWD was listed as #2 in Top Web Design Trends for 2012 by .net magazine with progressive enhancement coming in at the #1 spot.