6 Tips For Coding Great HTML Emails

Forget every web development best practice you’ve ever learned, friends, it’s time to jump into the journey of coding an HTML email. Tables? check. inline styles? check. It’s time to party like it’s 1999! Oh, wait up guys, Outlook is on their way too…

1.Borders on linked images are often default

Similar to a{text-decoration:underline}, many email clients, especially the older ones, default linked images with a thick blue or black border. This is usually unwanted, so to avoid this right off the bat, set your border to “0” on all images.

<img src="image.jpg" border="0" alt="image">

2. ‘display:block’ on images to remove extra space under images

Images in email are treated as inline elements. This space is there to help text and images line up properly when they are side by side. Add style= “display:block” to your <img> element to remove this space.

<img src="image.jpg" border="0" alt="image" style="display:block;">

3. For background colours, bgcolor and 6 character hex codes are best

Remember css’s background-color? Remember rgba(), rgb() and #fff? Forget’em! All you’ll want to use in e-mails is bgcolor.

<table border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff;">

4. Applying a bgcolor to individual cells renders thin lines between cells on many iphone clients

When a background colour is applied to individual table cells instead of the table itself, a thin line shows between each cell displaying the table’s background colour. Instead of applying background colour to the table’s cells, put each section with its own background colour in it’s own table and apply the background colour to the table itself.

5. The 500 characters or more rule

Have you ever received those annoying spam emails with one little sentence and then a link? Well, spam filters know about these emails and in precaution against these, they often flag emails with 500 characters or less as spam. Thus, ensure you have at least 500 characters in your emails.

6. Don’t forget about image sizes!

A large majority of emails are opened on mobile devices, often with shaky internet connections and on various data plans. For the best outcome of your email’s load time, as well as your users’ data usage, keep those image file sizes small.