If you’ve been on a website in the last 5 years, you’ve probably noticed that the web NOW looks a whole lot better. This is mainly thanks to big improvements in the core languages of the web - HTML and CSS - and an effort from the major web browsers to try to support the new and improved features these languages offer.

So these days web designers, like me, have a host of great tools for building websites. Now the vast majority of people will see our designs as they were originally intended—unless they are using internet explorer, in which case they don’t deserve to see pretty websites. THEY DON’T DESERVE ANYTHING.

Yep, we web designers have it pretty good these days. What’s that, you need me to build you a new template for your email newsletter?

Oh.

You see, when the major web browsers got together and said ‘hey, we should try to adhere to a set of standards so that all code is rendered the same way’, all of the email clients got together and said ‘hey, remember how good the web was in 1999? Let’s keep that legacy alive!’

[caption id="" align="aligncenter" width="621"]

Hey 1999, your websites suck[/caption]

Building an HTML email template these days is an exercise in patience. Because while some email clients (like Apple Mail) use the same rendering engine as modern web browsers, other email clients have their own ideas. This means that your beautifully designed eDM potentially looks like hot vomit to a big chunk of your subscribers.

Thankfully, you can still deliver a similar experience to all of your subscribers if you follow a couple of (kinda wacky) rules of thumb. Are you guys ready to talk about HTML? Are you excited??

[caption id="" align="aligncenter" width="470"]

This guy is excited.[/caption]

1. Forget everything you know about semantic HTML structure. Just use the table element for everything. Need a header for your eDM? Table. Need a footer? Table. Sidebar? Table. Tables inside tables. A table of tables. TABLE.

2. All of your CSS styles need to be inline. This can be a gigantic pain, but A LOT of email clients just straight up ignore the style element. If you use MailChimp (and you should, it’s awesome) it will do this automatically for you.

3. Some email clients make some interesting decisions about the default styles of certain HTML elements. Hotmail makes all of your heading tags the colour green for instance. GREAT JOB HOTMAIL THIS IS REAL NICE. Always assume the default style for any element is going to suck. Reset everything.

4. Don’t use any elements that are less than 10 years old. Your CSS animations and hover effects aren’t going to work. Also, don’t use Javascript. It will do nothing. If you want to add a bit of movement to your eDM, use an animated GIF.

5. TEST. You have to test as much as you can. Mailchimp gives you some good stats about the email clients your subscribers are predominantly using. So if 30% of your subscribers are using Outlook, you better make sure that your eDMs look fine in all of the different versions of Outlook (note: there are heaps of versions, and most of them are awful).

6. Content first. Okay, this one is a little less of a tech tip, but you should be aware that the reason eDMs go out is because you’re trying to send out a message to your subscribers. Some email clients just won’t play nice with your eDMs, that’s unavoidable. But you should always make sure your content is visible and clear regardless of how it is rendered.

There you have it, a few hot tips to help you navigate the minefield that is HTML emails. We’ve built a fair few of them at New Beach, so if you HATE the table element, or if you can’t be bothered to learn HTML and CSS, just to unlearn it so that you can build eDMs, we can handle it for you. Send me a good old fashion plain text email and we can talk!

Also, we send out some great eDMs from time to time, you can sign up using the form at the bottom of the page!

Gabe