Designing for iPhone 4’s Retina Display
Hmmm, ok so the new iPhone 4 is pretty amazing with some really amazing enhancements on the previous model such as the new high resolution retina display which now doubles the resolution to 640×960 pixels.
The screen resolution on Apple operating systems (OS) has always been superior to other OS’ especially in internet browsers (if you use a PC and haven’t seen the difference go to the Apple store and see for yourself!). The difference between the great quality of the screen of iPhone 3GS to amazing quality of the new iPhone 4 is just astounding! Think of crystal clear and then think clearer than that!!! This new level of resolution in the retina display is great for iphone users, especially for reading small type in emails and websites…
BUT… it does cause some headaches for iPhone developers. Why? The main problem is that now with double the resolution this effectively, in pixel terms, doubles the amount of pixels required to fill the screen. One redemption from Apple is that the sizes are now referred to as ‘points’ instead of ‘pixels’. On older iPhones a point=1px, on the iPhone 4 a point=2px; so as long as all measurements are points, you should be right!
What about images and type, you ask! The Apple iOS automatically pixel-doubles the image to display at the correct size. Text also will display at the correct size as type is not a pixel based glyph. However, to take advantage of the crystal clear retina display you wouldn’t want to just double the pixels by scaling the image up, which is where the work around comes in to basically have two sets of images for the two different generations of iPhones. Creating two sets of images with different resolutions can be problematic in the design stage, and this is where I see a shift about to happen in web/mobile web design to take on a more vector like appearance as we have to start accommodating som many different sizes that need scaling up and down from the same artwork. The only form of artwork that is capable of not degenerating from such scaling is the vector format, effectively Adobe Illustrator (not Flash though!!!).
Yours in pixel-pushing