Mobile-first implementation or desktop-first?

Question

When working with CSS media queries, I am unsure of whether I should program in a mobile-first style, or a desktop-first style.

For example, let's say I'm given a design that consists of a set of blocks that are side-by-side. On desktop, I'll stick to spec, but on mobile, given the reduced screen area, two blocks stacked on top of one another would be better.

Which is better, this (desktop-first):

div {
    width: 50%;
    display: inline-block;
}

@media all and (max-width: 600px) {
    width: 100%;
    margin: 0 auto;
    display: block;
}

or this (mobile first)?

div {
    width: 100%;
    margin: 0 auto;
    display: block;
}

@media all and (min-width: 600px) {
    width: 50%;
    display: inline-block;
}

Wordpress' latest theme follows the mobile-first method, by using min-width, but am I correct in assuming that older browsers without media query support would be unable to parse these directives, and load the "mobile" css?

What are the advantages/disadvantages of both?

why not create 2 CSS files and generate your html on the fly to include only the one applicable for the platform (which you can determine from the incoming request)? — jwenting, Mar 21 '13 at 12:44
That is definitely an option, but if older browsers cannot parse media queries, then it does make more sense to just code the CSS desktop-first, as those are the styles that will be loaded (negating the need to have a separate CSS file)... I've always assumed that having extra CSS files in `` blocks were mostly just for ie "fixes"... — Julian H. Lam, Mar 21 '13 at 12:47
they're actually more for Firefox "fixes". In this case, the decision which CSS file to link from the html should be made on the server, and only the link to that one sent to the client, not a conditional block. — jwenting, Mar 21 '13 at 12:54

score 2 · Accepted Answer · answered Mar 21 '13 at 14:51

Which is more important to you? Or more accurately, do you think you're going to draw a larger number of users from mobile than from desktop, or vice versa?

Having a responsive site is excellent, but you need to decide whether you want it mobile first and respond upward, or desktop first and respond downward. There's no real right or wrong answer to it, it just depends entirely on whether you think you're going to cater more to one audience than the other.

Mobile-first implementation or desktop-first?

1 Answers1