Creating a New Email Newsletter

Old Templates

Recently, I was given the task to develop a newsletter from scratch based on a new branding campaign. I saw this as an opportunity to revamp our email templates in Marketing Cloud, which were created by someone else before I inherited them. Those templates had these issues:

  • Using an old HTML Doctype
  • Not optimized for mobile
  • Not accessible
  • Unnecessary and unused styles throughout
  • Blocks that should be locked for editing were unlocked

New Templates

Having completed the code audit, I thought about what was needed to improve and modernize the templates:

  • Use the HTML5 Doctype
  • Design for mobile-first and optimize for mobile
  • Make all tables accessible
  • Remove any unnecessary styles
  • Create a flexible template but lock areas that shouldn’t be changed

Challenges

The design included background images, which aren’t supported in Outlook, but I knew there were ways around that. Some sections had multiple background images. So how would I position them and would it still work?

Background Images

Links

Dark Mode

The new design also included background colors that were black, white and gray colors. Initially, I didn’t see that as a problem, until I started testing. Then Dark Mode showed its ugly head and inverted colors and images in some clients, like the Gmail app for iOS. To be honest, I wasn’t completely prepared for what Dark Mode would do to the email template. In most cases, it didn’t negatively affect the overall appearance and readability of the email. I had read all about dark mode and implemented the proper code to allow it. The biggest offender ended up being the most important one. Since most of our organization is on the G-suite, we’re using Gmail as our email client. A good majority of users are also on iPhones. So when I looked at the email test on my iPhone in the Gmail app, I gasped at what I saw. Colors completely inverted and the background image looking horrible.

Graceful Degradation

And this is the type of thing email developers face all the time. What is the expected ‘premium’ experience and what is the ‘acceptable’ experience? I created a checklist of all the clients I was testing against. Out of 30 clients, only the Gmail app in dark mode on iOS was presenting the greatest issues.

Testing

If you have a Litmus account, then I strongly recommend that you get the Chrome extension. Sure, you can build and test within Litmus builder, but if you want to move quicker, you can open your HTML email in the browser and use the extension to test the email previews. Each time you make a change and save, the email previews refresh. This really helped me build each section of the template quickly and test constantly.

Block Development

Finally, I had to take the HTML code and develop blocks and a template for Marketing Cloud. Salesforce help on making templates is pretty minimal. Sure, they provide their own templates, some blank, and some that have dummy content with different layout blocks.

Moving Forward

With all of the major blocks developed and a tidy new modern HTML template in place, the next step is to test on actual devices. I have a small collection of physical devices and a few email accounts to test on: Gmail, Yahoo, Outlook.com, and others.

About the author

Al Lemieux is a web developer and Product Owner for NielsenIQ. He lives with his wife and 8 kids in New Hampshire.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store