Explore our Email Marketing and Marketing Automation Toolkit

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

Author's avatar By Expert commentator 23 Oct, 2014
Essential Essential topic

Understanding the pros and cons of Retina screens in email design

eye-phone retinaChildren 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.

load-times-forklifts

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
Author's avatar

By Expert commentator

This is a post we've invited from a digital marketing specialist who has agreed to share their expertise, opinions and case studies. Their details are given at the end of the article.

Recommended Blog Posts