Emails don’t need to look the same in every email client, but there are some best practices and guidelines to keep in mind to make sure they are consistently designed, render properly in email clients, and are as accessible as possible.

General rules and principles

• CSS2 instead of CSS3
• Tables instead of Divs
• Inline CSS instead of embedded styles or stylesheets
• HTML text instead of images containing text

HTML and CSS

Use <table border="0" cellpadding="0" cellspacing="0" role="presentation"> when creating new tables.This negates any unwanted spacing and borders and tells screen readers to skip over the table’s tags and move straight into the content.
When in doubt, nest another table.For finer control of your HTML, try nesting tables when building emails.
Use padding for spacing in table cells.Margins aren’t fully supported on tables and container elements.
Use margin for typography.Margins are fully supported for headline, paragraph, and list tags.
HTML AttributesMost styling is done via CSS. But because some email clients use antiquated rendering engines, they tend to better understand attributes like align, valign, height, and width.
Use align for layout instead of float, grid, or flexboxFloats aren’t supported in Outlook and the others don’t have good support in general.
Define color as #ffffff instead of #fff or rgb(1,2,3).Six-digit hex is supported in inline CSS as well as HTML attributes like bgcolor that are still supported in email.
Don’t forget about  preview text . We can specify the text that appears beneath subject lines in many email clients. If preview text is not included, this space will be populated by the email’s content.

Images

Save images as PNG, GIF, or JPG instead of SVG.SVG has almost no support in email, no matter how it’s referenced (inline, Base64, .svg).
Save images as @2x and scale them down using HTML attributes.Since SVG isn’t supported, a 20x20 raster image coded like <img src="40x40-image.png" height="20" width="20"> displays crisply on high-definition screens.

Accessibility

Include role="presentation" on all tables used for layout.This prevents screen readers from reading aloud the structure of each table cell.
Use HTML1 semantic tags whenever possible.Tags like <p> and <h> allow screen readers to quickly jump from section to section. Tags like <strong>and <em> give text more importance.
Include an alt attribute on (almost) every image.Be descriptive and use alt to help readers “see” the email if images aren’t displayed. Use an empty alt="" for images a screen reader should skip (eg. decorative images). Screenreaders will dictate the filename of images without an alt attribute (eg. "icon dash checkmark dot png").
Avoid “Click Here” or “Learn More” link copy.It helps us avoid spam filters and gives context about the link to folks using screen readers or dictation software. We have some  copy guidelines for buttons and links .
Create a plain text version of every email.It helps us avoid spam filters, some email clients don’t support HTML, and some people just prefer plain text. They also respond better to things like changing font size, family, and color, and work well with screen magnifiers. We don’t have many rules or guidelines for formatting plain text emails, though they typically look  something like this . Our email service providers have tools to convert HTML email to plain text.

Testing



Litmus



Papercut