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. Here is a helpful resource that other clients of ours have used to mitigate these kinds of problems: http://www.email-standards.org. Another great resource is a program called Litmus (http://litmus.com). 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.
Our staff recommends sticking with HTML styles or inline CSS since we can not, in general, apply high-level CSS or CSS-style sheets in an email. Always write your emails first, then design them if it absolutely needs it. Design for the lowest common denominator. Remember, you have to ensure your email parses properly in the following email applications (and this is partial list):
- AOL (multiple versions)
- Outlook (multiple versions)
- iPhone mobile clients (multiple versions)
- Android mobile clients (multiple versions)
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, and 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.