HTML Emails

When building HTML emails forget everything you know about modern, best practice HTML/CSS. Support for these is very limited and has taken a step backwards with Outlook 2007 (http://www.campaignmonitor.com/blog/archives/2007/01/the_truth_behind_the_outlook_2.html)

  • Use tables for any kind of complex layout.
  • Don’t use CSS positoning – Outlook 2007 doesn’t support it and emails can have text appended to the bottom (e.g. by email filtering software) that can overwrite what you’ve put in the email.
  • Use old-style presentational tags (e.g. font, b, align) or inline styles. Webmail tends to strip out any <style> tags and inline styles override any global styles that Hotmail or Gmail might have
  • Background images should be avoided or take into account that lots of people won’t see them
  • Test in as many email clients as you can
  • Keep it simple – forget about anything like Flash, JavaScript or forms
  • You can get round all this by using one big image, but this is more likely to be flagged as spam by filters
  • Remember if the email is going to consumers, they are more likely to have Outlook Express than Outlook that we use

Resources:

Leave a Reply

  1. Mikee Franklin

    I remember (back in the day!) not having to worry half as much about how your emails were built. I remember the days when I didnt feel worried about embeding videos and flash and whatnot in them.

    Although I understand the need for tighter security and filtering with emails, Outlook 2007 has made things very frustrating.

    A few things:

    Tables are a must for any semi-complicated layout. Make sure any text in the design is on a plain coloured background. I usually use inline CSS to make any tweaks (to font sizes, line heights..etc..) but make sure the layout works nicely without any CSS too – so make sure the dreaded font tags are all there.

    It would be wonderful if there was some kind of web service out there that you could send a url to and it’d send you back grabs of your page in every possible client/interface.

Posted