It’s not as easy as it seems. Actually, it’s not easy at all. Creating a good Email Marketing Template takes time, caution and a continuum effort to spread your creativity on top of all the constrains. As Designers, our mission is to deliver a coherent and solid communication. The problem is, in this area, building an email kit that fits all browsers the same way is virtually impossible. On top of that, our frustration grows with the dispersion of information and constant development of new hypothetic solutions.

When I started out, I wish I had someone who could give me – just like that! – a few tips on the industry standards and best practices. Well, I’m on a good mood, so I’ll give you hand with it.

  1. KEEP YOUR DESIGN SIMPLE. Emails are not like complex website designs; they should be nicely designed, but somewhat basic. Try basing your designs on a main header image followed by the main content. The cleaner the design, the easier it will be to code, and the less chance of any abnormalities happening between various browsers and email clients.
  2. USE TABLES. Email clients live in the past, so all emails must be built using tables for layout. Some CSS styling can be used, but that’s the trickiest part.
  3. USE INLINE STYLES. If this were the website world, every developer on the planet would say, “do not use inline styles, create a class for it”. Unfortunately, in an email, this is not possible, as the email clients will strip them out, and we don’t want that. So if anything needs to be styled, use inline styles. Note: Elements like font type and size can be used within the <table> tag, but individual styles should be placed on <td>’s.
  4. HAVE YOUR BROWSERS READY AND UPDATED. Make sure you have as many web browsers as possible available to you. Who knows who will view your email, and what he or she will be using to view it!
  5. SIGN UP FOR ALL MAJOR EMAIL CLIENTS. Sign up for as many email accounts as you can think of. Below is a list of email clients to get you started: Google Mail, Hotmail/Live Mail, Yahoo Mail, AOL Mail, etc. If you are willing to pay a monthly fee, take a look at Litmusapp.
  6. GIVE ALL IMAGES ALT TAGS. This is a very important step to take, but is often forgotten by many. Styling the <td> for which images are in, with font types, size and color, will allow for your email to degrade gracefully when images are off by default.
  7. DON’T SET WIDTHS OR HEIGHTS TO IMAGES. Again, this is a further step to take in order for a lovely gracefully degraded email. If images are off by default, their dimensions will be present, leaving a lot of unnecessary white space throughout.
  8. WRAP THE EMAIL IN A 100% WIDTH TABLE. Email clients only take the code within the body tags, not the body tags themselves. In order to use a background color, you must create a 100% width table to “fake” the background effect.
  9. NO WIDER THAN 600px. Many people don’t actually open their email; they instead view them in the preview panel. On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don’t want your full email viewable in the preview panel, of course.

Check out the rest of the post on EMAIL MARKETING TEMPLATE | 18 TIPS TO BOOST YOUR CAMPAIGNS (Part 2).