Designing for iPhone 4 Retina Display:
Techniques and Workflow
Marc Edwards
The iPhone 4 features a vastly superior display resolution (614400 pixels)
over previous iPhone models, containing quadruple the 153600-pixel
display of the iPhone 3GS. The screen is the same physical size, so those
extra dots are used for additional detail — twice the detail horizontally, and
twice vertically. For developers only using Apple’s user interface elements,
most of the work is already done for you.
For those with highly custom, image-based interfaces, a fair amount of
work will be required in scaling up elements to take full advantage of the
iPhone 4 Retina display. Scaling user interfaces for higher detail displays —
or increasing size on the same display — isn’t a new problem. Interfaces
that can scale are said to have resolution independence.
In a recent article, Neven Mrgan described resolution independence: “RI
[resolution independence] is really a goal, not a technique. It means having
resources which will look great at different sizes.” If it’s a goal, not a specific
technique, then what techniques exist? How has Apple solved the problem
in iOS?
Fluid Layouts
While apps that take advantage of Apple’s native user interface elements
require a lot less work when designing for the Retina display, we’re here to