It’s well known that email clients differ how they interpret the email code and therefore, how they display the email design. For marketers, this poses a problem when designing their email communications. Broken emails can deter a prospect before the content has even been read. So, what are the recurring issues in common email clients, and how can they be overcome?
In the B2B landscape, there are 2 main email clients: Outlook and Apple. By understanding the issues, you’ll be better prepared to implement the workaround. Here are a few common issues, and a way to get around it.
Outlook
GIFs do not work – The fun moving image you’ve so carefully selected won’t budge an inch in Outlook. Instead, the first frame is displayed as a still image. Make the first frame one you want to display as the cover. Then, if viewed in a different browser, the supporting frames will add extra support, but a suitable image is still displayed if not. You can even make the cover only run for a few milliseconds so the naked eye wouldn’t detect it in any other email client. Or, perhaps use our countdown creator, to add a more personalised gif to your email.
Google fonts are not supported – In Outlook, Google fonts will not render correctly, and could make your email look distorted. Instead use a suitable fallback font, otherwise, Times New Roman will automatically be used!
Margins are not supported – Your nicely spaced out email could all go to pot in Outlook. If you’re using the traditional HTML editor, you may need to amend the code to get your margins to show. If they are necessary to your email, consider using td table tags to define a cell table, and provide a margin where necessary.
Outlook.com
Default space below images – In outlook.com, a few pixels are added below images. When building your email in the traditional HTML editor, set the display property as “img {display:block;}” to remove the unnecessary space. This removes the padding, whilst still giving you the desired look in other email clients.
Apple
Automatic resizing of tiny text – Perhaps you are trying to emphasise certain text over another section, but consider your sizing’s to ensure this is the way your email displays. As a rule of thumb, use a minimum text size of 22px for headers, and 14px for text to make sure it displays exactly how you expect.
Calibri fonts won’t work – Apple does not support Calibri fonts, so as simple as it sounds, the workaround for this issue is simply don’t use Calibri fonts.
Never trust that an email will look right just because it does in the editor. Always send a test, and if possible, use different email clients to compare. Our inbox checker will offer an extra tool to check the appearance of your email across different email clients. So you can rectify any issues before the live send.
