Why your next website has to be retina ready
You have probably heard the term “Retina” often enough in the commercials of the recent Apple products. They are by far not the only company betting on the horse of higher pixel density, but they’re the ones who came up with this peculiar, but now famous name. By now, most of the screens of Apple’s products are coming equipped with that feature. Let’s have a look at how that affects your web design and the planning of new projects.
Retina vs. HiDPI
First let’s make it clear: Retina is a rather unfortunate term, referring as it does to a part of the human anatomy. There is an alternative, which means the same, but puts it into a more comprehensible language: HiDPI. Unfortunately HiDPI is rarely used, as the market at the moment is being dominated by Apple devices using their Retina technology. So you could say: every Retina display is an HiDPI display, but not every HiDPI display is a Retina display.
Why does anything have to be ready for HiDPI?
If you are using an HiDPI screen you know. If you don’t, listen up if you care about the technical details: Let’s take the Retina MacBook Pro (rMBP) as an example. The display is specified with a resolution of 2880 x 1800 pixels. That’s a lot of pixels on 15 inches. Some people are already complaining about Full HD resolutions on 15 inch screens (1920 x 1080 or often x 1280), and stating that they can’t read the text properly. So adding another 3.4 million pixels is quite a big step. But here’s the catch: when you start up an rMBP, you do not see tiny fonts, nor do you have huge screen estate: the displayed content is scaled up four times. That means the screen estate on an rMBP feels like 1440 x 900 pixels, rather than double the amount on each axis (this scaling can be changed, but for now let’s look at the default setting). That implies that 1 pixel of the perceived 1440 x 900 consists of 4 pixels.
You don’t want that to happen.
How many people are surfing with HiDPI screens?
Unfortunately it’s hard to find out the exact numbers, as analytic tools don’t report them. But it is certainly a number which is growing rapidly. When you have a look at mobile traffic, which has grown 78% in the last year (from ~14% to ~24%), it’s obvious that it is increasing. Some websites have 30% mobile traffic and more. At the same time, more and more mobile devices come with high pixel density displays. And the trend is visibly moving towards ultrabooks and laptop computers.
The following graph shows the growth of the keyword “retina” on Google Trends.
(Out of curiosity we also added the term “HiDPI” to the graph, which you can see is not really relevant at the time of posting)
How to make Your Website Retina Ready?
This will be covered in more detail in a follow up post. For now, we’ll give you a brief overview of the two easiest methods.
1. Retina First Approach
Make your images double the size of how you’re planning to display them (e.g. 500 x 500 px instead of x 250 px), and scale them down via the img width and height in HTML. The obvious disadvantage is the higher file size and therefore longer loading time on non-HiDPI devices.
2. WordPress Plugin
If you’re planning a new website project at the moment, make sure to make it Retina ready from the beginning. If your project is already launched, you can still add the HiDPI support now, and we would highly recommend doing so. Having crystal clear images on your site makes it very appealing, and can give you an easy advantage over your competitors.
Let us know if you need any help!