Pixel Perfect ppi

6 Sep 2011 - 3:08pm
1 year ago
4 replies
820 reads
DerrekRobertson
2010

Fellow Designers,

What is the best way to design icons for multiple devices? Different devices (Andriod, Windows Phone 7) have different screen specs - each phone has a different pixel-per-inch resolution.

By what method would one ensure that icons look crisp across devices with different ppi?

Thanks!

Comments

6 Sep 2011 - 5:02pm
Adam Korman
2004

Unfortunately there isn't really a good answer without actually testing on screens of various resolution/pixel density. If you just want to get a sense of general sizes/proportions, you can set the PPI in graphics programs like Fireworks and print screens at 100%. But, that's not really going to help you evaluate the crispness of icons. For that, you'll need to look on actual devices.

That said, ppi differences aren't a new problem (laptop & desktop monitors have been anywhere in the range of 85-120ppi for years). It's probably every 50-75ppi that the difference is noticable enough that it might have an impact on design. You might want to pick one representative device at each of a few points on the spectrum:

  • ~100ppi: typical desktop/laptop screen (21.5" 1080p monitor, most 15" laptops)
  • ~150ppi: lower-end small devices and higher-end large devices ... an older-generation iPhone or iPod touch is 163ppi
  • ~200ppi: mid-range and older high-end phones ... HTC HD2, HTC Evo, HTC Desire HD are all 217ppi
  • ~250ppi: there a bunch of devices in the 220-270ppi range ... Google Nexus One is right in there at 252ppi
  • >300ppi: not many devices up at this end (right now), but an iPhone 4 or iPod Touch 4 gets you there at 326ppi
Regards, Adam

6 Sep 2011 - 5:25pm
DerrekRobertson
2010

Thank you Adam.

9 Sep 2011 - 5:28am
Yohan Creemers
2008

Quircksmode by PPK is a good source for various aspects of mobile web development:
http://www.quirksmode.org/mobile/

- Yohan

11 Sep 2011 - 10:29pm
Bruce Randall
2008

If you want your icons to look perfect across devices, you need to create the icons at different resolutions and serve up the appropriate graphics based on the screen resolution. Depending on what devices you want to support, you will need a diffrent number of versions of each graphic. Also beware that depending on the deign, you may also need different graphics for portrait vs.landscape on each device.

Syndicate content Get the feed