Issue with resolution is an eternal topic for handsets. Designers cannot avoid the resolution difference on various model screens and aspect ratio display compatibility.

iPhone 3GS and iPad screen has similar density resolution (163 ppi and 132 ppi), so basic adaptability issue can be solved by tiling interface background.

iphone-ipad-screen

iphone-ipad-screen

If directly copy iPhone 3GS photo to iPhone 4 Iris screen, the physical size of interface element will be reduced to ¼ of the origin, so both the image quality and the ease of operation reduce as a result.

iphone3gs-iphone4

iphone3gs-iphone4

Nowadays, In order to implement interface physical size resolution independence, we use pre-rendered method. Client side product needs to define interface independently according to various models; website product needs to differentiate versions, through recognize user agent to point to different URLs.

To ensure a higher flexibility and lower budget redraw, it is recommended to use vector path tool in <a href=”http://www.verecom.com.au/”>Photoshop for visual design</a>. For more detail, please refer to article ‘<a href=”http://www.verecom.com.au/”>Designing for iPhone 4</a> Retina Display: Techniques and Workflow’.