Ten HTML Tips: Ignore at Your Own Risk
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.