Building HTML email and workflow tips

Did you know? Email templates are now a part of our API and UI! Learn more.

We hosted a Google Hangout yesterday featuring our Lead Digital Product Designer, Lee Munroe. In this hangout, Lee took a deep dive into building HTML templates by first taking a step back to look at the state of HTML email as it stands today and on to demonstrating how to build, design and automate your HTML templates using tools like Litmus and Grunt. Below is the video with minutes, including a Q&A. You can also save Lee’s deck for your reference here. Enjoy.

(2:00) Introduction & Agenda

Why does Lee have an accent? Well because he is from Belfast, Northern Ireland. There are 3 notable things that make Belfast famous: 1) it’s where the Titanic was built 2) Europa, supposedly the most bombed hotel in Europe, is situated in Belfast where many politicians have stayed including Bill Clinton in the 90s and 3) it’s where lots of scenes from Game of Thrones are filmed.

Ok to the real reason why you joined this hangout. Lee is more notably known for his user experience and design work. He recently open sourced a series of email templates and workflow to make your lives easier; you can access them here.

(4:40) State of HTML Email in 2015

When Lee first started at Mailgun, all emails were in plain text emails so one of his first projects was to build HTML emails. He started using Litmus to test email in all email clients. Rules and rendering differ on various clients.

(10:50) Solutions for Building HTML Email

With all the hurdles and roadblocks of building HTML emails to work in various clients, where do we start? 1) Use HTML tables 2) Inline CSS 3) Target Outlook with conditional statements 4) Target webkit and smaller devices with media queries. Lee covers what’s called “Progressive Enhancement,” providing a baseline that works for everyone and an enhanced experience for those that support it.

(17:55) Workflow and a System

Most software companies aren’t just sending one email, they’re sending lots of emails across various platforms. Hand coding one by one is not a scalable solution. Treat your email like a website, modules not pages. Recommended static site generators include: Jekyll, Middleman, Assemble. Finally, test with Litmus.

(21:20) Automation (Use something like Grunt)

Once you have your HTML emails set up, you will want to automate. Task runners like Grunt can do all these tasks for us. You can add a bunch of plugins to your grunt file , for example,hosting images on a CDN like Rackspace Cloud Files or Amazon CloudFront. Make sure to send templates to your code base.

(24:05) Demo

(26:55) Closing thoughts – Responsive Email, Gmail Actions, Preheader Text

Media queries don’t work on Gmail for example. Nicole Merlin has a great responsive email tutorial here: j.mp/responsive-email-tut

You can have the CTA in sthe ubject line in Gmail so users doesn’t have to open email to see the subject. Read more here: developers.google.com/gmail/markup

Preheader text aka preview text is an extra description in the subject line. You can add a hidden line of content that the user won’t see when they open the email.

If you’re interested in using Litmus to test your emails, make sure to use litmus.com/lp/mailgun to get a free month trial to use their service.

(33:20)

Q&A

Does Grunt support GetResponse? It depends what you mean by “support”. You can talk to GetResponse’s API using Grunt.js and the grunt-http plugin.

Do media queries work in the web version of Office 365? I don’t believe so. Office 365 rendering is closely aligned with that of Outlook.com, which does not support media queries.

Are preheaders only supported in gmail? Preheader text, aka preview text, is supported on Gmail, AOL, Yahoo, Apple Mail, Outlook 2013, iOS native apps and Android native apps.

How does the template get shipped off to Mailgun? Mailgun’s API takes an HTML parameter, so you send the full HTML email. Mailgun does not store templates itself. How you send the email to our API depends on how you’ve set up your application. For example, a Ruby on Rails application would be set up slightly different than a Python application. If you wanted to use the full Grunt workflow demoed, you could embed the Gruntfile in your codebase and run it as part of your build system. Or you might prefer to keep the Grunt workflow separate and store the templates elsewhere. Sendwithus is a great service for storing your email templates and still use Mailgun’s API to do the sending.