CSS Media Groups

HTML & CSS
1

I’ve read allot, studied and had some very helpful dialogs regarding media queries but I feel I’ve a bit to go until I ‘have-it’ as it were.

What I’m need to understand is (one of many things) what groups to break my queries into. With the mass of different sized screens available, and not wanting to write a query for each and every possible size… I have realised that I’ll have to settle on groups of sizes to write queries for.

Not knowing what the sizes are… here is an example of what I’m thinking…

<link rel=“stylesheet” media=“screen and (max-width: 300px)” href=“hand-held.css” />
<link rel=“stylesheet” media=“screen and (min-width: 301px) and (max-width: 480px)” href=“iphones.css” />
<link rel=“stylesheet” media=“screen and (min-width: 481px) and (max-width: 1024px)” href=“computers.css” />
<link rel=“stylesheet” media=“screen and (min-width: 1025px) and (max-width: 2000px)” href=“tvs.css” />

OK…bad example but I’m sure you know just what I’m getting at. I’m interested just how other experienced designers are grouping their media queries and what the thinking is behind it. I’m all at sea with this but the cogs at last are starting to turn. Also if anyone can paste a link to where I can get sizes of mobile devices and TV’s…that would be helpful.

I also am rather perplexed by the needing to have orientation in a query (iPhones etc…)…why not just have another size in a query? I feel it is important get a good understanding of this (media queries)…when the penny does eventually drop I can pen some meaningful notes that I can refer to when required…but as yet, I’m not in a position to do so.

God bless.
Karl.

2

There is another option which is much cleaner… include your media queries within a single CSS file. If you’re aware of media queries you might be aware that using at-rules (like @media or @print) you can target your CSS code for various things within a single stylesheet. In this case you do the same except with the media queries. Therefore rather than tonnes of CSS files and loads of HTTP hits, you can add as many as you feel you need, all hosted within a single file. Remember though: not all mobile and handheld devices recognise CSS3, and therefore your media queries will be ignored for them, so that needs accounting for.

Below I’ve included an example:


@screen {
	...
}
@screen and (max-width: 300px) {
	...
}
@screen and (max-width: 768px) {
	...
}
@screen and (max-width: 320px) and (orientation:portrait) {
	...
}
@screen and (max-width: 480px) and (orientation:landscape) {
	...
}
@screen and (min-width: 481px) and (max-width: 1024px) {
	...
}
@screen and (min-width: 1025px) and (max-width: 2000px) {
	...
}
@media print {
	...
}

Regarding orientation, think of them as two separate widths. You should consider this in the media query (I’ve adapted your examples in the above). The first is your normal @screen (default style), there’s also one at the base for @print (print friendly styles). The second is your default handheld one, then there’s the iPad one (768px - even if it’s tipped on it’s side), then the iPhone (portrait and landscape tilted), and finally your screen and TV ones! There’s loads of different device sizes you could account for so it’s better to ensure your site uses a liquid layout (so it’ll reorganise only if necessary). Hope it’s helpful! :slight_smile:

3

Thank you Alex…that is the kind of information I was looking for, it is very helpful having the logic explained behind it too.

I shall paste your post into a TextEdit file and keep it locally to refer to.

Mobile devices that do not cope with CSS is a problem, I’d thought that I could just let the code run fluid for handheld until a CSS rule caught it for more able devices such as an iPhone, then computers etc… Yet I was reading on a Nokia site that many of their smaller devices will default to their own style unless you specify a CSS rule of ‘handheld’ thus needing a CSS rule from the very beginning!

More experienced coders as yourself must have in your minds, devisions of screen sizes when you write your CSS, divisions that catch individual mobile devices in groups. Are the sizes you gave in your last post ‘generally’ the sizes you would usually work on?

I very quickly get lost with large CSS sheets, for that reason I have been experimenting with having a control sheet containing many @import links to multiple sheets…

@import url(“reset.css”);
@import url(“layout.css”);
@import url(“elements.css”);

Will this present me with any difficulties regarding mobile devices??? As you can tell I am stumbling about here trying to find my feet…but your previous post has given me plenty to think upon, maybe within the next few days I’ll be feeling more stable! :slight_smile:

Regards Karl.

4

include your media queries within a single CSS file.

This does mean all devices will load all css all the time (and hopefully would then just skip over the parts it either does not understand or sees does not match the listed params). Depending on how large the css file is, this may not be desirable. And, if background images are called with @media queries, some devices may be calling all those images (the weird thing I’ve found… some user agents will ignore everything in an @media query if they don’t understand the add’l params like width… but others will just load them all and ignore the params).

@importing lots of separate files is the same as requesting them all separately in <link> tags… as far as calls to the server are concerned. For stuff you want everyone to grab like your reset styles, consider having them all together in one document. Every additional request to the server is a (small or large depending on the user’s connection) penalty.

