With the arrival of the iPad 3, what was previously not such an issue for web sites/apps on the iPhone4s, is now a full page low-res nightmare. Thanks to the 264ppi 2048×1536 pixel screen the whole web is now in low resolution.
On firing up Safari on the iPad, the following issues are apparent:
- All graphics are pixellated
- Graphics using large areas of white look a bit ‘muddy’
- CSS white looks much brighter than images white
- The pixel density is 264ppi – the iPhone4 is 326ppi
So what to do? Well the first thing to do, is look at any ‘graphical’ uses of images. If it can possibly be expressed in vectors, then consider using Scalable Vector Graphics (SVG). Here is A List Aparts guide to using SVG
Next is using CSS to serve up a higher resolution image, or to serve a new image for retina browsers. THis is a little tricky. In native apps, you supply two images – one ‘filename.png’ and the retina version, which has the characters ‘@2x’ after it – in this case ‘firstname.lastname@example.org’. The system then serves the correct graphic depending on what device you have. Web apps are trickier.
Aral Balkan offers a tidy solution:
Here are some great links to help you: