Outlook.com is the latest incarnation of Microsoft’s long-lived webmail service. Originally beginning life as Hotmail in 1996, it was later acquired by Microsoft and subsequently rebranded as MSN Hotmail and later Windows Live Hotmail. 2013 saw the product revamped as Outlook.com.
As of April 2013, Microsoft has forced all existing Hotmail users to the new platform. While users can still use their existing @hotmail.com addresses, they have the option of also using a new @outlook.com address. With the switch, Outlook.com now boasts upwards of 400 million active users.
As of November 2013, Outlook.com was ranked #6 in our email client market share rankings. While usage has dropped slightly from months past, it still accounts for a significant 6% of email usage.
A lot of that popularity can be attributed to the fact that Microsoft switched all existing Hotmail users over to the Outlook.com service in April 2013. If you had a large number of subscribers with hotmail.com email addresses, you can count on them being Outlook.com users now.
Similar to other webmail services, Outlook.com relies not only on its own spam filters, but also spam reports submitted by users of the service to filter messages to subscribers. Furthermore, Outlook.com references many ISPs and anti-spam providers. They currently list the following services as being those that influence Outlook.com's deliverability: Yahoo, Gmail, AOL, Comcast, RoadRunner, Outblaze, SpamCop, Signal-Spam, Verizon, and Nortel
Microsoft also notes that many ISPs have their own “report as spam” tools point directly to email@example.com.
As a webmail client, Outlook.com relies on the browser in which it is running for much of its rendering. While Outlook.com generally has decent support for most HTML and CSS rules, there are some issues of which you should be aware.
The most notable problem for designers is the lack of media query support in Outlook.com. Outlook.com strips media queries, so normally responsive emails will be displayed in their desktop layout when viewed on a mobile device with Outlook.com. Fluid layouts still render, which could be a good alternative if you have a large portion of subscribers opening in Outlook.com.
Why aren’t my margins working in Outlook.com?
You may have noticed your emails looking a little cramped in Outlook.com recently. The culprit? Discontinuation of support for the margin property in these email clients. Rather than honoring your carefully spaced paragraphs and images, Hotmail and Outlook.com are now completely stripping margin from paragraph tags, leaving default values (0 for the top, right and left; 1.35em for the bottom, to be exact) in their place.
Outlook.com no longer support the following CSS properties:
Since Outlook.com previously had support for margin-right, margin-bottom and margin-left, it’s anyone’s guess as to why they decided to kill support for margin entirely.
We tested all sorts of combinations, slipping
<span> tags inside paragraphs, fiddling with
<div>, and swapping margin for padding. Since Outlook.com seems to be stripping margin from all block-level elements (not just paragraph tags), finding a direct replacement for
<p> doesn’t seem possible. Replacing margin with padding on paragraph tags works well in Outlook.com, but Microsoft’s desktop clients didn’t fare so well: Outlook 2007/2010/2013 don’t support padding on block level elements. If you’ve somehow been blessed by an audience that doesn’t use Outlook to read their emails and you’re determined to continue using paragraph tags, you could definitely give this a shot:
<p style=”padding-top: 20px;”>
USE AND SWAP MARGIN FOR PADDING
Placing each block of text or image inside it’s very own
<td> cell — along with inline CSS padding — nets the best results across major email clients. While web development purists are rightfully hesitant to sully their emails with non-semantic markup, this method has worked well for us over the years. And while padding doesn’t work quite the same way as margin, it gets the job done. Just be especially careful when using borders, since you’ll need to play around with nesting tables to get your desired effect while relying solely on padding.
One thing to keep in mind when using table cells for text containers is that webmail clients viewed in Internet Explorer will center-align text by default, so unless that’s the effect you’re aiming for, be sure to specify the text alignment you prefer on each
Our HTML typically looks something like this:
<table cellpadding=”0? cellspacing=”0? border=”0?> <tr> <td style=”padding: 10px 20px 0px 20px; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px;”>Aesthetic locavore put a bird on it, pug yr bespoke organic. Lomo small batch master cleanse, wes anderson quinoa +1 irony. </td> </tr> <tr> <td style=”padding: 10px 20px 0px 20px; text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px;”>Biodiesel photo booth single-origin coffee mlkshk actually, pug ugh keffiyeh cray truffaut polaroid direct trade fanny pack. </td> </tr> </table>
You could also try adding cellpadding or cellspacing in your
DISCONTINUATION OF FLOAT SUPPORT
The folks at Campaign Monitor also observed another (although slightly less concerning), change: discontinuation of support for float. Ros wisely noted that float “has traditionally had fairly mediocre support in email clients anyway.”
Designers that use background images in their emails will find that Outlook.com won’t render them. Designers are encouraged to declare fallback background colors where possible, using CSS properties or the bgcolor HTML attribute.
Email Client Market Share
Wikipedia Outlook.com Article
MailChimp's CSS Support Guide
Campaign Monitor's Guide to CSS Support
Outlook.com Spam Filtering
Outlook.com Supported Browsers
Outlook.com Abuse and Junk Filtering Information
How Do I Stop Outlook.com from Removing Media Queries?
Media Query Support
Outlook.com Drops Margin and Float Support
Email Rendering Issues and Fixes for Outlook Web App