In the spirit of free and open source software the central topic of this site is to make my research open to the public. My methodology is freely available via the internet, along with any data or results extracted or derived from them. This permits collaboration, which anyone may participate at any level of the project. So feel free to contribute on Github.
Homepage » Resolution independence
- iPhone: 320x480, 3.5 in,164ppi
- Palm Pre: 320x480, 3.1 in 186ppi
- Palm Pixie: 320x400, 2.63 in, 194ppi
- T-Mobile G1: 320x480, 3.2 in, 180ppi
- MyTouch 3G: 320x480, 3.2 in, 180ppi
- HTC Hero: 320x480, 3.2 in, 180ppi
- Motorola Droid: 480x854, 3.7 in, 264ppi
- Nexus One: 480x800, 3.7 in, 252ppi
- HTC Desire: 480x800, 3.7 in, 252ppi
- Nokia N97: 360x640, 3.2 in, 229ppi
- Nokia N900: 800x480, 3.5 in, 266ppi
- Apple iPhone 4: 960x640, 3.5 in, 326ppi
- the new iPad
- e.g. the current 27” iMac is 109ppi
- CSS 3 (CSS Hat for e.g. gradients etc.), CSS to render UI Elements
- Use vectors or “Smart Objects”” in Photoshop
- @media queries (e.g. target HD/Retina Displays @2x)
- @font face or icon kits
- detect network speed
Things to consider
- If you want your applications and web sites to look beautiful on the iPhone 4’s new retina screen, you are going to have to create high-resolution versions of your bitmaps and/or use vectors.
- You basically have to design liquid interfaces (and interface elements) for your apps.
- SVG can help in creating resolution-independent designs.
With CSS3 media queries you can then build Web sites with completely different CSS files based off the pixel-ratio of CSS pixels to device pixels, including higher res artwork as necessary.
This approach also degrades gracefully, since you can specify the lowres CSS file and then higher res CSS files inside media queries that will be ignored by browsers that don’t understand them.
What “true” Apple Retina Displays would look like…
||Screen Size (Inches)
||Retina Res (Apple)
||True Retina Res
||2772 x 1848
||2048 x 1536
||5968 x 4486
|11-inch MacBook Air
||2732 x 1536
||5184 x 2916
|13-Inch MacBook Air
||2880 x 1800
||5872 x 3670
|15-Inch MacBook Pro
||2880 x 1800
||6096 x 3810
||3840 x 2160
||7408 x 4168
||5120 x 2880
||9120 x 5130
Source: Cult of Mac