em or px for Media Queries? (13th November 2012)

(In response to Alastair Campbell’s blog, In Defence of Pixels.)

I think the simplest method is to use pixels, and leave it to the manufacturers to get the ratio right.

— Alastair Campbell

Yep. I remember that. We expected and encouraged UAs to adapt our pages to meet their user’s context and preferences. People forget so easily!

Device manufacturers are the only ones to know their device and their audience before launch. It’s their decision but it must be based on the expressed and observed preferences of their prototype users.

Try-hard coders can add several lines of proprietary code to turn off some of the lies. That makes things a bit more predictable and lets websites put more faith in the true capabilities of the device.

Websites Must Stay Cheap

The ~1,000,000 web developers worldwide won’t have time or budget to use media queries at all. Let alone get into any level of detail we are discussing.

Most web pages assume they are being displayed on a desktop monitor. Getting those sites working well is the 80% solution. A new device has to crack that to become popular, way before it tries handling the myriad approaches to ‘responsive’ layout.

“The Problem is Choice”

Although the default is 1em = 16px, users can customise that to any value. They can also set a minimum font size, which I’ve seen in iOS and WP7. This breaks layouts which have any limits on available space - basically any layout.

With that in mind, using em for the size ranges we choose in media queries has some neat side effects. I’m almost convinced that The ems have it. Almost.

True Lies

These issues manifest as cross-platform compatibility issues due to the necessary lies UAs use in their CSS renderer. (And what they report via the DOM.)

Things like how large the viewport is on smartphones is usually wrong. It’s deliberate, though, so the plethora of fixed-width ‘iPhone-friendly’ sites fill the screen better.

It’s a hard decision manufacturers take due to this another type of Legacy Content Problem. Web developers try to do cross-platform compatibility but only coded for the device in their hand. Sadly it means percentages have unexpected results due to the assumptions of legacy content.

Spoilt for Choice! (22nd November 2012)

Alastair replied and I followed up on the points he raised.

Part 1

As you and I both know…

Mobile browsers usually adjust minimum font sizes by default.

Firefox provides a menu item to make zooming only adjust text size. (Like the old versions used to.)

User style sheets let users control text size.

…and more besides, no doubt.

My strategy is the same as it always was: Let users choose whatever settings they want, them make the design respond and reflow to suit. You probably do the same.

There are various techniques to try and accomplish this. We can do way more than 5 years ago.

em-based media queries have the potential to do this for a slightly wider range of user preferences. That’s a good thing.

I’d want to see the challenges of this approach first-hand before I’m totally convinced. We should always remain open-minded to better techniques, though.

Part 2

Text size is available directly from the menu in IE9.

Individuals can roll their own solutions, akin to user stylesheets but using different technologies. For example, Safari on iPad text size bookmarklet. These often don't work well, so it's probably a mistake for browsers to remove this feature in the first place.

Another small point...there are more than 5 web browsers which are allowed to use the Internet. Lots, lots more!