Dear Web Developer,

We need to discuss “Mobile First”.

The term is one of our better, more descriptive, responsive web design concepts. The idea is simple: we start with a basic version of our website — normally a single-column layout. It will work almost everywhere regardless of the device, browser, capabilities, age or screen resolution. It doesn’t matter whether a visitor accesses from Chrome 35 on a MacBook, IE6 on a Windows 98 PC or Opera Mobile on an aging Nokia — they’ll see content.

Once our basic site is complete, we use CSS media queries and perhaps a little JavaScript object detection to improve the user experience on devices that support modern features and larger screens. For example, we may add drop-down menus, multiple columns, higher-resolution images and more sophisticated layouts.

The benefits?…

  1. A user with an old browser that doesn’t support media queries will still see the basic site. That wouldn’t be the case if we started with our ‘desktop’ layout and tried to retro-fit a small-screen design.
  2. It’s a logical way to work. We’re progressively enhancing a layout when possible rather than hoping it will degrade gracefully on lesser devices or attempting to remove features that won’t function correctly.
  3. It keeps us focused on what’s important — the content. A linearized view must prioritize text and features. There can be no multi-column, floating element, or modal dialog compromises; important content must appear first.

We fully understand the context and meaning of “Mobile First”. Unfortunately, it seems our clients and colleagues do not. Even those with considerable IT knowledge appear to have presumptions such as:

  • a separate mobile site will be developed before the desktop version
  • the mobile design will take a higher precedence, or
  • we’re prioritizing devices with a relatively small market compared to traditional desktop PCs.

None of this is true, but they are logical conclusions when you don’t appreciate what “Mobile First” really means. Perhaps more appropriate terms are:

  • mobile-compatible
  • mobile aware
  • progressive layout
  • device agnostic design, or
  • “works anywhere”.

I’ve heard some developers refer to “content first”, although I’m not convinced it accurately describes a technical layout approach.

No matter — it’s probably too late to change the term now. You need to communicate with your fellow developers and “Mobile First” is fine if everyone is clear about the meaning.

That said, I recommend you avoid using the term during client discussions unless you’re absolutely certain they understand the context. Few will. Clients are happy when you deliver a great project on time and on budget; they’re less concerned about clever buzzwords and development methodologies. Perhaps then we can avoid frequent, lengthy explanations and actually implement what we’ve promised!

All the best,
Craig

PS. Have you experienced “Mobile First” confusion? Comments welcome!

