| HTML Newsletters That Work By Jani Kumpula Many organizations want to publish their newsletters in HTML, not only because HTML newsletters look more professional and visually appealing than plain-text newsletters, but because they provide better opportunities to track open-up and click-through rates and measure subscriber interest in articles, special offers and the newsletter in general. HTML newsletters, however, come with their own unique set of challenges. With the sheer number of email clients and Web-based email services currently being used, uneven support for HTML and lack of compatibility across different email clients is a serious concern. Not only are email clients much less forgiving of HTML mistakes, they have nowhere near the level of support for HTML, CSS and the latest standards afforded by Web browsers. This article helps you navigate many common pitfalls and offers advice on how you can create effective HTML newsletters that resonate with your subscribers, maximizing the reach of your messages. Permission: Always ask for permission and let your customers decide whether they want to receive your newsletter. Permission marketing using a double opt-in subscription procedure is the foundation for all effective email list communication. Also remember to include a link that provides a simple unsubscribe mechanism at the bottom of every newsletter. In most cases, this is required by law. Multi-Part Format: Accept that not everyone can or wants to read HTML mail. Either offer an alternate edition in plain text or send your newsletter in multi-part format with both an HTML and a text part. Address Book: Ask your subscribers to add the email address from which the newsletter is sent to their address book or whitelist. This reduces the risk that your newsletter is filtered to the junk folder and that your externally linked images are blocked. Link to Web Version: Include a text link at the top of the newsletter pointing to a URL where subscribers can access a Web version of the newsletter in case they are unable to view it with their email client. Simple Layout: Place a table of contents at the beginning of the newsletter that gives the reader an overview of the contents. This table of contents should be created as text and not as an image, which could be blocked by the email client. Use a simple single-column or two-column layout that is easy to read and scan through. Compatibility: Don't create your newsletter just for one email client. There are countless different email and Webmail clients with varying degrees of HTML support. Test your newsletter before sending to ensure that it looks acceptable in the most common email clients and Web-based services that your subscribers are using. Width: Subscribers have different screen resolutions, and email clients have varying surface areas to display email. Therefore, do not create overly wide messages. Either use relative widths up to 95 percent or restrict the width to no more than 600 to 650 pixels. HTML: Use simple HTML. Tables, even complex ones, are much better than floating <div> blocks. It is best to create the newsletter by hand since you can better control the HTML and ensure that it is standards-compliant. WYSIWYG editors have a tendency to include unnecessary and empty tags, which can cause problems. If you do use a WYSIWYG editor, choose a high-quality product and keep the design simple to avoid problems with the HTML. CSS: When using CSS, do not link to an external stylesheet. Many Webmail clients ignore or delete external stylesheet references. Many Webmail clients even strip out all or parts of the inline styles inside the <head></head> portion and replace them with their own. This often makes it necessary to store your inline style information inside the <body></body> portion of the message. Images: Create your HTML newsletter so that all images are linked externally rather than included as inline attachments. Hard code the width of your images so that the layout is maintained even if the images are blocked. This is particularly important now that many email clients automatically block all external images in the message viewer until the recipient clicks a button to explicitly allow them or adds the sender to the address book. ALT Text: Avoid using images for critical content and include an ALT text for the images that you do use. In case recipients cannot view the image, they will at least see a description of what the image is meant to show. JavaScript: Do not use JavaScript, which is usually blocked or stripped out, especially by Webmail clients, which view all scripting as a potential security threat. Flash: Do not use Flash or other rich media, such as audio or video, in your newsletter. Virtually no email client is able to display this correctly. If you want to incorporate Flash, link to an external Web page from your newsletter. Validation: Check your newsletter with an HTML validator to ensure that it is standards-compliant and fix all serious problems. Web browsers are very forgiving of HTML that doesn't comply with standards. Email clients are much less forgiving. |
