CSS-Tricks

#30: Creating and Sending HTML Email

* 11/24/2008  —  4 Comments *

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 absolutely 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.

Running time: 28 minutes

Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Links from video:

Get the Flash Player to see this player.


Bookmark at Delicious Digg this! Stumble this! Submit to DesignFloat Submit to DZone Share on Reddit Bookmark on Google Bookmarks

Responses


  1. Petra says:

    Great video. Just the right explanation for the subject. I have one last question about the sending. Do you send the email newsletter to yourself from Thunderbird, then open it within G-Mail and send it to your mailing list? Or do you do the sending from within Thunderbird?

  2. ruben says:

    thanks very helpful video.

  3. Petra says:

    Petra again: I found out how to easily send the HTML mail to a google mail mailing list.
    1) I created the HTML mail as described in the video with Thunderbird
    2) I send it to myself so it lands in my google mail account
    3) I open it there (in the browser) and hit “forward”
    4) I erase the little block of text starting with “Forwarding….”
    5) I click into the BCC field and type the first letter of the name of my mailing list
    6) Google pops the email addresses of that group into the BCC field
    7) I add my own emal address in the “to” field, so I get it myself and can see what it looks like
    8) I send the mail, wich now looks as if created by a professional mailer programm and not created by me in Thunderbaird and then fowarded to google and then send again from there

  4. Umar says:

    You are a genius.. Thank you for your help.


Leave a Comment

Save time next time! (You won't have to fill out all these fields) Register | Login

Gravatar

Your Name
1/5/2009