Note: Instead of building your e-mails manually as described below, you probably want to 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 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".
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.
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.
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. 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.