Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question

closed as not constructive by JB King, GlenH7, Frank Shearar, Martijn Pieters, Kilian Foth Mar 22 '13 at 13:21

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

    
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 <!-- if [ie] --> 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
add comment

1 Answer 1

up vote 2 down vote accepted

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.

share|improve this answer
    
That makes sense, thanks for your comments :) –  Julian H. Lam Mar 21 '13 at 16:39
add comment

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