It’s been a minute for the reason that final episode of Notes from the Dev, however this one is definitely worth the wait. We’ve bought some of the recognizable e mail geeks ever on the present, Mark Robbins. He’ll present us the right way to improve Outlook emails through the use of its Microsoft Phrase rendering engine to your benefit.
If that sounds loopy, I get it. However simply wait.
You could have come throughout Mark Robbins because of his appropriately named web site, GoodEmailCode.com. Moreover being an completed e 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 e 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. Take a look at the episode under and hold studying for extra.
Phrase rendering engine: The large downside with Outlook emails
E-mail rendering refers back to the means completely different e mail shoppers assist and course of the HTML and CSS code in your campaigns. The usage of completely different rendering engines typically results in inconsistent leads to varied inboxes. For instance, Apple Mail makes use of WebKit for its rendering engine, which has a few of the greatest assist, and permits for extra interactive parts in emails.
Desktop variations of Outlook, nevertheless, use Microsoft Phrase to render emails. The Phrase rendering engine is what causes lots of the most typical e mail coding challenges. That features all the pieces from random white traces in Outlook to points with animated GIFs.
MSO types for Outlook emails
A technique e mail builders handle points with HTML emails in Outlook is utilizing Microsoft Workplace (MSO) type attributes utilizing the <mso- > prefix. This enables us to create fallbacks for desktop variations of Outlook utilizing conditional code.
Be aware: Outlook for Mac, iOS, and Android don’t use the Phrase rendering engine, which implies MSO types are usually 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, in the event you have been utilizing Microsoft Phrase to design an invite to your birthday celebration or needed to make your homework task snazzier – you most likely used WordArt.
If that solely sounds vaguely acquainted, possibly it will refresh your reminiscence:
On this episode, Mark exhibits us a simple means to enter the phrase processor and shortly generate code that turns the Phrase rendering engine right into a form of superpower. You need to use it so as to add WordArt impressed typography and extra into your Outlook emails.
Why would you wish to do that? Nicely, my pals, the 90s are again. You’ve most likely observed graphic design traits harking back to commercials that aired throughout your favourite Saturday morning cartoons. These appears are displaying up in e mail advertising and marketing campaigns too. Take a look at a few 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 solution to generate the code. Imagine 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 possibly can view the code.
- Proper click on and choose “View Web page Supply” to seek out and duplicate 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 have to ship a take a look at e mail to Outlook or generate e mail previews with an e mail testing device to see how your stylized textual content will get rendered. Right here’s what confirmed up in Mark’s take a look at e mail:
Mark factors out that the snippet you seize from Phrase will embody a bunch of pointless code that you would be able to and may do away with to wash issues up. He additionally provides that, as a result of it’s nonetheless dwell textual content, display screen readers decide it up simply nice for recipients with accessibility considerations.
You could 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 can too flip again time and relive your early days of design.
Justin Pot wrote an article for Fashionable 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 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, Fashionable 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 e mail builders embody a VML namespace declaration within the HTML tag of each e mail to assist the usage of vector pictures in Outlook emails. With Mark’s trick, you should use Phrase to shortly add shapes like stars to an Outlook e mail, however it’s also possible to attempt 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 are able to 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 must always point out that the way forward for e mail could finally convey an finish to the usage of 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 shoppers 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 will likely 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 restrict you from reaching all the pieces that’s attainable inside the e-mail inbox. Nevertheless, even in the event you don’t prioritize Outlook, you possibly can 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 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 oldsters 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 every of my favourite e mail improvement instruments, and I extremely suggest checking it out.
How E-mail on Acid might help with Outlook emails
Whereas we’re speaking about instruments for e mail builders, I’ve bought to say how E-mail on Acid generally is a large profit, particularly on the subject of optimizing emails for Outlook.
While you wish to take a look at how an e mail renders in Outlook or any of the preferred shoppers and units, our E-mail Previews ship correct screenshots so that you can evaluation. With limitless testing on each plan, you possibly can mess around with Phrase and preview as many emails as you need.
For those who’re questioning if coding emails particularly for Outlook customers is value your time, our superior E-mail Analytics might help with that. You’ll get a breakdown of the shoppers and units 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 have interaction 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
