Design and Workflow

Email is back: on the state of coding email marketing templates

Slide deck and notes from my talk on email marketing for web developers.

"Email is dead", said social media advocates a few years ago when social media took off. Now at it's peak, companies and marketers are finding that's not the case. They've realized that email is not only the best way to reach customers directly, but research shows that customers prefer it above all other channels. Even among the cool kids that are all 'bout social media, millennials!

So while email never really went away, it turns out that it's stronger than ever and shows no signs of going away anytime soon. Even with the PinSnaps and InstaBooks out in the world. This means that there are new opportunities for email as it continues to evolve.

In email marketing, there are many automation tools that have streamlined the process of planning and sending out emails. From recurring emails to audience segmentation, to personalization options, and tracking results.

Marketing emails fall into four essential categories:

"Marketing emails fall into four essential categories: punctual, automated emails, like a welcome email; behavioral, like customized recommendations; transactional, like receipts; and promotional, like product updates."

Email campaigns and templates

When it comes to building email campaigns, the code is as messy as it ever was as it still needs to work securely in various email clients, new and old. While web browsers have made a lot of progress to make code cleaner and easier to maintain, email code hasn't changed all that much. But there are tools that do make the process easier.

And the best way to send out all of these email types is in a template that incorporates a company's branding. There are tools for marketers to design and build email templates on their own, but they are often limited. And like a good website, companies understand that a custom design for email templates are more effective.

How to code for email

Developing a template system from the beginning allows reusing elements of your email's design in multiple campaigns. It means taking a modular approach and creating a framework for your email campaigns for a more efficient workflow. This allows for turning around campaigns faster and helps maintain a more consistent design throughout all your campaigns.

Keep things modular: break apart design patterns like stackable sections, and reusable components like buttons and headlines. If coding from scratch, keep a library of code snippets to reuse.

When coding an email template, there are three different approaches you can take:

  1. From scratch, writing CSS code within HTML elements, following best practices for code
  2. Coding the CSS on its own, then copying it to the head of your code and using an inliner tool that will add the CSS to the HTML elements based on the classes you refer to
  3. Using a framework system consisting either of a code library or API that gets compiled into email-friendly HTML and CSS code.

"Developing a template system from the beginning allows reusing elements of your email's design in multiple campaigns. It means taking a modular approach and creating a framework for your email campaigns for a more efficient workflow."

Best practices and tips

When working with images:

Some advanced techniques:

For testing, instead of web browsers, you test for email clients like Gmail, Apple Mail, and Outlook (the Internet Explorer of emails). But there are tools that can do the testing automatically for you across all the email providers available, including for mobile, and sends you screenshots of what they look like.

Additional resources and tools

Use your modular email template with Blocks Edit to make them visually editable so your team can easily build and edit emails without having to touch code.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr