What guidelines for HTML email design are there? [closed]

by

It’s actually really hard to make a decent HTML email, if you approach it from a ‘modern HTML and CSS’ perspective.

For best results, imagine it’s 1999.

  • Go back to tables for layout (or preferably – don’t attempt any complex layout)
  • Be afraid of background images (they break in Outlook 2007 and Gmail).
  • The style-tag-in-the-body thing is because Hotmail used to accept it that way – I’m pretty sure they strip it out now though. Use inline styles with the style attribute if you must use CSS.
  • Forget entirely about float
  • Remember your images will probably be blocked – use background and text colour to your advantage – make sure there is some readable text with images disabled
  • Be very careful with links, be especially wary of anything that looks like a URL in the link text – you will anger ‘phishing’ filters (eg <a href="http://domain.tld">www.someotherdomain.tld</a> is bad)
  • Remember that the “fold” on webmail clients tends to be extremely high up the page (on a 1024×768 screen, most interfaces won’t show more than a hundred pixels or so) – get your identity stuff in right at the top so the recipient knows who you are.
  • Recent version of outlook have a “portrait” preview pane which is significantly narrower than you may be expecting – be very wary of fixed-width layouts, if you must use them, make them as narrow as you can.
  • Don’t even think about flash, Javascript, SVG, canvas, or anything like that.
  • Test, a lot. Make sure you test in a recent Outlook (things have changed a lot! It now uses Word as its HTML rendering engine, and it’s crippled: Word 2007 HTML/CSS support). Gmail is pretty finicky also. Surprisingly Yahoo’s webmail is extremely good, with nice CSS support.

Good luck 😉

Update to answer further questions:

Don’t use more than two levels of nesting in tables

I believe this is an older guideline pertaining to Lotus Notes. Nested tables should be okay, but really, if you have a layout that’s complicated enough to need them, you’re probably going to have trouble anyway. Keep your layout simple.

Be careful of nesting background images in cells/tables

This may be related to the above, and the same applies, if you’re getting that complicated then you will have problems. Recent versions of Outlook don’t support background images at all, so you’d be best advised to forget about them entirely.

More Related Contents:

  1. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  2. mailto link with HTML body
  3. Can I set subject/content of email using mailto:?
  4. base64 encoded images in email signatures
  5. Is it possible to add an HTML link in the body of a MAILTO link [duplicate]
  6. embedding image in html email
  7. HTML5 Email Validation
  8. Full Width Backgrounds on Outlook ’07/’10/’13
  9. Html form in email
  10. Can you link to a CSS file from an email?
  11. Mailx send html message [duplicate]
  12. What is Data URI support like in major email client software?
  13. Base64 images to gmail
  14. Send HTML mail using Android intent
  15. Testing HTML email rendering [closed]
  16. Gmail blocking small embedded inline images in email template
  17. How to send HTML email using linux command line
  18. Rounded corners in outlook without images
  19. Django: How to send HTML emails with embedded images
  20. Responsive order confirmation emails for mobile devices?
  21. Can I put a … tag within the body of a HTML file to send in email?
  22. The css padding is not working in outlook
  23. Can Outlook 2010 use a web font in an html email?
  24. Is there an equivalent of CSS max-width that works in HTML emails?
  25. Adding HTML forms to email
  26. Sending HTML mail using a shell script
  27. maxlength ignored for input type=”number” in Chrome
  28. How to strip HTML tags from a string in SQL Server?
  29. How To Isolate a div from public CSS styles?
  30. How do I style radio buttons with images – laughing smiley for good, sad smiley for bad?

Leave a Comment