Emails don’t need to look the same in every email client, but here are few best practices and guidelines to keep in mind to make sure they’re consistently designed and accessible.
Given Stack Overflow’s reach, we strive to support email clients with low levels of HTML & CSS support (namely Microsoft Outlook, a few versions of Gmail, and a handful of mostly non-US clients). It’s still safest to code emails like it’s 1999.
- CSS2 instead of CSS3
- Tables instead of Divs
- Inline CSS instead of embedded styles or stylesheets
- HTML text instead of images
Campaign Monitors guide to CSS is the most complete reference for HTML & CSS support in email.
<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.
Most styling is done via CSS. But because some email clients use antiquated rendering engines, they tend to better understand attributes like
alignfor layout instead of
flexboxFloats aren’t supported in Outlook and the others don’t have good support in general.
Define color as
rgb(1,2,3). Six-digit hex is supported in inline CSS as well as HTML attributes like
bgcolorthat 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.
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,
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.
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.
<h>allow screen readers to quickly jump from section to section.
altattribute on every images. Remember to be descriptive. Use
alt=""for images a screen reader should skip (eg. decorative images).
Tools to ensure emails look as they should when they’re sent.
Papercut allows us to test emails from our code base. Good for making sure templates are built properly, personalized data populates, and email triggers work.