E-Newsletter Formatting Problems

A couple weeks ago, one of our clients was having some serious newsletter formatting issues. The newsletter looked different on different computers, different email clients, and different browsers. Images, links, and entire blocks of text would disappear, depending on which software was used to view it.

We tried everything possible but couldn't find the magic “silver bullet” to fix all the problems. In the end, we redesigned the newsletter - and even then there were still issues.

This is actually a very common problem with email newsletters. As the sender, we can do everything possible on our end to make sure the formatting is correct when it leaves our system - but once the newsletter is pushed into cyberspace, it's out of our hands... And all we can do is keep our fingers crossed that the software on the receiving end will interpret and display our content correctly.

While there is no guaranteed solution, there are some precautions you can take to improve your newsletter's chances of compatibility with all the different email clients out there.

I asked some of our developers for “best practice” advice on how to avoid these newsletter quirks, and here are some of their recommendations:

• Keep your design simple. Stick to basic text & images.
• Keep your image sizes small.
• Send a test email before you send the real newsletter.
• Include the line, "If you have issues viewing this email, go to...," and then link to a newsletter webpage on your site.
• If you make a PDF copy of your newsletter, don't attach it directly to the newsletter email. Instead, upload the PDF on your site & include a link in the newsletter content.
• "The key to having semi-consistent design is that using your CSS either as an external resource or in < style > tags is hit or miss, especially with web-based clients (mainly GMail). This means, unfortunately, that you more or less have to use tables for positioning.
        This link (http://www.campaignmonitor.com/css/) is a solid resource on knowing what is supported where.
        I've had fantastic success using this (http://code.dunae.ca/premailer.web/) service. You give it an HTML file coded up how you see fit using the < style > tag, and it will spit out an HTML file in return that has the CSS inline and few other modifications.  [Web-based clients have poor support for the < style > tag and all the styles should probably be inlined (like < a href="#" style="color:red;" >). This tool you lets you write proper, non-inlined CSS and handles all of the inlining for you.]  It seemed to work almost flawlessly last time I used it.
        You probably won't get pixel perfect newsletters in every possible combination of browsers, email clients, and OSes, regardless of what you do, but you can get close enough."