What is responsive web design?

 
Graphic that shows 4 different sized devices

The aim is fully responsive websites that subtly change to accommodate each device that the website is being viewed through.

Some of the RWD techniques have been around for years and were called liquid layouts back then.

Responsive Web Design (RWD) is a technique or method to design websites so that the website will "respond" to different sizes of device windows (called "viewports").

The aim is so that with any device, small or large, mouse or touch, the website visitor or user can easily use the website with the same functionality as if it were being viewed on a traditional desktop computer.
It can be read and links can be clicked on without having to constantly zoom in and out by using touch gestures or TV handsets.

Basically the RWD method uses media queries to recognise what size viewport the user is looking at the website through, and then to resize and/or move elements of the website around to suit the big, medium or small viewports.

To make RWD work there are some new technical elements to understand such as media queries and the introduction of new web standards and specifications called HTML5 and CSS3 (thank you W3C for these two, they are what the web design world needed!)

The aim of responsive web design is that the website can be viewed and is fully functional at all possible viewport sizes.

So whether the website is being viewed through a mobile phone without a proper browser (small viewport) or a TV (large viewport) the website should be able to be navigated via mouse clicks or finger taps as normal and all information on the website is able to be accessed.

The debate about whether this is a good idea or not is still going on although Google has now made it's preference known and has recommended responsive web design and given instructions for best implementation.

Some people prefer separate websites made specially for mobile phones called mobile websites.
Others think that a tablet can navigate most normal websites as they are, so why bother with responsive web design which involves quite a bit more work?

I agree with the pro RWD people who say that we should be presenting only one website rather than tailoring sites for mobiles or TVs etc. This makes sense for gathering analytics data which is more easily understood when only one website is involved, but it is also much less work to only maintain one website rather than maintaining more than 1 website - I can vouch for that because I maintain quite a few separate mobile websites for my customers and having to update 2 websites is ridiculous if you can work out a way around it...yes RWD is the fix for that problem.

I like responsive web design because RWD websites are easier to read on tablets and mobiles so you don't have to pinch in and out all the time BUT I also realise that the RWD concept could homogenize web design which I feel started to happen when the people who are trying to standardise web languages, the W3C, regressed CSS from a candidate recommendation back down to a working draft in 2005.
CSS was reworked and from then on most new websites used CSS and web designs started to look similiar to each other.

I would say from the looks of the "founder" generation of RWD websites that RWD is definitely not creating diversity in design but rather the opposite.

That is because it is quite a lot of work to create a RWD template that you are happy with and can work with, even if you start with the various RWD structures that other people have worked out such as 1140 by Andy Taylor of Melbourne, which I use.
But you can't easily create a new RWD template for every website that you create which was possible (and easy) with normal HTML websites prior to RWD.

Here is a website that shows quite neatly some of the better RWD websites around, note their clever domain name - mediaqueri.es .

Otherwise here are some other people who are currently writing the important work to do with RWD.
First the guy who coined the name "responsive web design" - Ethan Marcotte and the original article he wrote in 2010.
Also here is Ben Frains website, I have read his book "Responsive Web Design using HTML5 and CSS3" (which I bought on Google Play and read on my tablets as well as my computer. I use some of Mr. Frain's techniques and I recommend his book.

Also see Smashing Magazine's coverage of the issues and opinions on RWD as they are doing a good job of spreading the word. Here is an article about RWD tools and tricks from Smashing.

Use the form below to submit your website for a free SEO, web design or Google AdWords assessment.

 * Name:

 * Email

  Domain:

  Enquiry:

Author: David Thatcher

TopGo to Top of page Hard Web Making Websites Work logo

Hard Web is a Google Partner click to see Hard Web listing on Google Partner search

In 2011 Hard Web qualified to become a Google Partner.
To enquire about AdWords, Web Design or SEO
Call Office: (07) 5526 2939
or Mobile: 0401 352 269

or email
Use the form below to submit your website for a free SEO, web design or Google AdWords assessment.

 * Name:

 * Email

  Domain:

  Enquiry:

Top 9 free Google business products
(links open in new window)
Google Search (heard of it?)
Google Analytics (website stats)
Google Places (free business listing)
Webmaster Tools (excellent for SEO)
Google+ business pages (get on it now)
Google Docs (cloud solution)
Google calendar (I use it everyday)
Chrome (browser)
Gmail (webmail)
Call 07 5526 2939 or 0401 352 269