“handheld” I find to be almost useless as a media type. Many phones ignore it/don’t know what it is. Those who do may or may not mix those styles with screen styles. The smartphones using webkit and Opera Mobile that I’ve been able to see so far always try to download “screen” styles and use those.

5

Thanks Stomme poes.
Very informative.
So…are you in favour of simply one CSS stylesheet or are there occasions when you would use @import?

I think I’ll skip the handheld then and just leave things fluid until they reach say iPhone screen dimensions and are caught in my first CSS rule…does that make any sense or am I lost in the woods somewhere?

I appreciate all this advice…I certainly need it and will feel much more confident when I have a better understanding of it, mainly because as I see it - it is fundamental in the thinking when first writing meaningful html markup.

Regards, Karl.

6

So…are you in favour of simply one CSS stylesheet or are there occasions when you would use @import?

I am usually in favour of a single stylesheet (as far as things like resets, layout and typography… I don’t separate those things out in my stylesheets anyway… instead, I follow the HTML source order and write “down”. This means finding all the styles for any one particular element just means looking for that element in the styles… using / or ctrl-f).

The one time I used @import, it was because I had a small stylesheet used by many pages on the same domain, while the rest of the css between them was different. Still, it probably would have been smarter to just re-copy the shared styles into the separate/different stylesheets, but I was relying on caching. Users would cache both the smaller sheet and the main sheet, so when they got to a page with totally different styles, there was only an additional call for the new stylesheet. But a call is a call, and sometimes that matters more than a slight increase in actual filesize by repeating styles.

What Alex says here though will indeed only count as a SINGLE request… while each @import is a whole new file and a whole new request, @media is not. So there is an advantage bandwidth-wise to use this technique (instead of multiple <link> tags in the header).

And here, he means that what’s supposed to happen is, user agents who do not understand the bolded part
@screen and (max-width: 300px) {
will (should) ignore the entire styleset inside.
This includes IE (6-8). You can have IE send its own request for a file with just the desktop styles and “screen” only.

I think I’ll skip the handheld then and just leave things fluid until they reach say iPhone screen dimensions and are caught in my first CSS rule…does that make any sense or am I lost in the woods somewhere?

I said I think handheld is useless… but I mean that as “by itself”. If I have a stylesheet that’s intended for mobiles I’ll add “handheld” to the list of media (for those phones/devices who DO read that) and not have it listed in styles I have for desktops. If you have a wide array of devices to test on, you could see who listens to “handheld” and who uses it exclusively, who adds it to “screen” and who ignores it entirely.

Yet I was reading on a Nokia site that many of their smaller devices will default to their own style unless you specify a CSS rule of ‘handheld’ thus needing a CSS rule from the very beginning!

I read something similar, which is why I did start adding it to my media list in my “basic” styles, which are, as you were thinking of doing, very fluid and mostly state things like colours and typography (also used on the desktop versions but they’re inheriting from the small basic sheet). Normally I would not separate those kinds of styles, but here I’m doing it for different @media.

The smart phones like iPhone kinda have large screens… older phones may have but 100px in (portrait) width. Not sure how far you want to go in support there.
iPhone4 considers itself to have a resolution of like 960px or so, so if you can get ahold of one of those you may want to see which styles that one shows (make it obvious: set different ugly background colours to the body in each media query styleset).

You might want to bookmark ppk’s Mobile pages: he’s got a crapload of them for testing from Vodaphone (while at dinner, he just pulled out like 6 mobiles from his various pockets and put them on the table!).

I should add this to my sig.

7

Stomme poes thank you so much for a well structured and helpful post. I need to put this into practice and evaluate it in the real world when building my sites.
I run a Mac with Parallels which means I can test all browsers including IE6-8 and I also have the ‘iPhone simulator’, but I lack the ability to test not only hand-helds and the likes of Blackberries but TV’s too…and that slide-show link you gave suggests that hand-helds seem to be one of if not the biggest surfers of mobile devices. Thus I think I’m either going to have to hunt for a hand-held simulator or forget about testing for it.

I’ve certainly got allot to learn but talking to you guys saves me from months of stumbling around in the dark, thanks.

Appreciated, Karl.

8

Karl, just following up from my previous post, you may find this article I wrote a while back useful. It has some additional best practices when designing for mobile devices and includes a wide range of links with the various emulators that exist (so you can freely test on devices like the blackberry).

http://sixrevisions.com/web-development/mobile-web-design-best-practices/ :slight_smile:

9

Thanks Alex.
That is the kind of info I really need, I’ve just printed it to PDF and will keep it for reference. Very well presented.

Appreciated, Karl. :slight_smile: