Why we created open-source email newsletter templates
They’re part of The Newsletter Guide from The Shorenstein Center, The Lenfest Institute, and Yellow Brim.
I regularly hear from small and large newsrooms alike that tedious technical issues related to newsletter production are major time and resource drains. They’re distractions that take time away from focusing on creating an excellent editorial product. Instead of reporting and editing outstanding coverage, editors are forced to hack around in email HMTL, trying to figure out why the responsiveness of their newsletter is broken. Let’s stop the madness!
Why does this happen? Creating an email template that can be sent through an email service provider (ESP) such as MailChimp, MailJet, or Salesforce — that’s able to be displayed on all the devices where users will read it (computers, tablets, and phones) and across email clients too (Gmail, Outlook, Yahoo, etc.) — is quite the time-consuming process. That’s because email code has many quirks for recognizing or ignoring styles, and unless your technical team has a developer who specializes in email, chances are you are going to have a hard time fixing seemingly simple display issues. That being said, email rendering issues often have three main culprits:
- The template itself is broken. Email service providers do not have a template versioning system, so if one person accidentally deletes HTML code critical to the proper rendering of your newsletter template, there isn’t an easy way to roll back the change. Editors are forced to hunt down the original template HTML file or hack around and try to fix the template themselves. (Having felt this pain, Yellow Brim created the first ever email template versioning system that allows you to easily save new template versions and switch between them.)
- Extraneous HTML styling code is accidentally pasted into the specific newsletter campaign. Many news organizations manually copy and paste in content that was edited elsewhere into their newsletter campaign. It’s very easy for hard-coded HTML styling that is not meant to be included in the email to mysteriously tag along during this process — and then break the rendering of the email.
- A large image breaks the responsiveness of the template. Images that are wider than around 600 pixels can easily break the mobile responsiveness of an entire newsletter. As a result the the copy appears so small on mobile it’s practically unreadable.
To lessen the technical strain of producing email newsletters, Yellow Brim has created newsletter specific workflow software, as well as open sourced a series of free newsletter templates. The templates, created specifically for newsrooms, were created in partnership with The Lenfest Institute and the Shorenstein Center as part of The Newsletter Guide, a best practices toolkit for editorial newsletters, which you can read here.
You can download and read more about how to customize the templateshere. The templates we created are adapted from the Cerberus email templates from Ted Goas.
The email template files are available for download as an HTML file that can be edited in the code editor of your preference and then uploaded to the ESP where you send your emails.
Before you dive right in, here are three things to note:
- HTML tags: You will need to add some HTML tags that are specific to your email service provider so that your email service provider can recognize the various sections of your template. Because many small and medium-size organizations use MailChimp, we included additional templates with MailChimp-specific tags as an example. Please consult the documentation of your email service provider to make sure it supports custom HTML email templates prior to updating.
- For example, Constant Contact does not currently support custom code in a way that makes sense to adapt these templates. Salesforce Marketing Cloud does support the use of Custom Templates. If you’ve tried to Google to see if your email service provider supports the use of custom HTML templates, and you’re still not sure, feel free to email Yellow Brim and ask.
- Be wary of over-editing: Unless you have a strong understanding of the HTML/CSS, we strongly encourage you to limit any editing of the templates (other than where the comments indicate) to changing text, images, and links. Much of the code you see is designed to make sure that the email is displayed properly in different email clients. Even still, by updating the logo, colors, and fonts, and choosing from the various style blocks available, you’ll be surprised how emails born from the same code can look quite different after a few (seemingly minor) edits.
We’ll be sharing more about some of the challenges and pitfalls you should avoid while creating email newsletters in updates to The Newsletter Guide. Sign up here to receive email alerts when new features are published.