a look at design for the web & all it entails

· view menu ·

adaptive design

animation by Tiago Franco 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: rwd demo ☛ Responsive Web Design ☛ view final demo

task icon

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

aspect ratios 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

browser window

online testing tools

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

further reading

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

responsive design


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 :)


  1. prisca

    Irina ;)
    about the files here – these were just for you to practise with if you want to ;)

  2. Irina

    Prisca, on the next lesson we should to do adaptive “pen” page or practice from this page?