Lewis Nyman dives into the problem with multiple pixel densities across web capable devices and investigates the mysterious disappearance of our old tools, absolute CSS units
Responsive design is hard.
Taking on a multitude of varied devices with one interface is a serious undertaking. CSS3 width media queries enable us to adapt our interface for different screen sizes. There are still many other variables across devices that affect the usability of our interface.
For anyone unfamiliar with the ins and outs of pixels density, you're forgiven. Just imagine all the pixels you had on your 800x600 CRT monitor from the 90s but crammed into a 4-inch pocket device. That density is great if the screen is less than an arms length away. Matt Braga wrote a great summary just before iPhone 4 launched with the retina display.
Pixel density, the problem
Touch interfaces can be beautiful things. Removing the proxy of a keyboard and mouse brings users closer to their content, allowing them perform the actions directly as they would in real life.
In order for touch interfaces to be delightful, they must first be usable. One basic requirement is that all touch targets be big enough to be comfortably tapped by an index finger or thumb. Most touch-based user interface guidelines recommend a minimum touch target size between 8mm and 1cm. How do we ensure touch targets stay over this minimum size when the pixel density varies?
How do native apps solve multiple pixels densities?
Android developers are treated to a unit that is unique to Google's OS. The Density Independent Pixel deals with device fragmentation so developers don't have to worry about it.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. – Android developer documentation
iOS developers – who didn't have to worry about multiple pixel densities until the iPhone 4 was released – are recommended to use points instead of pixels to allow retina displays to scale the measurement by a factor of two.
Web design 180 – are points our silver bullet?
Remember the pt unit? Remember how it was abused again and again? Points are a print measurement! They have no place in web design! I remember reading countless times as the industry attempted to educate itself as it does so well. I've shared this point of view many times myself, font sizing in points is inconsistent. In our modern context, let's re-brand 'inconsistent' as 'responsive'. A density independent unit is exactly what we need. We can use pt, in, cm, mm and pc units to keep our targets touch friendly everywhere ... Right?
Right?
Wrong
Or: How browsers learnt to violate the spec and mislead developers
Try measuring this page on your phone, tablet, or desktop computer. Confused? So was I. Check out the styling on Github, it's pretty simple. I've also posted some photos of how the units render on a few devices in the gallery. I'll post any photos you send of the test page working on your device. Send them to me in a comment or via Twitter.
Deal with it today
Scott Kellum covered similiar ground in the article "A Pixel Identity Crisis". He demonstrated how some devices scale pixels up and down to try and achieve consistency on pixel based sites.
He also offered up a solution that detects and adapts to these devices by using the non-standard "-webkit-device-pixel-ratio" media query. You can view a code example on Github.
It's great that we have a solution to get around this issue right now. It's a shame it's messy and complex compared to simply setting the size in absolute units and it's very future friendly. You're going to have to keep coming back and adding more media queries to cope with new devices with new pixel ratios.
Deal with it tomorrow
It's easy to moan about our situation when we find it not to our liking. Really easy. So let's do more of it. We have the platform and the incentive to get what we need.
Give us the tools and we will finish the job. Sir Winston Churchill
Browsers shouldn't tell us what to do, we tell them what to do. Browsers are only good if developers utilise them well. Internet Explorer recently demonstrated a perfect example of the power of web developers. Microsoft recently announced that Internet Explorer would auto-update to the latest version. I have no doubt this was due to web developers actively dropping support for older versions and leaving those few users with a crummy experience.
