greenideas

Respon­sive web design is unde­ni­ably the new hot­ness in CSS. If you’re not famil­iar with the tech­nique, go and read Ethan Marcotte’s amaz­ing arti­cle over on A List Apart. What Mar­cotte has cre­ated is a way to cre­ate one design that adapts to dif­fer­ent res­o­lu­tions using media queries.

There are count­less advan­tages to build­ing sites in this way, but arguably the most com­pelling rea­son is the abil­ity to share one lay­out across both desk­top and mobile browsers. How­ever, if you’re new to mobile devel­op­ment there are a cou­ple of tricks you’ll need to use in order to make this work. It wasn’t really in the scope of Marcotte’s arti­cle to cover the mobile-specific aspects of his tech­nique, so I fig­ured a quick post was in order to fill in the gaps.

The exam­ple site we’ll be look­ing at is a hypo­thet­i­cal site for food­ies called Fork’d. When you look at it in a nor­mal sized desk­top browser, It’s got a ver­ti­cal nav­i­ga­tion list and three columns of con­tent. If you resize the win­dow to be a fair bit nar­rower, you’ll see that the floats dis­ap­pear, and the nav­i­ga­tion as well as all of the con­tent is lined up in a sin­gle col­umn. This is the lay­out we want our mobile users to see. How­ever, what they’re actu­ally going to see is this:

For­tu­nately, we just need a tiny sprin­kling of pixie dust to make this work the way we expect it to. We’ll just add this meta tag to our page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(For way more info on view­ports, check out Apple’s doc­u­men­ta­tion on the sub­ject.)

Once we put that in place, the Fork’d site ren­ders like this:

Per­fect! We now have one lay­out that works across dif­fer­ent desk­top screen res­o­lu­tions as well as (high-end) mobile devices, and the only extra trick we had to employ was to add a sin­gle meta tag.