The idea of a pixel-perfect email rendering across every email client died a long time ago. The challenge for most of the past decade is to achieve platform-perfect rendering, where an email renders up to the fullest capabilities of a particular inbox provider.
But even that is an increasingly tall order for four main reasons:
The traditional landscape of email clients is still quite expansive
The viewing options selected by email recipients
The decision of senders to use email content and code that has limited support or inconsistent implementations
The growth of browserless email clients with limited rendering functionality and conversion ability
Let’s talk about each of them in turn, starting with…
The traditional email client rendering equation remains nearly as complex as ever. Here, email marketers will worry about how their emails render on desktop clients, webmail clients, and mobile clients.
To keep our math conservative and realistic for most businesses, let’s ignore some of the fringe scenarios and assume that your business is national, rather than international.
Desktop email clients. Let’s assume that most senders are dealing with six operating systems and five desktop email clients. And while people use a variety of monitor sizes, let’s assume none of them are materially different from each other. So, there’s 30 potential different email renderings here.
Webmail clients. This environment is the most complex, since web browsers affect rendering and the screen sizes used can vary wildly. Let’s assume that most senders are dealing with six operating systems, four browsers, and seven webmail clients across three different screen sizes—desktop monitors, tablets, and mobile devices. That gives us 504 potential different email renderings for webmail clients.
Mobile email clients. Let’s assume that most senders are dealing with eight operating systems and five email apps across tablet and mobile screen sizes. So, that’s 80 potential different email renderings for mobile email clients.
Altogether, that’s 614 potential different renderings for a single email. And if you operate globally, then you’re looking at hundreds more potential renderings because of the wider diversity of platforms and email clients used.
But that’s really just the beginning of the complexity. Next, let’s look at subscriber choices and sender choices that impact rendering.
Email recipients make choices that further complicate email rendering, with the big ones being the decision to use dark mode, disable images, or use a screen reader.
Light/dark mode. A hot UX trend for the past few years, dark mode has made its way to email clients as well. However, dark mode for email is notoriously difficult to design for because it’s not implemented consistently across the email clients that support it. So, not only will subscribers potentially have a different email rendering when they use dark mode, but they might have a less than optimal one.
“We are seeing some clients optimize components of their email architecture to accommodate for dark mode and others that are redesigning their email templates from the ground up to account for the effects of dark mode,” says Jason Witt, Senior Creative Director for Creative Services, Oracle Digital Experience Agency. “Either way, brands will also have to account for how their logos, iconography, colors, live text, and imagery will be affected to ensure a great subscriber experience.”
Text size. While most email clients let users zoom in on emails to make them larger and more readable, some actually allow their users to change the default font size of incoming emails. For example, desktop Outlook allows users to do this by adjusting default font settings in Windows 10.
“Usually small changes in the default or minimum font sizes will not mess things up too badly,” says Nick Cantu, Senior Art Director for Creative Services at Oracle Digital Experience Agency, “but when a recipient increases the font size 150% or 200%, the text may break table cells causing rendering issues. Developing emails with live text that has adequate spacing and flexibility to grow can reduce these issues.”
Enabling/disabling images. The vast majority of commercial email messages are HTML-based messages with images, because this format generally performs much better than text-only emails. However, whether by choice or circumstance, sometimes images don’t load.
For instance, recipients sometimes turn off images for a variety of reasons, such as personal preference or as a way to conserve mobile data. Other times, images are blocked because of security reasons. For example, emails that land in junk folders often have their images disabled. And sometimes images are slow to load because of limited bandwidth due to a poor cellular or Wi-Fi signal.
“Alt text is an important tool for being inclusive within the digital space,” says Lauren Castady, Associate Creative Director for Creative Services, Oracle Digital Experience Agency. “Not only are brands avoiding potential lawsuits by implementing accessibility best practices, but they are optimizing content for every user no matter what their situation is.”
Over the years, brands have learned the importance of using tools like alt text in order to be inclusive within the digital space.
Screen readers. Taking image disabling a step further, screen readers ignore image blocks all together and just focus on the text of your email. To maximize your email accessibility:
Use HTML text as much as possible
Use alt text to replace any important text that’s embedded in an image, while also refraining from using alt text on images where a description of the image doesn’t really aid in the understanding of the email
Group the text in table cells to ensure a logical flow when read aloud
Use action-oriented calls-to-action that make it clear what will happen next
“There are over 285 million people who are visually impaired in the world, and 121 million who are using voice-assistants in America alone,” says Castady. “Making small but impactful accessibility updates can help optimize the experience for all of those people, whether they have permanent visual impairments like blindness or are having Siri read their emails to them as they drive.”
Senders also create additional rendering permutations as part of their efforts to take advantage of the fullest capabilities of a particular inbox provider. To be clear, that’s a good thing because it creates richer experiences that are more immersive and user-friendly. However, it still complicates rendering, because some of your subscribers will experience the functionality and others won’t.
Here are some forms of email functionality that aren’t supported everywhere:
Font support. Web fonts are supported in some of the most popular email clients, but not all. So, you’ll always want to define a web safe font as a fallback as part of the font family that you define for your email. Learn more about email font families.
Animated gifs included. Animated gifs are almost universally supported. The desktop versions of Microsoft Outlook are among the few holdouts. When animated gifs aren’t supported, they typically display the first frame of the animation as a still. Learn how best to use animated gifs in emails.
Live content added. While all other email content is determined at the time of send, live content is determined at the time of open. Using live content allows your emails to display the most up-to-date sports scores, weather forecast, poll results, or any other kind of information. However, support is spotty. Learn about the best use cases for live content in emails.
CSS-based interactivity added. CSS coding allows brands to create more interactive email experiences, such as adding product carousels, hover effects, hamburger menus, and much more. Apple’s email clients are the most supportive of CSS-based interactivity. See a showcase of emails using CSS-based interactivity.
AMP for Email MIME part included. AMP for Email allows for highly interactive emails, but it requires coding an entirely different MIME part with a special coding language, and the AMP for Email MIME part is only accepted by Google’s email clients and a few others. Learn about the pros and cons of AMP for Email.
Dynamic content. The good news is that email personalization is not dependent on inbox provider support. The bad news, in terms of rendering, is that personalization can easily multiply your possible rendering permutations by 10 fold or even 100 fold—and AI-powered content recommendations promise to take that number even higher. However, careful attention to image size and copy length standardization helps avoid any serious rendering issues.
With the exception of AMP for Email, which Oracle Digital Experience Agency’s experts currently consider a low adoption–low impact email marketing trend, all of those others are considered either low adoption–high impact email marketing trends or high adoption–high impact email marketing trends. That’s to say that they are important email tools marketers often use or should.
Let’s stop for a second and look at the rendering complexity that’s piled up so far. Given our assumptions about the average email client landscape faced by marketers, and given subscribers’ ability to use dark mode, a larger font, disable images, and use screen readers, if you created an email that included web fonts, an animated gif, live content, CSS-based interactivity, and an AMP for Email MIME part, you’d be looking at more than 300,000 different potential renderings of a single email—and tens of thousands more if you operate globally. Add in just a little personalization, and you’re quickly over one million.
Obviously, it would be quite rare for most businesses to send an email with all of that packed into it. Plus, potential renderings don't equal actual differences in rendering in most instances. However, hopefully this mathematical exercise demonstrates just how much complexity there is in email rendering, and therefore why careful coding and a rigorous QA process is essential.
But as complicated as all of that is, it doesn’t compare to what’s done to emails by...
While they only represent an additional handful or so of email rendering possibilities, smart watches and voice-assistants dramatically upend traditional email rendering. That’s because:
Neither connect to a web browser, which makes nearly every email CTA pointless, since the vast majority direct subscribers to a webpage
Neither can render HTML email with images, so you can only communicate via text, whether it’s presented visually or via audio
The lack of a web browser in smart watches and voice-assistants makes these into “dead-end email clients” that are generally only suitable for triaging commercial emails—deciding which to delete and which to save to engage with later on a computer or smartphone. That’s kind of a blessing, because it allows marketers to focus on the portion of the email that’s most critical in the triaging decision-making process: the envelope content.
With browserless email clients, there’s an added premium on having recognizable sender names, descriptive subject lines that emphasize what’s in it for the subscriber, and preview text that extends and supports the subject line. And extra considerations are needed to accommodate voice transcriptions.
“Voice-assistants—as well as screen readers—don’t have the ability to make content translations yet, so acronyms, emojis, and other creative text treatments and wordplay run the risk of being misinterpreted by a reader,” says Kathryn Alva, Associate Creative Director at Oracle Digital Experience Agency. “While these tactics can help your subject lines stand out in the visual inbox, unfortunately, they fall flat in the verbal inbox.”
While the goal with traditional desktop, web, and mobile email clients is still platform-perfect design, the goal with smart watches and voice-assistants for the next decade or so will be platform-passable design. Of course, if the voice revolution continues on its current trajectory, it may eventually become way easier to transact via voice. At some point, we may even gain the ability to target voice-assistants with code or gain support for a voice-based MIME part so we can better serve this audience of subscribers. If that happens, it would open up a whole new world of on-the-go, hands-free interactions.
Need help with your digital marketing campaigns? Oracle Digital Experience Agency has hundreds of marketing and communication experts ready to help Oracle customers create stronger connections with their customers, partners, and employees, even if they’re not using an Oracle platform as the foundation of that experience. Our award-winning specialists can handle everything from creative and strategy to content planning and project management. For example, our full-service email marketing clients generate 24% higher open rates, 30% higher click rates, and 9% lower unsubscribe rates than Oracle Responsys customers who aren’t.
Want to better understand your email marketing risks and opportunities, take advantage of our free Email Marketing Assessment. Our experts will check your deliverability, review your email creative, audit your signup process, do a partial competitive analysis, and more. If interested in this free assessment, reach out to us at OracleAgency_US@Oracle.com.
Chad S. White is the Head of Research at Oracle Digital Experience Agency and the author of four editions of Email Marketing Rules and nearly 4,000 posts about digital and email marketing. A former journalist, he’s been featured in more than 100 publications, including The New York Times, The Wall Street Journal, and Advertising Age. Chad was named the ANA's 2018 Email Marketer Thought Leader of the Year. Follow him on LinkedIn, Twitter, and Mastodon.