3

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.

3
  • responsiveboilerplate.com
    – Reactgular
    Nov 27, 2013 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, 2013 at 15:42
  • I would recommend you to hire a frontend designer. They exist for this purpose and if you are tight on your budget , hire some interns to do it for you. Tackling every frontend work would only decrease your productivity as backend dev and result might not be satisfactory. Feb 8, 2015 at 12:21

3 Answers 3

1

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.

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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