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.

I'm a back-end engineer who works on a small team so occasionally needs to do some front-end. I like to develop a good workflow and project structure before I start anything, so I'm wondering about creating a responsive front-end for a web app.

What's a best-practice way to strcture CSS for creating responsive websites that need to "scale down" for smaller screens? Specifically: do you create the mobile version first, then expand the code with min-width media queries in the CSS? Or do you do the opposite, creating the desktop-resolution version first?

Secondly, do you define multiple element selectors and definitions in the same media query? Or do you define a media query for each element and selector? It would seem that the second method would make for more readable code perhaps -- although it's certainly more frustrating to "tweak" a working site to create a new version with media queries rather than simple fence-off the old settings in one media query and re-style the necessary parts from the new version from scratch.

share|improve this question
    
responsiveboilerplate.com –  Mathew Foscarini Nov 27 '13 at 15:28
1  
I'm also primarily a back-end guy, but I have been working more closely with a good front-end guy who makes good use of Twitter Bootstrap (getbootsrap.com) and the LESS css 'language' (lesscss.org). This isn't an answer, but looking at how these work re: your question has helped me a lot so far. –  maelstrom Nov 27 '13 at 15:42

3 Answers 3

I have found that creating a mobile site first is easier than making a desktop site respond to a mobile viewport.

As far as media queries, I use media queries for the typical screen sizes. Also, if there is a size that needs to have the layout tweaked, I will add another media query. So I will put multiple selectors in the same media query.

But in the end, its up to you to use the style you prefer and start with the screen size you like. Neither are wrong.

share|improve this answer

Use a css framework and learn from them

Create the mobile version first.

  • Forces you to prioritize important elements, creating an awesome UX

Use multiple CSS rules within the same media query

share|improve this answer

If you are creating the structure for future web app development then go with mobile first approach. For the second question, I work it out as (just a snippet from my work) -

@media all and (max-width: 420px) { section, aside, .col1, .col2, .col3 { float: none; width: auto; } } @media all and (max-width: 978px) { header, footer { display: none; } }

You can further style it as per the requirement. If the styles are common across multiple elements then I combine them as that reduces bytes for processing and then follow that with CSS specificity rules to generate element specific style.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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