Advertisement


Is programming a website for mobile first really necessary?


Question

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?

2016/04/28
1
9
4/28/2016 12:35:00 PM

Accepted Answer

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.

2016/04/07
24
4/7/2016 11:21:00 AM

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!

2019/02/18