Blogging on Web Development, Graphic Design, and Internet Technology

Email design

I've recently started a new job working for a company creating html emails. They send out magazine renewal notices, event notices, advertising, etc. Designing for email is a entirely different beast than designing for web.

Designing for emails, require one to take their html and css knowledge back about 10 to 15 years. Forget about html5 or css3, think simple tables with very rudimentary inline styles. Even then be careful because that doesn't always work. Email clients such as hotmail, yahoo, gmail, and outlook all render html and css very differently. Heck, outlook 07' uses a word processor (word 07') to render html and css, this means standards and best practices is out the door. Everything you know about internet design is wrong if you're talking email.

Here is a few things I've picked up so far

• Nothing goes above the "body" tag in the html. Any thing above this is almost always striped out by all email clients
• Don't attach a style sheet. Think about it. if you get an email, are you going to download a style sheet to view it? Everything needs to be in-line css. Not to mention an unknown recipient might not trust your email enough to download a style sheet too.
• No Adobe Flash or JavaScript, stuff like this sets off spam flags in most email clients or they my not even work to began with. You don't want your email going directly into the spam box
• TEST! You thought developing for the web was pain? Email is ridiculous. Nothing works across the board, what works for one email client won't work for another. Apple based email clients offer css3 support while Microsoft outlook is using a rendering engine from 1995. I'm not an Apple fan boy, but you gotta like the support for standards that apple offers.
• K.I.S.S, keep It Simple Stupid. Words to live by. When in doubt, go as simple as possible.Simple tables (no colspans) with simple inline styles, no padding, no margins, no pseudo classes, basically design for the web as it was in 1995.
• Always label your alt tags because some email programs will not show images, also try not to put important content into an image for the same reason. You want people to be able to read your email with or without images.