“Mobile First” Considered Confusing

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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.

  • 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.

  • 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.

  • 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 :-)

  • 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.

  • 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.

  • 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!

  • 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.

  • 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.

  • 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.