Find out how to Use the Phrase Rendering Engine for Outlook E mail Coding
It’s been a minute because the final episode of Notes from the Dev, however this one is well worth the wait. We’ve obtained one of the recognizable e mail geeks ever on the present, Mark Robbins. He’ll present us find out how to improve Outlook emails by utilizing its Microsoft Phrase rendering engine to your benefit.
If that sounds loopy, I get it. However simply wait.
You might have come throughout Mark Robbins because of his appropriately named web site, GoodEmailCode.com. Apart from being an completed e mail developer, Mark can also be a software program engineer who’s labored for Salesforce and is at the moment working with our mates at Parcel.io. Plus, he’s a founding member of the E mail Markup Consortium (EMC), which is advocating for e mail business requirements that enhance inbox experiences.
Whereas these of us who code emails know that desktop variations of Outlook is usually a main ache, Mark managed to discover a silver lining on this cloud of frustration. Prepare for just a little nostalgia from the early aughts. Try the episode beneath and preserve studying for extra.
Phrase rendering engine: The massive downside with Outlook emails
E mail rendering refers back to the manner completely different e mail purchasers help and course of the HTML and CSS code in your campaigns. The usage of completely different rendering engines typically results in inconsistent ends in numerous inboxes. For instance, Apple Mail makes use of WebKit for its rendering engine, which has a number of the finest help, and permits for extra interactive components in emails.
Desktop variations of Outlook, nonetheless, use Microsoft Phrase to render emails. The Phrase rendering engine is what causes most of the most typical e mail coding challenges. That features every little thing from random white traces in Outlook to points with animated GIFs.
MSO types for Outlook emails
A method e mail builders handle points with HTML emails in Outlook is utilizing Microsoft Workplace (MSO) type attributes utilizing the
prefix. This enables us to create fallbacks for desktop variations of Outlook utilizing conditional code.
Observe: Outlook for Mac, iOS, and Android don’t use the Phrase rendering engine, which suggests MSO types should not supported.
Mark’s web site has a set of code snippets that includes MSO types, together with methods to format textual content for Outlook emails. That’s the place we’re heading subsequent…
Utilizing WordArt to simply improve Outlook emails
Able to create e mail designs prefer it’s 1999? 25 years in the past, should you had been utilizing Microsoft Phrase to design an invite to your party or wished to make your homework task snazzier – you in all probability used WordArt.
If that solely sounds vaguely acquainted, possibly it will refresh your reminiscence:
On this episode, Mark exhibits us a simple manner to enter the phrase processor and rapidly generate code that turns the Phrase rendering engine right into a type of superpower. You should use it so as to add WordArt impressed typography and extra into your Outlook emails.
Why would you need to do that? Properly, my mates, the 90s are again. You’ve in all probability observed graphic design tendencies harking back to commercials that aired throughout your favourite Saturday morning cartoons. These seems to be are displaying up in e mail advertising campaigns too. Try a number of the most-popular choices on Actually Good Emails and see for your self.
5 steps to make use of the Phrase rendering engine for cool stuff
When you can all the time use MSO types to manually code stylized textual content for Outlook emails, there’s a sooner approach to generate the code. Consider it or not – you mainly design it proper in Phrase.
Right here’s how Mark defined the method in 5 steps:
- Open Microsoft Phrase and create some stylized textual content.
- Mark selected an embossed yellow typeface with a mirrored image.
- Save the Phrase doc along with your stylized textual content as an internet web page.
- Open that HTML file up in an internet browser so you’ll be able to view the code.
- Proper click on and choose “View Web page Supply” to seek out and replica the MSO types and textual content from the HTML file.
- Paste the code into your e mail editor the place you need it to seem.
After that, you’ll must ship a check e mail to Outlook or generate e mail previews with an e mail testing instrument to see how your stylized textual content will get rendered. Right here’s what confirmed up in Mark’s check e mail:
Mark factors out that the snippet you seize from Phrase will embody a bunch of pointless code that you may and will eliminate to scrub issues up. He additionally provides that, as a result of it’s nonetheless stay textual content, display screen readers choose it up simply effective for recipients with accessibility considerations.
You might have observed that the little WordArt icon within the newest variations of Microsoft Phrase doesn’t precisely provide the similar choices as these fantastically funky ‘90s fonts did. Don’t fear. You too can flip again time and relive your early days of design.
Justin Pot wrote an article for Well-liked Science explaining find out how to get again to that retro WordArt. It is merely a matter of saving a file as a Phrase 97-2004 file (or .doc as an alternative of .docx) and opening it in compatibility mode.
“This lets you make the actually unhinged phrase artwork results all of us bear in mind so fondly from the Nineteen Nineties. That is what all of us did as an alternative of doing our homework, or our jobs, earlier than we had issues like social media and on-line sports activities betting to distract us from our duties.”
Justin Pot, Author, Well-liked Science
Bonus: simply create VMLs with MS Phrase
That’s not the place Mark’s suggestions finish both. He additionally confirmed us how you should use shapes and drawings within the phrase processor to generate Vector Markup Language (VML) photos for the Phrase rendering engine to show in emails.
Most e mail builders embody a VML namespace declaration within the HTML tag of each e mail to help using vector photos in Outlook emails. With Mark’s trick, you should use Phrase to rapidly add shapes like stars to an Outlook e mail, however you may also strive including icons, charts, and extra.
Mark says he’s solely begun to discover what’s attainable with the Phrase rendering engine, and he encourages you to mess around with it too.
“See what you are able to do and experiment with it a bit extra, as a result of Outlook simply will get forgotten a lot. You’re simply attempting to make one thing satisfactory. However really, we will improve it and do one thing type of cool with it.”
Mark Robbins, Software program Engineer, Parcel
Why the Phrase rendering engine’s days are numbered
We should always point out that the way forward for e mail could ultimately carry an finish to using the Phrase rendering engine. That’s as a result of a brand new Microsoft Outlook for desktop is utilizing an internet browser engine simply as different e mail purchasers do.
This doesn’t imply the variations of Outlook that use the Phrase rendering engine are disappearing anytime quickly. Everyone knows how lengthy it takes individuals to replace software program, and legacy Outlook installations shall be round for years.
Mark talked about this in his presentation at E mail Camp in 2023. The session additionally inspired e mail builders to “cease placing Outlook first.” That’s as a result of it could actually restrict you from attaining every little thing that’s attainable inside the e-mail inbox. Nevertheless, even should you don’t prioritize Outlook, you’ll be able to nonetheless design a cool expertise for Outlook customers.
Extra from Mark Robbins and Parcel.io
Search for Mark at e mail business occasions, observe him on Twitter/X @M_J_Robbins, (he not too long ago switched to Mastodon as an alternative). You’ll additionally discover him serving to out devs such as you and me within the E mail Geeks Slack group.
Listed here are a couple of different movies from Mark to take a look at:
And at last – this is a particular deal with for NFTD viewers from the parents at Parcel.io:
As you heard on the finish of the episode, Mark Robbins and Parcel are providing free trials of Parcel Professional for our followers. Parcel is certainly one of my favourite e mail improvement instruments, and I extremely suggest checking it out.
How E mail on Acid may also help with Outlook emails
Whereas we’re speaking about instruments for e mail builders, I’ve obtained to say how E mail on Acid is usually a large profit, particularly with regards to optimizing emails for Outlook.
If you need to check how an e mail renders in Outlook or any of the preferred purchasers and gadgets, our E mail Previews ship correct screenshots so that you can overview. With limitless testing on each plan, you’ll be able to mess around with Phrase and preview as many emails as you need.
If you happen to’re questioning if coding emails particularly for Outlook customers is value your time, our superior E mail Analytics may also help with that. You’ll get a breakdown of the purchasers and gadgets your subscribers use to view your emails together with many different superior insights like Learn, Skim, and Delete charges to measure e mail engagement. Plus, our E mail Accessibility checks guarantee each subscriber can interact with what you ship.
Lastly, thanks for being followers of Notes for the Dev. We love making the present and we’re planning to revamp and relaunch within the coming months. Be sure to subscribe to E mail on Acid’s YouTube channel so that you don’t miss it.
#Phrase #Rendering #Engine #Outlook #E mail #Coding