Lean Design 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 - welcome email, newsletters, and events
  • Behavioral - customized recommendations, response to engagement, etc
  • Transactional - receipts, password reset, and confirmation emails
  • Promotional - product updates, announcements, and special offers

"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:

  • Avoid using text in an image, especially for titles as images might take a while to load
  • Be sure to include alt text for all images in case images are disabled
  • Be careful of spam filters which look at the ratio of images to text with a higher spam rating when the more images there are
  • Keep in mind file sizes for images and make sure to compress them
  • Make sure you specify image widths and heights, including in the CSS for email clients to load them proportionately

Some advanced techniques:

  • For mobile, use media queries, same as for the web, in the head of your HTML
  • Webfonts can be used, but should be used sparingly because of load times
  • There is a technique to make forms work by using the GET form method, but should not be used for sensitive data
  • Video works on a very limited set of email clients; typically, a video is linked to as a preview image or animated GIF.

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

  • I've put together a complete guide to taking the email template system approach to planning, designing and coding an email campaign here
  • For content production, I worked on designing Blocks Edit, a CMS for custom-built email templates
  • Use #emailgeeks on social media and join the email geeks Slack channel

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
Designing and building websites and emails for over 15 years