You spent hours crafting the perfect email campaign. But… just as you’re about to send it, you notice the test send that just arrived in your inbox looks a bit off.
Maybe there is a misaligned image or the layout’s broken or links which are not supposed to be underlined are or something extra ‘magically’ appeared in your footer making it look awful. Well, welcome to the universe of email rendering.
“Every email is a customer survey of your target market, by testing, they vote on what resonates best with them.” – Kath Pay
As an email marketer, you’d probably assume that after nearly 50 years since the first email was sent there’d be a solution to email rendering issues. Well, you would be wrong.
In this article, we’ll cover the following topics about email rendering:
- What are the most common email rendering issues?
- How to fix email rendering problems?
Ready to dive in?
In contrast to other marketing channels, the complication with emails comes from the different systems’ interpretation of an email’s code.
If we put together webmail clients with browsers, we’ll get five main factors determining how emails render –
1) Email Service Providers (ESPs)
Were you aware that ESPs will often change your email’s code just as you send the email out? They do it in order to add tracking pixels, remove code which can get your email stuck in spam filters (resulting in deliverability issues) or to rewrite links. However, an unchecked change such as this – as much as it typically can be a good thing – can also be bad for how your email renders.
2) Operating Systems (OS)
Your subscribers’ smartphone, tablet or computer’s OS can either limit or enhance the capabilities of the email client installed. Even though only a handful of OSs dominates the market, many subscribers use different versions of them such as Windows 10, 8 or 7 – all with a considerable market share.
3) App and web-based email clients
At the heart of email rendering technology are email clients such as Gmail, Hotmail and Outlook who run on mobile, desktop and web environments. However, web-based email clients have an additional layer of complexity since they render differently on different browsers. For instance, Gmail will function a little differently depending on the subscribers’ chosen browser – Chrome, Safari, Firefox, IE or even Microsoft Edge. Here are the most popular webmail, desktop and mobile email clients as of June 2020, according to Litmus –
4) Screen Sizes
Designing for the small screen comes with specific rules that improve readability while guiding people towards the key call-to-action. As such, the size of your subscribers’ screen plays a vital role and has a big impact on email rendering. For example, interacting with an email on a 21-inch screen is quite different than doing so on a 4-inch mobile screen, isn’t it?
In many email clients, images can either be enabled or blocked. This can generally create two very different renderings of a single email. Moreover, if you’ve devoted the time to personalise your email campaign – including the images which are based on the users’ preferences – and then your email doesn’t render properly, you risk not only losing the initial impact your email can make but also having your campaign appear broken. Here’s an example –
Fortunately, when designing email campaigns via professional ESPs – like EmailOut! – you can preview how your email will render not only on desktop but on mobile as well.
Furthermore, EmailOut’s awesome design test tool (which is free for all users) allows you to review your campaign in over 70+ different email clients and mobile devices. EmailOut’s free email design test tool ensures you avoid email rendering issues every time, anyone can use it for free, forever – create an account.
Most Common Email Rendering Issues (Per Email Client)
When it comes to email rendering, email clients play by their own rules. Hence why, emails render differently in email clients such as Gmail, Apple Mail, Yahoo!, Outlook, etc.
Let’s take a quick look at some basics. You certainly know the difference between plain text and HTML emails, moreover, the fact that pretty much every email sent is an HTML one. However, it all depends on the amount of HTML used, the more elements and/or features your email has (text, images, columns, background images, colours, links, etc.), the more HTML will be included in the email. Don’t worry though, as luck would have it, you don’t need to be a coding guru to create an HTML email campaign because professional ESP(s) have template galleries with a variety of free responsive email templates to choose from.
We’ve already listed the five main elements that come into play when determining how your email renders, remember them? Now we’d like to draw your attention to some common email rendering issues occurring amongst the most popular email clients.
a) Gmail for Desktop
- images are enabled by default, however, displaying images also depends on the settings recipients have selected (see image below). Therefore, you must ensure you’ve included alt text to ensure the subscribers know what the nature of the image is even if they’ve opted to turn off external images from loading;
- emails above 102kB will be ‘clipped’ showing a ‘view entire messages’ text (not including hosted images);
- CSS in <style> block is removed if it exceeds 8142 characters or includes errors;
- embedded styles (<style>) are only supported in the head of your HTML email;
- CSS styles that are not inlined are stripped away;
- emails with the same subject line will be merged – not that you’ll risk sending two campaigns with the same one; however, even if you are only testing, our recommendation is to slightly change the subject lines to avoid having them stacked in Gmail.
b) Gmail for Mobile
- all the above rendering problems apply here as well plus one more – the Gmail app on iPhone automatically turns phone numbers and dates to blue.
Since Apple iPhone supports interactive elements such as GIFs, cinemagraphs, videos, countdowns, retina images, sliders, etc., the subscribers’ email experience is pretty much flawless. However, there are a few email rendering issues to be considered –
- Screen size – newer models come out with bigger and bigger screens. As such, in order to overcome this, and ensure your email renders the same across all iPhone’s, you must update any (and all) of your media queries. Media queries are a feature of CSS that enables content to adapt to different screen sizes and resolutions and are an essential element of responsive design.
- Text size – small/tiny text automatically will get resized, therefore, make sure to keep the minimum font size as 16.5pt for headers and 10.5pt for body copy; with 12pt for mobile. Keep in mind these are the minimum suggested font sizes and you’re advised not to go below.
- Auto-scaling – in iOS 10 and 11, responsive emails will be auto-scaled leading to emails appearing off-centre or zoomed out. A solution to this would be adding “padding:0” to the <body> tag.
Depending on the Outlook version your subscribers are using as well as the device (desktop, mobile or tablet), these are the commonly faced email rendering issues –
a) Outlook 2000-2003 – those versions use Internet Explorer (IE) as a rendering engine.
- images are automatically blocked in Outlook’s early version, thus the inclusion of Alt text is a must;
- forms will be displayed but not functional so it’s preferable to link to a form/survey on a landing page rather than embedding a form;
- HTML5 video might be supported in those versions but it won’t play, instead, it’ll display the fallback content/image hence you must ensure there is one; and
- symbols in subject lines are not supported therefore you should avoid using them otherwise you risk having a ? or a box (☐) displaying instead of the symbol.
b) Outlook 2007/2010/2013 – those versions use Microsoft Word (2007,2010 and 2013) to render emails which results in limited support of HTML and CSS codes.
- lack of support for background images;
- no support for text-shadow;
- no support for forms – the text will be displayed; but, the interactive elements such as checkboxes, radio-buttons or form fields will not;
- poor support for margins and padding; and
- no support for animated GIFs or HTML5 video – as with previous versions, instead of displaying the GIF or video, the subscriber will only see the first frame as an image.
c) Outlook 2011 (a.k.a Outlook for Mac) – it runs on OS X which is Apple’s proprietary OS for Mac computers and uses WebKit for email rendering.
- images in this version, similar to the others, are blocked by default, however, they will be displayed for trusted senders.
We’ll get quite geeky for a second by listing the four rendering engines used by email clients –
1) Gecko – Mozilla Thunderbird;
2) WebKit – Apple Mail (incl. iPhone OS and iOS4 mail apps on iPhone, iPod and iPad;
3) Trident – Outlook until Outlook 2007; and
4) MS Word – Outlook 2007 and 2010.
If you are using a professional ESP then you have a free design test tool at the tip of your… mouse cursor which, with a single click, will show you previews of how your email campaign will render in over 70 different email clients.
How To Fix Email Rendering Issues?
Do you want your emails’ design to look awesome, convert like crazy and render perfectly? Then these tried-and-tested tips on avoiding email rendering issues are exactly what you need.
1) Always, always use a professional ESP.
You will not only get an abundance of perfectly designed responsive email templates (without the need to be a coding guru) but also, an email builder which will automatically optimise the size of both the images and the email’s width, lets you use a fallback font and background colour (just in case your images don’t render). Ah, and let’s not forget you’ll have access to a reporting system shedding light on the strengths and weaknesses of your email campaign.
2) Under 100kB size.
In order to avoid the content of your email from being hidden, we advise you to keep your emails HTML size under 100kB. You’ll not only avoid getting the message clipped but also, your email will pass through more spam filters.
3) Fonts are crucial.
A lot of email clients might either support Google Fonts or not. If you are using a Google Font which ends up not being supported by the recipient’s email client that will be an issue. Thus, you should always have a fallback font in place. Here is a list of fonts supported universally –
- Arial Black
- Comic Sans MS
- Courier New
- Times New Roman
- Trebuchet MS
- Σψμβολ2 (symbol)
- Webdings (symbol)
4) Familiarise yourself with email clients’ image display rules.
Email clients play by their own rules, as such, image display options are different from one email client to another. However, the table below can be your guide –
Since many email clients will block images by default or have the ability to have blocking turned on by the user, we HIGHLY recommend that you never send image-only emails and that all images in your campaigns have ALT text.
5) Never forget the unsubscribe link and always test, test, test.
You don’t want to keep uninterested people hostage, do you? Then simply make it easy for them to opt-out from your emails. Don’t forget and don’t hide your unsubscribe link. Ah, there’s also the matter of it being a legal requirement. Lastly, make sure you’re not sending broken emails to your subscribers by testing your email campaign. Send a preview to yourself and a couple of other colleagues and proofread every single point before releasing your campaign into the world. Our Ultimate Pre-Flight Checklist will guide you through the whole process without missing any steps.
NB Never test the unsubscribe function sent to your own email address, sounds obvious as you can guess the consequences, but it is a very common occurrence – instead, if you want to view the unsubscriber process or feel uneasy about your ESPs ability to suppress recipients, set up a Gmail address for this unsubscribe test purpose so that you do not suppress your own email address. Also, do not use the ‘Spam’ button in any email client you are testing into as this will reduce the reputation of your domain, IPs and sending infrastructure.
You are now more familiar with some of the most common email rendering issues across many of the most popular email clients. As such, you know what to look out for; and, how to design your HTML email in order to dodge the email rendering bullet.
You might’ve ‘extracted’ your email’s HTML thinking “Well, I’ll just import it directly into Gmail (or Outlook) and it’ll be all groovy-doovy”, however, you’d be wrong. Without the proper ESP, what you are trying to achieve will not be possible. So don’t waste your time – you’ll just ruin the code.
Follow our best practice list (and don’t forget to check out the additional reading) and you will have a brilliantly designed responsive email campaign that will not only sky-rocket your open and conversion rate but also, render perfectly across all different email clients.
EmailOut’s marketing leading drag and drop email creation tool automatically generates code which is responsive on desktops, tablets and mobile devices allowing you to preview in-app without the need to send a test for speedier editing. Combined with our FreeForever design test tool (70+ screenshots of your email campaigns in differing email client/device combinations in seconds) and you can be confident you’ll never make an email rendering mistake again – open an account now, it’s free, forever.