Posted 2 months ago. Visible to the public. Repeats.

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".

Best practices

  • Use tables for layouting. Use these HTML attributes: align="center", width="100%", valign="top"
  • 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, which lets you keep your well-structured CSS files and do the inlining for you.
  • Provide a suitable alt text for images, and style it! Many email clients may refuse to load images for an unknown sender. Descriptive alt texts 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 font-size, line-height and color on your images.

Gotchas

  • 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 style attribute.
  • Outlook.com does not support margins. Create spacing by adding spare td elements with width or height attributes.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
2 months ago
by Thomas Eisenbarth
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more