6 tips for client-neutral email creation
The multitude of desktop and mobile devices, each with their own choice of email clients, hasn’t made your job any easier. In the past you only had a few desktop clients to deal with, now you have many different clients:
- Desktop clients: Apple Mail, Outlook, Thunderbird, …
- Web-based clients: Gmail, Yahoo!, Outlook.com, …
- Mobile-optimized clients: iPhone, Android, Gmail App, …
(54% of your contacts read their emails on mobile devices!)
So how to make sure your emails look good in all of these different email clients?
For starters, be aware that not all email clients should be treated equally. Some are way more popular than others: check Litmus “Email Client Market Share” to know all about this. Want to know which email clients are most popular for your specific audience? You can view your email opens by device type and email client in the reports generated by your email marketing tool.
6 tips to prepare your email for all email clients
1. Use tables to create a consistent lay-out
You put a lot of effort in the design of your emails, so they look attractive and trigger the right response from your audience. Unfortunately, email clients such as Outlook strip styles and positioning (float, position, display, clear, …) from your emails. Still want to maintain a thought-through and consistent look for your mails? Make sure to specify the width of your table data (<td>): this way you avoid your texts and images jumping around in different email clients.
2. Keep control of line-height, font, font size and color.
When you are working with style elements such as line-height, font, font size and text color, one golden rule applies: it you do not specify these things, the email client will do it for you and apply its default styling. Use inline styling so each email client can read your styles. Most web-based clients, (e.g. Google Gmail) don’t read your <style> in the <head> or <body>. They will either strip out the external CSS link or choose to ignore it.
3. Be smart about images: add ALT text and size specification
Many email clients block images by default. This means that when someone opens your email, the images won't load unless your contact clicks a button to show them or changes their default settings (Check which email clients block images by default).
A couple of tips & tricks can help:
- Adding alt text to your images helps recipients understand your message even if they can't see the images.
- Set a specific height and width for your images. This will help ensure your email design maintains its structure even when images are turned off by email clients. It also sets a container for your alt text.
Save time by resizing your images to the specific size you want them to be before uploading them to your email marketing tool. Some email clients won't respect HTML size ratios, which can easily distort your images.
4. Know that background-images are no longer supported
With the introduction of Outlook 2007 and a number of web-based email clients, support for background images has basically been removed. Unless you are absolutely certain that your contacts use email clients that still render background images, it is better to avoid using them.
As mentioned before, no less than 53% of all users read their emails on mobile devices. This simple fact gives you ample reason to make your emails responsive (read: mobile-friendly).
Finally, as always, make sure you validate (using the W3C validator) and test your emails thoroughly using live devices. We also recommend the use of web preview services such as Litmus or Email on Acid: thanks to these services you can test screenshots for 50+ different email clients (desktop clients, web-based clients and mobile).
There are so many different email clients today that it is hard to guarantee that your emails will always look the same. But by controlling the aspects you can control, minimizing the distortion is a perfectly realistic goal.