Tags: device agnostic, mobile first, responsive web design
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

  • ElDerecho

    What I believe you are describing is called ‘responsive design’.

    ‘Mobile first’ does indeed mean exactly that – prioritizing a site’s gui to mobile devices, and then scaling up to desktop displays.

    • LouisLazaris

      Mobile first is one way to do responsive design, not the only way. You can design a desktop site and then add media queries that change the layout on smaller screens. That’s not mobile first, but it’s responsive.

      But none of that matters, because it has nothing to do with Craig’s main point: That the term ‘mobile first’ can be confusing to clients who might make a lot of wrong assumptions.

      • Kelderic

        That’s how I’ve always done it, in fact. Designed a site for my 1920px monitor, then for a 1280px, then 1000px, then 600, and finally 400, with a viewport fix for 400. The idea of designing upwards instead of down is something I’ve only recently discovered, and am still exploring.

        To be honest, I’m not really sure what he benefits are to designing mobile first rather than desktop first. You have to design everything, and I haven’t really been able to see much in the way of code reduction. In fact I’ve seen some code increased using the mobile first method. Example: When hiding and showing a sidebar. Mobile-second requires only one line of code for “display”, because “display:block” is assumed by default. I only have to hide it. Mobile-first though, I have to hide it by default, and then manually show it with another line of code.

        • callmenick1

          Mobile first shrinks your CSS considerably. For example, you specify `float: left` in your desktop CSS, and then have to override with `float: none` in your mobile query. With mobile first, you only have to declare the `float` one time, at the desktop breakpoint. This is a very small example of how mobile-first can cut your CSS substantially.

          • Kelderic

            I hadn’t considered that. While I normally hide sidebars, I do un-float everything that is still visible, so it could save quite a bit.

        • JoaoReynolds

          “Mobile First” isn’t just about CSS development. It’s a strategy of design from beginning to end – from wireframing and content design to final development. Suppose you sit down with Photoshop to design your site, starting with the mobile layout has tremendous advantages to UI and simplicity. It forces you to think about what’s REALLY important to the user, design for that, and then embellish from there.

  • http://gregjordandesign.com/blog Greg Jordan

    Mobile is so important that I’ve used the term “Mobile First” a number of times. I think we’ve passed the idea of testing mobile, or developing a mobile strategy. Rather, mobile should be interwoven with the overall marketing mix. Mobile is part of it all.

    • Craig Buckler

      Agreed, but “Mobile First” can give the impression you’re primarily interested in small-screen devices at the expense of desktops. That’s not true but, if you need to explain the meaning to clients, should you be using that term during discussions?

  • rsanchez1

    So is “considered confusing” supposed to be the less pretentious version of “considered harmful” now?

    • Craig Buckler

      No. “Mobile First” is not harmful — it’s (currently) the way to handle RWD. But the term isn’t understood, hence the “confusing”.

  • Emil Hjort

    My take on mobile first is that phones are the “weakest” conduit, in the usual range og devices, for your content.Therefore we design up from a solid mobile fallback foundation, so we are sure that the hardest place to deliver is strongly implemented. That doesnt mean one puts mobile “first” in the experience though, only code design wise.

    • Craig Buckler

      That’s exactly my point, but do your clients understand the subtleties?

  • http://www.karlbrownvoiceover.com/ Karl Brown

    I’ve been trying to find a strong definition of “mobile first” for the same reasons you’ve mentioned, Craig – especially as IT seem to think that as we have a separate mobile site why should we be designing for it first.

    A term I’ve started using is “integrated design”, which I’ve gained some traction with as it suggests the design is integrated rather than device by device. Your suggestion of device agnostic design (hereafter, DAD) looks like a really strong candidate as well. Anything that gets the word “first” out will be a truer reflection of what the process involves.

    A great article. Thanks, Craig.

    • Craig Buckler

      Thanks Karl. The only problem “device agnostic design” is that it could be applied to “Mobile Last” methods. As far as clients are concerned, I may just use the term “works anywhere” unless they want further details.

      • Pat

        I don’t even bother telling the client the process of how the website is coded. I basically just tell them that it is “Responsive Design – Layout automatically adapts to different screen sizes for optimum viewing”, how I put it together is up to me… I’ve never had a confused client when explaining it this way (I also show them a demo from another site I have built using Responsive View in firefox)

  • Alex Hall

    I’m curious. What are your thoughts on a large website that handles hundreds of thousands of users a month, has to display a lot of information on one page, and requires a lot of images/content.

    In the company I work for we use an API to provide the content for our sites as it’s all centralised internally so that it’s nice and easy to edit. However, because of the vast differences in the way the website and mobile version work we have opted for a mobile-friendly version. This mobile-friendly version uses a specific section of the API to return only the content that is required for a mobile site. Otherwise the server would take longer to fetch all of the information that isn’t necessarily shown on the client end.

    Is this not a viable option requiring two separate design processes for deskop and mobile? It’s difficult to progressively enhance a completely separate experience. But for our industry the experience needs to be different and more focussed on mobile then on desktop because people generally have less time/interaction on the move.

    • Craig Buckler

      Hi Alex. RWD works well when you’re showing the *same* content in different ways to fit a variety of screen sizes. However, there are situations — like yours — when two or more distinct applications are necessary. Perhaps the app is used in different contexts or because the layout and features dramatically differ. It sounds as though you’ve taken a good approach.

      However, since there’s a seemingly infinite variety of devices, you could still adopt a “Smaller-Screen First” RWD approach in both applications. That might allow either version to work on a mid-range screen such as a tablet.

      • Alex Hall

        Thanks Craig. We’ve actually decided on this approach for our “mobile” site. Rather than go for an “app-based” solution out of the box, we’ll look at implementing a “mobile and up” design to cater for any devices that might see it. I think this will give us the most full experience for all of our users.

  • Joe B

    A few years ago this was called progressive enhancement.

  • http://dewargreen.com Dewar Green Limited

    “Perhaps then we can avoid frequent, lengthy explanations and actually implement what we’ve promised!” – Music to my ears :-)

  • Tim

    I’ve found that designing a mobile layout first does not work. This is mostly because there are usually items in the design that appear on the desktop layout that I want to be hidden on the mobile site. This could be large sections of text not important to a mobile viewer, or perhaps a Facebook feed that no one cares about on a mobile version of the site. These are things that you can’t just “add in” to a desktop layout if you don’t know they’re supposed to be there in the first place.
    That’s just how I work, though. I’m sure mobile first is fine for a lot of companies.

  • John

    WordPress 2012 theme. We use it exclusively as a basis for custom child themes

  • Sp4cecat

    We’re barely at a stage where we can use ‘responsive design’ in a meeting with a client and not have them completely misunderstand it – using shorthand like “mobile first” is just asking for trouble.

    “Mobile first” is a responsive web design philosophy that restricts site functionality to that which will work on mobile, with media queries and suchlike then modifying styling and function for larger formats; if you’re going to communicate this to a client, you have to go long-hand – “We’re thinking responsive design, prioritised for mobile formats”, and then explain what the hell you are talking about.

    Some clients may be familiar with the terms, but it’s good odds they have misinterpreted what they mean, just so they can throw buzz words around in meetings. A lot of the comments on this page bear that out..

    • Craig Buckler

      Agreed with everything except:
      “We’re thinking responsive design, prioritised for mobile formats”

      “Mobile First” isn’t about assigning a higher priority to mobile – that’s why it’s confusing. You’ll certainly spend longer on the desktop layout. But clients really don’t need to worry about it so why tell them?

      • Sp4cecat

        And therein is an example of how even we who hew the code can miscommunicate with our peers :)

        My point with that line, was that by working, first, within the limitations of mobile devices – that is, the limitations of a small screen and it’s very own navigation norms – we avoid tearing our hair out trying to make a crucial site function (designed for, and that works perfectly on a desktop browser) work properly on a mobile screen.

        So yeah – mobile focus at the design phase is probably what I meant.

    • JoaoReynolds

      In my opinion, if you think mobile first “is a responsive web design philosophy that restricts site functionality” you’re doing it wrong – it doesn’t have to be, in fact, shouldn’t be restrictive – it’s just a different layout.

      • Sp4cecat

        I probably should have said ‘optimises’ not ‘restricts’.

  • Ralph Mason

    I tend to speak of the site being “mobile friendly”—and then elaborate that I’m speaking about small screens and how the content appears there. That leads to a discussion about what it means for a layout to be mobile friendly—which includes things like reflowing the content. A client won’t really care whether you are designing for mobile first, second or third as long as the layout works nicely on small screens.

    • Richardh8

      That’s quite right finally

  • M S

    I like to use something I call: feature-phone-first.

    I start with a simple empty textfile with no HTML at all, then I gradually add things like content and giant animated parallax-backgrounds and like-buttons.
    And finally i grey down all the text so its barely visible.

    Now that’s responsible design!

  • John Hughes

    I wrote a post a few days ago about the things clients find confusing about responsive design. Mobile first is a factor, although I find the problem is often that I am thinking mobile first and they are thinking desktop first. But getting the client to understand that there is only one website, not separate mobile, tablet, and desktop versions, can be the most difficult thing. http://hughesblog.co.uk/2014/05/responsive-misconceptions/

  • Craig Buckler

    You’re possibly looking at this the wrong way. The content – your HTML – shouldn’t be changing. All your text, widgets, etc. should be there regardless of device.

    “Mobile First” is applied in CSS. You start simple for small screens, then use MQs to apply more sophisticated desktop layouts.

    In addition, you should be careful about ‘hiding’ content. If no one cares about a Facebook feed on mobile, why is the desktop version any different? If you’re showing content just because you have more room, that’s not necessarily a good reason to have it.

    If your site dramatically differs between mobile and desktop views, you can either dynamically load desktop features or create two different sites. But that’s far more work.

    • Tim

      I disagree with that. For an example, if you have a form on a page and that form contains a file upload field, it is not usable on an iOS device. Therefore, this form field should be hidden from the user experience.
      There are plenty of reasons not to display items on a phone that would normally appear on a larger size device. Download speed can even be one of those reasons.

  • Christian Bonato

    Well, the reality of the industry is this: Internet traffic now comes primarily from mobile devices. I don’t see anything wrong with the concept, it’s our role to give our customers the bare facts: http://fr.slideshare.net/kleinerperkins/internet-trends-2014-05-28-14-pdf
    The real problem is to make them understand why we charge so much for a one-column design…

  • Craig Buckler

    That’s feature detection – which is fine, although you’d normally want to provide a fallback where possible.

    We were discussing content which any browser should be able to render. There are certainly cases for collapsing it (menus, accordions, etc.), but you should question why something is being totally hidden from mobile users … especially since they’re downloading that content anyway.

    • Tim

      Well, I would argue that images are content, too. Yet there are times when an image makes a web page look great, but the image isn’t necessary to see on a phone. I’ll use sitepoint as the perfect example: Viewing this site on a desktop is incredibly boring now since the redesign. There are no images on any articles. They could really use some (at least an article header image) to spruce up the layout and draw visual interest to the page. However, on a phone people just want to read the content, so I would hide the image (or provide a small transparent gif to replace it on the mobile version).
      This article is also about page layout and not just content.

  • Craig Buckler

    Some images are content, e.g. graphs, news photos, etc. In most cases, you do not want to hide those from mobile users.

    Then there are decorative images, normally loaded as a CSS background, which are not content. They’re fair game because they’re normally part of a template, e.g. a header background, and not essential to the understanding.

    My point is that content, whether text, images, widgets or whatever, can be re-purposed for mobile but simply removing them because they don’t fit (easily) may be doing a disservice to mobile users.

  • Toby

    Both “mobile first” and “responsive design” are giving clients the opportunity to say no and ask to have the cheaper/easier option. The choices are a modern website or a “desktop only” site. Go mobile first or responsive, whatever makes sense, but do not let anyone think it’s a more expensive extra; it’s the default.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.