Email Design: A Community of Hacks


Let’s face it: the world of email design is full of hacks.

No, not the people involved in email design (although there are always a few of those, too). The email design community is increasingly one of the most open, generous, and skillful groups of people on the web.

The act of email design is rife with hacks. Email clients are notorious for inconsistent rendering and enforcing outdated coding practices. But, email designers are a clever bunch. Not wanting to be held back forever, they have macgyvered some amazing techniques to get email clients to play nice.

Why Do We Need Hacks?

Unlike the internet and web browsers, which have made huge strides in the last few years to make design and development an easier, more consistent process, the email client landscape is stuck in the past.

While there are only a handful of major web browsers, there are dozens of popular email clients, each with their own rendering engine. The situation is so bad that email designers need email testing tools, like Litmus, to preview their emails in over 30 email clients and guides like these:

Since each email client renders only a fraction of the HTML and CSS that email designers typically use, the same code can often appear broken across different programs or apps. This leads to an equally broken experience for subscribers and the potential for decreased engagement and conversions. In extreme cases, subscribers will get fed up and unsubscribe, leading to broken trust in your brand.

So, how do email designers combat horrible rendering engines? Enter the hack. Web designers have long used hacks to get browsers to render pages consistently. But, email designers have taken hacks to the extreme—allowing them to not only maintain consistent rendering, but target specific email clients and devices to pull off some interesting tricks.

Some Community Favorites

Community member Jonathan Kim wanted to know more about everyone’s favorite email hacks. Here’s what people had to say.

Outlook Conditional Comments

Mark Robbins was quick to reply with quite possibly one of the most useful hacks of all time: conditional comments for Microsoft Outlook.

<!--[if gte mso 9]>
Please get a better email client

Microsoft Outlook has long been a thorn in every email designers’ side. But, using conditional comments, we can target specific versions of Outlook and serve up code for those versions.

Optimizing Button Text

Tommy Grimes weighed in with a clever hack to adjust button text based on the environment in which the button is viewed. Using the :before and :after CSS pseudo-classes, he can selectively add additional text to a button on desktop, providing a bit more context and a better call-to-action for subscribers.

a[id="shareLink"]:after { content:" this Email"; }

Community member Narong Saron uses a similar technique to change the word “Click” to “Tap” on mobile devices, where the concept of “clicking” is a bit lost on touchscreen devices.

No images? <a style="color: #333333; font-weight: bold; text-decoration: none" href="#"><span class="tap"><span class="click">Click</span></span> here</a>
@media only screen and (max-device-width:600px), {
  span[class=click] {display: none !important; max-height: 0 !important;}
  span[class=tap]:after {content:"Tap";}

Kill Gmail App Zooming

Sick of Gmail’s Android App zooming text and breaking your design? Chris Wise has a quick fix. By giving a full-width image a minimum width of 600 pixels, you can stop Gmail from zooming text.


Debugging Magic

Brian Graves shares an interesting technique for debugging emails. Using CSS, he highlights the many elements of an email, allowing you to quickly see which elements may be causing problems and fix them accordingly.

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
Identifying problems with element highlighting.
Identifying problems with element highlighting.

Targeting Webkit

Finally, our own Kevin Mandeville shares his technique for splitting Webkit and non-Webkit based email clients. Webkit clients (like Apple and iOS Mail) are famous for the stellar support of HTML and CSS. If you’re looking to pull off some amazing emails, it can be helpful to build a solid base email for non-Webkit clients, and then progressively enhance your email for Webkit clients.

@media screen and (-webkit-min-device-pixel-ratio:0) { }

You can see a fantastic example of this in our recent HTML5 video email, which Kevin breaks down even further on our blog.

What’s Your Favorite Hack?

Email designers are an amazingly resourceful group of people. We’ve likely only scratched the surface of email design hacks here. Do you have a favorite email hack that you’d like to share? Join the discussion in the Litmus Community!