Designing for mobile first?

I have mixed opinions about this, should you design for mobile first or desktop? I understand the pro’s for mobile first but it’s got it’s pitfalls too in my opinion. I would be interested in your views too so please leave your comments below.

So, if we decide we’re going straight in to the browser to start coding in the smallest @media then for one as designers we’re limiting our creativity right? Enter first pitfall – we have a smaller canvas, usually a single column, working the other way around eg. desktop first we’d be removing certain elements – in fact we are not removing them we are actually not starting with them, from a design perspective how confusing and limiting is that!

Designing to the smallest space has it’s sacrifices yes but, being so specific when you are working within the smallest @media means that we’ll be starting our main control there. This surely will mean a bloated set of css classes and id’s in the smallest @media right? Enter second pitfall – when starting with desktop its fairly easy to hide or display:none; on classes and id’s as you are moving down the scale however, going the other way means introducing more to your markup and in turn to your css, this means going back to your smaller @media and removing stuff in the same way. Now, because your main control is started in the smaller media and you’re going back to hide stuff you’re effectively bloating your css unnecessarily. Bearing in mind that you are also adding control in to your wider @media whilst all this is going on!

There you have it, I get the benefits of designing for mobile first but, I think it has it’s pro’s and con’s – I’m still leaning toward the designing for desktop first – convince me otherwise folks, what is your opinion? Please do leave your comments below…

9 thoughts on “Designing for mobile first?

  1. I think you first design for the desktop before designing for mobile. Is because not all have that smart phone to view your site. Again it will also help you-when you design for the desktop- to know how to go about it when you are about to design for the web.

  2. I’m not convinced by mobile-first strategy. I too see the benefits, but they extend to more than CSS. Thinking mobile first gets you to think about your content and structure: What is most important? What can I leave out of the mobile site to keep it lightweight?

    My view is that responsive design and mobile-first are, like any pattern or framework, tools that can be deployed when appropriate. Doing a fully responsive design can be time consuming and increase a project’s budget dramatically. Working mobile-first can be a real shift in thinking for a client and, while important, if a client has a deadline, there may not be time to convince them, educate them,and deliver.

    Plus, some applications/sites benefit more from these tools than others. Example: someone looking for a restaurant or local attraction is likely to be doing so from a mobile, so a lightweight, responsive site with quick access to opening times, location, menu/prices and so on is essential. If your PDF menu takes 2 minutes to download over 3G I’m going elsewhere. Someone looking for a web design agency is probably at a desktop researching web design agencies, so you can probably get away with a non-responsive, desktop-first site (unless, of course, you’re showing off your skills).

    I like to think that I work responsively: to my clients’ needs (which includes budget’ timescale and value for money) and to their visitors’ needs. Not following the latest design trend just because it’s the thing to do right now.

    I’m still thinking my way through this stuff, but maybe that adds to the discussion a bit?


  3. Another couple of things:

    1) Really interesting read on .net mag about this very topic:
    2) I really like Andy Clarke’s approach of designing atoms and elements (see ch 11 of Smashing Book 3 if you have it): rather than signing off a fixed-layout design, get sign-off on a set of ‘elements’ that can be used and re-used within a whole variety of different layouts. I guess you would combine this kind of aesthetic design approach with some wire-framing to achieve the completed product. But again, this idea would need the client on-board, which may be tricky to achieve.

    Hope you don’t mind a second comment.


  4. Good post; so I thought I’d share my views!

    I’ve done both and come at it from a coding background so I’ve a slightly different slant, I suppose. Having done it both ways (working from mobile first and reverse engineering) I’d say I support mobile first.

    I think the key is maintainability; when you make a change in the future chances are that change will affect all breakpoints (in my experience, anyway). If you work from mobile upwards, that’s usually one straightforward change. Otherwise you’re in at least three different stylesheets, making changes and checking nothings been overridden etc.

    I think I understand your basic point about the limitations though; most designers I work with still do the desktop version first and design back down. Perhaps mobile first has its ideology rooted in development rather than design.


  5. Neither, you should design the content first 🙂

    Once you’ve got the content you can determine how best to deliver it in different situations. So really you’re not designing for mobile and desktop but designing a content delivery system.

    This is where Andy Clarke’s approach, alluded to in an earlier comment, comes up trumps since you’re working more at developing a style guide rather than a “page layout”. This means your content can be delivered in the optimum way regardless of whether the device used to view it is mobile or sat on a desk.

  6. I’d say that decision has to be made in the context of your (or the clients) expected use of the site, and the project plan. (And also, unless your customer has a host of iphones / droids, what they can view it in to test / retweak it.)

    So personally I’d say go browser first, then mobile as thats where the bulk of your audience still is.

    From a development point of view however things are much more complex as unless you are uisng something like phonegap, you will find yourself needing to write multiple versions of your application. Though I would still argue for Browser first, as thats usually the simplest version, and it can be used to drive out all the quirks in the Data and Business layers, which the phone app will come to rely on.

  7. In the simplest of terms it is of course possible to design and code so the site will look ‘perfect’ on every single target platform. But of course to bullet proof it requires an enormous amount of time and effort.

    As most sites are there to service the needs of business, often its the bottom line which is important. That is to say if only one person is using ‘x’ device is it worth spending ‘x’ to give that user a flawless experience. And it goes beyond this itself when you also consider users with visual or physical disability….

    Responsive design is evolving and is becoming more flexible for more situations, but unless business drives this need more often than not as long as the site works well for the majority of its users its considered fine. So taking the above into account, the question then becomes, is my target audience a mobile majority. If the site uses ‘good’ markup and is ‘generally’ mobile friendly in today’s market I think that gives a good balance between design, usability and functionality. Going forward in the same way desktop browsers are converging on css3 (and beyond), there will be some technologies which will solve most of these issues…

    Beyond coding and ui considerations, perhaps we should be looking at what mobile users want for sites. With the desktop experiences with acres of real estate, having a site rich in content and visual works.

    with smaller formats condensed information works a lot better.

    Is it the role of a designer to create solutions to solve all problems, or only those we are being asked to resolve? This is probably the most important consideration of all and once answered the rest is easy.

  8. I think that ultimately judgements need to be made based upon client priorities with relation to the scope of their site and its objective reach.

    This is a question I’ve come across many times, and the opinion always seems to go along these lines:

    1: In an ideal situation you should always design for both separately. Detecting user agents and delivering appropriate content accordingly. The obvious issue with this is that this is a time a time consuming process and often client budgets don’t stretch to accommodate this approach because they haven’t taken it into consideration.

    2: The all round solution is the use of adaptive web design addressed here. Whether this is geared to mobile or desktop first is down to personal preference, but this decision should be based on client objectives. Adaptive designs are restrictive by their very nature and I stick to the addage that ‘Anything that tries to do everything, doesn’t do anything very well’. It is the best all round solution we’ve got at the moment though, and adopting the latest CSS frameworks like LESS and SASS can go a long way to taking the weight out of CSS, and streamlining where standard CSS starts to get a bit hefty.

Comments are closed.