Rendering Emails Across Email Clients: Challenges and Workarounds
Most emails received in the inbox show the following:
- The email client displaying “Click here to download pictures” or “Show images: for this message/ always for this sender”.
- The email showing “View the email in browser” or “Click here to view the email online” link at the top.
From developing integrations to strategic support, from creating creative concepts to optimizing results.
The former is owing to email clients disabling images from unknown sender as a security step. The latter is a step taken by email developers to make sure that the emails you send are displayed without any glitches and the message is conveyed, irrespective of the diverse email clients or devices that subscribers use.
But there lies achallenge.
Email clients play by their own rules and render emails differently!
The Litmus Email Client Market Share shows that Apple Mail (44% inclusive of iOS mail for iPhone and iPad), followed by Gmail (29% inclusive of desktop and mobile), Outlook (12% inclusive of Outlook and Outlook.com) and Yahoo! Mail (6% inclusive of desktop and mobile) are the most commonly used email clients as on October 2018. All these email clients face some challenges in displaying the email exactly as it is designed in the first place.
Let us dive deeper into the various challenges that you might face with rendering emails on different email clients, and their workarounds.
Email Clients: Challenges and Workarounds
Apple iPhone
Apple iPhone supports interactive email elements like cinemagraph, GIF, videos, countdowns, sliders, retina images etc. and hence gives a flawless user experience. It is, therefore, the most popular email client.
Rendering issues in updated models: When iPhone models are updated with bigger screens, it leads to email rendering issues. To overcome this and to ensure that the email renders across all iPhone devices, update any of your media queries using a 320px breakpoint to 414px for iPhone 8 plus. Apart from keeping a fixed device width, you can even keep the width fluid.
No support for ~ selector when used with :hover or :checkedselectors: iOS9 lacks support for the general sibling selector ~ when it is combinedwith the pseudo-class selectors :checked and :hover. To get similar results,one can use the adjacent sibling selector + instead of ~.
Text gets resized: Tiny text automatically getsresized. Keep the minimum font size as 22 pixels for headers and 14 pixels forbody text.
Responsive emails get auto-scaled in iOS10 & iOS11: Autoscaling inresponsive emails leads to emailsappearing off-centered or zoomed out. To solve this, add “padding:0;” to the<body> tag and to disable autoscaling, use <metaname=”x-apple-disable-message-reformatting”>.
Gmail
Gmail supports GIFs and other visual elements that add to the aesthetic appeal of the emails. Gmail is one of the most convenient email clients both for desktop as well as mobile in terms of usability.
Gmail For Desktop
Message clipping: Gmail clips messages with a sizelarger than 102kb and hides the content behind a “View entire message” link. Toavoid this, keep the message size below 102kb and avoid using unnecessary styleattributes and tags.
Attribute selector not supported: The attribute selector used toselect elements is not supported. Instead, use .class selector.
Removes CSS in <style> block: If the <style> blockexceeds 8142 characters or includes nested @declarations, Gmail removes it. Toresolve this, use embedded styles that are short and error-free.
Background images not supported for non-Gmail ids: If a non-Gmail id isconfigured on Gmail, it does not support background images. Make sure you use aproper fallback for the background for such cases.
Font size increased by 50%: The font sizes for Gmail getincreased by almost 50%. As a workaround, use mobile-specific content withlarger images and concise menus and stick to a single column layout with nozooming or pinching required.
Margin, padding, float and paragraph not supported: Gmail does not renderparagraph and float. To render margin and padding, use table-based layout with<td>.
Gmail For Mobile
<style> and <link> not supported in head: Sometimes, the head doesnot support <style> or <link> tags. To resolve this, overwrite thedefault link color by adding a color style to each <a> tags within thecode.
Images sliced by white line: There appears a white line betweentwo or more sliced images. Use “display:block” in the image tag to remove thewhite line.
Dates and numbers turn into blue on iPhone: Gmail for iPhone turnsnumbers and dates into blue automatically. Use zero-width non-joiner,“text-decoration:” and span with “text-decoration: none” surrounding. Also, toavoid the blue line, define important to override the inline style.
Fluid emails look repulsive: On Gmail App, fluid emails look unimpressive.To solve this, create an illusion of floating elements by using “display:inline-block” along with “text-align: center”.
Outlook
Outlook and Outlook.com are widely used email clients in corporate environment. These email clients face several rendering issues that make it a tough task for the email developers.
No support for max-width and min-width: Outlook does not supportmax-width and min-width in CSS. To overcome this, use fluid layouts with afixed width within a media query.
CSS not supported in the head section: CSS used in the headsection of the HTML gets removed automatically. Inline CSS to solve this issue.
Removes paragraph and margin spacing: Outlook removes paragraphand margin spacing from the code. Use table-based layout and td/tr to add extraspace.
GIF not supported: Outlook renders just the first frameof GIF in emails. Make sure the first frame conveys the message or set anappropriate fallback by using a static image.
RGB borders not supported in Outlook.com: For background color,use HEX code instead of RGB borders.
Unnecessary whitespace added: Outlook.com adds unnecessary whitespace after the images. To remove the padding, set the display property as“img{display:block;}”.
Yahoo! Mail
min-device-width and max-device-width not supported in Mediaqueries: Forwebmail as well as Android App, use width attribute and/or in style instead ofmin or max-device-width. This will control the layout.
Float tags do not work: Float tags do not work for Yahoo!Mail. To resolve this, give align=”top” to the concerned image.
Reason behind such discrepancies between different email clients
Rendering engine is the main cause behind different email clients rendering the same email differently. Rendering engine is the brain of any email client. When an email client receives an email, it is a long wall of HTML code wrapped around by CSS animation. A rendering engine creates a structure based on the code specified in the HTML and adds specific styling accordingly to the CSS. Any unnecessary code is stripped out and not rendered in post-processing stage.
Some email clients likeApple Mail, Microsoft Outlook (till 2003) adopted the proprietary renderingengine they use in their browser. Webmail use a hybrid of their own renderingengine mixed with the browser it is opened in. Owing to this, the same code needsto be written in different syntaxes to avoid getting stripped out.
The following are popular email clients and the rendering engine used by each:
Apple Mail → Motore Safari Webkit
iOS Mail → Motore Safari Webkit
Outlook 2000 – 2003 → Internet Explorer 6.x (Trident)
Lotus Notes 6.5 e 7 → Internet Explorer 6.x (Trident) e Notes Rich Text (solo per IMAP / POP3)
Outlook 2007 e versioni successive → Microsoft Word
Outlook per MAC → Motore Safari Webkit
Mozilla Thunderbird → Motore Mozilla Gecko
Gmail e Yahoo! Mail → Motore di rendering proprietario combinato con il motore di rendering del browser
Common Mistakes to Avoid When Sending To Multiple Email Clients
- Avoidbackground image behind important CTA: Background image is not supportedin most email clients. Non-supported email clients replace the image with abackground color. This is particularly problematic if the background colormatches the font color of the text in foreground.
- Inline CSSevery time:Some email clients strips out any stylesheets specified between the<style> tag while almost all support inline CSS styling. So always playsafe by inlining your CSS code.
- Outlooksupports image dimensions in percentages and rest support in pixels: Thankfully, Outlookspecific code can be added between a Outlook conditional code i.e. <!–[ifgte mso 9]> ….. Code here…… </endif> which is ignored by other emailclients.
- Code emailusing <table> instead of <div>: While website coding have progressedto creating structure using <div>, certain email clients like Outlook2007 are still having problems to render <div> and so email developersstill stick to fail-proof method of coding <table> layout. Although it isinconvenient, keep coding email like it’s 1999…
Wrapping Up
In short, your emails won’t look the same in every email client out there. Consider these challenges and workarounds while building your next email campaign to make sure you make the most out of your emails.
From developing integrations to strategic support, from creating creative concepts to optimizing results.
Share this article
