Friday, 17 November 2017

How to Cope with Email Rendering Challenges Across Diverse Email Clients

raphaelsilva / Pixabay


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.



Source: B2C

No comments:

Post a Comment