Content + Code Blog

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: punctual, automated emails, like a welcome email, newsletters, and events; behavioral, like customized recommendations, response to engagement, etc; transactional, like receipts, password reset, and confirmation emails; and promotional, like product updates, announcements, and special offers.

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.

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

Photo of Ovi Demetrian Jr By Ovi Demetrian Jr
Founder/Interactive Designer, Blocks Edit