Print this page|
How Accessibility Makes Your Site Stand Out in a Pixel-Dense Age
With high-definition displays becoming the norm on computer and mobile screens, web developers need to ensure that blurry text doesn't hinder readability of site content. James Herndon offers pointers.
“What comes after HD?”
The most likely answer to this question is something called Quad-XGA, which boasts a resolution of 2560 x 1440. High-definition displays, by comparison, are typically 1920 x 1080. Such a pixel-dense display is exciting for A/V enthusiasts to contemplate. But the rapid proliferation of pixel-dense displays is far less exciting for web developers, who must fight to stay ahead of the problems that these new displays can create.
One notorious problem for web developers is the way in which pixel-dense displays can enlarge content that wasn’t designed to be seen at such a high resolution. This makes the content appear blurry, and many site visitors will assume that the blurry content is old, and therefore out of date — and they’ll make the same assumption about the site itself. Users of the iPad 3, for example, which currently boasts the most pixel-dense screen on the market, frequently open site pages that look like this:
Image: Blurred text image on high-resolution display
Blurry text on a high-res display might seem like a new problem, but in fact it’s an old problem that accessibility advocates discovered years ago. In 2008, The World Wide Web Consortium made the following recommendation: “If the technologies being used can achieve the visual presentation, text [should be] used to convey information rather than images of text. The image of text can be visually customized to the user’s requirements.” In other words, because text is more easily scaled than an image, you should always use text instead of an image of text if you can. Your image might look great on a standard display, but on a quad-XGA display, things could get ugly.
Developers are becoming more aware of this issue, and they’re doing what they can to anticipate display problems. Microsoft, for example, in developing Windows 8, has identified an ideal zone for the three general classes of resolutions (standard, HD, and quad-XGA), in which text and UI elements won’t be blown up to blurry proportions or shrunk to inconveniently small sizes. Windows 8 thus allows a wider variety of web content to look its best.
This post has been reprinted with permission from Equal Entry.