Frankly between the two of us, while I do see the merits in designing a mobile website first — in terms of a website’s information architecture as well as the aesthetic appeal, especially for the sake of its usability and appearance on a small screen — I’m not sold yet on whether a mobile site has to be designed first. That said, it does need to be designed at the same time. Semantics, eh? I’m hilarious, I know. But thanks for thinking it.
So what’s this “mobile first with a twist” schtick? Basically it’s a bunch of borrowed idea’s from Ethan Marcotte’s amazing little book, Responsive Web Design, Luke Wroblewski’s “equally” little book, Mobile First, (by the way, me calling each author’s book “little” isn’t a slight in the least, both book’s strength lie in their size, and that’s the point) and something I’m sure Harry Roberts wrote a little while ago but I can’t relocate now. About designing for less capable browsers first then adding on top of that base for more capable browsers — or specifically how such an approach plays with Internet Explorer 8 and below.
Anyway the “mobile first with a twist” approach is quite simply a matter of designing a website for mobile, meaning for small screens (not just visually but functionally too), then tweak it larger, with the least amount of effort and the most basic — yet responsive — CSS possible. This as your starting point. A base from which to build. The thinking is this is what a visitor will see and use who is using a less capable web browser.
And following the construction of said base you go from there. Meaning you layer on top of it. Essentially using both Progressive Enhancement (forgetting of course I’m speaking in a “lingo,” being browser capabilities, that doesn’t jive with Progressive Enhancement) and media queries, more specifically.
First, basically all media queries are (and read “Meet the Media Query” blurb in the article Responsive Web Design Ethan Marcotte wrote for A list Apart a ways back for a much better explanation), or at least how I’m currently using them for the sake of a current project (for which this article is based), is a way to style a web page’s presentation based on the size of a users browser window. Which sounds way more complicated than it actually is. Let me try and explain.
Ideally, if you visit a website on a mobile device — on a small screen in other word, 320 pixels to 480 pixels, say — the webpage is displayed with those dimensions taken into account. Meaning designed within those dimensions. But if you use a website on a “desktop” computer, where the browser can exceed 1200 pixels, a developer, through the use of these “queries,” has the option to make use of the extra space. It’s remarkably ingenious actually. Yet remarkably simple.
However, versions of Internet Explorer 8 and below and versions of older “modern” browsers can’t use media queries. They don’t possess that functionality. (And just so we’re clear, I’m not singling out Microsoft for decisions they’ve made with their web browser.) Nor am I suggesting users using less capable browsers/ devices deserve a less than usable experience with a website. Rather what I am saying is make sure any user isn’t shut out of an experience purely based on a device or software they happen to be using. Don’t cut anyone out. For any reason.
Plus you always have the option of providing IE specific styles for specific versions of IE, after the fact. It’s really not that big a deal. Or really that difficult to make happen. Just make sure you test your designs — a bit of advice I’d be well suited to follow, but don’t always do, myself.
There isn’t really too much more involved or necessarily original (from me anyway) toward this technique. As I briefly alluded to above, I’m currently “walking” myself through this approach. So I’m still not entirely sure how it will be received past the image I have in my head. If it flies, I’ll be sure to update this post with the details. If it doesn’t, enough said. Time will tell…
Addendum
It’s now the dying days of March and I’m still working on the project I wrote about above. And what can I say about my “mobile first with a twist” approach nearly a full month and a half after publishing this post? Well “Mobile First” is truly the way to approach web design. I urge anyone to check it out who is starting a new project who hasn’t already done so.
However, I’m not so sure people should make any effort on my “twist” addition. The only reason I can seriously envision needing to put a “twist” on a “Mobile First” approach is IE 8 and below. And if a mobile version just isn’t meeting your IE needs, as I stated above, “you always have the option of providing IE specific styles for specific versions of IE [as in 8 and lower], after the fact. It’s really not that big a deal [I meant hard to implement, for the record].” Stick with that…