I have bad eyes. Really bad eyes. So even though I wear glasses, often I find myself needing bigger fonts. On my Chromebook that means that I browse with the zoom set to 125% by default. And I’ve been noticing some bad things in your media queries. We need to talk about that.
But let’s talk about font sizes first. Or if you’re already up to date, jump to where I get to the point.
Relative font sizes
Over the course of the past few years, us webdevelopers have been told over and over again to use relative font sizes. A pixel is a pixel (well not really, but that’s beside the point here), and using them forces your visitor to try and read things in a certain size they may not be able to handle. So we use
ems and percentages that scale along with whatever font size the user needs.
Most browsers have a default font size of circa 16px. If you have a sidebar for example that has a width of 160px, you could write exactly that, or you could use
10em – aka “10 times the fontsize this element has”.
Now if a visitor wants to see it all a bit more clearly and they set the font size to say 20px, you can guess what happens: the sidebar that had its width declared in pixels stays at 160px wide, but the one that uses
em will now span 200px. The contents still fit in exactly as they did before zooming.
After the relative font size trend came the responsive design trend, and it’s still going strong. Where we got away with making pixel-perfect designs in times past, often served with a “best viewed in x screen resolution”, nowadays it’s all about adapting your design to the size of the visitor’s browser. And that’s where media queries come in.
Responsive design and media queries go hand in hand. In our stylesheet we query the device or browser size, and if it falls below (or above) a certain treshold, we apply some additional styles.
So we build a site in a big screen first*. Say it has two columns, one 640px (40em) wide for content and another one 320px (20em) for the navigation menu. Then we size down the browser until the site doesn’t look good anymore. In this case that’s at 960px, at which point the site is wider than the screen.
We add some styles in a media query for
min-width: 960px in which we tell the browser to do things differently. We could put that navigation menu above the content instead of next to it, for example.
This all works quite well, but here comes the problem: this breakdown at 960px only works at a zoom level of 100%. It has become a magic number.
* Some build for the small screen first and then size up, which has it’s own merits, but hat is a discussion that I don’t want to go into now.
Using relative media queries
Think of it, with the zoom of 125% like I use by default, all these relative elements get bigger. The font size is now not 16px but 20px. The sidebar grows to (20px * 20em = ) 400px. The content column is 800px. This means that the page will start breaking down at a width of 1200px (or 60em), but our media query doesn’t know that yet. Between the screen widths of 1200px and 900px, your site will not look good.
So to make a long story short, when you use media queries in pixels, you’re not being fully responsive. Using
ems will make sure that your media query adapts itself to your font size or zoom level.
What would breakpoints be relative to? Em would mean ppl with large font settings could get a layout meant for smaller viewports, wich could provide a suboptimal user experience. What would you suggest?
I disagree though. The whole idea of responsive design is to serve an optimal user experience, no matter the screen size. If I’m serving someone a layout that was built for smaller screens because they are zoomed, I’m not providing a suboptimal experience at all, I’m doing them a favor. Stubbornly showing them the bigger version even though it doesn’t fit in their screen would be providing a suboptimal experience, I’d say.
(This is why it’s also important to not hide content for smaller screens, just re-arrange it. Some website makers seem to think that “mobile” users need less content, but since you can never guess their intent anyway this is a bad practice in itself.)
Some additional notes
Zooming and font size
ems in the media queries seem to be based on the browser’s font size, not on that declared in your stylesheet. Even if you set your font-size to 12px at the html element and then use relative sizes onward based on these 12px (as made popular by many reset stylesheets), the media query will use your browser’s font size of ~16px. What this means for websites with a “change font size” button that affects the document’s font size I’m not sure. I have yet to test this.
The zooming that most browsers use nowadays is not just enlarging font-size, but making everything bigger. Come to think of it, it’s kind of strange that everything grows (even the pixel-based elements) but the media query’s pixels stay the same. Except in one case:
To my total surprise, IE9 seems to be the only browser so far that actually scales up the pixel-based media queries automatically when you zoom in. Kudos, IE9! Luckily, that doesn’t mean em-based media queries don’t work, so no worries. Use them for the other browsers and IE9 will still handle them equally well.
Practice what you preach
While I’m writing all this, I’m aware that my website is not yet reflecting my stance, so go ahead, zoom in and see for yourself what’s going wrong. I have plans to re-write the CSS entirely, but there’s never enough time. You know how it goes.
Last of all, please let me know what you think. I might have overlooked some consequences of using relative media queries (although I tried to at least test for side-effects), or maybe the whole premise is broken, but unless you tell me so I’ll start using ems.