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
http://www.alistapart.com/articles/fluidgrids
http://unstoppablerobotninja.com/entry/fluid-images/

Responsive web design book
http://books.alistapart.com/products/responsive-web-design

Rethinking the mobile web – superb presentation
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
A responsive mind and responsive enhancement
http://adactio.com/journal/1696/

The following sites are examples of sites using the Responsive approach
8 Faces
http://8faces.com/

Bureau
http://bureau.tsailly.net/

Bryan James
http://www.bryanjamesdesign.co.uk/

Tee Gallery
http://teegallery.com/

Think Vitamin
http://thinkvitamin.com/

The Baker Street Enquirer
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html

Simon Collison
http://colly.com/

Garret Keizer
http://garretkeizer.com/

Hicksdesign
http://hicksdesign.co.uk/

Shelf tumblelog theme
http://demo.thethemefoundry.com/shelf/

CSS Tricks
http://css-tricks.com/

Robot or Not
http://robot-or-not.com/

UX London
http://2011.uxlondon.com/

Yiibu
http://www.yiibu.com/

Simplebits
http://simplebits.com/

Handcrafted Pixels
http://handcraftedpixels.co.uk/

Hardboiled Web Design
http://hardboiledwebdesign.com/

Cognition
http://cognition.happycog.com

Advertisements