How to Cope with Email Rendering Challenges Across Diverse Email Clients

— November 17, 2017

When it comes to planning email marketing campaigns, marketers need to take into consideration various factors to ensure there is no rendering and deliverability issues. One key factor is the support from various email clients. With subscribers using diverse email clients and devices, it is necessary that each email designed should meet their specific guidelines and beat the rendering challenges.

The latest Email Client Market Share report shows that Apple iPhone is the most popular email client, followed by Gmail, Apple iPad, Apple Mail and Outlook. These email clients are categorized as widely-used and rarely-used email clients. 80% of the subscribers using the widely used email clients face several rendering issues, thereby increasing the probability of discrepancies.

Let us have a sneak peek into the major challenges and workarounds of the popular email clients widely used by email marketers and subscribers.

Desktop Email Clients

• Gmail for Desktop

This is the most convenient and most popular email client among the users.

Challenges and workarounds:

1. Message clipping
   Keep the email file size below 102 kb and avoid unnecessary styling.
2. <style> and <link> not supported in the head when sent through ESP
   Rewrite the code by adding a color style to each and every <a> tag.
3. Attribute selector does not work
   Instead of attribute selector, use .class selector.
4. Margin, padding, float and paragraph not supported
   Use a table based layout for margin and padding with <td>.
5. Background images not supported for non-Gmail ids configured for Gmail
   Use background color as a fallback.

• Outlook

Outlook and Outlook.com are the standard email clients in any work environment.

Challenges and workarounds:

1. Google fonts are not supported
   Use suitable fallback with conditional Outlook comments.
2. Max-width and min-width not supported
   Define tables with fixed width and use fluid layouts with a fixed width within media queries.
3. Does not support margins in <p> and <a>
   Add margin using <td> tag.
4. Displays only the first frame of GIF in email
   Use a static fallback of the GIF and trying conveying important message in the first frame of the GIF.
5. Does not support full-width background images
   Avoid using content-dependent graphics for background images.

Email Web Apps

• Gmail for Mobile

Gmail app is used to send and receive Gmail messages on the go.

Challenges and workarounds:

1. Gmail for iPhone turns numbers and dates into blue
   Use “text-decoration:” and provide a class in media queries and declare important to override the inline styles.
2. Font size increases by 50% in Gmail App
   Include white-space: nowrap and use a spacer image. Declare! Important and use mobile-specific content.
3. A white line appears between two-sliced images
   Use “display:block” in the image tag to remove the white line.

• Yahoo! Mail

With the advent of new email clients, users of Yahoo! have decreased drastically, but formerly it was used by a larger mass.

Challenges and workarounds:

1. Float tag is not supported
   Add align=”top” to the images.
2. Center align attribute does not work
   Use align=”center” and for tables of fixed width, use align center in td.
3. Min-width and max-width for webmail and Android app are not supported by media queries
   Instead of min or max-width, use width attribute &/or in the style to control the layout.

• Outlook.com

Many users still prefer the legacy version despite the advent of new version of Outlook.com.

Challenges and workarounds:

1. # in href breaks the anchor tag
   Use domain name instead of using #.
2. Unnecessary white space appears between images
   Remove the extra padding by setting the display property as “img {display:block;}”.
3. Does not support RGB borders
   Use HEX code for background color.

Mobile Email Apps

• Apple iPhone Native App

iPhone is the most desired email client because of its flawless user experience and support for interactive elements.

Challenges and workarounds:

1. Texts get resized
   Use a minimum font size of 22 pixels for header and 14 pixels for body.
2. For iOS 9: White spaces appear on the sides of the email
   Add margin padding “0” in the body inline.
3. For iOS 9: The general sibling selector ~ is not supported
   Use the adjacent selector + when used with :hover or :checked pseudo-class selectors.
4. For iOS 10: Responsive emails appear zoomed out due to auto-scaling
   Disable auto-scaling by using <meta name=”x-apple-disable-message-reformatting”> and adding a “padding:0;” to the <body> tag of your email.

• Android Native App

Android versions below Android 5 used native email client, which was replaced by Gmail later. About 10% of users still use native email clients for Android.

Challenges and workarounds:

1. Android 4.4 renders videos but does not play
   Use video fallback.
2. Some Android clients do not support sibling selector E~Y
   Enable general sibling selector by using body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }.
3. Samsung Native Client does not support absolute positioning
   Use margins.

Wrap-Up

What steps do you follow while designing emails to ensure your emails cope with the rendering challenges across various email clients and get delivered? Do let us know the comments below.

Digital & Social Articles on Business 2 Community

(77)