Simplify Email Coding With Content & Display Patterns

Dan Mall’s amazing piece about Content & Display Patterns should be of particular interest to email developers. Coding modern, responsive emails often requires the coder to wrestle with hundreds of lines of duplicate code, deeply nested tables and tangled rendering quirks. Traditional email development, which mixes content and display markup, results in complex, hard-to-read code that is nearly impossible to maintain.

Separating your code from your content is an easy but powerful way to #MakeEmailBetter. When you create emails using Content and Display patterns, you’ll type less, have fewer compatibility surprises and be more productive and happy than you ever thought possible.

This article will introduce you to the concepts and tools you can use to start building emails using Content and Display patterns.

The Display Pattern

Imagine that you are building an email to showcase top three most popular videos your client has posted to YouTube. Regardless of what the actual videos will be, the design calls for the videos to be arranged horizontally and each will have a thumbnail image, title and description. From these requirements we can design our Display pattern:

Design pattern mockup

From this, we can create the generic markup required:

<td valign=top style="font-size: 14px; padding: 15px;">
<a href="…YouTube URL…" style="color: #336699; text-decoration: none" target=_blank>
<img alt="…Title…" width=170 height=150 border=0 src="…Image SRC…" style="display: block;">
<div style="font-size: 20px;">…Title…</div><br>
</a>
…Description…<br><br>
<a href="…YouTube URL…" style="color: #336699; text-decoration: none;" target=_blank>Play &#9658;</a>
</td>

Since our design expects three videos in a row, the traditional impulse would be to cut-and-paste or record a snippet for future keystroke-and-paste. But doing either is an #EmailMistake — they lead straight to the bloated code mess we’re solving by separating presentation from content.

Instead, in a process I’ll describe shortly, we’ll transform this markup into a reusable Display pattern which accepts the video’s title, description and YouTube ID as attributes.

The Content Pattern

Content patterns describe data in a presentation-agnostic way. Freed from the burden of presentation HTML and CSS, the markup describing the three example videos is remarkably simple and easy-to-read:

