Maveco
Maveco

 

Code.

Code RSS rss feed icon

Subscribe to the Maveco Code RSS feed.


 

Post

Preparing for Retina

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 ‘filename@2x.png’. The system then serves the correct graphic depending on what device you have. Web apps are trickier.

Aral Balkan offers a tidy solution:

How to make your web content look stunning on the iPhone 4′s new Retina display

And here is a Javascript solution:

http://retinajs.com/

Here are some great links to help you:

Optimising for High Pixel Density Displays.

Luke W – Designing for the Retina Display

Safari Developer Library – Optimizing Web Content

Flowz – CSS Image Replacement for iPhone 4 High-DPI Retina Display


Related External Links

Luke W - Designing for the Retina Display

How to make your web content look stunning on the iPhone 4′s new Retina display

Retina.js


Code - Similar Posts