9

I've read through a number of sources which state mobile first design is almost essential, which I can't deny it does have obvious benefits such as faster load times for mobiles which generally have slower download speeds through 3G and 4G.

But what if you're building a smaller website with very few images.

I would like to hear of others opinions in this subject and whether or not people think there are exceptions. Personally I prefer to design/code for desktop first and scale down from there. But is it really that important to design/code for mobile first or are the end results not significant enough to bother in certain situations?

  • 2
    I'm unsure what your question is. Is it "Should I make a mobile site" or is it "should I make a mobile site first"? The former is "Yes - 50% of web hits are mobile devices", the latter is "you decide, I prefer Desktop, then you rearrange the content". As a side note, that site works very well on mobile. I'd suggest collapsing the menu - it occupies the whole mobile screen. – Metasomatism Apr 7 '16 at 4:16
  • @Metasomatism The question is based around the efficiency of the code and how it loads on different devices, I might try that link if this doesn't gain traction here (Don't want to double post). I've modified the navigation for mobile, if you're referring to the white navigation folding over the content, this is intention. :) – ccc Apr 7 '16 at 4:53
  • 1
    I've started my latest project with "mobile first" approach, and I think I will do so for every next project where a mobile site is desirable. By limiting myself, I'm better able to focus on the most important things, not think about some fancy stuff around it. I also find it easier to scale up (as I have few things to put into a large area) as compared to scale down (a lot of things to put into a small area). But I guess this could be different from person to person. – ROAL Apr 7 '16 at 11:37
  • 3
    I think it'd be helpful for you to read through my responsive design primer – Zach Saucier Apr 7 '16 at 13:00
  • 1
    Mobile first is all about focus on essentials, both in programming to deliver assets and design to present content. As such, it is a great way to start the design of a responsive website, because you find yourself reduced to the minimum of content elements and layout choices and are forced to prioritise. – kontur Apr 8 '16 at 10:49
25

From a purely design standpoint, starting with the mobile version first does make sense.

The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate you allow yourself, the more you'll have to think about what is important in your design, what information you really need to show. Also, you'll force yourself to think about accessibility too, for text and other items will be smaller.

Once you've designed the 'light' version, you can then proceed to add extra things like design elements and enlarge things as you gain real estate. As pointed out by @Django, you should never leave out features from the design.

For your site, an example could be the menu. You decided to leave of the menu items and replace it with a hamburger icon, which is standard procedure. But if the menu items are one of the most important things on the page, you wouldn't want to hide them behind a click.


sidenote: The red on blue on your site is really bad for the colorblind, please consider changing this.

  • I'm also colorblind :p ... It's that color to go with the style I'm going for. Each of the 4 pages will be colored differently. If you think that's a bad idea let me know. :) – ccc Apr 7 '16 at 8:51
  • You're welcome @MarcusPorter, and thanks for accepting my answer. Sometimes it helps to ask others what they think if you're in doubt ;) And it's certainly not a bad idea to give each page its own color. Although I'm curious on how you decide on colors or color combinations if you're colorblind... – PieBie Apr 7 '16 at 9:40
  • 3
    What? No. You shouldn't build two sites. That's silly and hasn't been the way to go since 2005. You build one site which adapts itself to it's environment. It's called responsive webdesign – PieBie Apr 7 '16 at 9:44
  • 1
    I didn't mean features, I meant frills, paddings, maybe even images. Never features of course. A good example would be the menu: you don't actually add a menu when the site gets larger, but you do replace a button with a full menu. – PieBie Apr 7 '16 at 11:20
  • 2
    @piebie: Actually the trend has been for content-heavy sites to make separate mobile infrastructures again. Check the AMP project for example. – David Mulder Apr 7 '16 at 22:17
12

Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and that's fine.

It's worth noting that "mobile first" relates to the design/UX and the build itself. Mobile first design won't speed up your site for users, but mobile first development will.

Let's look at both.

Mobile first in design

Mobile first design is about helping you pare down your features and usability to what you need. The thinking behind it goes like this: Rather than design desktop first, and then struggle to put all the features you've come up with into a 320px wide display and keep good UX, start with mobile first...

