For your first email campaign, you decide to use one of the free css templates offered with your email hosting service.  As you work with the template of your choice, you discover that there are limits on what you can do, not enough colors, limit on the size and number of graphics, unforgiving borders AND font types? …forget about it.

You stick with it: some tweaking hours later, you finally get what you might consider the almost “perfect” HTML message.  The colors are okay, as are the fonts and graphics: they work with your message. Testing is next and by testing, you discover your email message displays perfectly in some browsers and email clients but looks like crap in others.  What’s going on??

Unfortunately, not all email clients or browsers are created equal; some may render your email message differently because of a different presentation of HTML or CSS. (Cascading Style Sheets.); your email message for example looks great in Hotmail but not so great in Outlook.

You can find email templates that are optimized, code validated and reader browser friendly and you always have an option to create your own.

Taking control, designing your own email template, is one way to maintain uniformity across all email clients and browsers.  Is this easy to do?  Depends on how you do it.  Consider the following suggestions when creating your email template:

  • Avoid external or embedded CSS; this code is typically stripped or ignored by a number of email clients.
  • Avoid extra coding elements such as Word inserts.
  • Be cognizant of where you place your CSS code, as most email clients remove the body and head tags.
  • Do not overuse images or rely on them to grab the recipient’s attention.  Email clients are turning off images as a default so the recipient needs to perform an action (click on a link) to view them. Therefore, you should not rely on images for a call to action or other important messages (i.e. Price reduction today only)
  • Do not use big image sizes: it has been suggested to keep images around 100KB or 600 pixels wide.
  • Don’t count on visual HTML editors exclusively, such as Dreamweaver; you will run into problems creating HTML emails, as programs such as Dreamweaver is a website designing tool the  CSS coding  generated may not be compatible in an email client.
  • Avoid FLASH, embedded videos, adding surveys and other types of opt -in forms to your template; many email clients will not support them or they will completely ignore these components.
  • Stay away from using JavaScript as this is normally ignored and your email message maybe considered a security issue by some ISPs.
  • Do thoroughly test your template before you use it
  • An “Add my email address to your address book” link
  • Mobile friendly link
  • View with images alternative (link to a web-hosted version of your message) 

Don’t dismiss the three basic elements to your HTML template.

  • Preheaders
  • Body
  • Footer

The preheader text or snippet, as viewed in the email inbox, is the small written summary following the subject line.  It’s a great way to grab your recipient’s attention.  Even with templates, it’s a good idea to customize your preheader for each new email campaign.

Also take in consideration the mobile email recipient (you already included the mobile friendly link), they often preview (as does the inbox in Gmail) the first line of an email; so write accordingly.

Use format in your template that is easy for you to use when composing each campaign.  Your template should allow the body, the gist of you message, for example, have strong headlines; consider bullet points and the amount of links and images to have.  Keep the fonts consistent and avoid small font sizes.  There’s a great deal of suggestions and dos and don’ts for body template format on the Internet. Review the goal of your email campaign when you create the body or content Select what works best for you.

The Footer has its own set of rules.

Always provide an unsubscribe line.  It is a requirement.   Then, as an option consider adding a link to your user’s profile page, of an “add us to your address book” link or any other information you deem important.

Spread the love