20 HTML Email Design Tips

Loren McDonald offers 20 HTML design tips in three key areas: format, functionality and usability. He covers issues that affect how your message appears, including coding, images, message width and file size.

Format:

Code emails by hand if you can.
Avoid nested tables.
Do not use canvas background images.
Host images on your Web site instead of embedding them in emails.
Avoid 1x1 pixel spacer gifs.
Avoid using Cascading Style Sheets.
Keep HTML Emails to 500 to 650 pixels wide.
Keep message file size under 100 KB.

Usability:

Validate HTML content.
Avoid scripting if you can.
Link to a Web version of your email message.
Use image alt tags.
Redesign the top of your email template so that readers will see your key content, even if they don't see the images.
Use horizontal layout rather than vertical.
Incorporate both text and HTML and use alt tags, color and graphics instead of live images linked to your Web site.

Functionality:

Provide lots of active links to content at your Web site.
Navigation through your email should reflect your Web site navigation – don’t use different terms.
Add functionality such as Send-to-a friend...carefully.
Add a subscriber-management section to each template.
Host rich-media functions such as inline audio, video or Flash on your Web site instead of embedding them in an email.

Read the full article here.

Our Sponsors