It’s the bane of web and html email designers alike: How to get your email display exactly the same across all email clients.
First things first: Make peace with the fact that your emails will not display exactly the same across all email clients, browsers, operating systems and devices.
All email clients (that program, application or browser you use to read your email) aren’t equal. If they were, why bother having so many in the first place? So let’s use this analogy: engines and fuel.
The Engine: email client
We all know how car manufacturers try to squeeze every bit of performance out of an engine, while still trying to save every drop of fuel imaginable. This means not every engine is the same, and not all engines are optimised for the same thing.
In the same way, different email clients are built with different engines (yes, they’re really called “rendering engines”). The fact is, results may vary, and they probably will. An email that displays perfectly on your MS Outlook 2007 might have extra spaces in Gmail or Windows Live Mail. Text that you have carefully 1.5 spaced and justified on your Windows PC might have the spacing and alignment completely removed on an Apple.
All these elements run on different engines, and to expect exactly the same result from each engine would be very unrealistic, and frankly make the need for different or “better” engines redundant.
So what are we to do? Make peace with emails displaying differently, or insist that all emails are only ever opened on Outlook 2011 or another specified email client? Good luck with the latter…
The Fuel: EMAIL code
Fuel manufacturers are forever telling us about additives and new technology to make your engine run smoother. Just as with fuel, there are certain things you can do to your code to make it compatible with as many engines as possible. The rule of thumb with coding/designing your email? Keep it simple!
The more formatting you add, the better chances are that that formatting will be seen by a few engines, misinterpreted by others, and completely ignored by some.
Dos and Donts
What fuel works across all engines?
The very, very basics will work predictably on 99% of scenarios.
- font colour
- plain text
IE: Nothing fancy. But who wants to send boring emails like that? These elements will allow for a more exciting email, but might display differently across email clients/engines:
Fuel (Code) that works most engines, but not always
- Using tables (not CSS) for email layouts.
- Text alignment (left, right) works, but especially justified font formatting is often ignored.
- Font sizes – they tend to vary slightly from client to client. What shows up a 10pt in one might show up a bit bigger or smaller in another client.
- Font Families – Stick to the basic fonts. If a font isn’t installed on a reader’s device, the email will look wrong.
- Images – try to send your images as part of the email, as most email clients block images in emails that load off a remote server.
- Cell padding & margins tend to render inconsistently
- BR, HR, and height tags – each client interprets these in their own way.
Fuel (Code) that very rarely/never works.
- Vertical and horizontal spacing has been found not to work well across all platforms. Most of the time you’ll have to come to a compromise.
- Line spacing (1.5, double spacing, etc). Some email clients put the additional spacing at the top, the bottom, or a combination thereof. Either way, trying to space your text and content down to the last pixel is probably not the way to go.
- CSS/Stylesheets. That means you probably have to throw out a lot of what you know about web design. Use inline formatting only.
- Background images – gone are the days of displaying your favourite puppy pattern as a tiled watermark on your emails. Rather use a solid background colour.
Are there workarounds?
Sure, you could “cheat” and create the entire email as an image that will display consistently, but that brings with it it’s own set of complications, like higher spam scores, larger file/email sizes, images being blocked by some clients, etc.
For more info, here are some extensive articles on the subject: