Email Templates , the good, the bad, the worst! - Lessons learned

 I recently had to work on redesigning some email templates, and as usual, encountered some bumps along the way. So thought of making a note to myself as well as to the community while resurrecting this old blog of mine. So here we go.

In summery here are some dos and don'ts which I will explain in detail later in the post.

Always try to chose,

• <table> over <div>
• Hex color codes over RGB
• Pixel dimensions over relative ones(such as %, em, rem)
• Web safe fonts over web fonts
• Inline styles over css class rules

 

Now lets get into the Whys 

 

Template Structure

While many email clients nowadays support rather modern html tags, there are still some clients which don't. The <table> tag being one of the oldest html tags we can safely assume all the clients to date support it. 

Special Tip: Use <table> as the wrapper element of the email content and any inner structures that need fixed relative width. This is because some clients are cutting out the body tag, so this wrapper becomes the container for the entire template. Wrap the entire layout in a single table instead of having multiple tables in the body. This is because when there are multiple tables with different sizes, mobile email clients scale them separately to fit mobile screens which might distort the original intended layout.

 

 Here's how I ended up with my template structure.

 

 Sizing

Limit the width of the layout to 600-800px. Specify width, max-width and min-width values of outer elements and use % widths for inner elements if necessary. For images, specify both width and height, don’t give auto height if not intended.

 

Spacing and alignment 

 

Better to use px to specify spacing(padding, margin etc) than relative measures because they highly depend on device dpi and the email client's interpretation of it. Don’t use flex or flex-box layouts. Control positioning with table elements instead.  For tables, (at least outer once) set border, cellpadding, cellspacing to 0 and use padding/margin to maintain proper distances. Use align to align content within table cells. 

Styling 

 

Some mail clients cut out <style> tags. Use inline styles(additionally).

Fonts 

 

Try to use web safe fonts and if web fonts are a must, use similar web safe fonts as fallback fonts. Don’t use shorthand css “font” when specifying fonts, use “font-family”, “font-size” etc instead. Use px for font sizes, the baseline for em can be different for email clients.

Below is a list of email clients with their support for web fonts.So that's about it generally for any email template design. (Source: https://helpx.adobe.com/si/fonts/using/html-email.ug.html)

 

 

 

Below is a small tip for Django developers(like me) regarding translation tags in email templates.

 

Additionally, Translations(Django): Try to minimize html elements inside translation tags(specially be careful with blocktranslation tags). And if cannot be avoided, keep the style/css out of them. This is to keep style changes from affecting the translations.

 

Happy 2021! See you in another post.