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:
- Message clipping
Keep the email file size below 102 kb and avoid unnecessary styling. - <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. - Attribute selector does not work
Instead of attribute selector, use .class selector. - Margin, padding, float and paragraph not supported
Use a table based layout for margin and padding with <td>. - 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:
- Google fonts are not supported
Use suitable fallback with conditional Outlook comments. - Max-width and min-width not supported
Define tables with fixed width and use fluid layouts with a fixed width within media queries. - Does not support margins in <p> and <a>
Add margin using <td> tag. - 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. - 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:
- 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. - Font size increases by 50% in Gmail App
Include white-space: nowrap and use a spacer image. Declare! Important and use mobile-specific content. - 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:
- Float tag is not supported
Add align=”top” to the images. - Center align attribute does not work
Use align=”center” and for tables of fixed width, use align center in td. - 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:
- # in href breaks the anchor tag
Use domain name instead of using #. - Unnecessary white space appears between images
Remove the extra padding by setting the display property as “img display:block;”. - 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:
- Texts get resized
Use a minimum font size of 22 pixels for header and 14 pixels for body. - For iOS 9: White spaces appear on the sides of the email
Add margin padding “0” in the body inline. - For iOS 9: The general sibling selector ~ is not supported
Use the adjacent selector + when used with :hover or :checked pseudo-class selectors. - 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:
- Android 4.4 renders videos but does not play
Use video fallback. - 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; . - 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