A designer’s guide to Outlook 2013 and Office 365

At its unveiling during a Microsoft press event yesterday, the preview of Outlook 2013 was poised as a new, forward thinking email client. For one, it's adopted the same aesthetic as Mail on Windows 7 phones. It's touchscreen ready. But is it a step in the right direction for email standards?

We didn't waste a moment setting up the customer preview of the new Office on Windows 7, plus the web-based Office 365 service that it's tightly-coupled with. While Outlook 2013 provides the desktop app experience that you know and perhaps even love, Outlook in Office 365 is a webmail client that seems more like Hotmail, than its previous incarnation, Outlook Web App. Here's what email designers can expect from both.

Outlook 2013 - more of the same?

Once you've jumped through the hoops of setting up Outlook, the first thing you'll notice is, well, how monochromatic it is. Gone are the golden gradients, the bevelled buttons, the ribbony ribbon. However, once you get past the limited palette and plain preview-pane, it's pretty much Outlook 2010, just reskinned.

Outlook 2013 Preview

The similarities don't stop there. We ran our CSS tests and found that CSS support is identical to Outlook 2007 and Outlook 2010. This means that it's once more using the Word rendering engine to display HTML email. It goes without saying how disappointing this is, especially given that Outlook/Word's legacy of dodgy CSS support has made them many enemies amongst HTML email designers. More on that in a moment.

We've updated our longstanding Guide to CSS Support guide to include Outlook 2013 Preview - you can view the results for this client as well as 20 other webmail, desktop and mobile clients.

Web version link in Outlook 2013 Preview

One curiosity is that some email newsletters are preceded by a link to the web version of the email, except that it's not the version we host on our domain. Instead, the HTML email document is downloaded and viewed locally in Internet Explorer. We're not entirely sure what triggers this message (as it only appears sometimes), but we'll be sure to look into it further.

Oh, we should mention too that images are turned off by default, just like in Outlook 2007/2010.

Office 365: Like Hotmail for the enterprise

If you have your hopes up about Office 365 being leaps and bounds ahead of OWA in terms of CSS support, then we've got mixed news for you. Yes, it certainly is an improvement - the basic CSS2 properties are mostly there (including margin, padding and even position), but then again, there's no background image support and absolutely zero love for CSS3.

Outlook 365

This wouldn't be all bad if it wasn't for the appearance of links in HTML emails - some turn an ugly blue color for seemingly no reason, while the lack of support for the text-decoration CSS property makes everything look messier.

Nonetheless, the resemblance to the Mail app on Windows 7 phones is soothing. Like Outlook 2013, Office 365 has been optimized for tablet devices, with no pop-up windows this time around. With Microsoft pushing the Surface tablet, could Office 365 be in line to become the next big mobile email client?

Finally, both clients present an opportunity to make the most of your preheaders. In the examples above, you can see how we've used the <tableofcontents> trick to add some meaningful content.

Microsoft to designers: We can't hear you

So, the bad news - both Outlook 2013 and it's cloud-y cousin, Office 365 mean that email designers like us will be coding for the lowest common denominator for years to come. This is despite thousands of folks voting with their tweets via Fix Outlook and the Email Standards Project for a better email experience. The response by the Corporate VP of Office back in 2009 was that "improvements and changes in this area are something that the team is definitely considering for the future", however, it seems these improvements and changes haven't extended to creating an HTML email client that doesn't require endless hacks, workarounds and compromises to work with.

Try them for yourself

If you're a Windows 7 user, we'd love for you to check out both clients and tell us what you think. How do you feel about Microsoft not showing any commitment to improving the state of email standards? Is the lack of change reassuring, given that we don't have to learn any new tricks? Or have Steve Ballmer and co pulled the rug out from beneath designers once more? Let us know in the comments below.

Posted by Ros Hodgekiss

34 Comments

  • Tilt
    18th July

    How disappointing! What happened to Outlook listening to us, as they claimed? http://www.email-standards.org/blog/entry/microsoft-prove-theyre-listening/

    I’ll be interested to have a dig into the default Metro email client for Windows 8 – hopefully that’s better. Metro apps themselves are meant to be written in contemporary web languages (http://msdn.microsoft.com/en-us/library/windows/apps/br211386.aspx), so here’s hoping it applies to their renderers as well.

  • Ricky Synnot
    18th July

    Oh!  So disappointing.  I really had faith in the ‘Fix Outlook’, and email standard project for making change.  It seems as though they’ve just ignored it.  What a shame.

    Hopefully from this the public continue to be let down, feel disappointed, get fed up with sub-standard mail clients, and even enterprise looks to a new system.  Imagine Firefox re-invented Thunderbird to be an ‘Exchange Killer’?  (had to use the word killer in there somewhere! )  Ha! 

    Do you think that this preview would hold different rendering than the final product?  Any hope?

  • Ros Hodgekiss
    18th July

    Hey there Tilt, we’d be keen to play around with Windows 8 Mail, too - it’s still very early days for this client.

    While Outlook 2013 is ‘Metro-like’, the only app in the suite that’s all-Metro as of yet is OneNote. Here’s hoping Metro will bring some positive changes to the Outlook family in the years to come.

    @Ricky - As Tilt mentioned above, Microsoft is in the process of switching over to Metro. One can only hope that they see this as a great opportunity to provide a new and improved email experience. Fingers crossed!

  • Pedro Worcel
    18th July

    I sure am glad I’m not coding HTML for newsletters.

  • Lee
    18th July

    Some could say this is their biggest advancement though… As this time they haven’t gone backwards :)

  • Colin Davies
    18th July

    It looks like they are mostly trying to win the battle of who has the prettiest or most modern looking UI rather than designing with coders in mind. There’s no particular surprise here although we live in hope that maybe one day they will listen and bring CSS compatibility our of the dark ages.

  • Rhys
    18th July

    Disappointing but predictable. Looks like Microsoft are happy to keep desktop Outlook as a business email tool while (hopefully) Windows 8, Surface tablet & Mobiles will use a more enriching email client.

    It does look like Microsoft are keen to catch up with Apple in tablet & phone stakes so anything less than browser & email capabilities of Apple’s software would be suicidal.

    So, for the foreseeable future B2B emails will have to stay basic and mainly B2C emails can be a little more adventurous.

  • David
    18th July

    Microsoft is lazy. Period. It was easier for them to use the source code of the last Office version and just change the UI rather than spend some needed extra time to really solve a problem the correct way.

    There are two types of companies in the world. Companies like Microsoft who lazily implement and deliver half ass products who don’t really care if it’s done 100% right and companies who pay attention to details and who care about making great products.

    I’m a freelance designer/front-end developer and have worked with both types of companies. It pains me to work with lazy companies like MS.

  • James
    18th July

    Sooooo disappointing. Thanks for nothing, Microsoft. :(

  • sv
    19th July

    Lazy, useless and sloppy aka par for the MS course.

  • Elliot Ross
    19th July

    Disappointing, though there’s a glimmer of hope in that Windows Phone 7 isn’t too bad at displaying media queries.

    To be honest, I think the best thing we can hope for is for increasing mobile and webmail usage to make Outlook less relevant.

  • Tommy
    19th July

    “It feels like it’s 1995 at Microsoft again,” Microsoft CEO Steve Ballmer said yet again today, according to PC Magazine. -July 18, 2012

    I know where he was going with this statement, but it feels appropriate given the Outlook discussion. :)

  • Darren L.
    22nd July

    IThey’ve made Outlook 2013 look more like web app. Maybe the flat icons are better for touch… I’m not sure, but it really seems to me that the UI has lost its richness. It’s a step backwards for Outlook.

  • En
    29th July

    Very dissatisfying and absolutely frustrating… A huge disappointment for HTML email designers.

  • Eric Lepetit
    1st August

    Thanks for a great review. I guess we will have to deal with it and still use our Word HTML coding skills ... :)
    The only question I have and I can’t find the answer is WHY? Not that it will change anything and we have been talking about it for a decade now but WHY? Why Outlook developers persist in making this email client support HTML and CSS so poorly while all their competitors keep improving? Am I missing something in their strategy?

  • DRoss
    1st August

    @Eric Lepetit - Yes, Microsoft’s strategy and overall company values are lazy and cheap. Not sure how you missed that as it’s obvious.

    Can’t wait for MS to go bankrupt.

  • Justin.
    3rd August

    I’m not even sure the code is even the same as 2010, when testing with litmus I noticed that whilst 2010 understood a 1px high table row, 2013 blew it out and applied the default line height. This could be a testing glitch, but I doubt it.

    Thanks Microsoft.

  • Gergshultz Romario
    6th August

    @Justin
    Yeah, I’ve run into the same issue. I use heights on tds for consistent vertical spacing. style=“line-height:0px” doesnt fix it either.

    Ideas anyone?

  • Rienzie
    6th August

    @Gergshutz

    I’ve run into the same set of issues, and been trying out different things to tackle it. So far no joy but I’ve resorted to using borders. Been doing litmus testing the solution too, and the results looked promising.

    style=“border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #C6F;” >

  • Ros Hodgekiss
    9th August

    Hey there Justin, Gergshultz and Rienzie - I’ve done a little investigation into this issue and have found a fix. It’s a pretty ugly workaround, so bear with me :)

    From an earlier forum post:

    As it seems, Outlook 2013 is deciding to ‘fill’ empty cells of its own accord. I’ve found that you can avoid this by adding the following:

    <td height="1" bgcolor="#cccccc" style="font-size: 0; line-height: 0;">&nbsp;</td

    ...where height=”” and font-size: ; should be the desired cell height. Please also note that the bgcolor hex code has to be 6 characters in length (ie. bgcolor=”#cccccc”, not #ccc).

    I’ll be publishing a post about this shortly in the blog, but in the interim, let us know how you go :)

  • Rienzie
    9th August

    Hello Ros,

    Thanks a lot for this. I’m off to try this one out. I’m sure it will be fantastic as your solutions usually are :)

    I’ll look forward to reading the blog post.

  • Glen Adams
    10th August

    Are you serious, this is ridiculous, can someone please start a law suit against microsoft for being so far behind the times, they are holding everyone else back, please go bankrupt so we can finally get rid off this un-innovative company.

  • Daniele
    10th August

    This is bull&#*%!!! So sick of Outlook glitches on my newsletters!!!

  • Emily
    10th August

    I agree with Daniele.

  • Andrew
    11th August

    ...6 years to reskin the interface? are they some kind of joke?

  • Brion K. Mills
    11th August

    I think it’s absolutely sinful that in this day and age, MS is pushing a product that at best, is YEARS behind the curve—with no rational or justifiable reason for doing so.

    Clearly they have no intention of making designers’ jobs easier, and more enjoyable. Noooo! They would rather make designing emails as miserable and tedious a process as possible!!! Too big to fail??? Maybe, as is the case with many large enterprises, too big to make progress. Shaking My Damn Head. Shame on you Microsoft!!!

  • Martin
    12th August

    Unbelievable that they still haven’t solved this and support CSS in a more reliable way instead of depending on Word? Get with the porgram Microsoft!
    Extremely disappointing.

  • justmedesign
    13th August

    Microsoft keep us coding like it’s back in 2006. No surprises there. you can paint a turd a different colour but its still a turd. Just for once I’d like to be surprised…

  • Steve
    13th August

    Aaargghhh.
    Had my hopes up for this one, Microsoft have been seeming a much more forward-looking company of late. Back to the old table tags then.

  • Pauline Kosanke
    16th August

    I love your website, but light gray text on white is VERY HARD TO READ!

  • Ros Hodgekiss
    16th August

    Hey there Pauline, thanks for your feedback on the text color - we’ve got our design team looking into this, so we’ll see if we can up the contrast shortly. So sorry for making it tricky to read on your monitor!

  • Mark Kennerley
    25th September

    Hi, are you aware of bugs/issues with Outlook2013?

    I am implementing your two column floats tutorial for a responsive email template. But am getting some very annoying items, they look like a text-decoration line to the right of the left table.

  • Ros Hodgekiss
    26th September

    Hey there Mark, you may want to check out our follow-up article (and comments) on Outlook 2013’s quirks. By all means, you’re welcome to get in touch with our team, or post on our forums if you would like us to take a look at your campaign.

  • Mark Kennerley
    26th September

    Hi Ros, many thanks for the reply. I shall have a look at the article you suggested and see if this will resolve it, failing that I may well show it to your team. I did find yesterday that if I remove the align=“left” off the table the issue disappeared, though this stopped the responsive column stack. Thanks again

Sign up for free.
Then send campaigns for as little as $9/month

Create an account