Retina Displays – Why you need to think about retina screens in your email marketing

Understanding the pros and cons of Retina screens in email design

Children of the (higher) resolution - Every time I see an article or advert about Apple’s Retina Display, I have to force myself not to dismiss it as marketing guff and consider the relevancy. Let me explain.

As an email designer, devices with a Retina display are a pain. When I open an email I have lovingly crafted they make my pin-sharp graphics look a touch blurry, and that’s guaranteed to upset any designer.

In this article I look specifically at email design for retina displays, register for the free webinar with my colleague Darren for more insight on mobile design for Email.

What is a retina screen or display?

First it’s important to understand what a 'Retina' screen is. First and foremost, the name is just an Apple marketing term – Samsung, Sony, HTC, in fact all smartphone manufacturers are now producing devices with high PPI (Pixels per inch) displays.

Any screen with a pixel density high enough that under normal viewing conditions the individual pixels cannot be distinguished is essentially 'Retina', although it should be noted that Apple’s Retina devices handle images differently to any other high PPI device.

In a nutshell, the PPI value is determined by the resolution of the screen and its physical size. The ‘normal viewing conditions’ also vary between devices and their use. I want to explore these details in more depth in my next post.

What happens if you don't design your emails for retina screens?

Scalable graphics, photos and text look super sharp on these screens. Unfortunately, images created at the smallest possible size with mobile devices and data connections in mind don't look quite as sharp as they should. In fact, Apple Retina displays in particular have a particular way of handling and displaying graphics that ironically make 'normal' graphics look worse than any other high PPI screen, where the slightly fuzzy edges are barely noticeable.

The current workaround is a @media query – a line of code that tells devices with certain parameters to do different things. In this case, telling devices with a pixel ratio of 1.5 or greater (with a few other rules specified to cover different devices) to display an image double normal size.

@media (min--moz-device-pixel-ratio: 1.5),

(-o-min-device-pixel-ratio: 3/2),

(-webkit-min-device-pixel-ratio: 1.5),

(min-device-pixel-ratio: 1.5),

(min-resolution: 144dpi),

(min-resolution: 1.5dppx) {

/*Show alternative double size image*/

}

This provides another image double the size for high PPI displays, ensuring everything looks as it should. Sadly due to limitations of the @media query code, it also means that every device that responds to the @media query itself (which includes all mobile devices) downloads the bigger image as well as the normal one. For an email with say 5 images, this is a 10 image download, 5 of which are double the size of the others. That’s a much longer load time, and could very easily be the difference between opening and ignoring an email.

But the fact is high PPI 'Retina' screens are becoming the norm on smartphones and tablets. Why? As technology improves and brands seek to distinguish themselves from their competitors they increase the number of pixels while the physical sizes stay the same, all in the name of sharper text and images.

Load times are so important that they’re still the overriding factor, but if you had a super whizzy message to give that would really benefit from it (say an iPhone app targeted at iPhone customers) then the extra wait might be worth it. As always, it’s down to your target audience.

Image/Source Copyright:NewZapp