Making Sense of CSS Media Queries

ago 20, 2012 by     No Comments    Posted under: Mobile Solutions

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:

<link type=”text/css”
      media=”only screen and
             (min-device-width: 320px) and
             (max-device-width: 480px)”>

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.

Dino Esposito

CTO of a company that provides software and mobile services to professional sports, Dino is a well-known ASP.NET expert who has written several popular books, including Microsoft .NET: Architecting Applications for the Enterprise, Programming Microsoft ASP.NET, and Programming ASP.NET MVC, all for Microsoft Press. His latest book, Architecting Mobile Solutions for the Enterprise has just been published by Microsoft Press and is available for sales.

More Posts

Follow Me:

Got anything to say? Go ahead and leave a comment!