20 Tips for Creating HTML Email Newsletters

Creation of HTML mail template is one of the most important moments in preparation of advertising mailing. Your message must have good appearance in different browsers and email clients which may have different system for HTML and CSS handling.

HTML Email Newsletters

HTML letter with good formatting will bring better result than the usual text format. But if letter is damaged, unreadable and non-functional, there will be no response because filters and triggers may block it.

That’s why we suggest you 20 advices to avoid the most wide-spread mistakes while email templates creation.

FORMATTING:

1. Create letters manually.

Design programs for work with HTML, such as FrontPage, DreamWeaver, HomeSite and different «WYSIWYG» (What You See Is What You Get) editors are full of disadvantages. Almost all of them paste extra HTML code (especially FrontPage) that further may be displayed differently in different email programs. That’s why, if it is possible, it is good to write all code manually or clean it manually after use of special programs. Of course, it requires good knowledge of HTML.

2. Avoid embedded tables.

3. Don’t use background images; they are not displayed almost in all email clients.

4. Place images at your server instead of adding them to letter.

Some email filters block letters with attached images. Also the size of a letter may be large, that’s why it will be blocked by server. While receiving the letter from server by user, it may be accepted by his email client for a long time and have influence on its perception. That’s why it is good to place images at your hosting and insert link of the image to letter.

5. Avoid using 1×1 pixel images (for size regrowth of table elements).

6. Don’t use CSS.

CSS significantly simplifies work with styles for web sites, but in the case of HTML letters it may have bad influence on correct displaying. Don’t use styles from separate attached file. The best variant is including styles to header part of your letter.

7. Don’t define width of the message more than 650 pixels.

In some mailing programs users have to use horizontal scrolling to read the letter.

8. The size of a message must not be more than 100 kilobytes.

USABILITY:

9. Check HTML code for correctness.

There is a large amount of separate utilities, built-in checkers in programs for working with HTML and, of course, W3C Validator (http://validator.w3.org/)

10. Don’t use scripts in letters.

Letters may be blocked by filters.

11. Paste link to web version of message to letter.

If user is not able to open you message correctly, give him opportunity to read it at your server. For this place the link to web version.

12. Use alt tags for images.

If user block displaying of images in letters, he will see alternative text which you can define as you want.

13. Format letter’s header so as the most important information would be in first 10 cm.

14. Use horizontal text location, don’t use vertical one.

15. Unite text and HTML in the letter; it is better to use colors and styles instead of images.

FUNCTIONALITY:

16. Paste large amount of links to information at your site.

17. Navigation in your email message should be the same with one in your site.

18. Be careful with pasting “Send to friend” link.

Many email programs may display html forms incorrectly. It is better to use link to the page of your site where the form “Send to friend” is placed.

19. Add opportunity of mailing management to the letter.

20. It is better to place audio files, flash and video at your server and not to attach it to letter (like images).

 

This entry was posted in Email Marketing. Bookmark the permalink.

One Response to 20 Tips for Creating HTML Email Newsletters

  1. Pingback: Html Email Newsletters | Email Marketing

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>