|
Crafting Top-Notch HTML Newsletters
By Jani Kumpula
Senior Webmaster/User Interface Designer, L-Soft
Many HTML-savvy designers find themselves frustrated when building HTML newsletters for the first time. Creating HTML content for browsers, which enjoy good HTML standards support, is very different than creating HTML for email clients, where HTML support is much more sketchy. Despite all of this, designing successful HTML newsletters doesn't have to be a major challenge as long as we follow a few key guidelines.
1. Realize that HTML for email is different
The first step is to come to terms with the fact that building HTML for email clients is different than building HTML for web browsers. While email clients have seen some progress in HTML standards support, many are still years behind web browsers. This means that when coding HTML for email clients, it's important to keep the design simple. The more complex your design, the more likely that it will break in some of the less HTML-proficient email clients. Forget about using cutting-edge HTML and CSS. Instead, create your HTML newsletters with code that you would have used ten years ago. In other words, use table-based designs and inline CSS rather than floating <div> blocks and CSS-based positioning.
2. Design for the worst performing email client
There are dozens of email clients with varying support for HTML standards. It's your job as an HTML designer to make a judgment call on which ones to support based on your subscriber base. After you have decided on a baseline, design your HTML newsletters for the worst performing email client. This will ensure that your HTML newsletters will render acceptably for the majority of your subscribers. As you advance, if you want to use more complex HTML and CSS, test this code against your worst performer to ensure that the results are still acceptable. Creating HTML for email clients involves a certain amount of trial-and-error. The key is to start simple and advance later as you learn more about each email client's idiosyncrasies.
3. Use tables for your layout
In web design, the use of table-based layouts has fallen out of favor years ago. Not so for email. The fact is that floating <div> blocks and CSS-based margin, padding and positioning is poorly supported in many email clients. When they fail the results look disastrous, with blocks of text and images seemingly randomly strewn across the screen. As an HTML designer or sender, this reflects poorly on you. The best way to ensure that your HTML newsletters will look as you intended is to use a table-based design. Tables are surprisingly flexible, which goes a long way to explain their longevity. You can use fixed widths and heights (avoid blank spacer images) for your table cells for near-exact positioning. While table-based layouts are a bit more time-consuming to code, there is little that CSS-based layouts can do that tables cannot.
4. Move your CSS inline
There is nothing wrong with using CSS for defining your fonts and colors. The important point to remember is to move your CSS attributes inline. Some email clients, particularly webmail clients, tend to strip all CSS that is located inside the <head></head> tags of your HTML message. Instead, for maximum support, make the CSS part of the HTML code itself.
In other words:
<p class="header">Example</p>
could look like this:
<p style="font-family: arial, helvetica, sans-serif; font-size: 14px; color: #000000; font-weight: bold">Example</p>
For links, remember that you need to define the style of the link separately from the paragraph style:
<a href="http://www.example.com" style="font-family: arial, helvetica, sans-serif; font-size: 12px; color: #3366cc; font-weight: bold; text-decoration: underline">Example</a>
5. Include dimensions and alt tags for your images
Always include the width, height and alt tags for your images. With many email clients blocking images by default, they are often displayed as empty placeholders of the same size until the subscriber explicitly clicks a button to allow them. Without width and height tags, the placeholders will be shown as small squares of the wrong size, which can warp the layout of your newsletter. Alt tags allow your subscribers to see a description of what the images are meant to show before enabling them. In the same vein, make sure that your important content is included as text rather than part of the image. Some senders include all the pictures and text as part of one large image, especially for advertisements, flyers and invitations. This is a poor approach as subscribers will see absolutely none of the content if image blocking is enabled by default.
6. Be careful when using background images
Background images are commonly used when designing for web browsers because they allow you to place text and other content above the image. Unfortunately, background images are ignored altogether by certain email clients. If you do choose to use background images despite these limitations, make sure to include an acceptable fallback color for those email clients that don't support them. For critical images such as top banners or logos, include them as regular <img>-style images instead, which are universally supported. As an extra safety mechanism for certain webmail clients, add style="display:block" as part of your image tags to prevent any unwanted padding to be included around your images. In addition, use the align attribute rather than float to align your images.
7. Be mindful about the width of your newsletter
It's important to keep in mind that the preview pane and display area of email clients, particularly webmail clients, is considerably smaller than the overall screen resolution and browser width. HTML newsletters should, therefore, be narrower than web pages. There is no correct answer to how wide your HTML messages should be. With multi-column newsletters, 800 pixels may be necessary and should work for most subscribers. If your subscriber base frequently uses mobile devices to view your email and if this audience is particularly important to you, you may need to reduce the width to 600 pixels. Similarly, keep in mind that subscribers will initially only see a portion of the vertical height in their preview panes. Place your most important content above this proverbial fold for optimal visibility.
8. Forget about Javascript, Flash and video
The majority of email clients strip all Javascript from the email message as a safety measure. There is no workaround. Just don't use it. There is really no need for Javascript in an HTML newsletter anyway. Flash, videos and other special content is rarely supported either. If you want to share Flash or video with your subscribers, instead create a link to an external website where they can access it if they choose.
9. Define your paragraph spacing explicitly
A frustrating aspect of some email clients, especially webmail clients, is that many have different default paragraph spacing values, if they have them at all. This means that consecutive paragraphs can get crunched together, which detracts from the readability of your message. If your tests indicate that this is a problem, it's wise to add margin-top and margin-bottom attributes to your paragraph styles to define this spacing explicitly.
10. Test and re-test your messages
Thorough testing is the key to successful HTML newsletters. Before you send out anything to your subscribers, send test messages to the email and webmail clients on your target list of ones you want to support. Most unanticipated rendering problems can be fixed with just a few tweaks to the code. Also, don't assume that just because your newsletter design looked great last month that it will continue to look great this month. There are continual rendering changes in webmail clients, sometimes for the better and sometimes for the worse, which may require additional tweaks in your code. If you make these guidelines part of your design process from the beginning, creating successful HTML newsletters will be considerably less daunting. You fill find that the benefits of properly executed email marketing campaigns is closer than you think.
Subscribe to LISTSERV at Work (American Edition).
| 
