There are countless advantages to building sites in this way, but arguably the most compelling reason is the ability to share one layout across both desktop and mobile browsers. However, if you’re new to mobile development there are a couple of tricks you’ll need to use in order to make this work. It wasn’t really in the scope of Marcotte’s article to cover the mobile-specific aspects of his technique, so I figured a quick post was in order to fill in the gaps.

The example site we’ll be looking at is a hypothetical site for foodies called Fork’d. When you look at it in a normal sized desktop browser, It’s got a vertical navigation list and three columns of content. If you resize the window to be a fair bit narrower, you’ll see that the floats disappear, and the navigation as well as all of the content is lined up in a single column. This is the layout we want our mobile users to see. However, what they’re actually going to see is this:

Fortunately, we just need a tiny sprinkling 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 viewports, check out Apple’s documentation on the subject.)

Once we put that in place, the Fork’d site renders like this:

Perfect! We now have one layout that works across different desktop screen resolutions as well as (high-end) mobile devices, and the only extra trick we had to employ was to add a single meta tag.

The CSS is here, and be sure to check out the example buttons.

The one thing I’m not crazy about when you use these styles on an actual device is that the normal :active state doesn’t get triggered, so I kind of had to half-ass it with a :hover so you’d see the “active” style as the button sheet eases out (if you’ve wired the transitions together).

Enjoy, and please let me know if you find them useful.