It’s been a minute for the reason that final episode of Notes from the Dev, however this one is well worth the wait. We’ve bought one of the recognizable electronic mail geeks ever on the present, Mark Robbins. He’ll present us the right way 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’ll have come throughout Mark Robbins because of his appropriately named web site, GoodEmailCode.com. Moreover being an completed electronic mail developer, Mark can also be a software program engineer who’s labored for Salesforce and is presently working with our pals at Parcel.io. Plus, he’s a founding member of the E mail Markup Consortium (EMC), which is advocating for electronic mail business requirements that enhance inbox experiences.
Whereas these of us who code emails know that desktop variations of Outlook generally is 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 under and preserve studying for extra.
Phrase rendering engine: The massive drawback with Outlook emails
E mail rendering refers back to the approach totally different electronic mail purchasers help and course of the HTML and CSS code in your campaigns. Using totally different rendering engines typically results in inconsistent leads to 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, nevertheless, use Microsoft Phrase to render emails. The Phrase rendering engine is what causes most of the most typical electronic mail coding challenges. That features all the things from random white traces in Outlook to points with animated GIFs.
MSO kinds for Outlook emails
A technique electronic mail builders deal with points with HTML emails in Outlook is utilizing Microsoft Workplace (MSO) fashion attributes utilizing the <mso- > 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 kinds usually are not supported.
Mark’s web site has a set of code snippets that includes MSO kinds, 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 electronic mail designs prefer it’s 1999? 25 years in the past, should you have been utilizing Microsoft Phrase to design an invite to your party or needed to make your homework project snazzier – you most likely used WordArt.
If that solely sounds vaguely acquainted, perhaps it will refresh your reminiscence:
On this episode, Mark exhibits us a straightforward approach to enter the phrase processor and rapidly generate code that turns the Phrase rendering engine right into a kind of superpower. You need to use it so as to add WordArt impressed typography and extra into your Outlook emails.
Why would you need to do that? Nicely, my pals, the 90s are again. You’ve most likely seen graphic design traits harking back to commercials that aired throughout your favourite Saturday morning cartoons. These seems to be are displaying up in electronic 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
Whilst you can all the time use MSO kinds to manually code stylized textual content for Outlook emails, there’s a quicker solution 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 may view the code.
- Proper click on and choose “View Web page Supply” to search out and duplicate the MSO kinds and textual content from the HTML file.
- Paste the code into your electronic mail editor the place you need it to look.
After that, you’ll must ship a check electronic mail to Outlook or generate electronic mail previews with an electronic mail testing device to see how your stylized textual content will get rendered. Right here’s what confirmed up in Mark’s check electronic mail:
Mark factors out that the snippet you seize from Phrase will embrace a bunch of pointless code you can and will do away with to wash issues up. He additionally provides that, as a result of it’s nonetheless reside textual content, display readers choose it up simply tremendous for recipients with accessibility issues.
You’ll have seen 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 may also flip again time and relive your early days of design.
Justin Pot wrote an article for In style Science explaining the right way 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 a substitute of .docx) and opening it in compatibility mode.
“This lets you make the really unhinged phrase artwork results all of us keep in mind so fondly from the Nineteen Nineties. That is what all of us did as a substitute 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, In style 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) pictures for the Phrase rendering engine to show in emails.
Most electronic mail builders embrace a VML namespace declaration within the HTML tag of each electronic mail to help using vector pictures in Outlook emails. With Mark’s trick, you should use Phrase to rapidly add shapes like stars to an Outlook electronic mail, however you can too attempt including icons, charts, and extra.
Mark says he’s solely begun to discover what’s potential 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 making an attempt to make one thing satisfactory. However really, we will improve it and do one thing sort of cool with it.”
Mark Robbins, Software program Engineer, Parcel
Why the Phrase rendering engine’s days are numbered
We must always point out that the way forward for electronic mail could ultimately deliver an finish to using the Phrase rendering engine. That’s as a result of a new Microsoft Outlook for desktop is utilizing an internet browser engine simply as different electronic 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 can be round for years.
Mark talked about this in his presentation at E mail Camp in 2023. The session additionally inspired electronic mail builders to “cease placing Outlook first.” That’s as a result of it will probably restrict you from attaining all the things that’s potential inside the e-mail inbox. Nevertheless, even should you don’t prioritize Outlook, you may nonetheless design a cool expertise for Outlook customers.
Extra from Mark Robbins and Parcel.io
Search for Mark at electronic mail business occasions, observe him on Twitter/X @M_J_Robbins, (he not too long ago switched to Mastodon as a substitute). You’ll additionally discover him serving to out devs such as you and me within the E mail Geeks Slack neighborhood.
Listed below are a number of different movies from Mark to take a look at:
And eventually – 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 one in all my favourite electronic mail growth instruments, and I extremely advocate checking it out.
How E mail on Acid may help with Outlook emails
Whereas we’re speaking about instruments for electronic mail builders, I’ve bought to say how E mail on Acid generally is a huge profit, particularly in the case of optimizing emails for Outlook.
If you need to check how an electronic mail renders in Outlook or any of the most well-liked purchasers and gadgets, our E mail Previews ship correct screenshots so that you can assessment. With limitless testing on each plan, you may mess around with Phrase and preview as many emails as you need.
In the event you’re questioning if coding emails particularly for Outlook customers is price your time, our superior E mail Analytics may 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 electronic 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.
