Email Design for the Macbook Pro with Retina Display

Alex Williams

3 minute read

After a month on my new Macbook Pro with Retina Display, “reading” about 300-400 HTML emails a day, I’ve got some early thoughts for you on the implications for email design on this new desktop paradigm. (Email Clients used for this post: Apple Mail, Outlook for Mac, Sparrow, and Webmail clients through Safari)

It’s not as bad as we thought.

When the Retina Display made it’s inevitable landing on the desktop in the new Macbook Pro, my first thought was not a positive one. Considering the limitations our draconian email client overlords have placed on email design, how could our emails look anything other than awful with an extra 3 million pixels thrown into the mix?

Well, to use my favorite backhanded compliment, it’s “actually not that bad”. Sure there is a blurriness to certain types of images (we’ll get to that), but the overall email experience doesn’t suffer. The snappiness of the solid state drive (Photoshop opens in 2 seconds!) actually seems to load the email faster, although I can’t prove that. It does feel that way.

Photographs suffer the least.

Real photography generally looks ok. Sure it’s not as sharp, but on many travel newsletters for example, it’s hard to tell a difference. Photos of products, people, places, etc… come out largely unscathed. I’m expecting testing results of retina optimized photography-based images to fall in the ‘no difference’ bucket on fractional factorial tests.

Custom graphics suffer the most.

Where the Retina Display does the most damage is in custom graphics, especially layered images with graphical text on top. Logos, headers, navigation, & hero images can look bad to downright awful in some emails I have seen.

Banner ads and image buttons definitely stand out as the most affected across the board. Remember that famous Steve Jobs quote: “We made the buttons on the screen look so good you’ll want to lick them.”? Let’s just say that you wouldn’t want to lick the vast majority of image buttons I have seen. And visually busy banner ads, never the focal point of an email to begin with, can be almost unreadable.

Every standout custom image I have seen has used the double resolution effect, where you use host a 2x version of the image, but put the 1x dimensions in your HTML. This technique is only recommended for programs with large Mac & iOS email user bases, but not for every image, as the download weight skyrockets for mobile.

Web text & HTML/CSS look absolutely gorgeous.

When you first get a Macbook Pro with Retina Display, the first thing that really takes your breath away is how amazing Typography looks. It is so crystal clear, that everything else looks blurry. I would start reading something, then before I knew, I was turning my head like a dog staring deep into the text. I’m not kidding, it looks that good. HTML/CSS looks amazing as well.

Programs that, as we strongly recommend, have reduced their reliance on image-based structures are the clear winners in my analysis. HTML/CSS buttons and sectional headers with Web text on top of HTML look more like images than images do. Large headlines in Web text grab you out of your seat. Now sure, we have limited font options for Web text in email, but hey, that’s email design. You use the tools at your disposal. For what it’s worth, Arial has never looked better than on the Retina Display.

Don’t panic. Yet.

As Apple inevitably brings the Retina Display to their entire ecosystem, competitors are undoubtedly trying to catch up and add higher resolutions to their devices as well. Apple gadgets also have the friendliest email clients for email designers. One can only hope that Google’s acquisition of Sparrow Mail will have a positive effect on Gmail’s increasingly poor HTML email support as well. Microsoft is clearly tuning us out, as the new Outlook, is the old Outlook with a new skin. And I’ve stopped waiting for the innovation Hotmail promised us 2 years ago. I do believe that new Yahoo! CEO Marissa Mayer will definitely bring some innovative ideas to Yahoo! Mail, as she did with Gmail. The future looks still looks bright for email design, with Apple leading the way.

In my opinion, the Retina Display is a positive thing for our community. Use your non-existent spare time to keep testing, hacking and experimenting to be prepared as this trend gains momentum. And while Apple has only sold 4 million of these machines so far, the numbers will only go up. And optimizing for what is currently a small audience, could soon be a competitive advantage as we see more data.

As we continue to test, we’ll keep posting more on this subject here.

Happy emailing!

Trendline Interactive

Ready to send better messages?

About the Author(s)

Alex Williams

SVP, Practice Lead, Cloud Consulting. As one of Trendline’s first hires, Alex built out Trendline’s full service email practice. He is a true full stack email marketer – from strategy and creative to technology and analytics. Widely recognized as an email strategy and creative expert, as an SVP at Trendline, Alex brings his passion and creative problem solving skills to Trendline clients. Alex has had a hand in just about every account that’s ever been on Trendline’s roster. He is a frequent keynote speaker on topics related to design, technology, and their intersection in the inbox. Follow Alex on Twitter

Let's Take This to the Inbox

Sign up for our news, resources and updates. The inbox is our favorite place after all. We’ll make sure it’s worth it. (You can unsubscribe at any time, but you probably already knew that.)