Points to keep in mind while developing Email Templates

I have come to know that in frontend development Email Template designing is a kind of headache for those who don't know how to code the HTML perfectly. There are many things to keep in mind if you're designing an Email template, from the basic difference between a static webpage and an email template or how will email service providers render your template.

So, here are the points you must keep in mind:

1. Use Table instead of div

Most of the email clients are not supporting the div structure on top of the body, the render engine mishandles your style. Instead of that, you must use the table tag, which should be the first element in the body.  So, dived your classic div structured into rows and columns for the email. For the best-case scenario, use one column UI.

2. Use inline-css

Outlook, Gmail and Yahoo remove your HTML & head tag to resolve the conflict between their own tags. So, if you are using external css or internal css then it will be excluded, to overcome this you must specify inline-css or style in tags.

3. Do not use float and position 

Most of the email clients neglect the float and position styles. Instead of using float/position use margin/padding inside the table's td tag.

4. Keep everything within 600px wide

This will help you make a similar UI for mobile and desktops and free your users from horizontal scrolling.

5. Avoid using border/outline

Some of the email clients like Outlook does not support the border/outline.

6. Do not use border-radius

Border-radius property works fine with Gmail or Yahoo but it'll not work at all in Outlook. (Outlook kind of a jerk in email template designing).

7. Avoid images or use alter the text

Most of the email clients blocks images by default. You can use alter text with images. If you are using alter text then be sure you add the size for the image so that email clients do not override the space.

8. Use inbuilt fonts

Use HTML inbuilt fonts like Arial, Verdana, Georgia, Sans Serif and Times New Roman because not every email clients have the custom font-family.

9. Avoid animations and javascript

Sometimes the animations or javascript cannot load properly or blocked by email clients. Use GIFs instead of animations.

10. Keep CSS, simple

Avoid compound style declarations (i.e.: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (i.e.: #000 instead of #000000), CSS layout properties (i.e.: slot, position, clear, visibility, etc.), complex selectors (i.e.: descendant, child or sibling selectors, and pseudo-elements)

11. Avoid body attributes

You may encounter email clients that don't pay attention to body attributes, which means all your hard work is for naught. Instead of that apply the attribute or style to the leading table.

12. Use Absolute Image Paths

Do not use a relative path for images/gifs, the better option is to use URL.

13. make mobile-friendly

To make your email template mobile-friendly, use media queries to make it look pretty. Also, use twice a large size images so the image can be equally crispy as mobile/desktop.

14. Conditional targeting

If you need to make use of elements that we know is not supported by Outlook, make use of conditional targeting and VML to show or hide elements.

15. Annoying paragraph tags

You will notice that Outlook will give much space for the p tags and vice versa for Yahoo. That's because they use different email renderer and it will give paragraphs default margins.

So, That's all for now. If you find an important point or stuck somewhere just reach me in the comment section.

Edit: Recently I was surfing around the web and find out this https://mjml.io/. If you want you can use this instead of taking care of these points.