March – Week 3

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
– Jeffrey Veen

This week take a look at this page. Woah, link overload, (I like to avoid just dumping links on you as I guess your reaction might be like mine; too much to take in) well I’ve picked out some for you to read.

Here, here and here. I wouldn’t expect you to read all of them, but once you’ve got a grip of what responsive design is, then move on.

Also subscribe to hack design, don’t wait, read week 3 now. What I got from this at the time was that, we as web designers, need to start from a mobile first perspective (or at least a mobile third – desktop and tablet respectively first and second approach – as opposed to the “I can’t deal with this” bury your head in the sand approach). Get used to seeing media queries, for example:

@media only screen and (max-device-width: 480px) {
/* define mobile specific styles here */

You might recall we saw them in project 2 on (GA)dash, well here they are again. Now, some people might prefer, say to make a dedicated app for small screens (like the BBC news site we saw last time) others like to have two sites. Still, as a beginner I’ve been happiest using CSS3 media queries, I’d recommend them using them from now on. How will you take this new information forward in a practical fashion? Well this week I want you to digest what you’ve read and keep working on your website(s).

(Note: Read this post. Don’t worry about the question being asked, only I want you to follow the instructions. As you can see your able to emulate modern phones and tablets in Chrome or Firefox, this is obviously an important tool for you to use when testing. Try emulating some of your websites, don’t panic if they collapse in agony, we’ll rescue them later.)

1. Lots of reading (sift through the links above) – Get familiar with responsive design.

Leave a Reply