Responsive Desgn - More Thoughts

As detailed in my post a few days ago, I'm planning out my sites on a 4 layout setup, (mobile, narrow, normal, wide). I'm not sure that's enough though, and I'm debating splitting mobile into two versions, mobile narrow and mobile wide. Or mobile landscape and mobile portrait.

I starting thinking about this when I had to change up the way my header looked at the high end of mobile down to the low end, and I ended up using a media query inside the mobile css sheet to do it. Which leads me to another point, how to apply media queries.

The first method is to apply them inside a css sheet. You'd link one css sheet to the webpage, then inside that sheet, you'd specify all the styling. Example (inside the css stylesheet):

#wrapper {width:1000px;}

@media (max-width:1050px) {

#wrapper {width:100%;}

}

The advantage of doing this lies in the fact that you can write less code. Styling which doesn't change can be written just once, only things that change have to be re-written.

However, this can get overly complicated. Trying to find the source of a problem can involve digging through the entire sheet, finding the styling on an element in multiple places.

The alternative to this is just creating entirely separate style sheets. Create multiple css files, name them mobile.css, wide.css, etc, and use media queries to link them in the web page. Example (inside the webpage file):

<link rel="stylesheet" type="text/css" media="(min-width:0px) and (max-width:660px)" href="css/mobile.css"/>

<link rel="stylesheet" type="text/css" media="(min-width:661px) and (max-width:1020px)" href="css/narrow.css"/>

<link rel="stylesheet" type="text/css" media="(min-width:1021px) and (max-width:1401px)" href="css/normal.css"/>

<link rel="stylesheet" type="text/css" media="(min-width:1401px)" href="css/wide.css"/>

Besides the opposites advantage and disadvantage of the first method, this method has another advantage which is loading speed. When a page loads, it'll only load the CSS sheets that it needs. If one is on a widescreen monitor, it will load only the wide.css. This takes less time than loading all the css, for every possible screen size.

This is the method that I'm using at the moment. There is one problem though, which is that the most common script for giving IE7-8 the functionality of media queries doesn't work with the second method. I'm trying to find a hack around it, and I'll post it here if I figure it out.