Proposal: Move Media Queries from CSS to HTTP

Martin Wolf in reply to my reply to his earlier post on Bandwidth Media Queries:

So I could show a small image on an iPad 3 which is on LTE, but a big double sized image on an iPad which is on wifi.

I still believe Bandwidth Media Queries are a bad idea, but I do believe that bandwidth is an important factor in the user experience. However, I think that detecting the bandwidth is a wrong solution for a right problem. We want to provide content that fits and loads fast on the users device and network. As I mentioned in my previous article, in practice it is not possible to determine the real bandwidth the user currently has, we can only estimate it by detecting the network the user is currently on. Martin mentioned that he does not want to mess with the users data limit. This might be a problem in Germany and some other countries, but if I am in Austria and have a good 3G connection I want to view the full image, not a shitty JPEG with 50% compression. If you truly want to serve the best image for each device and connection you have to do something like this:

  • (country: 'de') and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 2) and (max-bandwidth: 15Mbps) { // shitty JPEG with 50% compression }
    Retina iPhone in Germany on a 3G network.
  • (country: 'at') and (max-width: 640px) and (-webkit-min-device-pixel-ratio: 2) and (max-bandwidth: 15Mbps) { // good JPEG }
    Retina iPhone in Austria on a 3G network.

You have to repeat this for mobile devices without a retina display, for iPads, for iPads with retina display, for notebooks, for notebooks on a 3G network and so on. Probably you will end up with hundreds of different media queries. That is not practical.

As a web developer I do not even want to deal with the display size of the device and I want for sure not have to deal with the bandwidth the user has and the network the user is on. That is like developing web applications in C instead of PHP or Ruby.

Here is a proposal:

CSS seems to me the wrong place to deal with hardware related features. I suggest: Remove media queries. Instead of media queries add native support for grids to the standard. Additionally there should be properties to define how the layout should be resized. For example, there could be a property to define that it is ok to display this column beneath the previous one if the device is to small to display them side by side.

Second of all, we should move the part of delivering the right image to the web server. If devices would send a HTTP header like X-MAX-WIDTH: 640px the web server could determine the which image to serve. It could even dynamically call a tool like ImageMagick or a PHP or Ruby script to resize the image. This is very similar to the Adaptive Images technique, although instead of hacking it together using cookies (which breaks if the browser prefetches images) it would be supported natively and therefore it would work. One small problems remains, that if an user opens an image explicitly in the browser he probably wants to view the full version, not the version optimized for mobile devices. Therefore the browser should additionally send a X-EMBEDDED: 1 header which signals if the image is embedded in a HTML page or requested explicitly.

I don’t like media queries because it requires me to deal with low-level hardware stuff instead of creating a great user experience on every possible device. As a developer I can not test and optimize my website for each new phone or tablet. Thus I want to be able to trust the browser vendors that my website will look great on each new device the produce

One thought on “Proposal: Move Media Queries from CSS to HTTP