Ten HTML Tips: Ignore at Your Own Risk
Jul 15, 2006
In this ClickZ article, Kirill Popov and Loren McDonald provide these 10 common HTML tips:
- Code e-mail by hand. HTML design for e-mail is trickier than Web HTML. HTML design programs such as FrontPage aren't ideal for designing HTML e-mail. They typically add extra code that wreaks havoc with certain e-mail clients. Also, don't use Microsoft Word's "Save as Web Page" functions. It looks easy, but trust us -- you'll commit an HTML abomination.
- Have an HTML programmer code your e-mail template by hand to keep it clean. Alternately, use programs such as HomeSite and Dreamweaver and remove any unnecessary code by hand.
- Be careful with tables. Avoid using nested tables. Some e-mail clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly. Also, avoid 1 x 1 pixel spacer GIFs (to force widths in your table data cells). These are often found in spam and could get your e-mail blocked.
- Use care with background images. Background images for individual table cells are generally acceptable but may not appear in clients such as Lotus Notes.
- Host images on your Web site instead of embedding them in messages. Some ISPs filter e-mail with embedded images. File size can get quite large with multiple embedded images, which can also get the message blocked. Instead, host those images on your Web site and make sure all paths point to the full URL (e.g., http://www.mysite.com/images). Additionally, use absolute rather than relative links. We often see messages with broken images that pointing to "images\image.gif" rather than a full absolute link.
- Avoid CSS. CSS on a Web site can simplify the coding process and ensure a consistent style. In HTML e-mail, they can cause incorrect rendering in some e-mail clients, or get stripped out or overwritten. If you must use CSS, choose the embedded styles also known as inline. Embed the style within the two body tags, not within the header. Inline CSS can also be embedded directly in the message code.
- Keep HTML e-mail 500-650 pixels wide. Wider HTML messages often force the recipient to scroll horizontally to view the whole message. Messages that are too wide are problematic, especially in a preview pane.
- Use image alt tags. These show one or two words describing an image or an action when the image doesn't display because of slow loading time or image blocking. (However, except for Gmail, most ISPs/e-mail clients that block images also block alt tags.) A sample alt tag looks like this: "E-mail marketing solutions"
- Add functionalities (e.g., send to a friend) carefully. Many e-mail clients won't render forms correctly or pass data from an e-mail form to your Web site. Use links to your Web site for send-to-friend forms, surveys, search boxes, and so forth to ensure the greatest compatibility.
- Just say no to Flash. Host rich-media functions such as inline audio, video, or Flash on your Web site instead of embedding them in an e-mail. Post a link that connects directly to these functions on your site. Many recipients won't have the compatible computer platform, e-mail software, or correct version they need to render those functions correctly.
- Avoid scripting (JavaScript, Visual Basic etc.) if you can. Usually the scripts will be stripped out, causing the intended function to break. Sometimes scripts are mistaken for malicious code and get the message rejected outright. Instead, move readers to your Web site, where you can more safely use dynamic components.
Need help optimizing your email marketing results? Get in touch!