We have been doing some research this week into creating graphics for the new iPad retina display.
Essentially the retina display has a huge pixel density allowing really sharp graphics, the problem is that most 99.9% of website graphics are made for a quarter of the pixel density.
The new iPad (or iPad 3) has a display resolution of 2048 x 1536 and to achieve this each standard pixel size has been divided into 4 parts (see this on Apple’s website for more info – http://www.apple.com/ipad/features/) The results are simply amazing and the clarity of graphics, photos and text are massively improved over a normal screen.
When looking at a website on the new iPad the text is often very clear but the new pixel density means the graphical elements often look a little blurry due to their lower resolution.
We have noticed this is the case for most websites, however some (such as Apple and Google) have set a Media Query to spot if a user is viewing their website on an iPad 3 and then serve up graphics with twice or four times the pixel density.
We have also done this for our website (but only the logo bar at the top of the page for now) and the results are good – a nice clear logo which only loses clarity if you really zoom in a long way.
So what did we do?
Firstly we needed to redo our logo bar in twice the resolution. This was quite simple however we needed to re import the high-res graphics to make sure they didn’t blur as we doubled the pixels. (we use Fireworks but Photoshop or similar is fine)
Originally our logo bar at the top of the website was 980 x 95 so we set the canvas size to twice this – so 1960 x 190, then re imported each graphic until it was an exact replica of before but twice the size.
Then we needed to set a Media Query in our CSS to detect if a user is using an iPad 3 and then serve the new high-res graphic if they were – the below works well:
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { // your CSS }
And the results?
Its hard to show your the true results unless you are using the new iPad but the image below if clicked shows the new clarity of the logo area (the other images need re-scaling too but hopefully you can see the difference)
This is going to be a lot of work for just a few users?
You might be thinking that there is no way you are going to be resizing every single graphic of your site just for these specific users? Well you are probably right for now, and if you look at Google for example they have only really re-sized their logo and Apple have re-sized a few of their glossy graphics (especially on the iPad section) and their navigation bar. But if the rumors are true Apple’s next suite of products including the iMac, are likely to come with retina displays so these users are likely to grow very soon.
