It can be challenging to create emails that render well in all email clients, because email clients, unfortunately, have little standardization in the way they display HTML. Unfortunately, not much has changed between 2007 advice and more recent advice.
Email HTML Limitations
Our staff recommends sticking with our predesigned layouts and HTML styles, or custom CSS developed by a reputable third-party vendor who knows what they're doing. Always write your emails first, then design them if it absolutely needs it.
Design for the lowest common denominator. Remember: web browsers specialize in dynamic content that updates frequently. Interactive elements that won't work in most email inboxes:
- <div> layering
- Embedded audio
- Embedded video
Elements that may not work in some email inboxes:
- Animated GIFs
- Background images
- Web fonts
You have to ensure your email parses properly in the following email applications (and this is only a partial list):
- AOL (multiple versions)
- Outlook (multiple versions)
- iPhone mobile clients (multiple versions)
- Android mobile clients (multiple versions)
Here is a helpful resource that other clients of ours have used to mitigate these kinds of problems.
Preview Vs. Test Email
The Email Preview displays an email as it would look in a browser, as one might do if clicking on the link at the top of an email that was stored for preview online. This Preview can and should be trusted to display a very close approximation for your desktop view. The tablet and smartphone views will be rough estimates but also very close to the final version, with some exceptions due to the number of different device and email browser types available. Flexbox code, for example, may render properly in the Preview but not render properly in the test or final email.
Another great resource is a program called Litmus. It allows you to test the email across various clients.
Another thing that you may wish to do is keep an eye on the results of your email blasts in the Email Client stats area of the results, to see what email clients your constituents are using. If you start seeing that a significantly large amount of your constituents are using Outlook, you may wish to tailor the emails towards Outlook.