Product Design Lessons
Intro to Foundation | Lesson #23
Responsive Email Gotchas to Avoid
Learn from our trial-and-error in creating emails that work on any device.
1. Use margin only where it works.
Most email clients ignore margin on table cells, <td>
. As these elements are the building blocks of email layout, you should only use cellpadding
and CSS padding when controlling the space between sections of a message.
However, you can use margins on paragraphs, and we recommend using hspace
and vspace
attributes for images.
2. Use the most accepted doctype
Doctypes are single lines of code that declare what type of information a document contains. In HTML, doctypes tell browsers and email clients if a document is HTML3, HTML4, XHTML, HTML5, etc.
We use XHTML 1.0 Strict doctype for email because:
- In our experience, many email clients render documents more accurately when they’re declared XHTML 1.0 strict.
- Ink’s sub-grids require XHTML 1.0 strict to function properly.
- But most of all, Gmail automatically replaces messages’ doctypes with XHTML 1.0 Strict. No matter which you use — HTML3, XHTML 1 Transitional, HTML5 — Gmail’s web client will treat the message as XHTML 1.0 Strict.
3. Give every image a valid alt attribute
Few email clients (notably Apple Mail and, more recently, Gmail) shows images by default. Everyone else sees a blank spot — and the text you provide — unless the user’s chosen to allow images by default. While we can’t control often that happens, we can control to give every image a valid alt attribute.
Alts help prevent people and email clients from thinking your email is spam. (Handy tip: Many readers flag messages that Don't want an entire email that's an image.
<img src="#" alt="photo of our latest amazing product" />
Interestingly, you can control alt attributes’ font family, color and size with CSS3 properties. The CSS is obvious and simple:
img { color: #007D9A; }
4. Use six-digit hex codes for colors
Practically every email client supports full hex colors, like #007D9A
. But surprisingly not every understand the three-character shorthand, like #fe9
, or named colors, like “blue” or “green”.
It’s undocumented rules like these that make responsive newsletters a minefield of gotchas and mis-rendered messages. Probably the most important rule is also the most obvious: Test, test, and test again. We use Litmus to check our work, but nothing substitutes trying your email on as many devices and clients as possible.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.