Outlook 2013 Still Powered by Word; Now Available for Email Testing

[ 9 By

After lots of rumors and anticipative nail-biting from email designers everywhere, Microsoft recently unveiled a “customer preview” of Office 2013, including a new version of Outlook. In addition to the new Office suite (with Home and Business versions), it also released a preview version of Office 365, a subscription service emphasizing cloud-based services with “secure, anywhere access to email and calendars, Office Web Apps, instant messaging, conferencing, and file sharing.”

One might argue that Microsoft is trying to position themselves as innovative and forward-thinking. Among the changes to the new office suite include touchscreen-friendly elements, an emphasis on the cloud (and their SkyDrive service), the requirement that it run only on Windows 7 or newer operating systems, and a design reminiscent of Windows Phone 7+:

Windows Phone Aesthetic

Unfortunately, lackluster support for displaying HTML emails proves otherwise.

Word remains rendering engine for Outlook 2013

While the new version of Outlook might work beautifully on Microsoft’s new Surface tablet, it’s still using the Word rendering engine to display HTML emails.

If you’ve been designing and coding emails for a few years now, you’re likely aware of Outlook’s dismal support for email standards. Microsoft switched to Word (from Internet Explorer) as its rendering engine with the introduction of Outlook 2007 and hasn’t looked back (errr, forward?) since. Despite the email community’s efforts and a well-intentioned response from Microsoft, this means that HTML and CSS support in Outlook has remain virtually unchanged between versions 2007, 2010 and now 2013.

Outlook 2013 acid test

Outlook 2013 preview available in Litmus

If you’re looking for a silver lining, consider this: email testing in Outlook 2013 customer preview is now available in Litmus. You can even use Interactive Testing to preview how emails will appear when forwarded or replied to in Outlook 2013, or for troubleshooting specific elements.

Outlook 2013 Email Testing

We’ve also added Outlook 2013 detection to Email Analytics, so you can tell how many of your subscribers are using Outlook 2013 to open your messages.

Additionally, our friends at Campaign Monitor have already updated their legendary CSS support guide to cover Outlook 2013.

Other changes to Outlook 2013

The first time I launched Outlook 2013, I was rather unimpressed by the UI of the application itself—it’s rather white and stark, without a lot of emphasis or hierarchy on individual elements.

Outlook 2013 at Launch

Ros at Campaign Monitor said what I was thinking quite brilliantly:

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.

Comparing Outlook’s design elements over the years, the general look and feel has been gradually simplified over time. Compare how the same email looks in Outlook 2007, 2010, and 2013:

Email in Outlook 2007

Email in Outlook 2010

Email in Outlook 2013

Our initial thought is that emails with mostly text and a predominantly white background may fight to be distinguished and get lost due to the lack of contrast present in the new UI. You may want to keep an eye on your Outlook 2013 stats and consider incorporating more background colors and/or graphics into your designs as the numbers start to rise.

Another thing you might notice about Outlook 2013 is that images are disabled by default, similar to Outlook 2007/2010:

Image blocking in Outlook 2013

And that a deeper preview pane arrangement has eliminated the visual separation between the envelope fields and your email.

Envelope fields in Outlook 2010, Outlook 2013

This deeper preview pane arrangement also pushes the message about 40px further down the page:

Preview pane 40px deeper

The preview pane grows even more in cases where the “view in a web browser” message is triggered along with the blocked content warning:

Outlook 2013 Warnings

That’s an incredible 320px+ of “other stuff” in the Outlook UI before your actual email starts!

As the preview pane becomes deeper, your email’s from name, subject line, and preview text become that much more important, since less of your email is immediately viewable.

Even with rendering left largely unchanged from Outlook 2007 and Outlook 2010, you’ll certainly want to test in Outlook 2013 (with images on and off) to see how these changes affect your messages.

When will Outlook 2013 officially launch?

While Microsoft has not provided an official launch date for Office 2013 and Office 365, it’s worth noting that Office 2010 was released seven months after the Office 2010 beta release, in June 2010. My best guess is that it will be a few months before Office 2013 hits the shelves and starts to see wider adoption. You can also keep an eye on emailclientmarketshare.com for any changes to overall market share.

Other Outlook 2013 resources

  • http://twitter.com/Diimiitrii Dimitri

    It looks a bit like the new gmail interface with its monochromatic approach…

  • SelectFreeware

    Arrrrg! Forget HTML emails with Outlook 2007+ It’s back to image slicing and tables if you want fancy. All the more reason to use Thunderbird!

    • eli

      Didn’t Mozilla recently announce it was scaling back the Thunderbird team and hoping the community would take over adding new features? Not quite sure that’s the magic bullet here.

  • http://twitter.com/robbarra Rob Barra

    Does it make anyone else sad that this basically means HTML email is going to continue to be painful for at least another 10 years?

    • Sergiu Naslau

      I actually was hoping for them to have a revelation: “lets make outlook 2013 support for the new 5 and css3″ or “lets give them more!” .
      hopes and broken dreams.

  • http://www.facebook.com/ed.giardina Ed Giardina

    Good breakdown, Justine. I gotta say, I like the new UI treatment aesthetically. Less noisy. But I agree that there should be a border or SOMETHING between the message body and the message headers.

  • http://twitter.com/MikeeeHo Michael Ho

    and now there is http://www.outlook.com

  • Ralph

    Microsoft sucks!

  • JOI

    justine, what rendering engine is used for the office 365 email client? is it the same as the outlook.com product, the same as the outlook 2013 product, or another product all together?

    thank you so much for this post. aside from your partners with campaign monitor, the world is oddly silent! i think we are all in shock!!