Introduction
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.
hi,
my website uses many images that have been taken from camera phones. These are scaled in photoshop and doctored to produce the best quality possible.
I have been thinking about having some professional photography for high quality images.
How will retina display effect the poorer images that have been taken on the camera phones? Will retina display improve these or make them look worse?
If it will improve them, then do you believe that paying for a photographer to take high quality images will be a waste of money considering the varying size viewing screens and mobile devices that are now being used?
thanks, Alexandra
Unfortunately make them look worse but by how much is a matter of opinion. Professional photography is crucial to creating a good website so I would recommend this anyway whether you are optimising for Retina or not.
Photography is often undervalued. I’m working on a website at the moment for a company who don’t have the budget for a pro photographer and its such a shame as the photos I’m using were taken with a phone and just don’t do the product any justice.
Fascinating! Never heard of Retina Display before. When will all this extraordinary progress end! I had noticed that my partner’s new laptop offers a screen image that is so incredibly lifelike and pixel-less, but I hadn’t wondered beyond that. I guess it’s in the new Retina format. Having just revamped my own website with enormous difficulty, I don’t look forward to “having to” make it Retina-compliant! It’s going to have to be a bit blurry.
Thanks for the info.
Well I wouldn’t worry too much at this stage David, it’s not the end of the world but its something to be thinking about for sure. I think the best way to combat this is to just use less images, not for photographs of course but for icons and other graphics. The best way is to use CSS to create your buttons and fonts for the icons. You can even create your own svg files into custom fonts opening up even more possibilities.
Thanks for reading. My next post is SEO related so be sure not to miss that one.