Notes from the Dev: Use the Word Rendering Engine to Enhance Outlook Emails 

It’s been a minute since the last episode of Notes from the Dev, but this one is worth the wait. We’ve got one of the most recognizable email geeks ever on the show, Mark Robbins. He’ll show us how to enhance Outlook emails by using its Microsoft Word rendering engine to your advantage.

If that sounds crazy, I get it. But just wait.

You may have come across Mark Robbins thanks to his appropriately named website, GoodEmailCode.com. Besides being an accomplished email developer, Mark is also a software engineer who’s worked for Salesforce and is currently working with our friends at Parcel.io. Plus, he’s a founding member of the Email Markup Consortium (EMC), which is advocating for email industry standards that improve inbox experiences.

While those of us who code emails know that desktop versions of Outlook can be a major pain, Mark managed to find a silver lining in this cloud of frustration. Get ready for a little nostalgia from the early aughts. Check out the episode below and keep reading for more.

Email rendering refers to the way different email clients support and process the HTML and CSS code in your campaigns. The use of different rendering engines often leads to inconsistent results in various inboxes. For example, Apple Mail uses WebKit for its rendering engine, which has some of the best support, and allows for more interactive elements in emails.

Desktop versions of Outlook, however, use Microsoft Word to render emails. The Word rendering engine is what causes many of the most common email coding challenges. That includes everything from random white lines in Outlook to issues with animated GIFs.

One way email developers address issues with HTML emails in Outlook is using Microsoft Office (MSO) style attributes using the <mso- > prefix. This allows us to create fallbacks for desktop versions of Outlook using conditional code.

Note: Outlook for Mac, iOS, and Android do not use the Word rendering engine, which means MSO styles are not supported.

Mark’s website has a collection of code snippets featuring MSO styles, including ways to format text for Outlook emails. That’s where we’re heading next…

Ready to create email designs like it’s 1999? 25 years ago, if you were using Microsoft Word to design an invitation to your birthday party or wanted to make your homework assignment snazzier – you probably used WordArt.

If that only sounds vaguely familiar, maybe this will refresh your memory:

In this episode, Mark shows us an easy way to go into the word processor and quickly generate code that turns the Word rendering engine into a sort of superpower. You can use it to add WordArt inspired typography and more into your Outlook emails.

Why would you want to do this? Well, my friends, the 90s are back. You’ve probably noticed graphic design trends reminiscent of commercials that aired during your favorite Saturday morning cartoons. Those looks are showing up in email marketing campaigns too. Check out some of the most-popular selections on Really Good Emails and see for yourself.

While you can always use MSO styles to manually code stylized text for Outlook emails, there’s a faster way to generate the code. Believe it or not – you basically design it right in Word.

Here’s how Mark explained the process in five steps:

1. Open Microsoft Word and create some stylized text.
   • Mark chose an embossed yellow typeface with a reflection.
2. Save the Word doc with your stylized text as a web page.
3. Open that HTML file up in a web browser so you can view the code.
4. Right click and select “View Page Source” to find and copy the MSO styles and text from the HTML file.
5. Paste the code into your email editor where you want it to appear.

After that, you’ll need to send a test email to Outlook or generate email previews with an email testing tool to see how your stylized text gets rendered. Here’s what showed up in Mark’s test email:

Mark points out that the snippet you grab from Word will include a bunch of unnecessary code that you can and should get rid of to clean things up. He also adds that, because it is still live text, screen readers pick it up just fine for recipients with accessibility concerns.

You may have noticed that the little WordArt icon in the latest versions of Microsoft Word doesn’t exactly give you the same options as those fantastically funky ‘90s fonts did. Don’t worry. You can also turn back time and relive your early days of design.

Justin Pot wrote an article for Popular Science explaining how to get back to that retro WordArt. It’s simply a matter of saving a file as a Word 97-2004 file (or .doc instead of .docx) and opening it in compatibility mode.

That’s not where Mark’s tips end either. He also showed us how you can use shapes and drawings in the word processor to generate Vector Markup Language (VML) images for the Word rendering engine to display in emails.

Most email developers include a VML namespace declaration in the HTML tag of every email to support the use of vector images in Outlook emails. With Mark’s trick, you can use Word to quickly add shapes like stars to an Outlook email, but you can also try adding icons, charts, and more.

Mark says he’s only begun to explore what’s possible with the Word rendering engine, and he encourages you to play around with it too.

See what you can do and experiment with it a bit more, because Outlook just gets forgotten so much. You’re just trying to make something passable. But actually, we can enhance it and do something kind of cool with it.

Mark Robbins Software Engineer, Parcel

We should mention that the future of email may eventually bring an end to the use of the Word rendering engine. That’s because a new Microsoft Outlook for desktop is using a web browser engine just as other email clients do.

This doesn’t mean the versions of Outlook that use the Word rendering engine are disappearing anytime soon. We all know how long it takes people to update software, and legacy Outlook installations will be around for years.

Mark talked about this in his presentation at Email Camp in 2023. The session also encouraged email developers to “stop putting Outlook first.” That’s because it can limit you from achieving everything that’s possible inside the email inbox. However, even if you don’t prioritize Outlook, you can still design a cool experience for Outlook users.

Look for Mark at email industry events, follow him on Twitter/X @M_J_Robbins, (he recently switched to Mastodon instead). You’ll also find him helping out devs like you and me in the Email Geeks Slack community.

Here are a few other videos from Mark to check out:

• Email Odyssey: Journeying Across Email’s Present & Future – Email Camp 2023
• Registration Email Breakdown at Parcel Unpacked 2.0
• How I Learned to Stop Worrying and Love Email – Smashing Conference 2023
• 2019 dotmagazine interview on interactive emails

And finally – here’s a special treat for NFTD viewers from the folks at Parcel.io:

As you heard at the end of the episode, Mark Robbins and Parcel are offering free trials of Parcel Pro for our fans. Parcel is one of my favorite email development tools, and I highly recommend checking it out.

Sign Up to Start Your Parcel Pro Trial

While we’re talking about tools for email developers, I’ve got to mention how Email on Acid can be a big benefit, especially when it comes to optimizing emails for Outlook.

When you want to test how an email renders in Outlook or any of the most popular clients and devices, our Email Previews deliver accurate screenshots for you to review. With unlimited testing on every plan, you can play around with Word and preview as many emails as you want.

If you’re wondering if coding emails specifically for Outlook users is worth your time, our advanced Email Analytics can help with that. You’ll get a breakdown of the clients and devices your subscribers use to view your emails along with many other advanced insights like Read, Skim, and Delete rates to measure email engagement. Plus, our Email Accessibility checks ensure every subscriber can engage with what you send.

Finally, thanks for being fans of Notes for the Dev. We love making the show and we’re planning to revamp and relaunch in the coming months. Make sure you subscribe to Email on Acid’s YouTube channel so you don’t miss it.