Last week I completed a email campaign that I was only brought into only to code. I felt that the process followed was generally flawed that the team took. I started with a finalized approved design which I was suppose to code into a mailer. From the beginning I started noticing flaws in the designs and how the design would be translated into many of the the popular web clients of today like Gmail for example.

Often I think people and small teams rush the designs of the mailers and don’t fully understand what it takes to develop and what will be rendered by each client. Most web based email applications won’t properly read divs, background images, or even external style sheets. With these short comings and designers unaware of these limitations or bad and unexpected things can happen.

When creating a mailer its important to first and foremost take your audience into consideration. Are they main using web based clients like gmail, yahoo, etc.? Are the checking there mail on the mobile devices? Or they simple just using a desktop client like Mail (OSX), ThunderBird, or Outlook? All of these and a combination should it most cases be assumed.

Rules of thumb to help achieve the audiences viewing of the mailer

At the of the top of the design provide a link for the subscribers to see a web version. Most mailers these days are filter and end up in junk mail boxes or the software is smart enough to hide the images. Leaving your pain stacking work looking like a blob of random text bits. Having this link at the top will give the user and easy way to view the mailer as it was ment to be presented.

Keep it simple. Since most clients ignore CSS  including background images your going to have to get old school with some tables. By keeping the design simple you will be able to get you message across to the widest audience. I good example of this is UrbanDaddy.com’s mailer(seen below).

Allow the users to easily forward and print the mailer.