Maintaining HTML Content Positioning in ENewsletters

Question

How do I get html content to stay in relative position and format from one browser/email to another? When developing e-newsletters, the format appears differently in one email server than in another (when testing to two of my emails).

Example: when I open the email in my gmail, the padding around the images is where I want it, but when opening it in my work Outlook, the padding is almost nonexistent.

Example: the font appears according to the style sheet in Outlook, but changes when in gmail.

How can I secure the style sheet and the positioning to keep the appearance constant?

Answer 1

E-mail clients are notoriously terrible at rendering HTML (especially Outlook and Lotus Notes). You will typically be writing crippled HTML with inline CSS styles. This will not get better in the near future.

Make your design as simple as possible, and you will have less trouble making it look right on many clients. The actual best practices for writing HTML will depend mostly on which clients you plan to support.

Some helpful articles that give insight into common solutions for HTML e-mail rendering problems:

• Article at A List Apart
• Guide at ReachCustomersOnline

There are some easy web services that can check your newsletter on multiple clients and give you screenshots of the results. They are usually worth the money:

• Litmus
• MailChimp
• CampaignMonitor