Today Apple revealed the third generation iPad with its Retina screen, bringing the most powerful mobile visual display to market with a whopping 326 ppi in its 9.7 inch space. Print resolutions typically range from 300 - 1800 dpi, which means that Apple has effectively brought mobile computing into that same realm, a significant step to say the least. There's no doubt that the e-reader experience on the iPad will be greatly enhanced, be it for books, magazines, or even PDF documents. And with a starting price point of $499 for its bare bones model, it's conceivable that the other tablet competition and dedicated e-reading devices like the Kindle and Nook could soon be in for a bumpy ride.
I've dreamed of this day for a long time; A design geek's dream to be sure. Five and a half years ago, in August 2006, I wrote a column for UXmatters, ruminating on the coming high definition screens and the opportunities and problems it presented for digital designers. At the time, it seemed a little crazy to consider displays in this way. And when I suggested that high def resolution would be a design concern for application designers, I didn't get a lot of takers. Although, to be fair, at the time, Apple was not the juggernaut it is today, and the iPad wasn't even a blip on the radar. The idea of widely available high res displays seemed far fetched at best. So, we'll chalk one up for accurate trend spotting and move on to the fun stuff — designing for this new environment. Here are my thoughts on designing for high definition resolution from that original 2006 column, with a few updates for 2012 and the third gen iPad Retina display.
Designing for the New High Res World
The visual requirements of low-resolution displays have both burdened and spoiled digital designers. The constraints of the 72-ppi screens of our laptops and desktop displays can be frustrating—blurry font rendering, lack of sharpness in photographs, and disappearing detail in graphics. People viewing large volumes of financial data—and other applications in which detail is critical—must often use multiple monitors or print out files. On the other hand, the low-resolution environment has been freeing for designers as well. Photos and other graphic elements—for example, a small JPG file—that would be completely unsuitable for print media might serve very well in the digital realm. But high-res displays will soon take away these limitations. With the Retina display for iPad, digital designers will face a whopping 2048 x 1536 screen. What will we do with 4x the detail of our current displays? High-resolution screens will allow us to chart data in new ways, including greater depth in financial data on screen; render finer lines in maps and illustrations of technical designs; and show greater detail in photographs and medical imaging.
Get Ready for Production Overload
The key to creating digital experiences for high def is understanding not just how to design for the extra screen real estate, but for the extra detail as well. The size of the screen is perhaps less important than the number of pixels per inch.
In high-definition television production, the planning of shots has more in common with film than with video. The production methods for a medium that records so much more data require a greater degree of care. So, it’s a safe bet that planning and constructing applications and sites for Retina displays will draw upon the numerous pre-press production rituals we designers commonly associate with printing. For example, blemishes and defects in photos are far easier to see in printed media versus on screen. High-quality reproduction of a photograph on screen requires a better grade of photograph at the outset. And the need for this high quality affects every link in the production chain — from lighting the location onward. These production rituals are not concerns for digital designers … yet. We should expect workflow changes as high-res displays force digital designers to maintain a higher degree of quality throughout their entire production process and increase their attention to visual details. There will be more emphasis on planning the visual aspects of a digital design to deal with the additional complications of higher resolution.
And there will, no doubt, be much learning by trial and error—seeing what established techniques will translate to this new display format. The arsenal of magic tricks designers possess for color correction, balancing, sharpening, fixing, and disguising defects in photographs, illustrations, and other bitmapped content will not work as easily or as well as they did in a low-res environment. Low-resolution displays hide a lot of sins. Just as HDTV exposes bad makeup jobs on actors and news anchors, so will the glaring spotlight of high-res displays expose photo touchups and graphic design sleights of hand. To make ready for the HD future, companies may force designers to revisit every single page of their Web sites or screen of their applications.
Vectors Are Your Friends
One design solution for high-resolution environments may be to present any non-photographic visual elements as vector data, such as the burgeoning standard of Scalable Vector Graphics (SVG). Since fonts are already vector based, they will easily translate to a new HD format—something our tired eyes can look forward to with eagerness. There will be tremendous benefits. It’s likely that reading text on your new iPad will approximate the print experience, with no font degradation, a sharper focus, and a reduction in the eyestrain, blurred vision, and headaches low-res displays often cause. We’ll have less difficulty reading long pages of content and be able to read online text more quickly and easily.
Changing the Face of the Interface
The advent of readily available mobile high-resolution displays will push the Web and application design forward in ways we can only begin to imagine. As high-resolution displays raise the bar for visual production, the key to creating great digital experiences will continue to be careful planning of our processes and designing for this new medium—to ensure both better-quality source material and elegant ways of displaying that material at different resolutions.