Designing HTML email
The 90s are calling: they want their tables back. Unfortunately, you'll need them all for laying out your HTML emails. (It is really that bad.)
Email client HTML rendering is way more scattered than browser HTML. While you might have a pretty good understanding of what features and patterns you can use to support all major browsers, I doubt anyone masters this craft for HTML email clients.
The only way to ensure your email looks good (acceptable, at least) in all mail clients, is to check it. Litmus is your go-to solution for this. While they actually offer a lot more, you can think of it as a "Browserstack for mail clients".
- Use tables for layouting. Use these HTML attributes:
- Many mail clients do not support external style sheets. Some even require all styling inline, which means you'll have to do your styling inline. For Rails applications, you can use Roadie or premailer, which lets you keep your well-structured CSS files and do the inlining for you.
- Provide a suitable
alttext for images, and style it! Many email clients may refuse to load images for an unknown sender. Descriptive
alttexts will help the user decide if they want to keep your email. Also, a simple styling will greatly improve the "no images" experience. Start with styling
coloron your images.
- Some Android mail clients truncate horizontal padding and widths to make the email more readable in their eyes. However, this breaks sophisticated designs. You can fix this by adding an element with a definite width, e.g. a row of
. Since it cannot be wrapped, these mail clients will resize the email as a whole, keeping your designs intact.
- Outlook will only respect image sizing when width and height are given as HTML attributes, not CSS, not even
- Outlook.com does not support margins. Create spacing by adding spare