The top 10 email clients can be further sub-categorized as 'widely-used' and 'rarely-used'. Now, the challenge is that the widely-used email clients i.e. used by 80% of your subscribers have several rendering issues – thus increasing the probability of errors.
We don’t intend to scare you, but if you wish to prevent your emails from landing up in the trash bin, you ought to keep in mind the challenges put forth by the clients and their solutions. Let’s check out the challenges, workarounds and usage perspective of the most commonly used email clients.
Accessed mainly on desktop/laptop devices in a web browser/dedicated platform
Gmail clips the message
Keep the email HTML file size below 102 kB.
Avoid unnecessary style tags and attributes.
Removes CSS in <style> block if it exceeds 8142 chars or if it includes errors or nested @declarations.
Embedded styles should be short and not have any errors.
Css media queries not supported
Use single column layout with no pinching or zooming required.
Use larger images and text with concise menus.
Use mobile-specific content.
Float, margin, paragraph, and padding not supported.
Table based layout with <td> for padding and margin works.
Gmail fails to support <style> or <link> in the head if email is sent from ESP and not inline.
Overwrite the default link color by adding a color style to each and every <a> within email code.
Attribute selector used to select elements doesn’t work.
Use .class selector as attribute selector isn’t supported
If a non-Gmail id has been configured on Gmail, background images won’t work.
For e.g. if contact@uplers.com is configured on Gmail, it won’t support background images.
Use background color as fallback.
Gmail for Desktop is one of the most convenient email clients despite the rendering challenges, and it is quite evident by the popularity it still has among the users.
Margins in <p> and <a> not supported.
Use <td> tag to provide margin. Use capital case outside the tag and lower case when specifying inline.
Outlook and Hotmail remove paragraph and margin spacing from the code. As a result, neatly spaced content will bunch together.
Use table-based layout and td/tr to add extra space.
Padding or width in CSS to a div or p tag not supported.
Use tables.
Displays only the first frame of animation in GIF emails.
Create a GIF with a first frame that runs for
milliseconds, which wouldn’t be discernible with
naked eyes. Make sure it conveys the full message
with the subsequent slides having GIF frames for
other email clients.
**You may also use a static image as fallback.
Google fonts are not supported in Outlook.
Use suitable fallback with conditional Outlook comments, otherwise it will automatically use Times New Roman.
Links on HTML tags like <table>, <tr>, and <td> don’t work.
Apply internal links to text or images rather than tables or tr.
No support for max-width and min-width.
Use fluid layouts with a fixed width within a media query.
Define tables with fixed width and provide fluid tables giving 100% width to tables in media queries.
CSS in the head section of the HTML document gets removed from Outlook / Gmail / Yahoo / AOL / Outlook.com.
Inline CSS with HTML will help.
Outlook doesn’t render 100% wide table with max-width.
Wrap the whole table in some conditional code.
<ul> and <li> not supported.
Campaign Monitor has a workaround to resolve the problem.
Any resolution in range of 1920×1080 and above breaks the email layout.
Change the DPI scaling in your Windows based device by selecting Display from Control Panel. As a next step, select 125% to 150% magnification.
No support for full width background images.
Use patterned background images and avoid using data or content dependent graphical background.
ul, ol, dl {
display:block;
list-style-position: outside !important;
margin:0 0 10px 18px;
padding:0;
text-align:left;
}
ul li {
margin:0 0 0 10px;
padding-left:20px;
}
ol li {
margin:0 0 0 10px;
padding-left:20px;
}
li:last-child, li:last-of-type {
margin-bottom: 0;
}
dt {
font-weight: bold;
line-height: 18px;
margin: 0 0 4px;
padding: 0px;
text-align: left;
vertical-align: middle;
}
Outlook and Outlook.com are the standard email clients in any corporate environment. In spite of the numerous rendering challenges faced in Outlook, it’s amazing that a small proportion of your subscribers are still loyally stuck to it while most have switched email clients. But, the ones who are finding it really tough are the email developers.
Webmail email apps accessed through mobile devices & smart phones
Gmail clips the message
Keep the email HTML file size below 102 kB.
Avoid unnecessary style tags and attributes.
Removes CSS in <style> block if it exceeds 8142 chars or if it includes errors or nested @declarations.
Embedded styles should be short and not have any errors.
CSS media queries not supported.
Use a spacer image.
Include white-space: nowrap.
Declare! Important.
Use div with so that the effect of
increased font size is overridden.
Two sliced images are separated by a white line.
Use “display:block” in image tag to remove the white line.
Distorted view to responsive emails through media queries.
Try forcing Gmail to render the desktop view by using spacer and giving width equal to the width of your email, especially for older email clients.
No support for <style> or <link> in the head sometimes.
Overwrite the default link color by adding a color style to each and every <a> within email code.
Attribute selector used to select elements doesn’t work.
Use .class selector as Attribute selection won’t work in Gmail app.
Fluid email looks unimpressive on Gmail App.
Use “display: inline-block” along with “text-align: center” to create the illusion of floating but centered elements.
Gmail app on iPhone turns phone numbers and dates to blue automatically.
Use “text-decoration:”.
Use zero-width non-joiner.
Use span with “text-decoration: none” surrounding.
Provide class in media queries with important defined to override the inline style and avoid blue line.
Gmail supports GIFs and cinemagraphs that add visual appeal to the emails, which is one of its most important advantages. However, if you are sending out emails scaled to desktop, the font size will reduce in the mobile version making the email difficult to read. Hence, it is advisable to create responsive emails or have bigger font size for Gmail subscribers.
Center align HTML attribute not supported.
Use align= “center”. For tables of fixed width, use align center in td.
Yahoo! Webmail doesn’t allow “display:none”
(ind !important) inline but allows in <style>.
To Be Published (Subscribe to get it first)
Media queries don’t support min-device-width, max-device-width for webmail as well as Android App.
Use width attribute &/or in style instead of min or max-width to control the layout.
Float tags don’t work.
Give align= “top” to the concerned image.
Yahoo! Webmail removes !important for *SOME* styles (display,color) if there is a space between the style and !important.
To Be Published (Subscribe to get it first)
For attribute in labels targeting ids in checkboxes not supported.
To toggle checkbox elements, labels have to wrap checkboxes.
Yahoo! of course was used by a larger mass formerly, but with the advent of new email clients, users of Yahoo! have drastically decreased.
No support for RGB borders.
Use HEX code for HTML background color.
# in href link breaks the anchor tag and adds the CSS at another place.
Avoid using href # and use domain name instead
Unnecessary wide space of around 4 px is added below the images in emails.
A workaround is to set the display property as “img {display:block;}”. This removes the padding in Outlook.com and still gives the desired result across all email clients.
Although early 2016 saw the dawn of a new version of Outlook.com, many users still prefer the legacy version that has several technical challenges, which make email developers dread this email client.
The advantage of AOL Mail is that it supports absolute positioning and transitions. The shortcomings are that animations don’t work because of slight CSS processor bug. AOL Mail adds “.aolReplacedBody” within animation keyframes as a result of which the entire email gets messed up. Action attribute in forms should be https and target attribute should be set. AOL Mail requires X-UA-Compatible meta tag to support CSS3/Media Queries.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
A viewport selector proves to be useful for certain designs.
To activate :hover selector, you need to keep it pressed for around 1-2 seconds.
Native email apps on mobile devices and smartphones
Tiny text automatically resized.
Use 22 pixels for headers and 14 pixels for body text as the minimum font size.
iOS9: Wrapping issue is a problem when inline-block level elements are next to each other in the code, but have a space between the end of one element and the start of another.
Remove the space.
iOS9: Adds padding to the right and left side of email campaigns. Emails that use background colors throughout the email width will have white spaces on either side of the campaign.
Add margin padding “0” in body inline.
iOS10: Fixed positioning (Position:Fixed;) not supported.
No support yet, hoping for a solution soon.
Updates in iPhone models lead to rendering issues.
Update media queries using 320px breakpoint to 414px for iPhone 6 Plus. Rather than fixing it to breakpoints at the exact device width, you can even keep it fluid. This would ensure good rendering across all devices.
iOS9: No support for general sibling selector ~ when used with the: hover or: checked pseudo class selectors.
Adjacent sibling selector + can be used. Although, it isn’t as flexible as the more ‘less-specific’ general sibling selector, it will give the same result.
iOS10: Responsive emails appear zoomed out or off-centered due to auto-scaling.
Add a “padding:0;” to the <body> tag of your email. To disable autoscaling, <meta name=”x-apple-disable-message-reformatting”> can be used.
iPhone is the most coveted email client because of its support for interactive elements like GIF, cinemagraphs, videos, sliders and countdowns - not to forget retina images that give a flawless user experience.
iOS10 now supports list-unsubscribe and allows the user to adjust the number of lines they would like in the preview text. Also, iOS10 has rolled out a new feature according to which users can delete the apps that are pre-installed in the device. Let’s wait and watch how users perceive and accept this update.
Samsung Native Client doesn’t support absolute positioning.
Use margins.
Android 4.4 clients render video controls but don’t play.
Video fallback needs to be provided.
Some Android clients don’t support general sibling selector E~Y.
Enable general sibling selector by using this:body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
Android 5.0 (Lollipop) replaced native email client with Gmail. On the other hand, Samsung Galaxy phones maintained the legacy of their native client.
Who knows Android native client may remain just another name in the world of email clients in the days to come. As of now, you should consider the 10% people in your list who may still be using Android. However, it is speculated that this figure will slowly dwindle.
Still popular among few users
Windows Phone 8.1 requires X-UA-Compatible meta tag to support CSS3/Media Queries.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
A viewport selector proves to be useful for certain designs.
To activate :hover selector, you need to keep it pressed for around 1-2 seconds.
Just like Outlook and Outlook.com, Windows Live Mail also displays an unnecessary space of around 4 px added below the images in emails. To resolve this problem, you can set the display property as “img {display:block;}”. This removes the padding and renders the email as required.
Another problem shared by Outlook and Windows Live Mail is that of DPI scaling. All you need to do as a workaround is change your DPI scaling in your Windows based device, as discussed for Outlook.
Uplers design and code flawless emails, newsletter templates, landing pages, and digital assets such as banners.
In addition, we also offer email automation and campaign management services.
To know more, email us at
contact@uplers.com or visit
email.uplers.com