smashing-ebook-8

(Grace) #1

Currently, there are three iOS resolutions:


-^320 × 480 (iPhone/iPod touch)
-^640 × 960 (iPhone 4 and iPod with Retina display)
-^768 × 1024 / 1024 × 768 (iPad)


In a few years, it seems highly likely that the line-up will be:


-^640 × 960 (iPhone/iPod touch with Retina display)
-^1536 × 2048 / 2048 × 1536 (iPad with Retina display)



  • Some kind of iOS desktop iMac-sized device with a Retina display


There are significant differences between designing iPhone and iPad apps,
so completely reworking app layouts seems necessary anyway — you can’t
just scale up or pad your iPhone app, and expect it to work well or look
good on an iPad. The difference in screen size and form factor means each
device should be treated separately. The iPad’s size makes it possible to
show more information on the one screen, while iPhone apps generally
need to be deeper, with less shown at once.


Building Designs That Scale


Building apps for the iPhone 4 Retina display involves creating two sets of
images — one at 163 ppi and another at 326 ppi. The 326 ppi images
include @2x at the end of their filename, to denote that they’re double the
resolution.


When it comes to building UI elements that scale easily in Adobe
Photoshop, bitmaps are your enemy because they pixelate or become
blurry when scaled. The solution is to create solid color, pattern or gradient

Free download pdf