Designing a good Email Template!

The email newsletter is indeed a powerful marketing and communication tool. It reminds your users about you; it informs users about your products; it tells them what you have been up to; and most importantly it helps you build a unique relationship with them. Users like email newsletters if the newsletters bring them value.

Most Heavy Internet users generally check their e-mail more than once a day. Even constantly busy ones will take time to go through their messages at least once a day. This is the perfect time to capture attention even without requiring visits to your site. Even if nobody is clicking through your links, the information is still received, which is great for building a brand name.

At digicat we believe that the fundamental rule for creating an email newsletter is to give it interesting, relevant and up-to-date information that creates curiosity to read. Users sign up for newsletters hoping to be informed about things that they would not otherwise be able to find out about. Digicat Blog,  discusses eight guidelines for designing and distributing email newsletters. So here are a eight guidelines on creating an effective newsletter.

1. Utilize Tables in your Layouts

This may seem a bit contradictory towards today’s modern web standards, but unfortunately tables are the easiest way to get everything working properly among the various e-mail clients.

You may also wonder why div and other block elements are not such a good idea, but for your knowledge most e-mail clients are built to strip away any extraneous CSS content. Clients such as Microsoft Outlook 2007 and Google’s Gmail have very poor support for floated elements and direct positioning. The best solution would be to nest multiple tables inside each other.

2. Fixed-Width Positioning

At digicat we believe in being minimalists and traditional in code design for emails; hence few options exist when building drafts for your newsletter layout, however the best option to follow is to set fixed widths for your containing table. There are many varying monitor resolutions — you won’t be able to please everybody. If you don’t have particular elements with static widths, you could always use width=”100%” on your containing table. This will allow your content to fill the entire width of all e-mail clients.

3. Anchor Links Best Practices

You’ll surely want to include some links into your newsletter. These could be outbound links to other pages around the web, or maybe links leading to the most popular pages on your website but how should you handle all of these links in your design?

A neat trick is to include both inline color and an additional span tag within the anchor element. If the color and styling of your links are important to the overall design you’ll want to take the extra precaution.

As a presumption users will also expect your links to open in a new tab or window. Ideally the target=”_blank” attribute should be enough for all browsers to recognize this functionality.

4. Test in All Major Clients

A recent study of most popular e-mail clients (done by Campaign Monitor) shows ten of the most popular e-mail clients in the past year. It may seem a bit tedious but designers should get into the habit of checking their newsletters on all major e-mail clients, at the very least on some of the more common clients such as Gmail, Hotmail or Yahoo! Mail.


* 2011 Report by Campaign Monitor

5. Always Offer Web-Based Views

Readers won’t always be able (or be willing) to view your e-mail natively. Offering another version somewhere on the Web will give a sense of ease and compatibility. Hence all our email designs at digicat carry a “click here if you are unable to see this email” link which provides a web version.

6. Adding Image Content

Images are another reason to offer your readers a web-based solution. By default, e-mail clients are set to strip images out of the content. If your address is added to a safe list, all images will be displayed by default, but the user has to accept this setup so it’s certainly not a guarantee. However it is part of the checklist in getting your email into that INBOX.

Once you get to exporting graphics there are a few tips to building images specifically for e-mail. You’ll want to always set both width and height attributes on your <img> tags. Without these specifications in order, some clients will distort the image content. An alt tag will also prove useful, so visitors will know what the image content contains before it’s loaded.

As mentioned before, positioning the images in your e-mail can get tricky. Avoid using floats at all costs! The image align=”left” attribute will work much better, or alternatively map out exact table cells to fit your images along the top, left, or right side of your newsletter. As for image storage, it’s recommended that you keep all files in your own Web server.

7. Avoid the Spam Folder!

This can be difficult to hear, but not all e-mail clients are friendly towards newsletters. There are billions of e-mails sent every day and the majority contains spam or malicious content, thus having these security measures built into the Inbox is clearly for safety precautions. However when it comes to Internet marketing, you can easily be discouraged to see your latest newsletter end up with in junk. To reduce the chances of this happening you should clean up your design for simplicity. Don’t make annoying images or blow up your title text with hundreds of keywords.

8. Always provide a link to Unsubscribe.

While many argue that an unsubscribe link prompts users to click on it. Most research has shown that the Unsubscribe link not being present only adds to distrust and the user may junk the email not knowing if the sender is genuine. An Unsubscribe link adds trust and shows the user the sender has the best intentions for the privacy of the recipient. Always add and make sure that your Unsubscribe links really work and test them well!

1 thought on “Designing a good Email Template!

  1. Pingback: Fast tracking business transactions with email templates · MyInfoBlogg.COM

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s