Site icon Email Uplers

How to Cope with Email Rendering Challenges Across Diverse Email Clients

Kevin George
How-to-Cope-with-Email-Rendering

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

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

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.

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

iPhone is the most desired email client because of it’s 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 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.

Exit mobile version