This is what is needed
Metatags 1&2
Content type. If you declare this content type in the html, then it will ensure that non a-z characters are displayed correctly.
<meta charset=“UTF-8”>
This is for mobile compatibility. It is important.
<meta name=”viewport” content=”width=device-width, initialscale=1.0”>
Preheaders
This is a preview text that shows under the subject line in the email program. It does not necessarily show in the email content when opened. Example:
<meta name=”viewport” content=”width=device-width, initialscale=1.0”>
This is for mobile compatibility. It is important. This needs to be immediately after the open <body> tag.
Layout
Tables
Tables are the best way to have multi-column layouts in emails. Very compatible.
Styling
For compatibility, CSS should be inline. This means that you should use the style attribute inside your HTML tags. Here is a list of widely comparable CSS parameters that you can change:
- padding
- font-family
- font-size
- font-weight
- text-align
- text-decoration
- color
Images
Don’t use background images. The image tag: border=“0” , alt=“”
Formats
Gifs
Text
Responsive
<style>
@media only screen (max-width: 480px) {
//this is where you put mobile style rules
}
</style>
Put any css inside if you want it to be on mobile.