As a brand using email marketing, you need to ensure that your emails for subscribers are displayed exactly the way you intended.

Most emails received in the inbox show the following:

  1. The email client displaying “Click here to download pictures” or “Show images: for this message/ always for this sender”.
  2. The email showing “View the email in browser” or “Click here to view the email online” link at the top.

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 a challenge.

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.

Source: Litmus

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 :checked selectors: iOS9 lacks support for the general sibling selector ~ when it is combined with 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 gets resized. Keep the minimum font size as 22 pixels for headers and 14 pixels for body text.

Responsive emails get auto-scaled in iOS10 & iOS11: Autoscaling inresponsive emails leads to emails appearing off-centered or zoomed out. To solve this, add “padding:0;” to the <body> tag and to disable autoscaling, use <meta name=”x-apple-disable-message-reformatting”>.

Litmus Forums

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 size larger than 102kb and hides the content behind a “View entire message” link. To avoid this, keep the message size below 102kb and avoid using unnecessary style attributes and tags.

Attribute selector not supported: The attribute selector used to select elements is not supported. Instead, use .class selector.

Removes CSS in <style> block: If the <style> block exceeds 8142 characters or includes nested @declarations, Gmail removes it. To resolve this, use embedded styles that are short and error-free.

Background images not supported for non-Gmail ids: If a non-Gmail id is configured on Gmail, it does not support background images. Make sure you use a proper fallback for the background for such cases.

Font size increased by 50%: The font sizes for Gmail get increased by almost 50%. As a workaround, use mobile-specific content with larger images and concise menus and stick to a single column layout with no zooming or pinching required.

Margin, padding, float and paragraph not supported: Gmail does not render paragraph 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 does not support <style> or <link> tags. To resolve this, overwrite the default link color by adding a color style to each <a> tags within the code.

Images sliced by white line: There appears a white line between two or more sliced images. Use “display:block” in the image tag to remove the white line.

Dates and numbers turn into blue on iPhone: Gmail for iPhone turns numbers and dates into blue automatically. Use zero-width non-joiner, “text-decoration:” and span with “text-decoration: none” surrounding. Also, to avoid 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 support max-width and min-width in CSS. To overcome this, use fluid layouts with a fixed width within a media query.

CSS not supported in the head section: CSS used in the head section of the HTML gets removed automatically. Inline CSS to solve this issue.

Removes paragraph and margin spacing: Outlook removes paragraph and margin spacing from the code. Use table-based layout and td/tr to add extra space.

GIF not supported: Outlook renders just the first frame of GIF in emails. Make sure the first frame conveys the message or set an appropriate 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 white space 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 Media queries: For webmail as well as Android App, use width attribute and/or in style instead of min 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 like Apple Mail, Microsoft Outlook (till 2003) adopted the proprietary rendering engine they use in their browser. Webmail use a hybrid of their own rendering engine mixed with the browser it is opened in. Owing to this, the same code needs to 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

  1. Avoid background image behind important CTA: Background image is not supported in most email clients. Non-supported email clients replace the image with a background color. This is particularly problematic if the background color matches the font color of the text in foreground.
  2. Inline CSS every time: Some email clients strips out any stylesheets specified between the <style> tag while almost all support inline CSS styling. So always play safe by inlining your CSS code.
  3. Outlook supports image dimensions in percentages and rest support in pixels: Thankfully, Outlook specific code can be added between a Outlook conditional code i.e. <!–[if gte mso 9]> ….. Code here…… </endif> which is ignored by other email clients.
  4. Code email using <table> instead of <div>: While website coding have progressed to creating structure using <div>, certain email clients like Outlook 2007 are still having problems to render <div> and so email developers still stick to fail-proof method of coding <table> layout. Although it is inconvenient, 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.

Liked this article? We have plenty more in store for you.

Subscribe to get news, tips and updates delivered to your inbox.

Read also

4 ways to segment subscribers and send better emails

A regular email blast every week won’t get you 40x better results than social media. Let's look at 4 different ways to segment subscribers so ...

Read more

Two Must-Have Tools to Customize Emails

Imagine sending emails that are automatically composed with content that best matches each recipient. It's easy: let's take a look at two customization features you ...

Read more

Segmentation + Personalisation + Automation: you can do everything with the Filters

Let's look at the activities which can be performed with them to take your Email Marketing strategy to an advanced level. Our launch post promised you ...

Read more

Deliverability: the MailUp Story

Email design, automation, and segmentation? The main factor guaranteeing a successful Email Marketing campaign may also be the most underestimated. Let's talk about deliverability. We'll ...

Read more

9 Content Attributes That Damage Your Email Marketing

Whether you create your own marketing emails as an eCommerce website owner or work to better your clients’ businesses through email marketing, creating the perfect ...

Read more

Case Study | How Walmart Argentina Boosts the Effectiveness of Automated, Customized Campaigns

We asked Walmart how it enriched the shopping experience through a series of automated and profiled campaigns for each phase of the customer relationship. Walmart Argentina sought ...

Read more