Here’s a confession: I hate working with HTML email blasts.
If you’ve ever tried to design and code an HTML email, you feel my pain. Here are several frustrations:
- You have to use tables — Circa 1999.
- Archaic code.
- Two words: Inline CSS.
- Heavy graphics where you’d otherwise use background images.
- Not all email browsers render the same. I’m talking to you, Mr. Outlook!
To quote Zeldman, “All these years of internet use later, HTML mail still sucks.”
I was approached recently by our internal communications team to freshen up the Campus Pastor email templates that use Constant Contact. After a lot of coffee, a long Thursday night, and weeping and gnashing of teeth, I finally came up with a (hopefully) bullet-proof email template design.
You are the benefactor of this HTML email template goodness. Please find the downloadable resources below. I’d love to see how you guys take and adapt these to your ministry.
Downloads:
- Example
- PSD layered file (disclaimer: I didn’t place my layers in folders. Sorry OCD’ers)
- html files
- Festus Font
- Museo Font (used 500 and 700)
Wow! Thanks for this resource. I really struggle with the clunkyness of email html.
Great stuff Cleve!
I am a Constant Contact Business Partner and this is my #1 complaint.
So here is the official why not Full CSS that was givin to me .
1)Many email clients limit the use of CSS such as Gmail and Hotmail.
Because of this, we recommend that you do the following when creating an HTML email or template:
* Use Tables
* Use Inline CSS, padding, borders, fonts, colors, but NOT background-images or margins
* If you need background images, they will only work coded traditionally in TD table cells, not in CSS.
* background images will not work. Instead use Table width 100% and height 100% with a background in the TD.
* If you need to specify a height, it will only work coded traditionally as .
* Use images for text as little as possible. If you do use it, make sure that you use good alt tag descriptions of the images.
Hope this helps
[...] I stumbled across this font, several months ago, and I keep using it in print pieces, and some web including the email template mentioned in this post. [...]
[...] took the template I made available in this post, and within 5 minutes, it was ready for Campaign Monitor prime [...]
Thanks a million!