6 Tips To Create HTML Email

Last updated on December 10

Creating HTML emails can be a real pain for developers. Not only are you dealing with an ever increasing number of email clients (Gmail, Outlook, Hotmail, AOL, etc.), you also must account for the different devices (desktop, mobile) running these clients. If you think making CSS/HTML play well with different browsers is a challenge then prepare yourself for the nightmare that is HTML email design.

While developing HTML emails will surely throw you back into the 90's, here are some quick tips and tricks for drafting good HTML email templates:

Inline Styles

Although using CSS in your HTML template is perfectly acceptable, there are certain things that certain clients don't like. One of these things is defining CSS styles within the <head> tag.To ensure that all clients properly render your CSS, you must declare your styles in-line with your elements. While most developers can agree that this is bad practice, it's unfortunately a necessary evil of playing well with mail clients.

Avoid using margins and floats

The box model is a cornerstone of front end design. Unfortunately different clients can be unpredictable in how they render things like margins and floats. To account for such discrepancies, it's generally a good idea to follow more of a grid-like layout. Don't rely on margins for spacing. Instead use padding when necessary to properly space out your elements.

Use <table>

Because the box model can be so unpredictable, using HTML tables is a great alternative for spacing out elements. If you inspect many of the good HTML email designs today you will notice that they make good use of the <table> element to layout the page.

Reference images with CDN's

It's possible to reference your images as attachments in your message payload, however accessing your images through a CDN URL is both more efficient and easier to implement. Compress your images, upload them to a CDN, and reference them through URL's for more consistent image rendering.

Use web safe fonts

Having a custom font is essential to differentiating your brand and looking professional. Unfortunately most clients make it nearly impossible to import existing .otf files, etc. Sticking with web safe fonts (defined inline of course) is the safest way to stay consistent with the look and feel of your email templates.

Always send plain text

Sending a plain text version along with the HTML rich version of your message is always advisable. This ensures that all clients can read your message, regardless of how they handle HTML formatting, etc.

Conclusion

Creating good HTML email designs means taking major steps backwards as a developer. With so many advances in managing front end assets, it's difficult for developers to revert back to inline styles and HTML tables for their layouts. While email clients are starting to catch on to this problem, the sheer number of clients coupled with the number of devices for those clients should keep developers stuck in the 90's for the foreseeable future.