Retina Display

This post is the first in my three part series on future proofing your website. I am writing these posts specifically for my clients. The three subjects I want to raise are: Being Retina Display Ready, Being Responsive and having a Cookie Policy. Out of the three this is probably the least crucial but is still something you need to be aware of.

Again we have Apple to thank for shaking things up just like they did a few years ago when they took the decision to not allow their devices to support Flash. Apple first introduced their Retina Displays with the iPhone 4, they then appeared in the iPad and now in their range of Mac Book Pros (only in the higher end ones). With the recent release of the iPhone 5 the amount of users using Retina Displays is only going to grow and no doubt other manufacturers will follow Apple’s lead or at least develop their own equivalent.

So what is a Retina Display?

Not to get too technical a screen is made up of tiny squares known as pixels, these change colour to form the display that you see. What Apple has done with the Retina Display is make these pixels smaller so they can fit more into the same space. The result of this is a much sharper image with greater clarity. It’s pretty amazing really that the iPad has a resolution of 2048 x 1536 which is more than my 37inch HD TV. In basic terms a Retina Display has 4x the amount of pixels per inch than that of a standard screen or monitor. The pixels are so small that the human eye can’t see them hence the name.


So why does this matter to my website?

The effect of this is that graphics designed for traditional monitors can look a little blurry (pixelated) when viewed on a Retina Display. There are ways around this of course. Firstly we can detect when someone is using a Retina Display and serve up higher quality images as well as this there is a growing trend to use less graphics in general. Not less photographs but less images for buttons, backgrounds and gradients etc that can now been created programatically the advantage of this is that they can scale up without loosing definition.


What would we need to do to support Retina Displays?

So if you choose to support Retina Displays then I would go through each page of your website, adding higher quality images when necessary and replacing images with programatically generated content were possible. Whether you choose to do this right away is really your decision but you at least now have the information to make the call. You should also look at your website analytics to see how many users are coming to your site using these devices to help you make this decision.

If you want to discuss this in more detail or would like help in making sense of your analytics please either call or email me.