smashing-ebook-8

(Grace) #1

talk about highly custom, graphic-driven apps that need a fair amount of
work to take full advantage of the Retina display.


While not strictly a resolution-independent technique, using a fluid layout
can help an app grow to take advantage of a larger window or screen by
adding padding or by changing the layout dynamically. A lot of Mac,
Windows and Linux apps use this method, as do some websites.


This is partially how Apple handled the difference in resolution from iPhone
to iPad — a lot of UI elements are the same pixel size, but padded to make
use of the extra screen real estate. The status bar is a good example of this.
It works because the pixel densities of the iPhone 3GS and iPad are similar
(163 ppi vs 132 ppi).


Fluid layouts work when the change in density is minor, but aren’t any help
with the iOS non-Retina to Retina display transition (163 ppi to 326 ppi).
The image below demonstrates what would happen if an iPhone app was
simply padded to cater for the higher resolution display of the iPhone 4.
Buttons and tap areas would be the same size in pixels, but half the physical
size due to the higher pixel density, making things harder to read and to
tap.

Free download pdf