When I first started writing code for email, I often came across the same bugs every time I ran a test for a new layout. Two years on, I thought I’d bring together the solutions I’ve found. Consider this your cheat sheet for a few of the common headaches in email html.


Making working buttons

As marketers, we want customers to interact with our campaigns, which is why we use simple call to action buttons such as ‘Buy Now’ or ‘Learn More’. Placing a button below your main content will catch the reader’s attention and tempt them to click. In fact, Campaign Monitor reports a 28% boost on a button link versus a text link. It’s best to make these with html rather than an image, as some email clients block images.

Campaign Monitor Button Generator

Making a button that works in different clients can be a struggle, but luckily Campaign Monitor has a Bulletproof Button Generator which is easy to customise and drop into your templates.  

Background Images in every inbox

A few email clients, particularly Outlook 07/10/13, won’t support table background email images or background image styles. Campaign Monitor has once again done the hard work for us and created a Bulletproof Background Generator

Unfortunately, you’re out of luck if you want to put buttons on a background image in Outlook. In this case you might want to turn them into images; but make sure you use alt tags on these, as many email clients block images by default and you don’t want your message to be lost because <image.jpg> is all the customer can see.

bulletproof background generator campaign monitor

 

Better typography 

If you’re working with brands and clients, you may want to have typography beyond the usual web safe fonts. One option is to use web fonts provided by Google Fonts, which allow us to display fonts that are not installed on our user’s computer. 

They are easy to implement too. Once you’ve selected a font, it will give you a syntax to put in your <head> tag:

web safe fonts

Then in our inline styles, we will add something such as the following:

<td style=”color: #000000; font-family: ‘Barrio’, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 20px;”>Your text goes here.</td>

Google Fonts is only supported by Apple Mail, iOS Mail and Thunderbird, so make sure you provide good fallback fonts. Which brings us to...

Fixing fallback fonts

Sometimes you’ll find your Google Fonts in Outlook are replaced with Times New Roman, and your fallback fonts are ignored. Fortunately Litmus has a great article on fixing this problem: https://litmus.com/blog/typography-tips-for-email-designers

Here’s a modified version which has worked well with our campaigns:

<!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
    table, tr, td, div, p, a {
    font-family: Arial, Helvetica, sans-serif !important;}
    </style>
    <![endif]-->

Simply add this code to the body tag to have Outlook default to the web safe fonts of your choice. 

Check your code

Some problems that pop up may just come from a simple code typo or missed closing tag. Use WCW Markup Validator to scan your code and highlight any errors. Tip: group by error type to save time looking for your most common errors. 

It also helps to use a good html editor. Here at Genie Goals we use Brackets which you can download for free and customise to your liking. I’m using the MonoKai Pastel theme which is easy on the eyes and highlights errors automatically. There is also a live preview function, where you can preview your work by just hitting save.

Another popular option for developers is Sublime Text. Users love it for its great customisation, ability to make changes to multiple sections at once and slick user interface. 

Testing in every client

testing emails in every client

Getting your email to look great in every inbox is one of the trickiest aspects of email html. Rather than making a dozen email addresses on different clients, register with a service to save time switching from inbox to inbox. Here are a few options:

  • Email on Acid - Email on Acid has a seven-day trial period for you to try its powerful preview tools and email tracking functionality.
  • Inbox InspectorIf you’re looking for a free option, Inbox Inspector allows you to preview your emails in 18 different email clients.
  • LitmusAlthough Litmus only has a trial period of three days, its email preview tool is one of the most popular among email marketers. It also has a great blog.

For more email coding tips, check out some of my favourite articles below, and if you’d like our own email and digital marketing tips you can sign up to our updates below:

Comment