StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhat guidelines for HTML email design are there?
text
Body
copied!<p>What guidelines can you give for rich HTML formatting in emails while maintaining good visual stability across many clients and web based email interfaces?</p> <p>An unrelated answer on a question on Stack Overflow suggested:</p> <p><a href="http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html" rel="noreferrer">http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html</a></p> <p>Which contains the following guidelines:</p> <ol> <li><strong>Place stylesheet in <code><body></code> instead of <code><head></code></strong><br> Some email clients will strip CSS out of the head, but leave it if the style block is (invalidly) in the body. </li> <li><strong>Use inline styles where ever possible</strong><br> Gmail will strip any stylesheet, whether in the <code><head></code> or in the <code><body></code>, but honor inline styles assigned using the <code>style=""</code> attribute</li> <li><strong>Return to tables</strong><br> Email standards have actually taken a giant step backwards in recent years thanks to Outlook 2007 using the Microsoft Word rendering engine. Unlearn most of what you learned about positioning without stylesheets.</li> <li><strong>Don't rely on images</strong><br> Most clients and most web based email clients will not display images unless the user specifically requests them to be displayed.</li> </ol> <p>I also have a few "unconfirmed" truths that I don't remember where I read them.</p> <ol> <li><strong>Don't use more than two levels of nesting in tables</strong><br> Is this true. What is likely to happen if I do? Is there any particular client/clients that choke on this?</li> <li><strong>Be careful of nesting background images in cells/tables</strong><br> As I understand you may encounter situations where the background image is applied in the descending table/cell completely anew, and not just "shining through". Again, true or not? Which clients?</li> </ol> <p>I would like to flesh out this list with more guidelines and experiences from the trenches.</p> <p><strong>Can you offer any further suggestions?</strong></p> <p><strong>Update:</strong> I'm specifially asking for guidelines for the <strong>design part</strong> in HTML and consistency there of. Questions about general guidelines for <a href="https://stackoverflow.com/questions/371/how-do-you-make-sure-email-you-send-programmatically-is-not-automatically-marke">avoiding spam filters</a>, and <a href="https://stackoverflow.com/questions/120107/guidelines-for-email-newsletter-service">common courtesy</a> are already on SO.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload