First Impressions on MS Office 365’s new Email Client –> Outlook Web App (OWA)


Subscription services are the way of the future…

Office 365 logo

Microsoft’s new Office 365 service is intended to replace their desktop product suite. As part of a subscription, they’ll offer all of your old favorites (PowerPoint, Word, Excel) in their most up-to-date versions, accessible from anywhere. Sounds great, doesn’t it? Hold on to that thought for a moment, email designers. This new product will make you miss Outlook 2013, something I never thought was possible. Office 365’s version of Outlook, or the Outlook Web App (OWA), does away with such frills as image styling and control over border-spacing on tables.

…but lack of support for basic CSS takes us back 10 years.

We haven’t had time to run our full battery of tests on OWA, but we thought our users might appreciate a quick war report from the trenches. Here’s some things that we have found out:

  1. No support for background images of any kind!
  2. Limited support for embedded CSS. Styles are converted to random HTML elements with inline styles and many declarations are lost in the process.
  3. Limited support for inline CSS.
  4. All image styles and classes are removed. Width and height attributes are still respected.
  5. There is a 5px space below every image. Here are 2 known fixes to get around this.
  6. Does not support hover pseudoclasses.
  7. Does not support floats (not a big surprise).
  8. Definition lists are converted to a series of divs.
  9. Image styling for bulleted lists (ul > li) doesn’t work. We tested the background-image and list-style-image properties.
  10. Tables all have “border-spacing: 2px” by default, causing problems for those of you who like image slicing.
  11. Using a parent element’s class to select a child element (ex. “.mydiv span {CSS here}”) doesn’t work at all.
  12. Paragraph tags are converted to divs: <p>text here.</p> is converted into <div style=”margin-top:14pt;margin-bottom:14pt;”>text here.</div>

Other quirks have yet to be fully explained. For instance,

.slant {font-style:italic;}

does nothing, but

.slant {font-style:italic; color:green;}

works perfectly.

Without being able to use a parent element’s class to select a child element, or use “img {CSS here}” to style images, it looks like OWA users might be seeing emails very differently from the rest of us.

Outlook Web App support is on the way.

We’re working on adding OWA screenshots to our suite soon so that you can dive into all these details for yourselves. We’ll also be doing a few more blogs detailing some of the biggest problems with OWA and any workarounds that we’ve discovered. If you’ve already had a chance to use the new Outlook web app, what quirks have you found? Let us know in the comments down below.

Author: Alex Ilhan

Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.

10 thoughts on “First Impressions on MS Office 365’s new Email Client –> Outlook Web App (OWA)”

  1. Thanks for the article. How close are we to having this available as a platform within Emailonacid? I have anecdotal evidence that fonts aren’t rendering properly but without an emulator I don’t really know why.

  2. Jonny,
    We hope to have screenshots for this client available by the end of the first quarter of 2014, but that’s not an “official” timeline. Also, we don’t use emulations (for most clients), so when we have those ready they’ll be genuine screenshots.

  3. Jueves,
    No, we’re not going to be able to get it out this quarter. Hopefully in Q2! But again, no promises on that release date.

  4. We’re working on adding this RIGHT NOW actually, but having some trouble with Internet Explorer (of course). Hopefully it will be ready to launch soon.

  5. I just started testing in Office 365, and it looks like all of my image links are rendering with a purple border around them. This only happens in the IE renderings on Office 365. I have “border:none;” applied as a style to all of the images inline and in the head, but still, the purple border remaains… arghhh!

Comments are closed.

Free Email Goodies