New Screencast: Creating and Sending HTML Emails

* August 7th, 2008 *

by: Chris Coyier

Designing HTML Email is far cry from regular web design. Sure, they both us HTML elements, but the whole philosophy is different. In this world, you gotta do all you can do to make sure this single design is as viewable as absoulely possible in all email clients, and there are a heck of a lot more email clients than their are browsers. HTML Emails are all about table based layouts, inline styling, and direct URL’s. Codin’ like it’s 1999.

Responses

Andrew Mager
August 7, 2008
[ permalink ]

Thanks for making this. Hacking up HTML emails is one of my main tasks at work. I will give this a look

Got your link from Twitter.

-@mager

Jason
August 7, 2008
[ permalink ]

I see you’re using Textmate. The “mail” bundle is pretty awesome. Once you have the email typed up and formatted in Textmate you can hit Shift+Command+D (or bundles -> mail -> Send HTML as Email) and it inserts the HTML and correct headers to send HTML email into Apple Mail. I know not everyone uses Textmate, or a Mac, or even Apple Mail for that matter, but if you do using the mail bundle is quick and awesome.

kyle
August 7, 2008
[ permalink ]

Once again, great stuff coming from out of your big bag of tricks.

I was recently tasked to create an HTML email for an event my company was hosting. Little did I know before I started that CSS was a HUGE barrier. Especially using Outlook in Windows. So I ended up doing some research and found the Email Standards group, which helped me out a lot. I also enjoy their other group “The Web Standards Project”.

However, I wish I would’ve seen this first and been successful at the HTML email because we ended up ditching the idea. But now I can tell my boss with confidence that I’ve picked up a few new tricks for HTML emails.

Thanks again.

Carlos
August 7, 2008
[ permalink ]

I asked this question on the forums. For the life of me I could not figure out how to make an HTML email for a client of mine who wanted to embed an image in their email or write a newsletter. Hopefully this does it for me. I may check out Thunderbird email if that works. I now know Hotmail doesn’t accept HTML emails directly and Squirrel mail is only good for text and nothing else. Thanks for the tutorial. This will hopefully solve my issue.

Kostandinos
August 7, 2008
[ permalink ]

Dude! You rock! I can’t believe you made this so fast. I can’t wait to get out of work to watch this.

jamie
August 7, 2008
[ permalink ]

I use Outlook Exprss in for my email and and far as I can tell, it has awsome support for html emails. I have mine setup with a source tab, edit tab, and a preview tab, at the bottom of the compose. So if I paste my code into the source tab, I can jet over to the preview tab or edit tab and see what it looks like right away. Then edit the text and send away. I have also noticed that Outlook Express does have a doctype in it’s default and if I paste code in there, it will chage the code to what it likes.

acms
August 7, 2008
[ permalink ]

Thank you for this great screencast.

Kevin Segedi
August 7, 2008
[ permalink ]

I’m creating and sending e-newsletters for clients 4 days a week… and I’ve gone through all of the limitations and can agree with going back in time with your skills to make things look accurate cross-platform/e-mail client.

One of the big caveats: no background image support. Forget about using them as most of the e-mails that I send are going to hotmail, gmail, and outlook users and these e-mail clients don’t support background images. See who your list is and test in those at the very least. **I test in Outlook 2007, Hotmail, Yahoo! Mail and Gmail.** But if your list has a bunch of AOL address, buck up and test in that too.

Clients also want flash or javascipt; again as these are security hazards they aren’t available either.

Outlook 2007, my worst enemy. Talk about taking a step back - in the latest version they’ve dropped IE as the html rendering engine and replace it with Word! **You CAN send an html e-mail in Outlook 2007**. Go to attach a file and click the arrow on the “Insert” button and tell it to insert as text.

Make sure you follow the CAN-SPAM guidelines and put your physical address in the footer along with the unsubscribe.

And because of the volume of e-mails I send out a month on behalf of clients (around 800,000 sends!) - I use an e-mail service provider. You don’t want to have your own e-mail server blacklisted either, so don’t use it if you are sending commercial e-mail to lots of e-mails.

Good luck and enjoy!

mayhemstudios
August 8, 2008
[ permalink ]

Very cool and informative tutorial. I use mail.app to send to a 300+ mailing list. Here is a little tutorial I wrote on how to send html newsletters on a mac with mail.app.

that graphic guy
August 8, 2008
[ permalink ]

is anyone else having an issue pulling the video up? Thanks

Matthew 'Web Design' Adams
August 8, 2008
[ permalink ]

I hate making HTML emails. I tend to only have to deal with it though for invoices I email out which are pretty basic. Should really improve though as i want to start some marketing emails and standard text is not cool.

mhaltom
August 8, 2008
[ permalink ]

Matt Adams, great post I found your very quick tutorial on how to make a Mail App HTML email helpful.

Will
August 9, 2008
[ permalink ]

Great Post, once again.

But how would you go about sending an alternate text email to a client if, for some reason they couldn’t read your HTML email? ( kind of like the browser text message you get if your browser doesn’t have the latest Flash Player installed) And could you have that text email have a link to a “browser version” if they still wanted to see the HTML email?

acms
August 10, 2008
[ permalink ]

@will: well, if you allready notice, most of the newsletter starts with a link “if you are unable to see this message” “see this newsletter online” or someting like this, and concerns newsletters that contains graphics.

David
August 10, 2008
[ permalink ]

I’m so glad I don’t have to build html emails. That was some ugly vintage table action going on there. I still watched it anyway so I learned something should I ever have to do it - here’s hoping not .

Keep up the great work, your WordPress videocasts finally got me to make the switch, particularly the link to the starkers theme - that really saved me a lot of headaches.

sirthaddeus
August 12, 2008
[ permalink ]

Would tracking codes like google analytics work within a simple html email?

Joshua
August 13, 2008
[ permalink ]

@sirthaddeus no they wont work - what you really have to do instead is insert a tracking image/pixel inside the email.
Unless someone else has thought of a better way to do this, I would be very interested.

I recently designed a email newsletter system (plick.com) that allows you to generate html emails using a wysiwyg inside the browser and spent months (even now still) working out the bugs associated with html email.

carlnunes
August 14, 2008
[ permalink ]

We think IE is a pain, wait until you have to deal with thirty different email clients (local apps and web based).

It’s all about testing in different email clients.

P.S.
The “[Article & Discussion]” link in the Videos section is pointing to the Google “Introduction to Google Analytics” page.

Mike
September 5, 2008
[ permalink ]

This video was a great help. Now i could send a html email like a pro.
Keep up the good work! I use also outlook to send it , simple to do.

ti-deddi
September 29, 2008
[ permalink ]

Really cool screencast,

Can you show how to make cound corners on this?
Will it work?

Adam Friedman
October 31, 2008
[ permalink ]

CSS-to-Inline Conversion Tool Available

Inline styles are the only way to get GMail to render your HTML emails properly!

Like all of you, I spent many frustrating hours when I first started designing HTML emails. So I finally did something about it. I created a tool that allows designers to continue to use CSS as we love with any web page. Then my tool would take the CSS and the HTML email file, and convert all the CSS to inline styles right in the HTML tags and spit out your shiny new inline HTML file. This tool should save you many hours!

Try the converter for a buck, here:
http://www.vivwebsolutions.com/tools-css.php

CSS-Tricks

New Screencast: Creating and Sending HTML Emails

How do you keep track of design inspiration?

Friends

Projects

History

About the Author