Helpful hints for stress-free emails on any platform
4th March 2016 - Last modified 16th September 2024
Written by Sam Cooper.
Due to the growth of smart phone and tablet use, we are now opening our emails on a huge number of different devices and clients. It is a constant challenge for developers and designers to get emails to display correctly across all of these numerous email platforms. Every platform/client has different rules for how they display emails, causing your email to potentially look great in Outlook, but awful in Gmail. Here are a few tips to get your HTML email development on the right track!
Size matters
The file size of your email is always worth keeping an eye on. Gmail stops rendering HTML files after 100kb (excluding images), so all the time you have spent writing code specifically for Outlook might just mean it only loads 50% within Gmail.
Keeping the size of your HTML file down also prevents slow loading emails. Try and keep your code clean and keep your image sizes as small as possible. It’s great having a beautiful image to enhance the look and feel of an email, but if it’s 10mb and doesn’t load, what’s the point?
Another common challenge is consistency of button rendering. “Bulletproof” buttons are a simple and effective way to make sure your buttons appear correctly within all of the various email clients. Using an image for your button might look great in one client, but if it doesn’t load in any other client, it can be a huge issue. “Bulletproof” buttons use background colour and text when images are disabled, so no matter what client you are in, the button will always load. These buttons can be more difficult to build but Campaign Monitor, for example, offers a great “Bulletproof” button generator which can make it a lot easier. (https://buttons.cm/)
Outlook
As mentioned before, every client has its own ways of displaying and rendering emails and some can be more tricky than others. Outlook specifically has a lot of its own rules that make life difficult, and these even vary between different versions of the platform.
A couple of things to keep in mind when developing your emails to display correctly in Outlook is that it doesn’t recognize the “background-image” tag, so if this is how you are referencing images within your code, they simply won’t appear! Animations (gifs) also don’t render correctly in Outlook, so if you are using a fancy moving image, Outlook will sadly only display the first frame.
Testing, testing
Of course in addition to Outlook, make sure to check your email is rendering in as many platforms/clients as possible. This is a very important step and there are plenty of websites and services to help you test your email across a huge number of different clients. Litmus is a great source to check your emails are displaying correctly, enabling you to view your email in many clients and platforms, even letting you view how it looks on specific tablets and mobile phones.
If you’ve read this far, it is clear that creating an email which appears correctly in multiple clients/platforms can be an arduous process that requires more than a little knowledge and experience. Which is where Alto can help. So If you’d like to find out more about our e-marketing services, including strategy, email development and results analysis, please do get in touch.
Written by Sam Cooper – Digital Marketing Communications
