eyelearn

a look at design for the web & all it entails

· view menu ·

planning for adaptive design

animation by Tiago Franco
animation by Tiago Franco © 2012

We can no longer design any site without considering a mobile strategy. A good responsive design will allow the content to adapt to the viewport, be that a computer, TV or mobile. But always bear in mind who you design for ~ our web geek crowd is not our typical user group ;-)

It is now over three years ago that the wonderful Ethan Marcotte coined the term “responsive web design“, or RWD,  via his article on A List Apart. Though there have been great developments with more tools and debates in different approaches – this article is still the perfect introduction to the topic :)

Let’s read Ethan’s original article and study his beautiful example:

rwd demo
☛ Responsive Web Design ☛ view final demo

DL barebones files for exercise

DL 2 files for exercise

Brad Frost

Brad Frost
photo © Anna Lee-Fields, 2013, for Creative Mornings Pittsburgh

While there are many clever web designers and developers who discuss mobile in depth – Brad Frost is someone whose writing, speaking and work you should definitely follow. Brad has been collecting and discussing a lot of responsive design aspects and his blog posts always offer food for thought.

Brad Frost – For a Future Friendly Web – Mobile Mobile Conf 2013 from MMConf on Vimeo.

As the digital landscape continues to become more complex, it’s essential for us to start thinking beyond the desktop and embrace the unpredictability of the future. Mobile is forcing us to rethink the content we create and the context in which people interact with our products and services. This session will cover how to change our thinking and start acting differently in order to create more future-friendly experiences.

more excellent slides

Bruce Lawson:
RWD: the specs behind the sex

UX Sofia, 7 June 2012

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

adaptive layout

mini project

fountain pen

Time to get stuck in and test your understanding of a RWD approach, mobile first, of course :)
This is one typical interview/application task to test your skills. Given the mockups of a page design, including different layouts according to screen size – produce the CSS to present the content accordingly, working your way up from the smallest to the largest layout.

↓ download source files (includes mockups)

Quick tip: Focus on all details of the smallest layout first, and ensure a complete design before moving onto the rest. Going back and forth between the different views can cost a lot of time…

to do list

  1. complete the CSS to reflect all layouts given
  2. upload your final result and leave your link in the comments below
  3. submit your final project folder as ZIP via email to: prisca [AT] eyedea.eu
    subject title: “RWD pen – [your name]

As always, feel free to comment below if you have any questions :)

6 Comments

  1. Marthe
    5
    03/12/2014

    Hi!

    Here is mine:
    http://mvittor.users41.interdns.co.uk/fountain_pen/

  2. Sergi
    3
    03/12/2014

    Here’s mine:
    http://stantinya.users41.interdns.co.uk/coursework/artweb/fountain-pen/index.html

    See you tomorrow!

  3. Wes
    2
    02/12/2014

    Hi folks

    Here is my rwd attempt:

    http://wesleymehaffy.co.uk/applied-art/fountain-pen-rwd/index.html

    Toodle pips

    Wes

  4. su
    1
    02/12/2014

    Hi Prisca et al

    My go at RWD for the fountain pen page is on my site at http://swesterman.users40.interdns.co.uk/art/rwdexercise/index.html

    I have also mailed a zip file to you directly Prisca.

    See you all on Thursday. Su