Problem 

HTML rendering in email clients is widely inconsistent. This is due to various factors including the level of support for different HTML and CSS features, how different email clients handle unsupported features and even how they embed the HTML email message within the email client user interface. In addition to the email-specific factors, there are cross-browser compatibility considerations that must be taken into account. In fact, this goes beyond web browsers because the Outlook Windows and Windows Mail desktop apps still use Microsoft Word as a rendering engine – and not a web browser engine! 

Setting the right goals 

Consistent HTML rendering across email clients and presenting your brand message in an identical way regardless of the email client used to view it is not a bad thought, but given the factors listed above it is not an attainable goal. 

A more achievable and impactful goal is sending emails that are consistently usable, accessible and at minimum presentable and responsive while communicating the same message without sacrificing the brand image. At Flourish we believe this approach is more effective in achieving our clients’ ultimate goals from their CRM communications.  

Approach 

Ensuring the recipient can access and consume the contents of the email and interact with it (where applicable) whilst ensuring the email remains presentable across all relevant email clients is a big technical challenge.  

Accessibility 

Building HTML emails that are accessible to as many people (disabled or not) as possible is a major goal for all emails we build. The target audience here is literally everyone. This includes people who need to use assistive technology to access the content and those who use it to make the consumption of content a lot easier. It includes who need to rely on software to translate the content and those who must use alternative input devices to navigate. 

With this mindset we write code that heroes the content semantically and visually. We collaboratively work with our designers to ensure a high level of readability, sufficient colour contrast and sensible dark mode choices. 

Progressive enhancement 

This is why we take a progressive enhancement approach in which we first build the HTML email with the minimum needed to render semi-consistently across email clients and a big focus on keeping the content accessible. Then we progressively enhance that minimum baseline HTML with fancier nice-to-have features. These features are implemented in a way that if not rendered by the email client, they would not break that baseline HTML. 

In some cases, we may have multiple levels of progressive enhancements. For example, a coloured gradient can be rendered as a solid colour in some email clients, a static background image in some or from a programmatically generated image with CSS.  

The above example revolves around aesthetics only – which can be important to maintain the sender’s brand image. However, there are also cases where multiple levels of progressive enhancements are needed to ensure the email’s contents remain accessible and useful to the recipient. Due to the limited feature detection techniques in email land, this is when we utilise email client targeting techniques to fine-tune rendering with greater care for specific email clients that are relevant to the sender’s audience. Making data-backed decisions here can essentially guide our team to focus on what is important to our clients’ unique audiences. 

Optimise for the unhappy path 

When viewing a HTML email, there are two distinct states. The first is when the message is displayed with all external resources such as images and web fonts – which is what everyone optimises for. However, we don’t believe it is enough to solely rely on the happy path, so we pay attention to the second state: when a user disables the download of external resources. This can involve styling the alternative text for images appropriately which would typically be hidden and ensuring the content remains as accessible as possible. 

Forfeiting control, intelligently 

Due to the limited support of many HTML and CSS features in email, it is not always possible to control how things are rendered in all situations. For example, it is not possible to render dark mode styles in some email clients that have auto dark mode conversions such as Gmail. This does not mean we simply forfeit full control. Instead, we make intelligent choices to ensure the email still renders well in dark mode. This may involve collaborating with designers to tweak some colours and use images that render well in both light and dark modes. 

Performance 

Unlike the web, performance, in relation to rendering and page load time, is not a widely discussed topic in email. On a normal web page when displaying a single image, it is possible to provide the browser with several versions of the same image for different screen sizes and display densities. You can explicitly tell the browser which version to use for which environment, or you can provide it with the information needed for it to pick the appropriate version on its own. This way the user doesn’t download a 4K quality image when they are on a display incapable of displaying the image at that quality. 

This is not possible in most major email clients. This is why a balance between performance and quality is needed and may take additional considerations in email. Defaulting to retina quality images (suitable for high density pixel display) is a common practice. It is vital that images are properly compressed and are saved in the most appropriate format for the image type. 

When a single high-quality image is used for all environments and screen sizes, image rendering can be slow in some cases. This can potentially cause vertical content layout shifts. We can enhance the image loading experience by telling the browser to maintain the aspect ratio of the image even before it loads. This approach does not break the responsiveness of the email. 

About the Author: 

Hussein Alhammad is Lead Developer at Flourish and a founding member of the Email Markup Consortium (EMC), a community-led group of industry professionals working to improve the email experience for everyone. For Hussein, developing is not a profession but an art form and he’s passionate about pushing the boundaries of what can be achieved with code. 

Need help ensuring your emails are reaching the right audience, with the right message, at the right time? Get in touch with the friendly experts at Flourish Customer Journey Marketing.

About Flourish

We’re a specialist CRM agency, delivering data-driven customer journeys.