Instead of building your e-mails manually as described below, use a tool like MJML.
The 90s are calling: they want their tables back. Unfortunately, you need them all for laying out your HTML emails.
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 Show archive.org snapshot is your go-to solution for this (see below). While they actually offer a lot more, you can think of it as a "Browserstack for mail clients".
align="center"
, width="100%"
, valign="top"
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.Even the most innocent change can break rendering for some devices. Known issues:
. Since it cannot be wrapped, these mail clients will resize the email as a whole, keeping your designs intact.style
attribute.td
elements with width
or height
attributes.To validate an HTML email design, use litmus.com Show archive.org snapshot . Once you have an account, go to the builder projects page Show archive.org snapshot and create a new project. You'll be prompted to paste the email source.
In a second tab, open a preview of your designed HTML mail. It's best to take it from Staging, so that assets (images!) will be available to litmus during rendering. For a preview during develoment, you can also use your local Rails mailer previews Show archive.org snapshot . Take the preview HTML source and paste it to Litmus.
When the builder project is created, you'll see a split pane with HTML on the left and a preview on the right (which shows your browser's rendering). Follow "Run Email Previews" in the top right, then "Configure Email Clients" in the top left. Make sure you've selected a representative set of clients.
Now check the renderings of all clients. Since you've taken the HTML from staging, you can't easily generate an update preview by updating your code. Instead, modify the HTML in Litmus and port your changes to your code once it renders correctly.
Make sure to also check the mail in "no images mode", as some mail clients block images for unknown senders: open a mail client preview in Litmus and toggle images with the button in the top left.
Note that preview renderings are limited to 1000/month. With 15 Clients selected, each change to the HTML will trigger 15 renderings. When debugging a single client, you can deselect all others.