Hi Folks, I'm trying to work out, or really confirm, a best practice for creating responsive pages while keeping load times down to a minimum.

I've seen examples where peeps are designing primarily for desktop and adding more styles / stylesheets to cater for mobile. While it works it seems like the approach is back-to-front - there's an unecessary amount of downloading taking place on mobile devices and it goes against the principle of mobile first.

 

I would have thought a better approach would be to load certain base styles that are incorporated for all views - font types, colours etc. then use conditionals to load specific stylesheets. Just to use the iPhone as an example... I wouldn't use these measurements in a real world scenerio, but as a proof of concept...

 

 

<link rel="stylesheet" media="screen" href="baseStyles.css">
<link rel="stylesheet" media="screen and (max-width: 320px)" href="mobilePortrait.css">
<link rel="stylesheet" media="screen and (min-width: 321px)" href="mobileLandscape.css">
 

 

 

If you were looking at the page in portrait view, would the browser initally download mobileLandscape.css too? Or, would it only be downloaded when the phone was flipped around to landscape view?

 

I've tested the HTML and it works fine, but because the html / css is only brief I can't tell when mobileLandscape.css is being downloaded. Is it downloaded initially but just not applied, or does the browser download it the moment the browser has a minimum width of 321px?

 

Assuming the css is long enough to justify separate style sheets, if it is the former, and this approach is good, would you control the download of mobileLandscape.css via jQuery?

 

I'm just more interested in minimising download / bloat and as the title says, having a best practice.

 

Thanks

The general best practise is to have everything in one stylesheet, unless your extra styles are heavy enough to warrant another http request. I don't know the numbers (when xkb becomes enough to warrant another request), but after gzipping, minifying, etc., the extra styles don't add up to much. So unless you have a large amount of code in your other stylesheets, better to just add them to the global.

 

Also, the media queries only fire if needed, which you can test yourself by opening chrome network console and seeing the requests when you resize the page: http://codepen.io/jhealey5/debug/zcBAG . This is not the case with all browsers though I believe, some will download the extra stuff regardless of if conditions are met. iPhones may be one of the culprits, I can't remember. There was discussion from chris coyier on this if you can find it.

 

See how much extra page weight the extra styles are and if it's small, don't worry about it. Speed issues should always be tackled with most return on investment. So unless your gzipping, minifying, concatenating, compressing images, efficient coding, etc, first then you can worry about the extra 5kb in your stylesheet, otherwise focus on the previous aspects. Most of the time an extra http request is the worse option, so I'm led to believe.

 

eD: this may be of help to you http://browserdiet.com/

Edited May 3, 201412 yr by evu