If the UX is getting cluttered or damaged by all your features on mobile, then it's supposed to make you question if the user really needs them all. Can you get rid of some of them and actually improve the experience? If so, why do you have them? Maybe they're not essential after all, and maybe they shouldn't be on your site.

The theory is that this helps you pare down your features to what you absolutely need, and then you can scale that up into a beautiful desktop experience.

Mobile first in development

With mobile first development, it's about writing the mobile version first, and then putting exceptions in for larger screens. The reason this is better (and quicker) for mobile users is this: You have two images for a website, a large one for desktop and a smaller one for mobile. If you code desktop first, your CSS will look something like this:

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

This means that the mobile user actually downloads the large.jpg before the CSS switches it out. This is very bad.

Mobile first looks like this:

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

The mobile user never downloads large.jpg.

I hope that helps makes things a little clearer, if you didn't understand them before!

  • 2
    Actually, this is only partly right. According to Tim Kadlec's mobile test results from 2012 on image downloads, only very old mobile browsers (Android 3.0, Blackberry 6, Safari 4, etc.) will download both images. Every other mobile browser will only download the appropriate image. – cimmanon Apr 7 '16 at 18:23
  • @cimmanon You're absolutely right. Thanks for alerting me to that. I've swapped it out for an example that failed Kadlec's testing instead. – Django Reinhardt Apr 8 '16 at 10:16
  • According to link right way will be to set background-image individually to desktop and mobile. – hlcs Feb 10 at 23:24
5

The origin of "mobile first"

The idea of "mobile first" in regards to Responsive Design comes from a time when the browsers for mobile devices were a lot less capable than what you would find on a desktop device. Many of them did not support media queries at all, so the idea of building up a fancy desktop design and then sticking in styles using media queries for a narrow viewport falls flat on its face.

The absence of support for media queries is in fact the first media query.

- Bryan Rieger

Is mobile first still relevant?

Despite the fact that browsers for mobile devices have caught up with their desktop counterparts, "mobile first" is still the most logical way to write your styles.

I prefer to think in terms of "avoiding undoing previous style declarations". An additive approach, rather than writing out styles and then overriding them later, is almost always going to lead to a more compact stylesheet. Styles appropriate for most/all devices should be found outside of media queries, while styles that are only relevant to a specific viewport should be behind a media query.

Compare a "desktop first" approach:

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

To a "mobile first" approach:

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

The results are the same, but the later is more compact. Sample styles shamelessly copied from Brad Frost's 7 Habits of Highly Effective Media Queries.

There are a few rare exceptions where "desktop first" is more appropriate than the other way around. The most notable of these is when you're doing things like responsive tables. Wider viewports will want the default styles for tables, but a narrow viewport will want to override all of that so that the contents can be stacked vertically.

Don't break up your stylesheets

One thing you absolutely should not do is break up your responsive styles into individual CSS files and use the media attribute on the link element. This has the undesirable consequence of having the UA download all linked stylesheets (ie. there is no speed improvement for doing so).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

So code should be mobile first, but what about the approach to the design?

I am of the opinion that it does not matter. Layouts for all viewports relevant to the design must be done (this might involve as few as 2 or as many as 5 once you factor in any minor breakpoints you might need!), order does not matter in the end. Many designers lack the discipline to start with a desktop layout and find that starting from a mobile layout is easier.

