The Specifics
This is where you'll find the most common issues you'll run into for the major email clients and the best ways to avoid them in future.
Click to expand any of the issues to find out more!
Gmail
Emails Being Clipped When Received
While Gmail is extremely reliable when it comes to rendering the content of your emails, there is one major situation which can happen when you're needing to relay a lot of information to your users. Picture this, your code is finished, the rest renders are all looking good so you go to send the email as a test, you check your Gmail Inbox and before you reach the end you're greeted with the following message
While Gmail does have few limitations, it does limit the size of emails received to ~102kb before it will clip any excess content. This limit is derived from both the content and the code of these emails so the longer your emails get the more likely they are to be getting clipped. Here are a few tips though to help avoid this:
- Try to avoid copying and pasting your content from other sources as they can contain their own proprietary styling which will then increase the amount of code underlying the email which won't be necessary if you're operating in a Gmail-heavy environment.
- Use a single rather than multi-column design, by reducing the number of columns you also reduce the amount of HTML and styling needed to structure that particular layout and so reduce the overall weight of the code.
- Rather than trying to target your entire audience in one email, if possible break it down into multiple emails so that your users are only seeing what would apply to their segments of the organization
Microsoft Outlook
The Outlook 1px Line Bug
Starting with Outlook 2013 this particular issue began to be observed where a 1px line would be inserted at random in the body of some emails and has been present in all Outlook versions since that time
What you see above is an example of what to expect when this issue occurs, which is that a small part of the your content inherits the background color for the body of the email which is one method to workaround this issue using a single color as the background however using a neutral background color for the sides of the email tends to be of higher priority and to help readability.
Unfortunately, there aren't any guaranteed solutions to this particular issue yet, but this blog post at Action Rocket goes into a number of options that can be tried to remove these lines, these options can help but may not in all cases. We'll keep this section updated with any updates that come in on this.
Outlook Ignoring Styling
Starting with Outlook 2007, Microsoft implemented Word as the renderer in Outlook rather than Internet Explorer, however this has led to a number of issues as Word does not support the full range of CSS styling available in other desktop and browser-based clients. Due to this, certain styling elements can vary across Outlook versions based on their level of support, for example styling a full margin is generally supported across versions, however if you attempt to style the margin for just a single side of an item, there will be situations where this styling is ignored and your content will be flush to the side.
Can I Email? is an incredibly useful tool when it comes to designing HTML email, especially when it comes to Outlook, breaking down support by version for whichever styling attribute you're looking to implement