Skip to content

Responsive email design

Updated: at 07:53 PM

The lessons I’ve learned for designing emails that look good on every device

Campaign Monitor explains a lot of these ideas that I’ve discovered through my own email projects:

Outlook respects widths only for table, tr, and td elements.

Outlook handles padding only for td elements.

You can add css targeted to Outlook using this block:<!--[if mso]><style>...</style><![endif]-->

You can insert a element to get custom Google Fonts; just be sure that you use an mso block to specify a fallback font for Outlook; otherwise it will fall back to Times New Roman.

You can shrink content widths and images for iPhone Mail using media queries.

Always use 6-character hex values for colors (not 3 characters).

Lotus notes and Blackberry are lost causes.

You’ll have to deal with a sub-optimal experience for Gmail for Android. It suffers from most of the limitations of web-based Gmail.

Use for testing emails!

It is complex but possible to send multi-column emails using <table align"...">.

Always provide a sensible plain-text mime part; Outlook and others use this plain text to construct the first-line preview. If not, you’ll see <doctype html><head>

Read the guide at

Other helpful resources: