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

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.