Next-generation graphics displays, such as Apple’s breathtaking Retina on the iPad 3, are heralding a new era in mobile photorealistic imaging; boosting available color depth, pixels per inch, resolution and screen size — all of which can be easily taken advantage of by designers seeking a creative and quality edge.
According to Apple, the Retina display on its new iPad has a 2048x1536 resolution, with 44 percent greater color saturation, in the same 9.7-inch space as the previous iPad.
By incorporating design considerations for this lucrative audience into your current and future projects, you could be a step ahead of your competition.
“That’s four times the number of pixels in iPad 2 and a million more than an HDTV,” states the Apple website. “Those pixels are so close together, your eyes can’t discern individual ones at a normal viewing distance. When you can’t see the pixels, you see the whole picture…”
While the working color space of these displays may not pose an issue for designers accustomed to working with full-color (32-bit) images, the better depth will make things easier for mobile designers and others that are used to working with limited color choices and optimized web-safe palettes.
The PPI or pixels-per-inch of these advanced displays is also significantly higher than that found in traditional desktop computer monitors, which operate at 72ppi, as opposed to the Retina display’s 264ppi (the iPhone 4 hits 326ppi), but it’s that high resolution that will affect designers most.
This author, for example, is using 24” monitors at 1920x1200. Putting a “larger” size onto a much smaller (sub-10”) screen, can “shrink” text and graphics; making them hard to read and underscoring the value of specifying font size in em or points — rather than in pixels. Likewise, navigational elements such as buttons that are specified by pixel size will grow and shrink proportionately based on pixel density, creating problems for hi-rez screens where the user is expected to use fat fingers, rather than a precise mouse, to click.
Other design tips include using fluid layouts and targeted CSS media queries, such as “device-pixel-ratio,” coupled with a second set of images at twice their normal resolution, to boost forward compatibility.
Likewise, Apple displays now specify pixels as points, with a point being two pixels; for example, an HTML div’s single point border in iOS 4+ will show as two pixels wide. By specifying points as the unit of measurement in your CSS files, the correct size will be shown on all screens. Also, adding the “text-rendering: optimizeLegibility” CSS property, will allow Gecko and WebKit browser users to enjoy much smoother text on high-pixel density displays.
Although only a small percentage of your website’s audience may currently be using these advanced displays, the trend has always been towards better color and sharpness, so you can expect this number to only increase. By incorporating design considerations for this lucrative audience into your current and future projects, you could be a step ahead of your competition, while unlocking a new marketing opportunity.