Media queries revisited

Paul O pointed me towards using media queries to target webpages for mobile devices.

In the examples in How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing Magazine the images are displayed using background-image.

If I have a webpage with a banner at the top which is a JPG and then two <div> side by side in the middle where one of the <div> contains another JPG and then a footer, is my only option to create a separate page?

Nope, you can hide the div elements with CSS.

And to prevent uncessary downloads, set the images as background images of divs in CSS instead of inserting them as <img> elements. You’ll probably need to then set the necessary widths of the divs.

Can you explain what you mean by unnecessary downloads?

And just to be sure I understand you correctly, I would use display:none; to hide a <div>?

Avoid having different images for the mobile view but just change their size or have them as background images. You can scale foreground images but sometimes they don’t look too good when squashed.

e.g.
img.test {max-width:100%!important;height:auto!important}

That would assume they were sized to fit their container

For webkit you can use background-size to size background images to fit the background if needed.

To hide stuff you can use display:none if you don’t want it to exist on the page.

Can you explain what you mean by unnecessary downloads?

There’s no point in having someone on their cafe wi-fi at however-many-euros-per-kb downloading 300kb of scripts, a few 1MB background images and whatever else that they’re not even going to display anyway (because you’re using media queries to hide stuff on smaller screens). The mobiles will download all the stuff you reference in <link> tags, and if you do it wrong, ppl on crappy connections are going to feel like they’re on dial-up trying to access your site.

One way people prevent “unnecessary downloads” is, they let the server sniff the user agent (which is tricky at best, as browsers lie about which user agent they are… and your server will then need a list of either mobiles or desktops so that it knows which type of content to send) and sends a version of the requested page to mobiles that simply does not have the scripts and images etc.

But another way is to build backwards: make a simple, working version of your page, and start with a basic stylesheet that styles for mobile/smaller screens.

On top of that you can use media queries to add more complex styling, floats, background images, and even javascripts! to wider screens (though yeah, all of this IS assuming small screen == crappy bandwidth and larger screen == T1 connections, which is NOT always true).

Now I have to check ppk’s site (quirksmode.org, where he’s been doing many tests on mobile browsers), but browsers will make a request for a background image even if they don’t display it, IF they downloaded a stylesheet. What I’m not sure of is, will they download the stylesheet (but not run it) even if it’s for a media query they do not match?

I think the premises aren’t quite right.

The first two main categories of devices are:

  1. Understand media queries

  2. Don’t understand media queries

not mobile, PC, color etcetera.

If media queries are used as attributes of the link element, it’s somewhat useless to try and filter devices this way. Devices that don’t understand media attribute will ignore the attribute, but load the css anyway.

This means you also need to put in the css files the @media query to fix it, but the CSS files will still be downloaded by less “smart” devices, while the declaration will be discarded.

A background image is requested only when the element or pseudo-class is actually used. Remember sprites.

Devices that don’t understand media attribute will ignore the attribute, but load the css anyway.

If they do not understand the attribute, they should not be downloading the stylesheeet (according to the specs). I can’t verify phones, but IE follows this. But then yes, the “problem” then is that devices who don’t support media queries get your basic/mobile version (if you started with that) or your desktop version (if you started with that).

A background image is requested only when the element or pseudo-class is actually used. Remember sprites.

Hm, you’re right, I just checked. While display: none stuff still loads, if the element in the base stylesheet does not call images, they are not loaded. yay.

I think the premises aren’t quite right.

The first two main categories of devices are:

  1. Understand media queries
  2. Don’t understand media queries

not mobile, PC, color etcetera.

Good point.


To the OP, if you haven’t seen these slides yet:
Rethinking the mobile web

Good catch.

This one should’ve been a question: [All] Devices that don’t understand media attribute will ignore the attribute, but load the css anyway?

Devices that don’t support media queries:

  • IE8-: we have the CC for it
  • mobile: the problems here are somewhat unknown to me. I guess, problems are getting smaller in number, since mobile market is improved, and older devices get replaced faster.
  • mobile: the problems here are somewhat unknown to me. I guess, problems are getting smaller in number, since mobile market is improved, and older devices get replaced faster.

It’ll be the browser here moreso than the device (exception would be the newer meta tags like device-width etc).

So, my boss’s phone runs Winblows Mobile, which, yes, has IE6 as its browser. But, he could (and did) download Opera.

So, with IE6, no media queries. On a site where I did it the other way around (started with desktop and added styles behind a max-width media query), Opera loaded the mobile stylesheet who’s only available because it understands media queries. Again, I think doing it that way is easier to break than building from simple to whatever (which can be thought of as mobile to desktop but without those actual restrictions).

It’s probably accurate to say if the user agent supports media queries, the device will have no issue (in rendering… I’m not saying this is the same with Javascript/Touch events, device width measurements, etc)