Mobile First Design: Why It’s Great and Why It Sucks

by on 5th April 2013 with 24 Comments

screenshot

Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.

There’s a growing trend in the industry though to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version. Why would you ever approach a project this way? What are some of the pros and cons of this strategy? Read on to find out!


This article is part of our series on “looking beyond desktop design”, brought to you in partnership with Heart Internet VPS.

Mobile Web Design Isn’t a Niche

screenshot

If you still have it in your head that mobile web design and application development is a niche industry, you need to change your way of thinking. Mobile isn’t a trend, nor is it even the future, it’s the present. Don’t believe me? Here are some crazy statistics to consider from Mobithinking from last month.

  • There are over 1.2 billion mobile web users worldwide
  • In the U.S., 25% of mobile Web users are mobile-only (they rarely use a desktop to access the web)
  • Mobile apps have been downloaded 10.9 billion times
  • Mobile device sales are increasing across the board with over 85 percent of new handsets able to access the mobile Web

One of the most potent facts here is the second item, which brings to light that many users will likely only ever see the mobile version of your site. That’s an astounding revelation isn’t it?

More than ever before the web is something that we carry in our pockets, not something that merely hangs out near our desk or even in our homes. This is a global trend that will only continue to see growth in the coming years. Are you ready for this? Does your professional skill set include web development for all important platforms or just the desktop arena?

Why Mobile First?

screenshot

Odds are none of the people reading this have learned anything new up to this point. The $200+ phones in the pockets of everyone you know are all the indication you need that the web has broken out of its computer shaped box.

However, the fact that mobile web access is popular does almost nothing to convince me that I need to pursue a strategy that actually puts mobile first. The flip side of 25% of mobile users being mobile-only is that 75% of them aren’t! Obviously, the desktop is still an important medium, not to be forgotten or pushed to the back burner quite yet. So why are we even considering taking the mobile first route?

One of the major catalysts for the rise of mobile first web design was the announcement from Eric Schmidt in 2010 that Google was going to be taking this approach from now on, going so far as to say “I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” (source). Why this drastic change in approach?

Graceful Degradation vs. Progressive Enhancement

These are some major buzz words from a few years ago that can still lend a lot of insight into the notion of mobile first web design and why it’s an important concept to consider.

screenshot

Graceful degradation arose out of a need to have a design function on as many browsers and platforms as possible. Designers and developers wanted to take advantage of new technology without excluding users with setups that didn’t have support. The general conclusion was to create and serve up the best experience possible, and then account for each possible degradation and ensure that despite any shortcomings, the site would remain functional.

In terms of mobile web design, this meant that a full, standard website would scale back and gradually remove content and features as the viewport became smaller and the system simpler (no Flash support, etc.).

screenshot

Out of this trend arose a powerful new idea: progressive enhancement. In this version of the tale, you put your best foot forward on the mobile platform, providing the users with minimal screen real estate, processing power and third party plugins an amazing experience that both looks great and functions perfectly. As the need arises, the site can gradually be “enhanced” and even completely rethought for larger platforms with fewer constraints.

Why Progressive Enhancement Wins

At a glance, these two methodologies seem roughly equivalent. Who cares where you begin the design process as long as it gets done, right?

The reality of the situation is a little more complex though. When you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Does this happen with every project? Perhaps not, but the story is likely far more common than you’d like to believe.

If we examine the progressive enhancement workflow, the result tends to be a different story. Here we’re starting with a project that is both super lean and quite impressive. You’ve taken all of that starting energy and put it into creating a product that looks and functions well despite the many restraints that you faced.

More importantly, you’ve already gone through the problem of trimming down the content to its most vital elements. Now when it’s time to bring this design to the desktop, instead of facing the decision of what to cut and how to water down your product, you instead get to decide how to make it even more robust!

Web Content: Best Served Selectively

screenshot

The above argument comes at your from a purely philosophical standpoint with the ultimate conclusion being that the end result tends to be better if a mobile first approach is taken. If you want an argument with a little more observable substance behind it, look no further than how you serve up your content.

If we take the graceful degradation viewpoint, all of the content (text, images, video, audio, etc.) is served up at the same time to what is assumed to be the largest platform. From here, mobile versions are accounted for that simply ignore or remove much of this content from the page. The problem though is that it was already loaded in whether the given platform needed it or not. We find ourselves serving up more content than is necessary on the platform that is often associated with the slowest download speeds. See anything wrong with that?

With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-neeeded basis to platforms that can handle them well.

What About Responsive Design?

How does this all fit in with responsive design, the other trend that’s taking over the web? The good news is that these two strategies aren’t competitive. In fact, you could say that they were made for each other.

Responsive design is built around the concept of media queries that target specific devices and viewport sizes. With this in mind, you can code up your initial CSS given a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases.

This is likely the opposite of the method that you typically take with responsive design: start big and then reduce. Given the arguments above though, there’s obviously a lot of logic behind structuring your media queries from small to large.

The Big Fat Downside

screenshot

Hooray for mobile first web design. It’s obviously the greatest thing to hit the web since The Oatmeal. So why am I not excited about it? Why, even though I gush over responsive design, have I often downright avoided the topic of mobile first web design?

The answer here is simple: it’s neither fun nor easy. Sure responsive design is tricky, but it allows me to really flex my layout muscles and leverage a lot of built-in browser functionality to perform some cool feats. Responsive design makes my toy box bigger, not smaller.

With mobile first design though, I’m hit over the head with constraints on step one. That’s no fun at all! Right away I’m faced with a smaller screen, fewer resources, and a bunch more headaches. Further, it’s just not comfortable territory. I’ve spent most of my web design career in the desktop space, building experiences around mouse hovers and clicks, not finger taps. I’ve done plenty of mobile work but I wouldn’t call it my strong suit.

Most importantly, from a strict design perspective, I find it very difficult to really dive into a design if I’m starting with mobile and working my way up. I mentioned this in a recent article to plenty of “huzzahs” in the comments and have even heard leading industry professionals sing a similar tune.

Rising To The Challenge

Let’s look for a second at my arguments for and against a mobile first design approach. In the “for” category, we have straightforward and logical arguments that are difficult to downplay. In the “against” category I have a lot of whining and personal hesitation. Which side do you think wins this battle?

Perhaps you have some better anti-mobile-first arguments than I do, but if I look at this from an objective viewpoint, it’s evident that the mobile first approach is the stronger contender.

This means that I probably need to get over myself and rise to the challenge of beginning projects with a mobile viewpoint. If I’m not comfortable designing for mobile first, good, that means I have room to grow and techniques to learn.

Ultimately, if my reasons for adopting a mobile first approach are user-centric and my reasons against it are personal, then I have to give up a little bit of comfort in the name of being a better designer.

What’s Holding You Back?

You now know all about how great mobile first web design is for your users. You know that big companies like Google are taking this approach and you can clearly see the benefits of a mobile first workflow. So what’s holding you back?

Do you share my personal perspective that mobile first is a difficult strategy to implement and agree that you just need to man up (or woman up if you prefer) and take the leap? Or is there something more substantial holding you back? Leave a comment below and let us know!

Images via BigStock: Reno Martin, Yellowj and PixelsAway.

Comments & Discussion

24 Comments

  • http://www.themousepotatowebsite.co.za Larry Botha

    Interesting looking at it from the point of someone who’s been in the industry for a while.

    I guess I find it less daunting for that reason… I’m new to the industry, so learning about implementing mobile first goes hand in hand with all my experimenting, from CSS to js to SVG. There’s little issue for me in making drastic changes to my workflow since I’m still crafting that workflow. For me, everyday is about manning up and getting on with it :)

  • Pete

    If you design for desktop imho it’s not that difficult to try to stick to simplicity, as long as your client is not trying to add 100 features to the homepage. So I prefer to do it this way. Also when you design for mobile first you create a false sense of completion. “Oow we’ve managed to put it all in the mobile version, so the rest is going to be easy”, only to find out you suddenly have to describe way more stuff than you’ve done so far.
    Perhaps my view on this topic is also influenced by my roll as an interaction designer, where developers or graphic designers might have different views.

  • PeteVsPete

    Responsive design? Sure.
    Mobile-first? No thanks.

    I’d rather make mobile sites that fully cater to the mobile environment. My make my mobile sites with responsive techniques. But they’re separate sites. That way users get a mobile experience that takes mobile into account 100%, while the desktop version still screams with bells and whistles. I can still use the 960 static methods for my desktops sites I’ve spent a decade+ perfecting. Mobile sites need a whole new approach because mobile users convert differently. Also, most responsive sites validate horribly on mobile checkers. You’re relying on tons of media queries, which don’t work on older browsers, and javascript to hide/shrink things (which fails when javascript is disabled).

    If we all go over to mobile-first, every damn site on the web is going to end up looking like a clone of Owltastic or Boston Globe. Plain, 3-color sites with tons of columns that all looks like newspapers. Before long, websites will all be like in 1994 – plain white backgrounds and black text. Why not? That’s 100% responsive and would love quicker than anything.

    p.s. I think one should still design desktop down. Media queries will fail on older systems and browsers. So you should code them to kick in when devices shrink, since most tablets and phones can recognize them, while older desktop browsers on older comps can’t.

    • Joe Johnson

      I completely agree with PeteVsPete. The last two “sites” I worked on where I implemented responsive design worked well until someone said they wanted a mobile-first workflow which then proceeded to break desktop (IE especially) due to media queries. I believe we should design / develop first for the best experience and use media queries, etc for devices which actually support them — secondarily. Targeting the minority to sacrifice the majority is only philanthropic, not pragmatic.

    • http://www.heloisabiagi.com Heloisa

      Wow, finally people with lucid thoughts on mobile-first and desktop-first media-querying. If you create a smart, fluid design, you’ll have to put very little efforts on “shrinking” it. You’ll have to load extra CSS code to adjust to devices with slower connections? Maybe, and this is the only “con” I see when working desktop first. On the other hand, most of the modern mobile/tablet browsers support media queries with no restrictions, while desktop Internet Explorer 7 and 8 have no support at all. It makes way more sense to me provide styling for those who can’t read media queries first, and then enhance it for those who can, than the opposite (as the “mobile-first” crew recommends). I really don’t like the idea of relying on alternate stylesheets (okay for smaller projects, but in bigger ones, maintenance becomes impossible) or javascript-based solutions like Modernizr, response.js and similars to decide what version of my website will be loaded. One single javascript error (and we all know they can happen way more often in IE than other browsers) and it’ll screw my user’s experience. I really would love to say “screw you” to all of IE users, but the nature of my recent projects doesn’t allow me to do that.

      In short: responsive design is not only about “mobile”. Desktop (and tablets as well) have their weight in design. If you’re putting all your efforts on mobile, maybe you should be designing a full mobile version of your website per se. Responsive design, IMHO, is all about flexibility and adaptation for existing and upcoming devices, not only the small ones.

  • http://spigotdesign.com/ Bryan Hoffman

    The mobile first trend feels like much ado about nothing to me. Unless you’re working on a project that has server side resource allocation, you’re really just talking about targeting screen sizes through the stylesheet.

    I’ve tried mobile first on a few projects and found that it just creates more work. A good designer should be thinking of the entire web experience, from mobile through to the desktop.

    Why does one have to come before the other?

  • http://www.brettjankord.com Brett Jankord

    I find Mobile First to be the best way to develop websites these days. It is challenging, mainly just because it goes against what many of us are accustom to when designing/developing websites. We are so used to designing and developing for desktops first. Though as the landscape of the web is changing, our thinking in how we create for the web must change too.

    Like you say, the challenges of mobile first are mainly getting comfortable with this approach. Though in my opinion, the benefits of mobile first outweigh these challenges.

    Most of the responsive sites I see have max-width media queries setting elements to display:block, float:none, max-width:100%, etc… as the viewport gets narrower.

    For most elements developers are applying the above styles to; divs, headers, footers, sections, etc., these are the default styles for these elements. So by starting mobile first, you never have to write these styles. You only have to apply styles to the elements that need to change from their default style as the viewport gets wider. With this approach, your code will be smaller overall and thus, faster.

    One of the biggest challenges I have and know many other designers have, is how to design mobile first. I find that an initial brainstorming/site planning session with a mobile first mindset is really beneficial. After this, I often come up with sketches before jumping into Photoshop. Both of these steps help in my design process as I can work on the desktop design first, but be conscious of how it should relate to what I’ve decided for the mobile version of my site.

    For anyone who is unfamiliar with mobile first, you should watch this video of Luke Wroblewski’s presentation at An Event Apart – http://vimeo.com/38187066

  • Matt

    @Brett I honestly never thought about the extra styles being applied that are the default styles like you said. No idea why that never dawned on me. I might have to go back and recode the site I just started to do some comparisons.

  • Kingkoru

    360 and up!!! They start on 360 and responsively head up…nice read thanks.
    The code is on github heres the link http://www.stuffandnonsense.co.uk

  • Lorem Ipsum

    To me, the “Mobile First” approach has always been mostly about prioritizing, about focusing on what’s most important first. And that a solid design principle in any medium.

  • http://leoklein.com Leo Robert Klein

    I really think this ‘mobile first’ business is more a symptom of how new and imprecise the device type is. I mean, first of all, people making these arguments often roll into their figures tablet computers, which makes about as much sense as including netbooks and laptops.

    Second, since when do you build your interface around the least capable device? This is the equivalent of designing for IE6 — or designing your villa around the requirements of a hut or pup tent. Finally, have you had a look at some of the ‘mobile first’ products on larger desktop screens? Not impressed? Me neither.

    “Mobile First”? Call it the “New Austerity”.

  • Gavin Foster

    I came across this article after google-ing “mobile first is wrong”. I was sure someone out there must feel the same way I do about designing mobile first. Reading through the article has helped change my mind completely. Got to echo Matt’s comment and give thanks to Brett Jankord (above)!

    It is true that most are designing using max-width, a result I think of ‘converting’ old 960 pixel-width designs into ‘responsive’ designs. Even Ethan Marcotte’s responsive design book uses an example of a website that starts with the desktop and works down to mobile.

    IMHO: Mobile-first is a good thing not only because of the undeniable rise of mobile users but helps us to code faster, leaner projects, even when we add all the ‘bells and whistles’ for desktop.

  • http://www.benhayes.com Ben Hayes

    I agree, Mobile First seems like it is the best approach philosophically. But there are downsides. As PeteVsPete says, media queries don’t work on older desktop browsers. This means we have to add Javascript to make the desktop layout work in IE8 and below, for example. On the other hand, Desktop First may result in a lot of extra downloading on mobile devices, particularly if your design features a lot of big CSS-powered background images, for instance. My hunch is that in the long run Mobile First will prevail, but at the moment there are compromises required for both approaches.

  • David

    Boo, your layout isn’t responsive.

  • http://kodime.com Nico

    As a non-designer I have to credit everyone in this discussion with their serious thought. In my team we are pure mobilists, so obviously biased. However most of us here have worked on plenty of websites and projects so understand that world also.

    I believe the “mobile first” concept really came out of marketing, not design. It is a statement re the first digital touchpoint a consumer has with a brand, which increasingly is via mobile, be it on a social media site, via QR code or an app.

    Also agree with some comments here that mobile sites / projects (apps anyway) require a dedicated approach, it is not something that can be addressed just via stylesheets for most sites. Different navigation, different user journey, different things users want to get to – make the WEBsite work for the web with all its bells & whistles, and get the mobile site right for those devices. When designing from scratch, going mobile first is a valid strategy – it is easier after all to add lots of columns, dropdowns, scripts and feeds than trying to squeeze them into a smallscreen device.

    Nico

  • Marcos

    Great article. I do think it is helpful to think mobile first to streamline content, functionality and user goals. I do think, however, it is all about context and what you’re trying to achieve. While mobile sales are quickly overtaking desktop, the usage for each is very different.

    On a mobile device I do want a good user experience, but mostly I am looking for information in a more utilitarian manner. On the other hand, if I am on a desktop or tablet I am expecting something more.

    Responsive layout does force you to design both in sync. My concern is that I don’t think we should oversimplify our approach to either situation. I have recently seen desktop and tablet sites become much more clever and interactive. I believe start with mobile, but think about both settings and make them both interesting and effective. Again, it depends on what you are doing.

  • http://architect-things.blogspot.com Aadaam

    On one side, I hail any solutions which brings the designers out of this ‘don’t think of possibilities and limitations’ cave, taught to them at certain industrial engineering schools.

    That’s because what happens afterwards is usually a design, which doesn’t leverage the possibilities, and constantly knocks into the limitations. Some constraints cannot be circumvented, and what results is a dull website (as it isn’t using the available technology but its cool features had to be bugged down)

    And I won’t go into the usual developer-designer battle, the designer shows a cool PDF or PSD to the client, the client falls in love with it (as on a theoretical/design level, it is brilliant), and the developers either has to figure it out somehow, or has to say no…

    I also hail anything which makes designers go back to the basics, and make them think through the basics of design, instead of throwing needlessly complex solutions, accummulated through previous projects. That’s the key to clean design, a design which is elegant, elegance used in a sense as it is minimalism in beauty.

    On the other hand, mobile is a very limited platform: if it isn’t comfortable for you to design for, it might not be comfortable for the user to use it.

    And what if the resulting application isn’t using the vast possibilities on desktop, and instead feels uncomfortable on the desktop too?

    What if the ‘progressive’ features on desktop look like clothing on a cow, somehow not that fit?

    Who are these mobile-only people, do we know them? Is it their only distinct property, or are they also mostly retired / youngsters / whatever? Are these tablet users or truly mobile users?

    What do these people use their phones for, I mean, ok, everything, but what is that everything? How do they live like?

    Also, the iPhone in 1997 was the star phone because it had ‘the real web’, a mostly desktop-like WebKit browser. I truly like when I could say on the website, “ok, hey, I have a tablet, pls forget mobile optimizations, I bought it as a touchscreen desktop browser running in my lap’

    Do we really want to sneak in all the features of a full-blown application onto a 4-inch screen? Make people read multiple page articles on a phone?

    Of course, I understand, our answer is, that if the users need this, if this is how they want to do it, if we want to enable these people to use all the features, read all the articles, then yes.

    But what if they’re minority for a reason?

    The only way to find this out, I guess, is to do user-tracking, make people log in on all the devices they use our site at, and learn how much of them are
    * desktop-only,
    * desktop-mostly,
    * hybrid,
    * phone-mostly, and
    * phone-only,
    and to try to see if the usage patterns of the last three are different.

    I’m a desktop-mostly user: I use most mobile apps only sporadically, on the road, and then, I expect them to be quick to use for the main functionalities. Anything else? I want to switch to the desktop version. I have a desktop browser on my phone, that’s what iOS is about.

    If a mobile webapp is clumsy as they tried to fit everything in, and I can’t find what I need quickly, or if I can’t reach the main site and I don’t like the tablet-version’s functionality (knowing the desktop version also runs on it well), or the desktop version doesn’t live up to the full possibilities of a 15-inch, dual-core laptop, for me, as a desktop-mostly user, the experience is bad.

    If we could trace back all our design rationales, it would be easy, but… I could not make renowned designers explain how and why did they choose this or that (in a situation which there was no rationale not to tell them)

    What if we would do the two in parallel? Of course, that’s too much energy, I understand.

    What if we would write down, when struggling with our mobile design, what did we do and for why, and then, based on this, we would completely start from scratch: no finished design, just the descriptions?

    “The buttons need to be at least thumb-sized on a 4-inch screen” – that’s a totally different reason for the size of a button than what is there for desktop, which is the Fitt’s law, and its two-dimensional expansion (basically: aimability with mouse)

    We need to challenge what’s there,that’s good, that’s nearly always good. It makes us think. It perhaps makes us going forward, even in some cases we go backwards as well. We need to understand what’s there, and whatever is the reason to make us think of things, make us understand things, whatever makes us apply this understanding to new fields, it brings us forward.

    So, Mobile First? No. Thinking through why do we do things the way we do? Yes, absolutely.

  • http://helentran.com Helen Tran

    Since I’ve been introduced to the idea I’ve been designing mobile first for my websites. I have found the following benefits:

    – My websites run faster developing Mobile First. I have recoded websites responsively and mobile first and have often times reduced my load time by 30-40%
    – My clients understand content priority and visual hierarchy easier and better. They can all relate to the frustration of not getting the content they want on their mobile browsers and I can easily use this frustration to convince them to reconsider the desktop experience
    – My wireframing has gone faster with point #2. Since the clients now know which information is more important to them and their users, I can take that and turn it into larger screen wireframe WITH them that they understand

    Issues about older browsers:
    – Depending on the usage statistics, I’ll either serve them respond.js which will allow them to read the queries on older browsers OR server those older browsers the mobile version (which simply involves them just ignoring it)
    – None of the websites I’ve worked on have had any statistic of users that had disabled Javascript.
    – If in the case the user is using an old browser & has Javascript disabled, wouldn’t it make sense for them to see the mobile version? Design is no longer important at that stage, just the information is

    This isn’t to say there are no challenges. Mobile first (as a designer/developer hybrid) sometimes sticks me to a developer-first thinking. However this is my challenge to overcome and I often move off the computer in these cases into my sketchbook to encourage better looking designs that look less boxy/boring.

    Anyway, designers/developers should be more flexible in how we approach the solution. Mobile first may work for some but you won’t know until you’ve tried it (and sincerely.) If it doesn’t work, move on and work with what’s best for you but saying “No.” just because people are doing it is a very silly way to approach your work-life.

  • Vijay K

    Wow! I wonder you’re talking about responsive design and your website is not responsive. Strange!

  • tex

    This website seems responsive to me.

  • http://gerhardderksen.com/ GD

    Hello,

    I’m a Graphic Design-teacher from Amsterdam (kids age 16-21). I teach Web Design (Photoshop, Dreamweaver and basic HTML/CSS). My students don’t need to code their own websites, they are designers. But they get a basic level of HTML and CSS so they can communicate with a developer.

    I wander what role my students are going to play in the Mobile First story. Once you ‘paste’ all the control elements and bars into the small screen, there’s hardly any space left for design. Most of my colleagues see Mobile as a ‘technical’ matter, something a developer takes care off (or the standard mobile templates in Dreamweaver).

    My personal view though is that even on that small screen a designer van play an important role. A designer has a better feel for typography, white space, graphics and colors. In order to prove my opinion and show that mobile designs don’t need to look all the same, I’ve been looking for mobile sites where designers played an important role. And to be honest, that’s not so easy to find.

    Question: Does anyone know any good mobile-sites from a ‘design’ point of view ?

    Any information or opinions about my topic are welcome, I really appreciate your help.

    GD

  • Dominic

    Compare this to what happened to album covers. Your vinyl cover would be the desktop, cd cover the tablet, and that tiny little pic you get in your MP3 player, the mobile.

    Now, if you had a mobile first approach, you would get an album cover that looks great on an MP3 player, ok on a CD, but ridiculous on vinyl.

    I guess the happiest medium would be to design first for the tablet, if you are going to choose.

    But why have to choose? Surely its just as easy having three separate sites, managed with server-side tools, as having one site managed with with three sets of CSS and / or javascript? By all means use CANONICAL to cater for the pesky SEO requirements, but, given that we have a number of ways of generating and controling a site, why is it necessarily best to use a one site fits all approach?

  • http://medienvirus.de Jens Bayer

    First: Thank you for the very good article!

    Second: I think it’s a simple decision: If you Design a whole new Website from scratch, you can take the progressive-enhancement-princip.

    In a lot of cases you (i) REdesign already built an longtime online websites. And for them i always will take a look at the complexity of a website, like navigation, content, etc. If it’s way to complex and heavy-content i would prefer graceful-degradation.

  • http://www.topbesttabletsforkids.com/ The great buy tablets for kids

    This design is spectacular! You definitely know how to keep
    a reader amused. Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that,
    how you presented it. Too cool!

Subscribe

Membership
About the Author