It’s been nearly a year since the release of the iPhone 4, and much to the dismay of the tech community, it’s still the only product in the Apple lineup with a high pixel density ‘Retina’ display. While the much-hyped feature drew universal praise when the device was unveiled, some were wondering the following:
- Would consumers see this as a compelling feature?
- Would competitors follow suit, establishing critical mass for high PPI displays?
- Would Apple eventually launch a Retina display for iPad or Macbook Air? Or would another manufacturer release an ultra-high resolution tablet or laptop?
In a little over 10 months time, high PPI displays are currently everywhere in mobile. Walk into any carrier retail store, and chances are that the featured smartphones already feature high-resolution displays. Those that don’t have them likely will within an iteration or two.
Retina display for Mac will be here sooner rather than later. Apple’s yet-to-be-launched OS X Lion includes built-in support for the Retina display, along with ultra high-res desktop wallpapers and icons. It’s a decent bet that we’ll eventually see some variation of the Retina display across the entire product line. And of course, as happened in mobile, the rest of the industry will follow Apple’s lead, effectively eliminating the concept of a default dpi standard.
How can designers and developers prep for this change?
Embrace resolution-independent design practices for the web, not just mobile. Up until this point, designers and developers who haven’t worked in mobile have been able to avoid the extra hassle of prepping content for high PPI displays. But with the classic notion of the ‘pixel’ fading away, it’s a good time to reiterate the importance of resolution-independent design practices across the board. Specifically:
- Minimal use of bitmaps (reserved for photography, video, and illustrations)
- CSS3 for buttons, gradients, shadows, and lines
- HTML5 canvas and SVG libraries for complex and interactive graphics
- @font-face for custom type
- Vector graphics for interface elements
Start to use Scalable Vector Graphics (SVG) on the web. With Internet Explorer 9 finally getting onboard with the basic SVG feature set, it’s time to adopt vector graphics on the web (for real this time). 
Unless you are designing for a specific audience using certain browsers (in which case you may need fallbacks), now is a great time to consider using SVG for:
- Icons
- Background images
- Custom type treatments
- Logos and mastheads
Get comfortable with Adobe Illustrator. This advice was doled out around the web when the Retina display was first introduced, and one year later it rings more true than ever. Photoshop is still the industry standard for producing web graphics, but as the web steers towards resolution independence, so should the toolkit.
Photoshop users: keep all of your source files in vector format for as long as you possibly can. If you must use Photoshop (full disclosure, we love it and use it daily at Intridea), it’s a good idea to create your interface elements as vector Smart Objects, or import them directly from Illustrator. This way, your elements can scale when you resize the source files without effectively losing resolution.
For time being
The current process of designing for high PPI displays is a bit of a hassle, but it’s hopefully transitional. Designing for the Retina display with targeted CSS and high-res bitmaps is already intensive. Throw in the eventual release of high PPI displays on tablets and laptops and it’ll be painstaking.
There are a number of established design practices for supporting high PPI displays. Many of the tutorial articles written soon after the iPhone 4’s launch are still relevant (here’s a great list of some key takeways).
