Making Sense of CSS Media Queries
Most developers recognize the need of having a mobile and a desktop website that look different. Screen size and use-cases (which are especially fewer and widely different in a mobile site) are different. Nevertheless, the idea of building just one website, which automatically adjusts to different resolutions, is attractive to many developers. A lot of developers have bad memories of the notorious Browser War Era, when building a website was a matter of extricating from the mess of different desktop browser versions. So, developers tend to like the idea of a single site (and codebase), users can visit with a variety of devices, getting a different experience each time.
From a developer’s perspective, a multi-view website is made out of a single codebase plus different formatting and graphics. Therefore, developers tend to welcome the promise of CSS Media Queries—one codebase, one set of pages, and some browser magic to pick up different CSS style sheets. Unfortunately, it’s not as easy as it seems.
Introduced with CSS3, Media Queries, is a browser feature. In a nutshell, a media query is an expression that, once processed, selects the CSS style sheet to apply to the current page. Here’s an example:
media=”only screen and
(min-device-width: 320px) and
Once placed in a webpage, the previous markup links the specified CSS file; but only if the current browser view—intended as the rendering surface of the output device—is between 320 and 480 pixels. By having a few of the preceding elements, you can optimize the rendering of any page to devices of different screen size.
As you can see, the expression has no explicit check on the type of browser, whether mobile or desktop. All that matters is the effective width of the screen at a given rendering time. In spite of appearances, this statement is a bad one as it highlights the limited range of CSS Media Queries. It works (well) only if your problem is fitting some data into a smaller or larger real estate. On the other hand, CSS Media Queries are primarily a solution for desktop sites when they are resized dynamically or perhaps, viewed through a large-screen tablet or smart TV.
The extreme flexibility of CSS Media Queries also makes it compelling for smartphones and mobile in general. But mobile has different (and critical) aspects to consider. In mobile, it is key to minimize the amount of data/markup being downloaded. You don’t want to just tell the browser to resize a 400×400 image to 100×100 via a different CSS width attribute. You want to download a smaller image to save bandwidth. Likewise, you don’t want to just tell the browser to hide some HTML blocks to save space. You don’t want to download any markup that is not going to be displayed.
So, the dominant factor in mobile is, saving your bandwidth by downloading exactly what you need. You just download what you are going to use, no more no less. This has nothing to do with Media Queries. In mobile, the first step is arranging a server-side layer for detecting the capabilities of the user agent and picking up an appropriate HTML template. Next, if the template needs some rearranging as, e.g., the user rotates the device then—at a parity of information to download—opts for a media query to switch CSS file.
Media Queries are a tool, not a native solution for the mobile web.