I've been font-end developing for about 5 years now, and I'm starting to get into using more responsive layouts. I've touched on using media queries so as the browser window gets smaller, the layout shifts. This is, of course, using a fluid layout. Take a look at the follow CSS code:

 

@media all and (max-width:480px) {
  @import url('mobile.css');
}
@media all and (max-width:720px) {
  @import url('ipad.css');
}
@media all and (max-width:1020px) {
  @import url('desktop.css');
}

 

The file names and dimensions are arbitrary. My question, up for discussion, is whether or not something like this is a good idea, efficient, useful, etc. The CSS files would almost all be identical, with the main layout differences. I figured it would be easier to keep everything organized if they were all separate, instead of having the media queries placed throughout the main stylesheet. Or could I have one main stylesheet, and then the imported styles would overwrite those default styles?

 

What do you think? Are there some best practices I should be aware of when it comes to building this sort of responsive sites?

I too am new to responsive layouts and have been learning about them over the past few months. Currently I'm using a responsive Framework for all of my websites and the media queries are all in a single CSS file at 86kb (Compressed). A single 1mb file will load quicker than ten 100kb files so it would probably be more efficient for you to keep all of your CSS in a single file. Use your media queries to only overwrite the things you need to change for each so you're not repeating yourself. Split your css file into 3 with comment separators. The top part being the default styles and the media queries below will overwrite them.

 

I hear a lot of people saying 'design for mobile first' when it comes to responsive design but it's not something I do. I work with the desktop version first so the user has the full experience of that site and then cut bits out that don't quite work as the size goes down so that only the necessary information remains.

I'm relatively new, but have got to grips with it now (I think). I tend to just ram it all in one CSS file rather than importing. Keeps it simple, and you never really need to change hundreds of elements if you plan it right.

 

I can provide some examples, if you want...

 

Edit: I also design for the largest first (1920x1200px) and work down, but that's just how I roll. Thinking about designing the other way round makes my brain hurt.

Edited January 6, 201313 yr by hodephdesign

Hodephdesign, Can you share example, I want to review for my knowledge. Thanks in Advance

Thanks for all the input. Sounds like it's best to start designing for a large screen, and work down from there. And just have the media queries at the bottom of my main CSS file. I can still set it up like I have, but instead of importing other files, just list out the CSS that needs to change. I figured that was probably the best practice, but was just thinking of other options.

 

I notice there was no denying that media queries are the best way to build a responsive layout, as opposed to a javascript solution. Would that be true?

 

@hodephdesign: if you could maybe send me a link to a responsive site you've built, I can check the code using Firebug, and see how you laid out the CSS file, that would be awesome.

It's only half-built, but my new portfolio site has some simple media queries! Only really large screen, laptop and mobile in use at the moment (at 1150px and 960px wide).

You don't need to use different stylesheets. The media queries probably only affect a few styles so you should be able to code them in the same stylesheet.

 

You can code for desktop first using max-width or mobile first using min-width. This is a tutorial for mobile first:-

http://www.html5rock...espeed=noscript

So you would code for a narrow width resolution and have media queries at the bottom of the stylesheet for wider resolutions.

Where the tutorial says "Large screen styles first - Avoid" and uses max-width, it means avoid this method and use the example below it.

Edited January 8, 201313 yr by Wickham

Building mobile-first is not the same as designing mobile-first.

 

You should definitely build mobile-first as it is far more efficient (you aren't writing any code to remove 'desktop' stuff) and you don't end up making a fluid layout into a fixed one and then making that fixed layout back into a fluid one. That's just silly.

 

Design is a separate issue, though I have to admit my preference is to design mobile-up too, it's far simpler and you'll end up writing a lot less css.

It's only half-built, but my new portfolio site has some simple media queries! Only really large screen, laptop and mobile in use at the moment (at 1150px and 960px wide).

 

Nice site. Very nice!