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 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 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 and 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 For background color,use HEX code instead of RGB borders.

Unnecessary whitespace added: 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

Customer data quality: no effective strategy without data reliability

Sending is not enough. It's the quality and use of data that makes the difference. Let's introduce you to customer data quality, its advantages, and ...

Read more

The rise of phishing during weeks of emergency: best practices and authentication to defend yourself

Why are abuse attempts on the rise? Because, right now, the recipients are more vulnerable. Let's look at the steps companies can take and the ...

Read more

12 examples of transactional emails to boost sales and retention

If you want to drive up customer value and retention, start by optimizing the areas that already engage customers. One of these areas is definitely ...

Read more

Statistical Observatory 2020: results from 12 months of mailings

Analyzing nearly 14 billion emails revealed newsletter, DEM, and transactional email trends. Data on the timing of monthly and weekly sendings were especially interesting. We're pleased ...

Read more

Email marketing during emergency weeks: our study and some tips

Certainly, the engagement of some emails could improve dramatically these days. However, at the same time, a wrong message could damage both the branding and ...

Read more

Emojis & Email: The Latest, Their Impact on Clicks, and Optimization for Screen Readers

From brand-new emojis to their actual effectiveness in the subject line and body of emails, up to some tips for optimizing their use in screen ...

Read more