What is Retina ready?
Retina ready refers to a screen on a device that has a high enough pixel density that the human eye can’t make out individual pixels. The iPhone 6 and iPad 3 are Retina ready. Although Apple own the term “Retina Ready”, many Android devices now have the same or a higher resolution.
A Retina display device, displaying a website that serves Retina ready images (higher resolution) will display sharper images and brighter, more vivid colours.
But a Retina display device serving non Retina images (low resolution) will result in poor quality images and a less than optimal user experience.
So what should we be doing to ensure that websites are Retina ready?
Don’t use images for web elements.
CSS3 allows you to create elements such as buttons, speech bubbles, drop shadows and gradients without using images. This means that these elements will be displayed as sharp and as crisp as the screen is capable of displaying them. The added benefit is that CSS3 elements load much faster than images.
Provide high resolution images.
If you have images on your website then you can use retina.js, which is a small script that replaces any image on your website with the high resolution version if found on the server. For it to work properly, you need to name your HiDPI images according to Apple’s “@2x” naming convention. For example, an image on your website called
my-image.png will be swapped with a high resolution version called
The WordPress plugin WP Retina 2x can be used to create these HiDPI images and to display them accordingly.
Use Icon Fonts or SVG.
Icon fonts are just fonts. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which means they will look sharp and clear on any resolution. They have become hugely popular with web designers, including myself, however there are some concerns over their accessibility. Although this can be improved as I explained in my post “How to make Font Awesome accessible”, there is some debate growing over whether Scalable Vector Graphics (SVG) may be a better choice.
Read The Great Icon Debate: Fonts Vs SVG for more information.
The future is clear.
As more of us browse the web on Retina ready screens, those websites that look crystal clear will stand out and will provide the best user experience.
if you would like a Retina ready website please get in touch with us.