Make Awesome Email

The Email Client landscape — Rendering issues

There are several to be aware of, but some highlights:

Gmail. will cut off your email once it hits 102kb of code (not including images). Bear in mind as your email goes through a sending tool things will get added, so treat about 80kb as a safe limit when making email. You can minimise your risk by coding in a fairly lean way.

You’ll most likely want to add display:block; to every image. Otherwise you might get lines and spaces between images that are adjacent to one another. You can add it globally in style tag, but that can also lead to obscure issues.

iPad and IPhone will try to be helpful and make random things into blue links — things that look like addresses (both web and physical), phone numbers, phrases like “next Wednesday” will link to the calendar, even phrases that match titles of movies in iTunes (ikr). There are some fixes for this. and Yahoo! Mail require some code gymnastics if you’re doing advanced stuff.

Outlook 2007, 10, 13 and 16 on a PC use the Word engine to render HTML. It’s not very good at it. Generally you can do adequate email, but some of the fun stuff is lost. It has some avant-garde approaches to margin, it’s best to stick to padding (and even then, it’ll do things like take the highest of two adjacent vertical paddings and apply them to both columns in a table). Background images are only supported using proprietary code called VML. Animated GIFs aren’t supported.

How do I deal with weird email code stuff?

There are lots of resources for this, some of them can be out of date. A good place to get started is Mark Robbins’ guide here.

Litmus Community also has some good snippets — bear in mind though that some of them are opinionated, so do research and test.

We made Taxi so that email developers can bake fixes into the HTML, and be confident they’ll still be there in the sent email. If you’re making an HTML template editable in Taxi, so that marketers and content people can use it to make email campaigns, then Taxi Syntax is for you. You can get started with our guides here.