Paul Segsworth: Designing Email Spam

Tuesday, April 6, 2010

Designing Email Spam

So our next assignment will be to design HTML e-mail. Which is a fancy way of saying we're designing e-mail spam. I get a half-dozen or more spam e-mails every day, most of which look pretty pathetic with every other word misspelled. Though a few, from MacMall, Apple and various software companies I actually don't mind too much and these few look like someone spent at least a little time and thought on them.

Designing HTML e-mail is very different from HTML web design. Designing for email is apparently like HTML design 20 years ago. Everything is table-based and the list of do-nots is a whole lot larger than the list of can-dos.

The first and biggest difference is with CSS. No CSS can be put in the head or linked document, so all CSS must be placed inline. There is fortunately a automated way of moving the CSS from the head to inline, using free services like Premailer.

In addition, a lot of CSS properties are not supported. Many things, like colors, need to be placed within the HTML rather than using CSS. Most common CSS shortcuts (like the font shortcut list) don't work either.

Second, the layout is done almost entirely with tables. Width, margin and padding are not rendered consistently in different e-mails, so widths and spacing have to be set within each cell.

Images are going to be the biggest problem. Since many email users have images turned off by default, then a possible majority of viewers may not see the images. The overall design has to make sense without images, include background colors, and don't forget the alt image description. Also, PNGs don't work for all email clients, so images need to be jpeg or GIF.

This is just an quick summary of the basics. A very in-depth (and very readable) article is at: 24ways.org.

Other useful references on the web are:

http://www.mailchimp.com/articles/how-to-code-html-emails

http://www.campaignmonitor.com/

http://htmlemailgallery.com/

Labels: Web Design