Grow your CSS skills. Land your dream job.

#30: Creating and Sending HTML Email

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.

Links from video:

Comments

  1. Permalink to comment#

    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. Permalink to comment#

    thanks very helpful video.

  3. Permalink to comment#

    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
    Permalink to comment#

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

  5. Permalink to comment#

    Fantastic. Perfect. I can’t say enough to thank you for posting this effort for free.

  6. guirigales
    Permalink to comment#

    Thankyou so much, a great help. Can I create a default template that a client can edit in a wysisyg? If so which are my options?
    cheers

  7. Max
    Permalink to comment#

    Just wondering what the thoughts are on if this whole html email thing is a good idea or not? Just googling the words “html email” will yield sites that propose that html formatted email is a bad idea. I am sure if you had a group that was aware of who you are etc its not that big of deal.

    But say you were announcing a new service to a list of 100 strangers: is html email going to be a good thing for you or not?

    Thanks,

    Max

  8. Max
    Permalink to comment#

    This is a great article.

    I use a Mac and did not want to use yet another mail client. There is a way to use Apple Mail’s “stationery” system though…

    Once you have your html email template in perfect shape then open it in Safari. Use a “Command I” to open the file in Apple Mail. Make sure the “from”, “to”, and “subject” fields are empty and then go to File, then Save as Stationery. Then give file template a name and it will appear as a Custom Stationery option when you create a new mail…

    I found this avoids having to download Thunderbird and then have Thunderbird downloading all my emails when all I really want is a way of sending html email. So far it works pretty well. I did find that some Windows mobile phones did you display everything correctly though, but that might be some other issue than the mail coming from Apple Mail.

  9. Phewwwww, it’s been two days that I struggle in the web to find a tutorial which explains how to create and send an HTML email……….Here it is.
    So brilliant, thank you so much for sharing this video. And everything is very well explained!
    I love web :)

  10. Permalink to comment#

    This was a fantastic tutorial and great resource. You saved me a great deal of time for which I am very grateful. Though I am very experienced in coding web pages, I hadn’t tried this before. I probably would have first tried it without using in-line css with predictable unsatisfactory results. Using your tutorial I was able to easily make an HTML that displays well. Thanks!!!

  11. Permalink to comment#

    Excellent Article. Thanks been looking for HTML mail tutorials and once again CSS Tricks helped me out !

  12. Permalink to comment#

    Thx, I got the info I was missing to complete this process. Everything is working great now.
    Rob

  13. Caron
    Permalink to comment#

    Thanks to Chris and Max (useful comment)! This helps a lot!

  14. roxy
    Permalink to comment#

    Thank you so much, my programmer is away and I had already told my client it’s an easy enough task to send newsletters via email. My graphics were ready but, oh goodness what do I know – nothing, I searched the web and eventually found your site with a very clear explanation. Now I’m calm and my client is happy and his clients now know he is exhibiting in Holland next week. Well done am now a fan of your site.

  15. Permalink to comment#

    thanx for this…i was looking for a help…

  16. Permalink to comment#

    Fantastic tutorial. Thank you for taking the time to make this. It was very helpful.

    thewpnovice

  17. Permalink to comment#

    Very helpful! Saves time from creating templates and doing test sends from other options like Exact Target.

    Thanks again!

    Rob

  18. Permalink to comment#

    Exactly what I needed – a great big thank you from the UK.

  19. Nick
    Permalink to comment#

    This video got me started woth e-mail marketing.
    Thanks!

  20. dias
    Permalink to comment#

    thanks a lot for this precious piece of information
    it was of a great help to me

  21. eilish
    Permalink to comment#

    Thanks so much for this excellent tutorial.

  22. Res
    Permalink to comment#

    use your system!

  23. Alessandro

    This was a brilliant tutorial. Solved me lots of troubles. But I have a question left… You explained how to send the mail through Thunderbird; is there anything like that in Windows Live Mail 2011 or Outlook 2010?
    And what about HTML5 in emails?

    Thank you so much.

  24. This tutorial solved all of my issues. I was pulling my hair out and you solved it. Thunderbird was the saving grace.

    Thanks you for everything!

  25. Great tutorial, Chris. Thanks so much.

  26. Hi Chris,
    I found your tutorial very helpful and downloaded some simple templates you recommended. These templates still have lots of code I’m sure I don’t need and this is seems to affect code on the website where I loaded it up. (Makes everything go bold h tags or something).
    Is it possible you could email the file you use in your tutorial please and I’ll use that?
    Or even better if you have time, can you look at this file if I can send it to you?
    Thanks a million anyway, your tutorial was great, I’ve listened to it three times and it’s helped me understand the whole email newsletter thing much better. I will get there! Eventually.
    Cheers,
    Jo

  27. Susan

    Hi Chris

    Another thank you!

    Learning about Thunderbird solve my biggest problem.
    I laughed through the Gmail/Outlook discussion, as I had just had the same experience.

    I will be digging into more of your useful advice!

    Joy,

    Susan

  28. You’re a lifesaver! You’re tutorial is spot on and helped me out so much!

  29. Feedback
    Permalink to comment#

    Too much talking… way too much talking. Keep it simple, remove the excess.

  30. Paulina
    Permalink to comment#

    It helped me a lot. Thank you!

  31. Permalink to comment#

    Hey. This video was super helpful – especially after the time I spent trawling the internet trying to get Mac Mail to use HTML! Ha.

    Thanks for the great work and time saving efforts!

  32. Laila Faisal
    Permalink to comment#

    Thank you so much! Just what I needed. If only I landed on this before all the other websites I found on how to write HTML email. Thanks!

  33. Diane Kuta
    Permalink to comment#

    Hello Chris,

    Your code and instructions are very easy to follow without the huge learning curve. Thank you!

    Will the email look good on all devices?

  34. Permalink to comment#

    Great video!

    After fighting HTML emails all morning I finally got smart and looked for more advice online. Yours is the best I’ve found and now I go into my weekend knowing I’ll have a great finished project come Monday.

  35. Kevin Mamaqi
    Permalink to comment#

    Video and resources are really helpful, best “tutorial” I found about the topic.

    Thanks.

  36. chris lee
    Permalink to comment#

    Thank you so much! Just what I needed. If only I landed on this before all the other websites I found on how to write HTML email. Thanks!

  37. Tal
    Permalink to comment#

    Thanks for the video.. Great work!!

  38. William Smith
    Permalink to comment#

    Can this HTML email tutorial be downloaded?

    Thank you

    • Yeah, i can download it from youtube. to do this… firstly right click on this video than click on “get video URL” than copy the url and paste it in the browser address bar. now you can see the video on youtube.com . if you use IDM then you can download it easily.

  39. AL-AMIN(আলামিন)

    hello..
    i have created HTML email by myself but can’t send it through gmail..

    please see is my HTML is okay ?

  40. Rohit

    I usually don’t watch tutorial videos, but I watched this one with patience and am glad that I did. Thanks for this detailed video, was really helpful.

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".