I have come to know that in front-end 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 to how email service providers will render your template.
So, here are the points you must keep in mind:
Use Table instead of div
Most of the email clients do not support 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, divide your classic div structure into rows and columns for the email. For the best-case scenario, use one column UI.
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.
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.
Keep everything within 600px wide
This will help you make a similar UI for mobile and desktops and free your users from horizontal scrolling.
Avoid using border/outline
Some of the email clients like Outlook do not support the border/outline.
Do not use border-radius
Border-radius property works fine with Gmail or Yahoo, but it'll not work at all in Outlook. (Outlook is a jerk in email template designing).
Avoid images or use alter the text
Most of the email clients block 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.
Use inbuilt fonts
Use HTML inbuilt fonts like Arial, Verdana, Georgia, Sans Serif and Times New Roman because not all email clients have the custom font-family.
Avoid animations and JavaScript
Sometimes the animations or JavaScript cannot load properly or are blocked by email clients. Use GIFs instead of animations.
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)
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.
Use Absolute Image Paths
Do not use a relative path for images/gifs, the better option is to use URL.
Make mobile-friendly
To make your email template mobile-friendly, use media queries to make it look pretty. Also, use twice as generous size images so the image can be equally crispy as mobile/desktop.
Conditional targeting
If you need to make use of elements that we know are not supported by Outlook, make use of conditional targeting and VML to show or hide elements.
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 renderers, and it will give paragraphs default margins.
While saying all that, people at MJML built a beautiful piece of code (email markup language) that mostly overcomes this cross platform related issue and gives a predefined styling component.
So, that's all for now. If you find a key point or stuck somewhere just reach me in the comment section.