It’s been 3 years since I wrote My Top 5 HTML Email Coding Tips. While many of those tips are still relevant today (yes, tables are still in use!), email development has been changing over the past few years. So today, I am sharing my top 5 email coding tips for 2017. Whether you’re coding new templates or are looking to update some old ones, I hope you find these tips useful!
Tip #1: Hybrid Development
Hybrid development, also known as fluid hybrid or spongy development, is a technique for developing responsive emails that does not rely on media queries. I highly recommend checking out this tutorial by Nicole Merlin, which is what got me started. Though media queries are not required to make the email responsive, they can be used to layer progressive enhancement on top. There are some considerations though, particularly with how developing this way can impact the design.
This technique ensures your emails look great across all mobile apps, especially those that don’t support media queries. The mobile app that was really the driving force behind this was Gmail due to its popularity and lack of media query support, but in the fall of 2016 this all changed when they began to support styles in the <head> and media queries. However, there are still other email apps that don’t support them, and even instances where Gmail still does not as well. So I believe this is still a great base to build emails from.
Tip #2: role=”presentation”
By adding this small piece of code to each table in your email, it can have a big difference on the accessibility of your emails, especially with screen readers. Just watch this video by Mark Robbins to see for yourself! It’s a very simple, quick update you can implement immediately.
Tip #3: Semantic Tags
Tying into Tip #2 with accessibility, this can further be improved by using semantic tags like <p> and <h1><h2> etc. tags. Overall they are well supported and there’s many CSS tips online you can find to get consistent margins, etc. on these tags. I personally used to use <div> due to the differences in how email clients rendered margins on paragraphs and headings, as I didn’t particularly like adding text styles directly on the containing <td>. However, as updates have been made to webmail clients over time, I have been moving away from that to using semantic tags, and the differences in rendering are minor.
Tip #4: Balance of Images and Live Text
More and more emails are starting to include a healthy balance of images and live text. One of the main reasons for brands to use little to no live text is due to branding and keeping a consistent look with fonts etc. However, brands need to let this go a little bit for the experience of their subscribers. All-images emails prevent subscribers from seeing important CTAs if images are disabled or don’t load. Lots of images can also make emails slow to load and even look blank until the email finally does load (I have seen this many times!). Emails don’t have to be all images or all text — have a balance, and use progressive enhancements with web fonts for live text when possible.
Tip #5: Progressive Enhancements
Email development has a very wide range of email clients to test for, from older versions of Outlook that don’t even support CSS background images or animated Gifs, to iOS Mail which supports animations and (now, again with iOS 10) video. This is where knowing your subscriber audience comes in, and you can determine how you would like to progressively enhance your emails. For example, you can use background images with VML for Outlook, web fonts with web-safe fallbacks (I like to use ffffallback.com to test them), and CSS on CTA buttons for rounded corners, gradients, etc.
But remember, your emails don’t have to look the same everywhere. Look at which email clients opens are coming from, and work to ensure there’s a good experience for all subscribers, while best leveraging the different capabilities of each email client.
Bonus Tip: Test!
As always — test your emails! Contrary to what some might believe, email clients DO change (mostly webmail and mobile!) and so even if you’re using a tried and true template, it never hurts to test each email before sending it out the door.