Email Code Tips: Dos and Don’ts of HTML Email Coding

Email code comes with a lot of restrictions, unfortunately. The rules for HTML for email have not been standardized across email clients, yet. This puts a limit on the creativity and techniques email designers and developers use. Moreover, every template needs to be tested on all email clients upon sending just to make sure it displays well.

There are certainly a lot of things you can do and plenty that you’d better stray away of. So, let’s get started! The “Dos” and “Don’ts” of HTML email code.

Do: Tables.

Using tables for your template layout is still the most reliable method to make sure the design renders well across all email clients. In spite of being an old-fashioned method for web development, this is the preferred way to code your multi-column email design.

Do: Single column layout.

Most brands nowadays use this kind of layout since it looks great on all kinds of devices and screens (especially on mobile). In addition, it makes the content easy to be scanned. Moreover, the scrolling doesn’t bother the modern users. It comes naturally from using social media channels daily.

Don’t: Body tags for the background.

A lot of email clients would block this tag and display the message on a white background by default. Put your background color in a separate table instead and set the width to 100% to make sure it displays clearly across all inboxes.

Do: Inline CSS.

Embedded or external CSS is very little or not at all supported by email clients, so you’d better stray away from it. Stick to inline CSS style instead. This means, you need to have repetitive styles applied to each element.

Do: Media queries.

Media queries allow mobile users to see the email design with resized fonts, images, and background on their device’s screen. Unlike the above rule, media queries come as topline CSS and contain classes. Media queries’ styles can also overwrite existing styles and hide information unnecessary for mobile users. This is achieved with !important.

Don’t: Shorthand CSS.

Cutting out elements from your CSS may cause significant rendering problems across email clients. Most of them simply won’t interpret shorthand declaration. To save yourself the trouble, simply write the full CSS every time.

Do: Retina images.

More and more users nowadays use devices with retina displays. To make sure all the images look crisp on these devices’ screens, simply use retina images. This means, images twice as big than the image size you would normally use.

Do: Absolute addresses.

When it comes to images in email, you should most definitely use absolute addresses to make sure the images will display in recipients’ inboxes. This means, you need to write the full domain address, directory, filename, and extension.

Don’t: Image maps.

One image that leads to different URLs won’t get recognized by many email clients. To stay safe, slice your images into several other small images and link each one to its own web page.

Do: Preheader text.

Preheader text is important as this the preview of the email message people see before they open the email. However, don’t hard-code the preheader text into the template but write it as a HTML comment instead. This will prevent you from accidentally sending an email that has a hard-coded uncustomized preheader text such as “Write preheader text here”.

Do: Character encoder.

Use character encoder to make sure special characters won’t show as squares or diamond symbols with question marks inside. You could also turn some of these special characters into images where possible.

Don’t: Fancy fonts.

Unfortunately, fancy fonts won’t display properly across many email clients. Generally, you can use Google fonts but it’s a good idea to define a backup font in case the one you’ve chosen isn’t recognized by a certain email client. MailChimp has provided a list of safe fonts as well as fonts that need backup.

Do: Mobile first.

With the rise of email mobile opens, a lot of email designers and developers have started building campaigns for mobile displays in mind. This approach is the reason single column layouts are recommended for the modern email development.

Do: Well commented email code.

It’s good practice to comment on your code in case the template needs to be edited in the future, which happens quite often.

Don’t: Heavy & Complex CSS/HTML.

Advanced code doesn’t go along with email coding, yet. Leave out JavaScript, Flash, HTML5 and CSS3 for now. Also, make sure the size of your email template doesn’t exceed 102kb. This is the point at which Gmail would clip it out, and according to this survey, 59% of email opens happen on Gmail.

Do: Test.

When it comes to email coding, testing is a must. Unfortunately, standardization of HTML for email is still a dream. Therefore, you will have to test every time you change an element or a line of code to make sure it renders correctly everywhere.

Conclusion

Email code is not a hard job. It simply requires a lot of testing and following certain rules. We’ve outlined the most common Dos and Don’ts related to HTML email code. If you feel we’ve missed an essential point, please note it in the Comments’ section below.

Want to learn about Litmus Email Testing and its Alternatives?