animation by Tiago Franco © 2012

No site will be complete without good responsive design which allows the content to adapt to the viewport, be that a computer, TV or mobile. But always bear in mind who you design for ~ your web geeks are not your typical user ;-)
As you will have read by now, three years ago, the wonderful Ethan Marcotte coined the term "responsive web design", or RWD,  via his article on the (just recently redesigned) A List Apart. It is still the perfect introduction to the topic :)

Ethan quotes John Allsopp who stated in his article "A Dao of Web Design" in 2000:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”

With this in mind - let's read Ethan's original article and study his beautiful example: ☛ Responsive Web Design ☛ view final demo

❧

Task
Download the sample text and work on completing the three given layouts. Start by simply adding suitable media queries and use the screengrabs to fine-tune ;)

↓ download source files

❧

planning for adaptive design

For mockups and design roughs - you will now need to change your approach. You can make a start by downloading these templates from Punchcut to serve as guide for typical sizes and dimensions. Bear in mind that you should not work towards specific devices but work towards creating flexible, adaptive design which will work on existing as well as future dimensions equally well.

Focus on the aspect ratio and orientation of the browser window rather than working with common screensizes. Your content should be marked up with a logical and effective hierarchy which will remain flexible on different devices. It is your content which should guide your adaptive design approach, not set screensizes.

❧

excellent slides

Andy Clarke:
Fashionably flexible responsive web design

slides from workshop, New Adventures, January 2013

Andy Hume & Paul Lloyd:
The web native designer

slides from talk at Talk Web Design, January 2012, Greenwich Uni

Simon Collison:
Adaptive Systems for Multiple Devices

slides from Hull Digital, November 2010

❧

useful links

• Opera Mobile Emulator
• Adobe Edge Inspect
• Aptus [mac]
• the responsive calculator, Stuart Robson
• Responsive Patterns,
  Brad Frost
• Responsive Resources,
  Brad Frost
• Multi-Device Layout Patterns, Luke Wroblewski
• adaptive images, Matt Wilcox
• Fit Text, Paravel

❧

online testing tools

• browser shots
• responsive.is
• responsinator
• responsive px
• Fold Tester
• responsive test

• WAVE accessibility tool
• check my colours
• DOM monster
• loads.in
• blame stella
• PageSpeed Online

And, of course, it goes without saying that you should keep your code semantic, minimal and valid ;)

❧

further reading

• Responsive Web Design by Ethan Marcotte, A List Apart
• Responsive web design by Ethan Marcotte, .net magazine
• A Dao of Web Design by John Allsopp
• Fluid Grids by Ethan Marcotte, A List Apart
• Hardboiled CSS3 Media Queries, Andy Clarke
• Media Queries - a collection of responsive web designs
• Design principles, Jeremy Keith

A series of interviews discussing responsive webdesign, by responsive.is

❧

responsive design

practise

Just to give you another sample to practise on - layout the page and setup the appropriate breakpoints, as shown in the screenshots.

↓ download source files
↓ download screenshots

practise makes perfect ✔

Please feel free to comment below if you have any questions :)