What came first, the email template or the email content?

As digital marketers know, one of the biggest email challenges is always to ensure the best possible delivery of a message across multiple platforms and devices. But what about production efficiency? Or brand consistency? And oh, right, good content. Are we spending too much time on fixing the result vs thinking strategically about the goal?

Just when we dreaded tweaking one more email template to accommodate varied content layouts only to have it break in one or two finicky email clients, we came up with a better solution. Borrowing from a standard website UX technique, what if we developed a fully tested, responsive pattern library for email that could be customized for a client’s unique brand?  We call it an email design pattern.

Before we share how this email design pattern approach improved not only the look of our client’s emails, but production time and cost, let’s talk about some of the specific challenges we were looking to solve.

The problem with standard email templates

Most organizations use HTML email stationaries or templates to produce emails and e-newsletters. While this will ensure a standardized design and can decrease production time, this process can often distract from the goals of the email: Communicating a message to engage a user to take action. What if we could deconstruct the elements of those templates so that they are more effective?

Preheader Woes
One of the major limitations of using stationaries or templates (in most software made for nonprofits) is the inability to customize the preheader. The preheader might be the most important part of your message and often the most neglected. It is the first 100 characters of text from your email that is pulled into the preview of your email just below the from name and the subject line.

Most preheaders read “Having trouble reading this email? View as a web page” or the likes thereof.  While this can be useful in cases where images are blocked or the email doesn’t render properly, it doesn’t do much to further encourage the subscriber to open the email which is the whole point of the email preview pane.

Preheaders that won't and that don't work.

Relying on graphics instead of HTML styling
Templates and image heavy messages can make all your emails look exactly alike (especially if users aren’t enabling images), so that people skip/delete because they think there is nothing new to see.  Even worse, since email still uses tables and are limited in the native fonts available to display content, many emails leverage graphics for everything, including call to action buttons. The result? When someone gets an email without images enabled, they cannot even scan the content and see actions you’re driving them to take. Lost opportunity.

Image heavy email without images enabled.

Content takes a back seat
Lastly, standard email templates force content creators to fit the template, rather than producing the most effective information for users to reach the message’s goal. Often filler content is needed which costs money to produce and can distract the user from the main goal of the email. It also doesn’t allow for a client to tell their story in a way that makes sense for their mission. Designing for the template rather that for the audience is a less obvious trap, but one that can impact the effectiveness of your messages and limit the reach (and reputation) of your brand.

How does an email pattern solve these problems?

Think of an email pattern as the love child of a mood board and design library, both website UX amd front-end development tools. Traditionally mood boards show the visual style of a website elements while design libraries provide a detailed HTML style guide for how each of these elements should be implemented. When these techniques are applied to email production, they create a bible for the reuse of brand-centric HTML content blocks that add value and minimize lost engagement opportunities.

Content from an email design pattern.

A series of elements or design patterns are pre designed in HTML. Examples of elements we might include a hero image, pull quote, left or right image with text, buttons or even an event calendar. The pre design is important because we know how difficult it can be to ensure that your email looks good in the 30 or more email clients on which your users are reading their email.  It also allows us to address responsive considerations like image size, and scaling of elements.

Event calendar, no images, entirely created in HTML

Once the design pattern has been built, the content creators can determine what content they want to promote and select an already tested design pattern to promote that content piece. They can even design any images that go with the pattern, to provide the brand look/feel they desire. The design patterns can then be mixed and matched in any order to produce an email in any system.

The design pattern can also simplify working with external designers or producers to create the content for each individual email. For example your color palette with be defined as well as the width of any images that will need to be produced. This way everyone knows exactly what needs to be created to have the email come together in the more effective way possible.

When the design patterns are created, the HTML is consolidated into tables for each element. HTML comments are utilized to denote the beginning and end of each element. This allows for the elements to be selected individually without having to worry about breaking nested tables.

Commented HTML design pattern

Another advantage of the design patterns is optimizing the message to be viewed with images off. This ensures that the users who preview your message without images are still able to get the gist of the message. We have seen a substantial increase in click through rates with several clients since we have incorporated these methods.

At the core of our optimized design is bullet proof buttons. While Campaign Monitor coined the term, we are actually using a version created by Email on Acid. Bullet proof buttons look like typical image buttons but are produced purely using HTML. Since they are completely made from HTML they display just like an image and work beautifully with almost all email clients (and degrade nicely when they are not supported.)

That's right, this is not an image.

We don’t just use them for buttons, but we have also used them to create faux forms or call out boxes with rounded corners.

Inline HTML form example

A work in progress

I’m not going to lie, we went through a lot of heartache and pain to reach this point, and we are constantly improving the process from lessons learned. But now we have a solid approach not only to design, but how to write the HTML so that the elements display properly across thy myriad of email clients that your constituents use.

We hope these hints help you bring your email design to the next level.

Are you smart, motivated, and eager to solve problems in a collaborative environment? 

If so, we want you! Join our team!

See Our Current Career Opportunities