17 / 07 / 12

"For years, the Internet has been about web sites and browser-based experiences, and the systems that drove those sites generally matched those experiences. But now, the portable world is upon us and it is formidable."

Can I get a quick explanation?

In a nutshell, responsive web design means to create a website that can adapt to different sizes of screens.

Technically, there is a bit more to it than that; it doesn't refer to the size of screen, it alters depending on the resolution of the screen which is currently the best indicator as to what size of device is being used to view the site. It helps to eliminate the need to have a specific mobile site, avoiding having users scroll unnecessarily and generally help users on smaller devices use the website more intuitively.

But how does it do that?

All websites are (currently) built roughly in the same way - there is an HTML file for the content of the site, the CSS file is layered on top and helps to arrange things, add colours, alter spacing, adjusting typography and animations amongst other things. The CSS file has the ability to only load certain elements depending on the resolution available.

In practical terms this may mean that on screens of greater than 960px horizontally the published date of an article is inline with the article title, whilst on smaller screens it may push the article further down and rest on top.

If you squish this window in the layout should begin to change.

There are still a couple of issues cropping up by using the responsive method, images will scale down in dimension but not in file size - this causes an issue of smaller screens (which tend to be mobile and suffer from a slower internet connection as result) still have to download gloriously hi-res images. The development time is also growing as there are more and more devices to test on and make sure the site is useable on the majority of them.

Alright, but why should we be using it?

A number of people have written about why responsive design approach is a good way to go; Google recommends it so that they can "discover your content more efficiently" thus helping your search engine results, NPR have embraced "one simple philosophy: COPE (Create Once, Publish Everywhere)" to help push their content to the various formats and Ethan Marcotte has this to say on the matter: "Responsive web design offers us a way forward, finally allowing us to 'design for the ebb and flow of things.'"

The main reason, at least in my opinion, is that it forces you to really think about what information is primary and which comes secondary. It helps consolidate the idea that the real reason you're building a new website is to make it as useful and accessible as possible for your users.

web design