Simplify Email Coding With Content & Display Patterns

Jeffrey Hoffman
Feb 10, 2016 · 7 min read

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
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).

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.

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
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
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.

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!

Inkceptional

Tips for coding engaging, responsive emails with modern…

Jeffrey Hoffman

Written by

Creator of Inkcite, the modular design system for modern, responsive email development. http://inkcite.com #emailgeek #MakeEmailBetter

Inkceptional

Tips for coding engaging, responsive emails with modern tools by the creator of Inkcite, the modular design system for modern, responsive email development. http://inkcite.com #emailgeek #MakeEmailBetter

Jeffrey Hoffman

Written by

Creator of Inkcite, the modular design system for modern, responsive email development. http://inkcite.com #emailgeek #MakeEmailBetter

Inkceptional

Tips for coding engaging, responsive emails with modern tools by the creator of Inkcite, the modular design system for modern, responsive email development. http://inkcite.com #emailgeek #MakeEmailBetter

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store