If you would like to start from a desktop layout, you must avoid the temptation to fill all of that glorious whitespace with clutter that does not enhance the content for that page. Do you really need that 800x600 stock photo of a smiling woman holding a phone? It's just costing the mobile user extra money to download useless fluff, and is just a visual distraction for a desktop user to skip past.

  • "It doesn't matter that much"—of course it does. And that's what this question should be about. Coding/programing is generally off-topic here so not really relevant (it is relevant, of course—but shouldn't be the main point) – Cai Apr 7 '16 at 19:15
  • 1
    Can you tell the difference between a responsive design where the mobile layout was designed before the desktop layout? The "mobile first" phrase comes from the coding aspect of responsive design. It does not matter which layout is designed first as long as both are done. – cimmanon Apr 7 '16 at 19:21
  • Others have already talked about it in answers. Designing a desktop website full of features then having to take things away because they don't fit or work on mobile isn't easy and you'll often end up with awkward out of place elements/features. Designing for mobile first then adding features for desktop is easy. It's as simple as that. But it really does matter. Maybe not to the person coding the website but it does to the designer. – Cai Apr 7 '16 at 19:31
  • You didn't answer my question: can you tell which one was done first? The fact that a lot of people are bad at designing desktop layouts and put a lot of garbage on their pages has nothing to do with which layout should be designed first. Both have to be done, so which one should be done first is going to depend more on the individual preferences/abilities of the designer. – cimmanon Apr 7 '16 at 19:40
  • All I'm saying is that it affects the design process. Take 2 scenarios: 1. You design a responsive site, taking in to consideration mobile and desktop and everything in between the whole way through the process. Great. 2. You design a desktop only site, all the way to final approval and your client says "oh, I need it to work on mobile too..." and he still wants x, y and z features that wouldn't work on mobile but you didnt take that in to consideration when you were just designing for desktop... Which scenario is easier? – Cai Apr 7 '16 at 19:53
2

I tested your website www.cosmosdesign.co.nz on different screen sizes and its's working fine on all screens. Regarding your question for mobile first design I would like to say that your designing approach must consider your target audience along with many other factors like images, content, etc. If your target audience will be using this website mostly on desktop/ laptops then you can surely proceed with your approach but if it is a website which will be mostly viewed on phones and tabs then you need to give a second thought to your strategy.

You can also consider designing your website responsive using Bootstrap (many other options are also available) and you can also optimize your images for mobile friendly site which will also reduce load time.

  • You make a good point regarding target audience. Seeing as my target audience is small businesses etc I imagine my demographic would be viewing my site with desktops. I briefly tried out bootstrap awhile ago and it didn't seem like it was for me, thanks for the suggestion though. – ccc Apr 7 '16 at 7:46
  • Yeah I know frameworks like Bootstrap increase the code and effort but it is surely worth the effort, if you need any help feel free to ask me. – wazza Apr 7 '16 at 8:53
  • I feel like I'm still learning css, I struggled with this one page. I'll be sure to try it again on one of my clients in the future. – ccc Apr 7 '16 at 8:56
  • So if you are sure of your target audience you can very well proceed on this approach but i would like to warn you sometimes it's difficult (if you are not using framework) to scale down for smaller screens later when you have a lot of content and functionalities on your site. All the best. – wazza Apr 7 '16 at 9:04
  • Yes you're right. Also, PieBie made some good advice on that subject if you would like a good read. – ccc Apr 7 '16 at 9:24
-2

To me the main reason to do mobile first is to avoid a situation where your mobile site doesn't do everything the desktop version does. There are tons of websites where I have to request the desktop version on my phone to do something because even though the phone can do it, their mobile version doesn't. That bugs the crap out of me.

That said, I think desktop-first is fine as long as you don't skimp later on the mobile features like most firms do.

Also, a lot of design frameworks make this pretty simple. I used material design lite to make a fairly complex desktop-first app, and really only had to change a couple of things when I revised it for mobile-friendly version--most of the work was already done.

  • Sometimes features are purposely left out for mobile because they are not able to handle the intensiveness of it – Zach Saucier Apr 7 '16 at 18:12
  • sure, if it's a problem it's a problem. But it's almost never a problem because modern phones are now fairly powerful computers. – Matthew Apr 7 '16 at 18:47
  • It really happens, on multiple sites for me, that I need to fetch the desktop version because the mobile version does not even sort items in the listing, or hides the discussion tab, or some convenient filtering does not work. This really looks more like "do desktop first and then - quickly, quickly, timeline ends yesterday - port to mobile. – h22 Apr 8 '16 at 6:31
  • If you have a really heavy site, to the point where it becomes a web application, you might be better off porting it to an app anyway instead of trying to cram everything in a mobile site. Facebook for example has split up its desktop site in two apps: Facebook and Messenger. – PieBie Apr 8 '16 at 10:28
  • Though facebook has been pretty good making everything available in just the mobile web app--you can still message there without Messenger. – Matthew Apr 8 '16 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.