Responsive Web Design

Responsive web design is an emerging technique which takes into consideration the diverse range of screen sizes now on the market, in particular the smaller than desktop screens of iPads, iPhones, tablets, Android mobile devices, smart phones, and who know what else is yet to hit the market.

The concept involves a number of techniques, but none more prominent than CSS3 media queries. This is where the screen size is detected in the CSS stylesheet and a set size of style rules are applied. The media queries usually cover a range of different sizes, for example 'between 768px and 959px' and 'between 480px and 767px', etc.

Responsive website example showing full size and mobile versionsAn example of a responsive website shown as both full size and mobile version

The above example is based on the Skeleton Grid which adapts the popular 960 grid into a responsive template. Given the prevalence of larger montiors, I see the need for extending this idea out to include a widescreen design. I have further adapted this idea into a concept called The Four States of Responsive Web Design which simplifies design into four main screen sizes: widescreen, standard, tablet and mobile. Read my article about this concept here.

Four States Responsive Grid: demo page screenshotClick the screenshot above to view the demo page

To see this effect using flexible, percentage based widths, take a look at my responsive web design demo page and be sure to resize your browser or view it on different sized screens to see what all the fuss is about. Also, the Boston Globe website is recognised as the first high-profile website to implement this technique, which will no doubt see many other mainstream websites follow in its footsteps.

Responsive demo page screenshotClick the screenshot above to view the demo page

You can also keep yourself busy with these reference links: