|
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:
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 clientsAt 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 SizesDesigning 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? 5) ImagesIn 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. Gmaila) Gmail for Desktop
b) Gmail for Mobile
Apple iPhoneSince 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 –
OutlookDepending 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.
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.
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.
As web-browsers have rendering engines to convert HTML, CSS and JavaScript into something not only viewable but also usable, so do (most) email clients and the rendering engine’s job is the same but for HTML emails. We’ll get quite geeky for a second by listing the four rendering engines used by email clients –1) Gecko – Mozilla Thunderbird; 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 –
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. Final ThoughtsYou 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. Highly recommended further reading –1) Optimising Your Emails for Small Screens [link] [comments] |
source https://www.reddit.com/r/Emailmarketing/comments/i0isza/email_rendering_lifting_the_veil_on_email_render/
No comments:
Post a Comment