A First Look at the New Outlook for Mac: Rendering, CSS Support, and More

[ 0 By

Over the years, Microsoft has introduced an array of email programs and apps—many of which have poor support for HTML and CSS (we’re looking at you, Outlook 2007-2013). This has caused major headaches for email designers. Luckily, Outlook 2011—also known as “Outlook for Mac”—is a completely different story. It has great support for HTML and CSS and isn’t likely to give email designers any issues.

With the recent launch of the newest version of Outlook for Mac, many email designers were wondering—will it have similar support as its predecessor, Outlook 2011? How will my emails display in this client? What has changed? Will I have to tweak my designs? In this post, we’ll answer all of these questions and more.

A QUICK LOOK AT THE NEW OUTLOOK FOR MAC

With it’s clean, flat interface, the latest version of Outlook for Mac is a nice update. However, it’s essentially the same UI with a facelift.

old-outlook

Outlook for Mac 2011

New-outlook

Outlook for Mac 2015

The navigation ribbon and icons have been updated—adopting a flat style that replaced the now-outdated-looking emphasis on drop shadows. Just as in Outlook 2011, this latest Outlook for Mac has five different sections—Mail, Calendar, People, Tasks, and Notes. In Outlook 2011, these were listed vertically at the bottom of the window, but have now been moved to a horizontal bar—taking up less room and enabling a sleek, clean look. There is also a new Dock icon, and we noticed the adoption of our preferred (and AP-stylebook approved!) way of writing about our favorite messaging medium—”email” rather than “e-mail.”

outlook-2011-prefs

“E-mail” in Outlook for Mac 2011

outlook-2015-prefs

“Email” in Outlook for Mac 2015

The rest of the updates seem to be “under the hood”—performance, infrastructure and reliability improvements—rather than drastic UI or rendering changes.

OUTLOOK FOR MAC: WHO HAS ACCESS?

Currently, this newest version of Outlook for Mac is only accessible for those with certain Office 365 subscriptions. However, unless you’re familiar with Microsoft’s myriad of Office products and subscription licenses, it’s a bit unclear who actually has access. We were unable to use the new version with our Office 365 Business account or a personal email account.

We weren’t the only ones that came across these issues. Lee Hutchinson found that those that who “don’t pay for monthly Office 365 subscriptions and prefer to buy ‘perpetual’ licensed versions (in other words, users who prefer to buy Office the traditional way)” do not have access at the moment, and it’s only available for those with a subscription. His team also discovered that while Office 365 consumer accounts could access the new Outlook, not all tiers of Office 365 commercial accounts could. Talk about confusing! Hopefully Microsoft will help clear this up.

In the first half of 2015, a public beta for this new version of Office for Mac—as well as Word, Excel, PowerPoint, and OneNote for Mac—will be launched, and in the second half of 2015 the final release will be available.

Here are some helpful links for those hoping to get Outlook for Mac right now:

WHAT DOES THE NEW OUTLOOK MEAN FOR EMAIL DESIGNERS?

Email designers rejoice—Outlook for Mac is NOT powered by Word (phew!). Unlike some of its PC counterparts, the latest Outlook for Mac uses WebKit to render. WebKit is the same rendering engine used by Outlook 2011, Apple Mail, iPad, and iPhone.

Luckily, WebKit has great support for HTML and CSS. For example, the follow techniques are supported in WebKit:

  • Animated GIFs
  • Background images
  • HTML5 video
  • Web fonts

If you’re seeing a large percentage of your audience opening your emails in Outlook for Mac, Apple Mail, iPad, and iPhone, you can experiment with some of those techniques (we’ve used HTML5 video background in an email!)—just be sure to plan proper fallbacks for subscribers viewing in non-Webkit programs!

Images off by default

Like Outlook 2011, the latest version of Outlook for Mac disables images by default. In order to display images, subscribers have to click “Download pictures.”

download-pictures

It will continue to be important optimize emails for image blocking in this client. These strategies include utilizing ALT text, styled ALT text, and background colors—all of which are supported in Outlook for Mac.

images-off-example

Subject lines + preheaders

There have been some big changes to how Outlook for Mac displays envelope fields in the inbox! Let’s take a look:

outlook-2011-mac-inbox1

Outlook for Mac 2011

outlook-2015-mac-inbox1

Outlook for Mac 2015

For starters, there is more whitespace in the newer version—which makes the inbox look cleaner and less crowded. In addition, the hierarchy of the “from” name and subject line has reversed—now the “from” name appears first (and in larger text!) and is followed by the subject line. With the “from” name now the first (and biggest!) field, it’s more important than ever to use something that your subscribers will recognize.

Another differentiator is how read versus unread messages appear. In Outlook 2011, both the subject line and “from” name were bold when a message was unread. In this newest version of Outlook for Mac, only the subject line is bold—and it’s blue!

unread-vs-read

This makes the subject line stand out even more. There are numerous subject line optimization strategies to test—like length, using questions, and leveraging localizations.

In the latest version of Outlook for Mac, the subject line takes up one line of space in the inbox and is cut off around 42-45 characters (including spaces). As a result, be sure to keep important information in the forefront of your subject line!

subject-line-cut-off

Perhaps the biggest change between the two versions it that the newest Outlook for Mac displays preheader text in the inbox, while Outlook 2011 did not. The preheader text is displayed in the third line in the inbox (after the “from” name and subject line) and is pulled from the first few lines of text in the email. Use this extra space to further encourage your subscribers to open your emails! Don’t waste these extra 50+ characters on links to “view as a webpage” or social sharing sites.

Lastly, symbols in subject lines continue to be supported in Outlook for Mac. We always recommend testing symbols in subject lines to see what resonates with your audience best.

symbols-in-subject-line

TESTING EMAILS IN OUTLOOK FOR MAC

Test your emails in over 40 desktop, webmail, and mobile programs—including the new Outlook for Mac—with Litmus! Get access free for 7 days.

Access your free trial →