Read Time: 7 min

This Month in Community: Strict Brand Guidelines, Advent Calendars in Email, Mobile Optimized Retina Images, and More


The Litmus Community is the place for email designers, developers, and marketers to discuss their craft, talk about industry news, and join in the (occasionally) controversial rant and discussion.

In case you haven’t been keeping up, here’s what happened this month in the Community.

The Challenges of Brand Guidelines

Email marketing in the eCommerce or retail sector can be quite challenging. Many retailers have strict brand guidelines, especially when it comes to which fonts can be used on web and in email. However, email’s own constraints make it hard to stick to brand guidelines and produce emails that follow best practices.

Community member Meg Tiffany reached out last month to find out how other email marketers deal with such challenges, and how they can drive innovation in an area of email marketing that still relies on image-heavy, adaptive, or mobile aware (rather than fully responsive) techniques.

Email developer Mark Robbins shared his solution: Educate stakeholders on why live text is more beneficial than using images as text.

In short:

Text is scalable, easily editable, retina optimised, light weight, loads by default, accessible, searchable.

There may be some compromises that need to be met along the way, but email marketers are pushing forward and creating emails that look great on any device and stick to their brand guidelines.

Take Mr. Porter, for example. This online mens fashion retailer sends emails that are fully responsive and have a healthy amount of live text in them, but retain the same look and feel as their website.

How do you innovate within strict brand guidelines? →

Mobile-Optimized Responsive Fluid Retina Images For Email

Most responsive fluid retina image techniques involve swapping out an image for a background image on mobile devices. The problem with this is that whether the email is loaded on a desktop or mobile device, both of those images (image and background image) will be loaded. This happens even if you hide the non-mobile image from mobile devices. The need for two images increases your email’s load time and gives your subscribers a bad experience, especially if they’re on a slow internet connection.

Community member Michael Muscat introduces us to a new technique of implementing responsive fluid retina images. In his technique, Michael uses the HTML5 tag <template> to hide the <img> tag, from supported clients, therefore not loading the image:

In clients that support the <template> tag, the <img> tag is simply never rendered and background-image is used instead. The background-image is then swapped using media queries. In clients that don’t support <template>, the <img> tag is used for the desktop image and background-image is used for mobile if supported, otherwise the desktop image just scales fluidly.

It’s an experimental technique with limited support, but illustrates how there’s not just one solution to a problem in email—there’s space to push the boundaries of what we know.

See the code behind this technique →

Advent Calendars in Email

Even as adults, we get excited by advent calendars. The mystery of not knowing what’s behind each door, and the excitement when we find out what it is—could we bring this sort of excitement to email? Yes, we can! Even better, it’s been done before.

Email developer Cyrill Gross shared his technique of creating a working advent calendar in the body of an email.

Advent Calendar

Interactive email has limited support, but that doesn’t mean you shouldn’t be trying to push the boundaries of what’s possible to surprise and delight your subscribers. In this technique, Cyrill ensured there was a proper fallback for those customers who wouldn’t be able to see the full interactive advent calendar, giving everyone a great experience in the inbox.

Learn how to implement an advent calendar in your email →

The Infamous Preheader Preview Text

Before we dive into the next set of Community discussions, we want to clear up a little confusion over the terms “preheader” and “preview” text. Both are referencing the text that appears above the main content of your email, but in slightly different places.

Preview Text
Preview text as seen in the inbox.

Preview text refers to the snippet of text that is above the main content of your email, as it appears in your inbox.

Preheader text as seen in the code.

Preheader text refers to text that visually appears above the header of the email code itself.

Now let’s talk about preview text—the sometimes forgotten about part of an email that can help your subscribers decide whether to open your emails or not. Community member Jeff Tibbetts makes the case for long preview texts as a way of ensuring no content from the email, such as the link to view the email online, appears alongside your desired copy.

While we can’t say for sure whether a long preview or short preview text works best, what we can recommend is to test. Just as you would run an A/B test on your subject line, run A/B tests on your preview text to learn whether a difference in length has any impact on your campaign.

How long (or short) is your preview text? →


Optimize your from name, preview text, and subject line with Subject Line Checker, available in Litmus Builder.

See what Checklist can do→

How do you share your emails?

Once upon a time, one of the main ways of sharing an email with your colleagues was to print it out and stick it on a wall. Not exactly practical, but printing off an email preserved the design and showed team members exactly how the email was supposed to look, rather than an email client’s interpretation.

It’s 2016—printing should no longer be the only option.

Last month, Community members shared the different ways they show colleagues their emails. A popular solution is hosting the email’s HTML file on a web server, and linking to the individual emails. This method maintains the email’s design and people can click on the links.

Other popular methods include sharing the “view online” link, or sending the email via the ESP (email service provider) to an internal list.

Another option (that we’re very partial to) is using Litmus Scope, and sharing the generated links with your colleagues. The bonus here is that your colleagues will be able to check out your desktop and mobile versions of your email.

How do you share your emails internally? →

A big thank you to the following Community members and their amazing contributions in November:

Theresa Weaver, Miah Roberts, Andy Wahlenmaier, Randall Wilson, Patrick Lewis, Gordon Mcleod, Daniel Black, Nicole Harriman, Wilbert Heinen, Thanos Karavasilis, Rémi Parmentier, Ian Mansfield, Ray Weisgerber, Tudor Matei, Mohammed Shameer, Harry King, Devon Guerrero, Steven Howe, Charles Balazs, Michael Muscat, Kim Robbins, Chris Galvin, James White, Mark Robbins, Desiree David, Courtney Fantinato, Kris Sanders, Ashleigh Ange, Niven Ranchhod, Brendan Mart, Zoran Orak, Zac Brown, Peter Biolsi, Nathan Skinner, Angie Dirk, Charles Hall, Justin Hamilton, Jeff Tibbetts, Abby Wentzel-Elison, Cyrill Gross, Veronica Williams, Matt Sesno, Meg Tiffany, Chris Bowes, Jessica Best, Andrew Paschall, Alfredo Mancilla, Katie Zeff, Alex Robinson, Eni Hill, Adam Palmer, Jason Cooper, Daniel Mul, Chris Carpenter.

Join the Community Today

The Community is buzzing with even more than what’s described here. Keep up with the latest news, techniques, and tools by joining the Litmus Community today. It’s free to join and filled with the best minds in email marketing.

Join the Community →

Jaina Mistry

Jaina Mistry

Jaina Mistry is the Director, Brand & Content Marketing at Litmus