: Is programming a website for mobile first really necessary? 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

@Cooney243

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.

Vote Up Vote Down

@Lengel450

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.

Vote Up Vote Down

@Martha945

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

It's worth noting that mobile first affects the design/UX and the build itself, and as this is a graphic design forum, I'm a bit perplexed as to why you think a mobile first design will speed up loading times for users - it won't, that's down to your programmer to do.

Mobile first 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 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/large.png');
width:200px;
height:75px;
}

// If on a smaller screen... @media all and (max-width: 600px) {
#test2 { display:none; }
}


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 {
display:none;
}

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


The mobile user never downloads large.jpg.

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

Vote Up Vote Down

@Sent7350415

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.

Vote Up Vote Down

@Yeniel278

I tested your website 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.

Vote Up Vote Down