Question

I have a template which i used for sending emails written purely in hand made with css, and then i tested in Firefox/InternetExplorer/Chrome browser. But when i send that email to My boss PC as he is always Microsoft outlook user.

He always gets the alignment broken, texts broken all problems start. My question is how do you really write then? None of the web browser showing my template wrong.

I searched a lot, but most answers are not deeply and correctly well answered about this. I would really appreciate some experts input on this.

Thanks

Answer 1

Outlook 2007 is the bad guy. Any newer or older is much better. In Outlook 2007 lots of CSS commands don’t work.

See this page: http://www.email-standards.org/ for details.

However, try sending your emails to Gmail.com and see how it gets displayed in Gmail web interface – Gmail is quite restrictive and as a rule of thumb, if it displays nicely, it should look good in other web clients too.

Some advice regarding HTML emails:

• Outlook
  • It is good to provide width for Outlook, otherwise the CSS may crash.
  • Outlook doesn’t support padding for <div>s / <p>s, float and various other things.
• Gmail
  • For Gmail, you should use inline CSS in preference to defining classes.
  • Gmail actually parses CSS provided by you and for instance, changes height to min-height so using height is useless. However min-height of <td> is not respected by the browsers, so internal <div>s inside <td>s can be used to assure that min-height was applied.
  • Gmail strips background images, and generally in all email clients images are displayed upon user request for security reasons. Therefore, wrap images with <div> and set background color and color of this outer div, and provide alt (alternative text) for image (note also that images with empty src do not preserve width and height while rendered by the browser).