![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding.jpg\")
<\/a><\/div><\/div>\nLet us have a sneak peek into the major challenges and workarounds of the popular email clients widely used by email marketers and subscribers.<\/p>\n
Desktop Email Clients<\/h2>\n\n- \n
Gmail for Desktop<\/h3>\n<\/li>\n<\/ul>\n
This is the most convenient and most popular email client among the users.<\/p>\n
Challenges and workarounds:<\/strong><\/p>\n\n- Message clipping<\/strong>
\nKeep the email file size below 102 kb and avoid unnecessary styling.<\/li>\n- <style> and <link> not supported in the head when sent through ESP<\/strong>
\nRewrite the code by adding a color style to each and every <a> tag.<\/li>\n- Attribute selector does not work<\/strong>
\nInstead of attribute selector, use .class selector.<\/li>\n- Margin, padding, float and paragraph not supported<\/strong>
\nUse a table based layout for margin and padding with <td>.<\/li>\n- Background images not supported for non-Gmail ids configured for Gmail<\/strong>
\nUse background color as a fallback.<\/li>\n<\/ol>\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/07\/sample-email-template-NL-LP.jpg\")
<\/a><\/div><\/div>\n\n- \n
Outlook<\/h3>\n<\/li>\n<\/ul>\n
Outlook and Outlook.com are the standard email clients in any work environment.<\/p>\n
Challenges and workarounds:<\/strong><\/p>\n\n- Google fonts are not supported<\/strong>
\nUse suitable fallback with conditional Outlook comments.<\/li>\n- Max-width and min-width not supported<\/strong>
\nDefine tables with fixed width and use fluid layouts with a fixed width within media queries.<\/li>\n- Does not support margins in <p> and <a><\/strong>
\nAdd margin using <td> tag.<\/li>\n- Displays only the first frame of GIF in email<\/a><\/strong>
\nUse a static fallback of the GIF and trying conveying important message in the first frame of the GIF.<\/li>\n- Does not support full-width background images<\/strong>
\nAvoid using content-dependent graphics for background images.<\/li>\n<\/ol>\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2020\/01\/Web-Banner-K_V1.jpg\")
<\/a><\/div><\/div>\nEmail Web Apps<\/h2>\n\n- \n
Gmail for Mobile<\/h3>\n<\/li>\n<\/ul>\n
Gmail app is used to send and receive Gmail messages on the go.<\/p>\n
Challenges and workarounds:<\/strong><\/p>\n\n- Gmail for iPhone turns numbers and dates into blue<\/strong>
\nUse \u201ctext-decoration:\u201d and provide a class in media queries and declare important to override the inline styles.<\/li>\n- Font size increases by 50% in Gmail App<\/strong>
\nInclude white-space: nowrap and use a spacer image. Declare! Important and use mobile-specific content.<\/li>\n- A white line appears between two-sliced images<\/strong>
\nUse \u201cdisplay:block\u201d in the image tag to remove the white line.<\/li>\n<\/ol>\n\n- \n
Yahoo! Mail<\/h3>\n<\/li>\n<\/ul>\n
With the advent of new email clients<\/a>, users of Yahoo! have decreased drastically, but formerly it was used by a larger mass.<\/p>\nChallenges and workarounds:<\/strong><\/p>\n\n- Float tag is not supported<\/strong>
\nAdd align=\u201dtop\u201d to the images.<\/li>\n- Center align attribute does not work
\n<\/strong>Use align=\u201dcenter\u201d and for tables of fixed width, use align center in td.<\/li>\n- Min-width and max-width for webmail and Android app are not supported by media queries
\n<\/strong>Instead of min or max-width, use width attribute &\/or in the style to control the layout.<\/li>\n<\/ol>\n![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/rich-media.jpg\")
<\/a><\/div><\/div>\n\n- \n
Outlook.com<\/h3>\n<\/li>\n<\/ul>\n
Many users still prefer the legacy version despite the advent of new version of Outlook.com.<\/p>\n
Challenges and workarounds:<\/strong><\/p>\n\n- # in href breaks the anchor tag<\/strong>
\nUse domain name instead of using #.<\/li>\n- Unnecessary white space appears between images<\/strong>
\nRemove the extra padding by setting the display property as \u201cimg {display:block;}\u201d.<\/li>\n- Does not support RGB borders<\/strong>
\nUse HEX code for background color.<\/li>\n<\/ol>\nMobile Email Apps<\/h2>\n\n- \n
Apple iPhone Native App<\/h3>\n<\/li>\n<\/ul>\n
iPhone is the most desired email client because of it’s flawless user experience and support for interactive elements.<\/p>\n
Challenges and workarounds:<\/strong><\/p>\n\n- Texts get resized<\/strong>
\nUse a minimum font size of 22 pixels for header and 14 pixels for body.<\/li>\n- For iOS 9: White spaces appear on the sides of the email<\/strong>
\nAdd margin padding \u201c0\u201d in the body inline.<\/li>\n- For iOS 9: The general sibling selector ~ is not supported<\/strong>
\nUse the adjacent selector + when used with :hover or :checked pseudo-class selectors.<\/li>\n- For iOS 10: Responsive emails appear zoomed out due to auto-scaling<\/strong>
\nDisable auto-scaling by using <meta name=\u201dx-apple-disable-message-reformatting\u201d> and adding a \u201cpadding:0;\u201d to the <body> tag of your email.<\/li>\n<\/ol>\n
Gmail for Desktop<\/h3>\n<\/li>\n<\/ul>\n
This is the most convenient and most popular email client among the users.<\/p>\n
Challenges and workarounds:<\/strong><\/p>\n Outlook and Outlook.com are the standard email clients in any work environment.<\/p>\n Challenges and workarounds:<\/strong><\/p>\n Gmail app is used to send and receive Gmail messages on the go.<\/p>\n Challenges and workarounds:<\/strong><\/p>\n With the advent of new email clients<\/a>, users of Yahoo! have decreased drastically, but formerly it was used by a larger mass.<\/p>\n Challenges and workarounds:<\/strong><\/p>\n Many users still prefer the legacy version despite the advent of new version of Outlook.com.<\/p>\n Challenges and workarounds:<\/strong><\/p>\n iPhone is the most desired email client because of it’s flawless user experience and support for interactive elements.<\/p>\n Challenges and workarounds:<\/strong><\/p>\n\n
\nKeep the email file size below 102 kb and avoid unnecessary styling.<\/li>\n
\nRewrite the code by adding a color style to each and every <a> tag.<\/li>\n
\nInstead of attribute selector, use .class selector.<\/li>\n
\nUse a table based layout for margin and padding with <td>.<\/li>\n
\nUse background color as a fallback.<\/li>\n<\/ol>\n<\/a><\/div><\/div>\n\n
Outlook<\/h3>\n<\/li>\n<\/ul>\n
\n
\nUse suitable fallback with conditional Outlook comments.<\/li>\n
\nDefine tables with fixed width and use fluid layouts with a fixed width within media queries.<\/li>\n
\nAdd margin using <td> tag.<\/li>\n
\nUse a static fallback of the GIF and trying conveying important message in the first frame of the GIF.<\/li>\n
\nAvoid using content-dependent graphics for background images.<\/li>\n<\/ol>\n<\/a><\/div><\/div>\nEmail Web Apps<\/h2>\n
\n
Gmail for Mobile<\/h3>\n<\/li>\n<\/ul>\n
\n
\nUse \u201ctext-decoration:\u201d and provide a class in media queries and declare important to override the inline styles.<\/li>\n
\nInclude white-space: nowrap and use a spacer image. Declare! Important and use mobile-specific content.<\/li>\n
\nUse \u201cdisplay:block\u201d in the image tag to remove the white line.<\/li>\n<\/ol>\n\n
Yahoo! Mail<\/h3>\n<\/li>\n<\/ul>\n
\n
\nAdd align=\u201dtop\u201d to the images.<\/li>\n
\n<\/strong>Use align=\u201dcenter\u201d and for tables of fixed width, use align center in td.<\/li>\n
\n<\/strong>Instead of min or max-width, use width attribute &\/or in the style to control the layout.<\/li>\n<\/ol>\n<\/a><\/div><\/div>\n\n
Outlook.com<\/h3>\n<\/li>\n<\/ul>\n
\n
\nUse domain name instead of using #.<\/li>\n
\nRemove the extra padding by setting the display property as \u201cimg {display:block;}\u201d.<\/li>\n
\nUse HEX code for background color.<\/li>\n<\/ol>\nMobile Email Apps<\/h2>\n
\n
Apple iPhone Native App<\/h3>\n<\/li>\n<\/ul>\n
\n
\nUse a minimum font size of 22 pixels for header and 14 pixels for body.<\/li>\n
\nAdd margin padding \u201c0\u201d in the body inline.<\/li>\n
\nUse the adjacent selector + when used with :hover or :checked pseudo-class selectors.<\/li>\n
\nDisable auto-scaling by using <meta name=\u201dx-apple-disable-message-reformatting\u201d> and adding a \u201cpadding:0;\u201d to the <body> tag of your email.<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/07\/email-automation.jpg\")
<\/a><\/div><\/div>\n