Office 365 Compatibility

nottinghamcollege / HTML-Email-Boilerplate-Redux

A rewrite of the original HTML email boilerplate (originally written by Sean Powell) that keeps up with the latest developments of email clients, providing a solid foundation for our email campaigns, and yours too!

MIT License

79 stars 15 forks source link

Office 365 Compatibility #5

Closed jamesmacwhite closed 9 years ago

jamesmacwhite commented 10 years ago

Improve Office 365 Compatibility. There are a few issues which would be classed as bugs as the boilerplate doesn't handle them, but most are email client quirks

First impressions of things that go wonky in Office 365:

text-decoration:none; doesn't work (Removal of inline styles on <a>)
Link colours doesn't always apply to what's been set inline, again same problem above.
Centring issues with nested tables.
Image gaps (usually visible when image slicing techniques are in use)

More comprehensive list here:

http://blog.jmwhite.co.uk/2014/07/22/office-365-quirks-for-email-designers/

jamesmacwhite commented 10 years ago

The experimental version of the boilerplate now contains a fix for when a nested table within an align="center" table cell didn't actually centre the content.

jamesmacwhite commented 10 years ago

Workaround for lack of control of link colours is:

<a href="http://www.google.co.uk" style="color:#ffffff;"><span style="color:#fffffe;">A link</span></a>

It appears OWA rejects #ffffff or white as a colour for anchors similar to Gmail.

The problem of link underlines remains however.

jamesmacwhite commented 9 years ago

Due to how the OWA preprocessor handles various elements in Office 365 certain problems cannot be fixed. The major one being borders under links, due to the lack of text-decoration support.

However, other areas have been addressed including:

Link colours
Aligning nested tables to the center
Image gaps can be worked around.
Hyperlink borders around images.

All of these are fixed on the stable and experimental boilerplates.