CSS Media Query for Mobile is Fool’s Gold
Read the follow up article written August 21, 2013
Ethan Marcotte’s article Responsive Web Design has caught the imagination of web developers. Several subsequent articles have touted the CSS media query feature as a way to build mobile-optimized web sites.
Even I’m guilty of contributing to this meme with my article on CSS orientation.
Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false promise of a simple solution for designing to multiple screens.
The Short Version
Ferreting out the problems with CSS media queries for mobile devices is easy if you look at what media queries purportedly promise:
All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code.
The idea of adding more code—adding more to download—in order to optimize for mobile should be the first clue that this isn’t a good solution.
Core Assumption: Speed Matters More on Mobile
I’m going to point out several technical flaws with media queries. Nearly all of them rely on my belief that speed matters more on mobile devices.
That isn’t to say that we’re more tolerant of slow desktop web pages. Instead, that mobile is more likely to be used in situations were the speed of access matters more (urgently looking for a business) and under conditions (network speed, device processing power) that are less optimal for speed.
When designing for mobile, performance is a key consideration.
Letting the Browser Scale Images is a Bad Idea
Ethan’s article on Responsive Web Design relies on a technique he calls Fluid Images.
The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your html, but instead let the browser resize the images as needed while using CSS to guide their relative size.
This technique is a bad idea for mobile for a couple reasons.
Full Images = Unnecessarily Large Files to Download
The full image is downloaded despite the fact that it will only be seen at a fraction of the size on a mobile device. In the Responsive Web Design example page, the images are 330 x 345 pixels in true size, but when viewed on an iPhone, they are only ever seen at approximately 150 x 157 pixels.
The six images of characters from Sherlock Holmes that are included in the example page total 208K. Resizing those images and optimizing them reduces the total file size for all six images to 45K. That’s an 78% reduction in file size and download time.
|Original||Resized||K Saved||% Saved|
Downloading 162K unnecessarily on a mobile device is nothing to sneeze at no matter how good the mobile phone is.
Browser Resizing Can Be CPU and Memory Intensive
Yes, desktop browsers and iPhones have no trouble resizing images, but what about older or cheaper phones with less formidable CPUs? With this technique, we’re asking them to download larger images, uncompress them to their full size in memory, and then resize them to fit the screen.
Even Apple’s Mobile Safari documentation says “You need to size images appropriately. Don’t rely on browser scaling.”
Using Media Queries to Deliver Different Images Doesn’t Work
I know what many of you are probably thinking. So the fluid images technique doesn’t work. Let’s just use media queries to deliver different images depending on screen size.
There are two ways this can be accomplished. The first is to have image tags that are hidden by CSS. The second is to use CSS background images and switch the background image. Let’s look at both techniques.
Hiding Image Tags Using CSS Media Queries
The dConstruct site is beautiful. The site grows bigger as your browser gets bigger. The photographs come to life when you hover over them. It’s truly worth a look.
The large photographs of the speakers are placed on the page using image tags. The black and white images are a single sprite that is layered over the color photographs using CSS.
A CSS media query instruction is used to set display:none on the div containing the speaker images.
However, the iPhone still downloads the images even though they are not displayed.
There was a some speculation during the Big Web Show interview with Ethan Marcotte that perhaps the tools that were reporting what the browser was downloading were erroneously inflating the number of files that were truly download.
To verify that images are downloaded despite CSS media queries, I tested two different ways. First, I made a copy of a page using the responsive design onto a local server, loaded it on an iPhone, and then watched the web server logs to observe what was downloaded. Second, I set my iPhone to use my Mac as a proxy server so every request to dConstruct’s site was logged.
In both cases, it showed the image files are downloaded despite the fact that the media query has set them to display:none. This means that the iPhone downloads an extra 172K for photos that the user will never see.
Hiding CSS Background Images
Surely CSS background images will work better than image tags, right? Wrong.
I tested a few different combinations of CSS background images and media queries. What I found was:
- Using CSS media query to set display:none on an element containing a background image does not prevent Mobile Safari from downloading it.2
- Using CSS media query to override a background image with one created specifically for mobile results in both the desktop and the mobile image getting downloaded.4
Two methods that appear to work are:
- Setting the parent of an element with a background image to display:none.3
- Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.5
These two options mean that using CSS media queries isn’t completely impossible, but using the parent element to hide images and changing existing desktop CSS to add min-width declarations are significant changes to existing CSS. It isn’t going to be as simple as adding a CSS media query for mobile and calling your job done.
FWIW, it is this behavior of downloading images even if they are currently not displayed that allows us to have images show up in pull down menus and on other hover events without a delay while the image is downloaded. This is generally a good thing.
My first introduction to media queries was when we were asked to assist another web developer who had built a page that contained a Google Map on the desktop version, but the div containing the map was hidden on the mobile web version using a media query.
CSS Media Queries aren’t Supported Well
If you can overcome all of the challenges I’ve outlined above, you’ll find that CSS media queries are not supported by many mobile browsers. PPK’s compatibility table shows that even amongst modern smartphones, the support is spotty and inconsistent.
The picture is much worse when you decide to support older browsers.
If you choose to use media queries to provide a mobile version of your web site, you’re not only picking a poor solution, but you’re excluding a large number of mobile users.
People with modern smartphones may be the demographic you care about, but you should be make a conscious decision about what device classes you support.
Ignoring the Mobile Context
The promise of CSS media queries is that you can take your existing desktop web site html and add this additional presentation layer for mobile. Doing so ignores the fact that a mobile user may have very different needs than a desktop user.
There is a great quote from Brian Fling in his book on mobile design:
Create a product, don’t re-imagine one for small screens. Great mobile products are created, never ported.
Does your desktop web home page use geolocation lookups? Probably not. Should your mobile site home page? Quite possibly.
Separate Mobile Web Sites are a Good Thing
I know separate mobile web sites are a pain to develop. We have a lot of infrastructure to build to make the mobile web go, and I’m going to be writing more about that soon. But there are good reasons why we need separate mobile web sites.
During Ethan’s interview on the Big Web Show, some time was spent discussing how sharing links from the New York Times doesn’t work the way you would hope. If you send a link from the mobile site and someone opens it on their desktop browser, it is still formatted for mobile.
The conclusion drawn from this during the podcast is that CSS media queries might be a better solution because there would only be one URL, and it would work for both desktop and mobile.
Here’s some hard numbers to consider from a YSlow examination of the New York Times desktop and mobile home pages:
As you can see, the mobile web site has a fifth of the HTTP requests of the desktop version and is 583K smaller. That’s over 90% smaller and significantly faster on a mobile device.
(As an aside, HTTP requests are much more expensive on mobile devices than on desktop due to the latency of wireless network connections.)
I agree that the NY Times links should work, but the solution isn’t to take the bloated desktop home page and add more CSS code to make it mobile (un)friendly.
Some Good Uses of CSS Media Queries
There are some good uses of CSS media queries. If you’re building a discrete web application where you have more control and can make sure that the desktop web isn’t bloated, it can make sense.
Also, Ros Hodgekiss from Campaign Monitor wrote an exceptional article on how you can use media queries in html email to provide a mobile optimized layout. This is perhaps the ideal use case because when you send html email, you have no choice but to send a single html document regardless of what device the recipient will be using.
Responsive Web Design Still Rocks
Wait? Responsive web design still rocks? Hard to believe after everything I’ve written, eh?
I’m not talking about CSS media queries, but instead of the idea of building around a grid, planning your design for different screen sizes, and thinking about the modular building blocks and how they can be moved based on screen size.
That is the real gem in Ethan’s article. I hope we see two things come from his responsive web design piece:
- More desktop web sites that take advantage of fluid grids and CSS media queries to optimize for the multiple sizes of desktop screens. Media queries still make sense for desktop designs.
- More designers and developers thinking about design as modular even if it isn’t implemented with media queries.
I find his comparisons to responsive architecture to be fascinating and the designs we’ve seen using these techniques to be compelling. But the core mechanism used to accomplish them, CSS media queries, isn’t up to the task when it comes to mobile development.
No Silver Bullets
Developing for the mobile web is difficult. There are no simple solutions that make it easy to provide a great mobile-optimized experience. CSS media queries are a tool, but they are not a silver bullet.
This shouldn’t be a surprise to us. We now take our content management systems for granted, but it wasn’t always this easy for the desktop web. We forget how difficult it was to simply get Apache running properly.
During the last big wave of technology, we had a lot of infrastructure to build before we could reliably deliver quality experiences for desktop browsers. We’ve got a similar road ahead when it comes to mobile.
But no matter how difficult, mobile is worth it. The power of having information in people’s hands—no matter where they are in the world—makes mobile worth the extra time and effort.