Single VS Multiple Stylesheets in Responsive Web Design

Single vs multiple stylesheets in responsive web design

Stylesheets are always downloaded, regardless of the current media, whether it be screen, print, or 3D-glasses.

See: Why do all browsers download all CSS files - even for media types they don't support?

So with that in mind, keeping them all in one stylesheet will reduce http requests, where as separate stylesheets will always create more requests with no benefit.

Responsive webdesign stylesheet - single vs multiple files

I determined by measuring my particular code that avoiding HTTP requests was better than downloading extra gzipped CSS.

Use something like http://www.webpagetest.org/ to test both versions, this will give you a good idea of what's going on.

What am I missing about responsive web design?

So it looks as though you are doing everything right, I can see issues with your site but only at say 640px but 320px looks fine for me.

When I first started responsive designs I found this website: http://css-tricks.com/

I opened up their CSS stylesheet and studied it and found out how they did it.

For reference sake I would advise looking at the following links on how to do responsive design:

• Simple Responsive Images with CSS backgrounds - SmashingMagazine Mobile
• Beginner's Guide to Responsive Web Design - TeamTreeHouse.com blog
• Responsive Web Design - Learn.ShayHowe.com
• Build Basic Responsive Site CSS - NetMagazine.com

With regards to getting the Media Queries I would strongly advise looking here:

• Media Queries for Standard Devices

There is people I know who still use php scripts to determine the users screen resolution and then load a specific CSS stylesheet which personally I would not recommend but that is also an option.

I personally would try changing your CSS to include the following:

    @media only screen 
    and (max-width : 320px) {

        #div1 {

            width:100%;

        }
    }

The only way I have managed to get this working though is by either copying my whole CSS over again for that specific media screen or by only specifying the certain div's to change.

Remember you can re-declare the CSS styling for a DIV or CLASS further down the stylesheet

Hope this can be of some help to you.

stylesheets : 1 big one or a few bigones or several smaller ones?

Instead I would suggest you to merge the stylesheets in a single file and comment out the blocks accordingly, because your approach seems unfriendly, also, it will be a huge performance hit, as stylesheets will be requested everytime a user navigates a new page, thus increasing in http requests.

Also some of the core styles will be repeated on every page like resets, font sizes and families etc, so you must be having 2 on each page, 1 which will handle the base styles and other which are applied per page, instead merge them in one.

Particularly I follow this convention..

/* Core Styles */

* {
   margin: 0;
   padding: 0;
}

html {
   height: 100%;
}

body {
   min-height: 100%;
   /* Other stuffs */
}

/* Core Styles Ends */

/* Header Styles */

/* Header styles here */

/* Header Styles ends */

/* Home page styles starts */

/* Home page styles ends */

This way you can also use the styles across the pages, you don't need to repeat some on every page, for example font color, font size, h1-h6 styles etc

when a CSS file does not fit the media type HTML declaration, is it still downloaded?

No matter what the media says, it will be downloaded. You're better off using @media blocks inside your main stylesheet if the goal is to increase performance.

See:

• Why do all browsers download all CSS files - even for media types they don't support?
• Single vs multiple stylesheets in responsive web design

I'm not sure if this is a good or a bad thing, but considering your question:

When the page changes and now fits the query, will it download the file?

If this were the case, there's a good chance the user would experience some lag waiting for the CSS to load "on-demand".

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/

Fluid + Responsive OR Different Stylesheets for every screen resolution?

Not a question that allows a correct answer but here's my 2p/

If you are making it for a commercial market you are likely to find more customers I would suggest - just look at the sales generated on Themeforest for the responsive themes.

---

Related Topics