Last year’s launch of Outlook.com, replacing Hotmail.com seemed to go without a hitch. Us email designers frantically ran lots of tests to ensure that our emails would still work okay and there wasn’t any major rendering issues that we needed to be aware of. Even with the decline of desktop webmail, Hotmail is still important. Latest stats from Litmus show that around 14% of opens are still on Hotmail. Thankfully though, all seemed well and Outlook.com was exactly the same as Hotmail.
Phew, nothing to do then, just carry on as normal. Then the questions started coming in. It seems there are changes after all. Our customers were having trouble, things were disappearing and images were in the wrong place.
We consulted our friends at Email on Acid who confirmed that Outlook had dropped support for Margin and Float. Now, I don’t commonly use these in email designs so none of my tests looked any different, but it does turn out that a lot of our users do. So if you are using these methods, what to do instead.
No Margin
Outlook.com now removes and mention of margin or margin-top, margin-right etc.The easy fix is to use CSS padding instead. This can be place easily in the <td> tag like so:
<td style=”padding: 10px 10px 10px 10px;”>
Remember though that the padding property applies space within the HTML element, so be careful if also applying borders to cells. If you can it’s always good to go right back to basics and use cellpadding and cellspacing attributes.
Float
Float isn’t too much of a problem as it didn’t work in many email clients anyhow. You should use the HTML align attribute instead.
Let us know if you find any other rendering problems and we’ll do our best to solve them.
