In 2010 it was clear the Internet had splintered with a plethora of devices, resolutions, platforms and delivery methods. At the Web Trends conference in October, Joe Stanhope from Forrester described the volatility of the environment as the Splinternet and used the simple table below to quickly show how things have changed.

Designers and developers have responded to this challenge by looking oustide of the industry at how architects have adapted living spaces to be responsive to changing needs. Ethan Marcotte wrote earlier in the year about taking this concept and using it for the web. Ethan titled his piece ‘Responsive Web Design‘.

Responsive web design is the solution to designers and developers who are now presented with a myriad of screen types and resolutions to design and develop for. As I read the article I felt the same feeling I had when I read Jeffrey Veen’s – “The Art and Science of Web Design”  Jeffrey opened my eyes back in Y2K to fluid and flexible layouts. Essentially Responsive web design takes this one stage further with the added ingredient of media queries that can adjust layouts to a variety of resolutions and re-size images accordingly.

Kayla Knight published an article on Smashing Mag. The article further explains the techniques that are being used to address the challenges presented by the Splinternet.

A common website cited by many designers is Simon Collison’s. To show how the website works I took a screen-shot of the desktop version of the site and a quick shot of the site on a small smartphone.

Site on smartphone

Site on the desktop

The site renders beautifully on these disparate devices and shows the real power of designing and developing using the Responsive approach.

How do you feel about Responsive web design? Is it the way forward or will the sticky plaster fall off?
Find below a handy round-up of links from the the articles mentioned:

David Cole listed the following as must-have resources in his recent blog:

Fluid grids and Fluid images

Responsive web design book

Rethinking the mobile web – superb presentation
A responsive mind and responsive enhancement

The following sites are examples of sites using the Responsive approach
8 Faces


Bryan James

Tee Gallery

Think Vitamin

The Baker Street Enquirer

Simon Collison

Garret Keizer


Shelf tumblelog theme

CSS Tricks

Robot or Not

UX London



Handcrafted Pixels

Hardboiled Web Design