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.
