There are dozens of email clients. All of them display emails slightly differently. In this article we explain why and provide tips to ensure your emails look their best for all your contacts.
Browsers vs. email clients
Many years ago web browsers such as Chrome, Edge, Safari, etc. used to display web pages very differently. By now, however, web pages in modern browsers look nearly identical. This is largely due to many browsers updating themselves automatically to use the latest technology and the relative ease of switching to a better browser as needed.
Email clients such as Gmail, Outlook, iPhone Mail, etc. are a completely different story. Many use decades-old technology and don't update automatically. There are also many more email clients than web browsers and updating to a newer version or moving to a different email client isn't as easy as switching browsers and sometimes corporate policy prevents switching altogether. Additionally, aggressive spam filters, image blockers and various plug-ins can modify the layout of emails as they are displayed for end users. Mobile compatibility issues create further challenges.
The combination of the above scenarios results in the same email displayed in dozens of different ways by your contacts depending on which email client they use and how their email clients are configured.
How does Envoke ensure email platform compatibility?
The Envoke email editor is built to generate emails that display well in most of the popular email clients when default settings are used.
We use an email preview service called Litmus to see how emails are displayed across various email platforms and continually update the email editor for optimal results. Litmus is a trusted leader in inbox previews with over 600,000 clients including Netflix, Google, National Geographic, Expedia and Trello.
We support emails displayed across various email clients according the previews provided by Litmus.
This approach works in the overwhelming majority of cases across millions of emails. In case you notice display / layout issues please review the troubleshooting tips and best practices listed below to help ensure your email is displayed as perfectly as possible for everyone.
Troubleshooting email display issues
Your email client versus email clients used by your contacts
Often we hear from our clients that they won’t launch an e-blast because it doesn’t look perfect in their particular email client. This is understandable but you should consider that your contacts use dozens of different email clients to view your messages.
Are you testing in a popular email client that many of your contacts likely use or on an older platform or perhaps using an email client with known issues? (more about this below under the "Known limitations" headline).
How to test your emails?
Emails sent from Envoke that are built using the built-in, drag and drop editor are by default compatible with all major email platforms, including mobile devices. However, it's still the best practice to test your e-blasts before launching to your target list.
To cover the most ground as quickly as possible we recommend you view your test message in both a mobile and desktop email client. Mobile opens account for approximately half of all opens. Testing on Gmail desktop view and on an Android or iPhone catches most issues and it's one of the quickest test to run as Gmail is free and most people have either an Android or iPhone.
Keep in mind that the top five email clients account for roughly 80% of all opens (Gmail 29%, iPhone 28%, Outlook 9%, iPad 8%, Apple Mail 7%) so your priority should be to ensure that your email looks good on these platforms. These ratios change slightly over time, you can check this website for an up to date numbers.
For more thorough testing you should sign up with Litmus. (we do not receive commission from them). If you need an occasional test and don't have a Litmus account we are more than happy to run a test for you and share with you the results. Just let us know via support chat.
Upgrade your email client
Before digging deeper into any given issue we recommend you first ensure that you run the latest version of your email software. Even between versions there are several smaller updates. For example just because you're using Outlook 2016 it doesn't necessarily mean you have the latest updates within that email client. An update ensures all changes are brought up to date, including all patches and minor improvements.
Sometimes layout issues arise when the inbox is zoomed. Reset your zoom level to 100%.
There are many things you cannot achieve in emails that can easily be accomplished on web pages. Here is a list of all common limitations:
- Videos won't play directly inside emails. There are very few email clients to actually support this. You should add a screenshot of your video instead (with a play button) and link the screenshot image to the video.
- Forms aren't displayed or processed by most email clients. Here's what to do instead.
- Background images aren't shown in every email client. A fallback background colour should always be used. Read more.
- Webfonts won't show in every email client. A fallback font is used. Read more.
- Content that's marked hidden on desktop or mobile devices will not work in Outlook email clients. In Outlook all content will be shown regardless of the hide/show setting.
- Animated GIFs are safe for the most part but still not supported universally. Check out this great blog post by Litmus for details.
- DIV layouts should be avoided completely and instead, table-based layouts should be used. The Envoke editor uses table-based layouts by default.
- CSS code should be in-line for certain style definitions. The built-in editor takes care of this by default.
- Emails content is cut off: Long emails are sometimes truncated by email clients. This can happen either due to size (KBytes) or length (too many characters) in an email. The solution in this case is to shorten content of your email.
Emails can look different when they are forwarded and we have no control over changes made during a forward. Always test your email as a direct send versus a forward.
Custom HTML code
Customizing the HTML code of emails is possible by technical/developer users but if you decide to go down this path please remember that you are responsible to ensure compatibility across different platforms. Read more about using custom / external HTML.
Images are too large or too small on mobile devices
Images wider than 300px are auto-adjusted for optimal display on desktop and web based email clients as well as mobile devices. Small images, however, on mobile screens may need adjustments. See this article for details.
Address and phone numbers are linked and change colour
Some email clients automatically turn addresses and phone numbers into links and change the link colour to (most often) blue. This is a convenience feature to make it easy for readers to locate businesses on a map or call them using a single click/tap. This adjustment happens after the email is sent by the email client and cannot be changed from the email editor.
Two or three column layouts in Outlook App
Multi-column layouts don't display well in the Outlook App; the columns don't stack correctly in mobile view. If Outlook App display is critical to you then you should switch to a single column layout that isn't dependent on multiple column stacking on small screens.