{videos}
{video id="la6vK6hI7rM" title="Cats Coding Emails"
description="New 2015 compilation of cats coding modern,
responsive emails."}
  {video id="PYOSKYWg-5E" title="Owl Open Rates Take Flight"
description="Learn how sending at night increases owl
engagement by 175%!"}
  {video id="TqzAfWROH5E" title="Outlook Panda-Monium"
description="Solving common rendering problems in the
world's worst email client."}
{/videos}

This is a paradigm shift away from the madness of bloated, duplicate code traditionally associated with email development. In its place are easy-to-read, easy-to-maintain Content patterns backed by clean, reusable Display patterns.

How it Works

Bringing readable, semantic markup to email development is one of the primary reasons we created Inkcite. Inkcite is a free, open-source framework for building modern, responsive emails. Inkcite makes it easy for email developers to keep their code DRY (don’t repeat yourself) and integrate Display patterns, versioning, compatibility testing and minification into their workflow. Installation and getting started instructions available here.

Among its many powerful features, Inkcite’s Custom Helpers make it possible for you to define Display patterns and use them with Content patterns within your email. Custom Helpers are simple blocks of reusable HTML code you define in your project’s helpers.tsv (tab-separated values) file.

First, let’s define the {video} Helper:

video	<<-START
<td valign=top style="font-size: 14px; padding: 15px;">
<a href="//www.youtube.com/watch?v=$id$" style="color: #336699; text-decoration: none" target=_blank>
<img alt="$title$" width=170 height=150 border=0 src="images/$id$.jpg" style="display: block;">
<div style="font-size: 20px;">$title$</div><br>
</a>
$description$<br><br>
<a href="//www.youtube.com/watch?v=$id$" style="color: #336699; text-decoration: none;" target=_blank>Play &#9658;</a>
</td>
END->>

This HTML should look pretty familiar with some very minor updates:

  1. The declaration starts with the word video followed by a tab. Inkcite will now recognize the {video} tag when encountered in the project’s source.html file (where the content of your email is controlled).
  2. I’ve wrapped it in <<-START and END->> tags which tell Inkcite that the Helper contains multiple lines with arbitrary formatting/indentation. Using start- and end-markers make larger Helpers easier to read and maintain.
  3. The special $id$, $title$ and $description$ keywords indicate that these three values will be passed-in as attributes when the Helper is used. Adding attributes like this make the Helper customizable and reusable.

We will also define the {videos} Helper in-which the videos will be placed within an HTML table. Note! Even though there is no customizable content (e.g. no $attributes$ defined) abstracting the table away from the content ensures maximum flexibility as you’ll see later. Here’s the Helper markup:

videos	<table width=600 cellspacing=0 cellpadding=15 border=0><tr>	</tr></table>

Given the simplicity of the markup associated with the {videos} tag, this Helper declaration is much smaller.

  1. Like the previous Helper, we start with the tag name and a tab which allows Inkcite to associate the {videos} tag with this HTML.
  2. It is followed by two sets of markup, both also separated with a tab. These define the open and close markup that Inkcite will produce when it encounters either {videos} (which opens the table and row) or {/videos} (which closes the table and row), respectively, in your source.html file.
  3. Since this markup is so basic, I did not feel the need to include the start- and end-markers.

Putting it All Together

Put this markup into your project’s source.html:

{videos}
{video id="la6vK6hI7rM" title="Cats Coding Emails"
description="New 2015 compilation of cats coding modern,
responsive emails."}
{/videos}

Then fire up Inkcite’s live local server (run inkcite server in your project’s root directory). Open your favorite browser using the URL that Inkcite provided (e.g. http://0.0.0.0:4567) and take a look at the resulting email. When Inkcite preprocesses your source.html and encounters the {videos} and {video} tags, it transforms them into the markup that has been defined in the helpers.tsv file and attributes (id, title and description) are injected.

Cats Coding Emails Video

The resulting HTML will look like this:

<table border=0 cellpadding=15 cellspacing=0>
<td style="font-size:14px; padding:15px;" valign=top>
<a href="https://www.youtube.com/watch?v=la6vK6hI7rM" style="color:#336699;text-decoration:none" target=_blank>
<img alt="Cats Coding Emails" border=0 height=150 src="images/la6vK6hI7rM.jpg" style="display:block" width=170>
<div style="font-size:20px">Cats Coding Emails</div><br>
</a>
New 2015 compilation of cats coding modern, responsive emails.<br><br>
<a href="https://www.youtube.com/watch?v=la6vK6hI7rM" style="color:#336699;text-decoration:none" target=_blank>Play &#9658;</a>
</td>
</table>

Adding videos to this and future emails has been greatly simplified. We can add the remaining two videos with just two additional lines of markup in source.html and corresponding JPG files named to match the YouTube ID in the images/ directory. Instead of crawling through pages of duplicate, hard-to-read code, we have several lines of easy-to-read semantic markup.

Content and Display Patterns at Work

Edit Once, Edit Everywhere

Another advantage of separating code and content is that you benefit from the concept of "edit once, edit everywhere." When you make changes to a Custom Helper, those updates are reflected instantly and automatically in every instance of the Helper in your email. You are no longer at the mercy of global search-and-replace.

To demonstrate, we're going to make our video Helpers responsive. The easiest way is to rewrite our Helpers using Inkcite's built-in table, image and anchor tags. Reopen helpers.tsv and swap out the HTML tags with Inkcite tags:

videos	{table width=600 padding=15}	{/table}
video <<-START
{td valign=top font-size=14}
{a id="$id$" href="https://www.youtube.com/watch?v=$id$"}
{img src="$id$.jpg" height=150 width=170 alt="$title$"}
{div font-size=20}$title${/div}<br>
{/a}
$description$<br><br>
{a id="$id$"}Play &#9658;{/a}
{/td}
END->>

Thus far, we've made no visual changes but by using Inkcite's built-in tags we've got easier-to-read, easier-to-maintain code that is vastly more powerful and more cross-client compatible than legacy HTML and CSS. Inkcite's built-in Helpers provide a standard markup for building emails. Learn more about Inkcite's Helpers.

With that in place, it's just a couple of additional keystrokes to make everything responsive:

videos	{table width=600 padding=15 mobile="drop"}	{/table}
video	<<-START
{td valign=top font-size=14}
{a id="$id$" href="https://www.youtube.com/watch?v=$id$"}
{img src="$id$.jpg" mobile-src="$id$@2x.jpg" height=150 width=170 alt="$title$" mobile="fill"}
{div font-size=20}$title${/div}<br>
{/a}
$description$<br><br>
{a id="$id$"}Play &#9658;{/a}
{/td}
END->>
  • Adding mobile=”drop” to the {table} causes its columns to drop into full-width rows on mobile devices.
  • Adding mobile=”fill” to the thumbnail image causes it to scale-to-fill the screen on mobile devices.
  • Adding the mobile-src attribute tells the mobile device to load a larger, higher resolution image instead of the original source. That way our scaled image will be sharp and clear on devices with high pixel density.

That's it! Your browser will automatically reload after you've saved your changes and immediately all of the videos in the email will be responsive. Note! Since we added another image requirement to the Helper, we'll need to go back and add new 2x versions of the thumbnail images in the project's images/ directory. Inkcite will kindly warn you when a project uses this Helper but is missing either image. In the meantime, it will use a FPO placeholder image so you can quickly and easily test out your design.

Next Steps

I agree with Dan's conclusion that Display patterns are most effective when they're as abstract as possible. For the sake of simplicity and clarity, I picked an overly specific example for this article. For those of you following along at home, there is an opportunity to apply these techniques more generally. Inkcite Helpers can build on and reference other Helpers so its not uncommon to have a video helper that is a thinly-veiled wrapper for a more general three-column article Helper.

Inkcite Helpers also work great with Inkcite's A/B versioning system. This allows us to build visually different versions of the same email content - making it easy for our clients to test which design gets the best results.

At Inkceptional, we've been using these techniques since 2010 and it allows us to work faster and build emails that work more reliably across clients. We've built libraries of Helpers that we share across projects, making it easy to rapidly prototype and code new emails. I hope you'll consider adopting these techniques into your workflow as well. Thanks for following along!

Like what you read? Give Jeffrey Hoffman a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.