Responsive Web Design - What is it?

It wasn't long ago that the new web industry buzzword began floating around, Responsive Design. The idea as you may gather is to respond to something. But, actually it needs a little more explanation. As Mark Boulton points out in these two tweets.

Please, please can we please stop calling mobile web sites – designed for particular devices –'responsive web design'. They're not.— Mark Boulton (@markboulton) March 30, 2012

Mobile sites that are optimised for devices (native behaviours, tech etc) is something else. 'RWD' is responsive layouts. We need a new name— Mark Boulton (@markboulton) March 30, 2012

Mark Boulton is a well respected web designer, author and speaker.

Primarily the conversation revolves around what Responsive Web Design (RWD) is and is not. But before we examine that let me explain the concept of RWD as simply as possible.

What is Responsive Web Design?

If you are old enough to remember the "browser wars" between Internet Explorer and Netscape you will know about styling issues across the browsers led to "best viewed in" ... indeed some websites apparently still carry such messages. Eventually the web browsers hit upon standards, though not all the same standards, and has steadily progressed to todays modern browsers which are pretty decent. However, there are now mobile browsers, tablet devices, CRT monitors, widescreen monitors, projectors - all running different browsers and rendering engines, but they don't all show the same code in the same way and they don't all have the same functionality.

It is at this point that Responsive Web Design comes in to play. Responsive Web Design is not about making your website look 100% the same across devices, it's not about making your website work the same across browsers and it's not about creating a new website for each device.

Responsive web design is, however, a particular way of coding such that the website works well (if not perfectly) across all devices and browsers.

It will never be perfect and it will never work in all browsers, this is a natural limitation of the web and the modern world.

Explaining Responsive Web Design

RWD is important to the web because it means without needing a complete recoding for each device and browser, without needing a mobile app or a native interface the web can continue to work openly and freely.

RWD uses what are known as "media queries" to check things such as device width. From this information the site will change style accordingly. This does not mean the site will function differently but change appearance. For example SEOAndy is responsive, if you shrink your browser tab it will begin to change, view it on your mobile and your tablet device and its different again. The essence of the site remains but the style changes a little.

Such changes are usually things such as content area width, font-face usage, font size, image size, using a grid layout etc.

Another thing media queries can do, which is NOT, responsive web design (technically, though in reality for many is) is functionality and device checking. This means functions and styling can be changed based on the device and browser viewing it. For example choosing options on forms can be styled differently on each device and browser, but this is not RWD, this is simply device optimisation.

Device Optimisation means that the site would work without such changes, but looks nicer with those changes made.

Reading More About RWD

There is plenty around the web talking about this new web trend that is Responsive Web Design. A few great sources are: (@beep) Ethan Marcotte's Responsive Web Design (a-book apart), a marketing land article, also a BBC Internet Blog article, also a @boagworld interview with Ethan Marcotte, an interview on the web ahead with Mark Boulton oh and don't forget google is your friend - go on search "responsive web design".