#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. User Avatar
    Petra
    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. User Avatar
    ruben
    Permalink to comment#

    thanks very helpful video.

  3. User Avatar
    Petra
    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. User Avatar
    Umar
    Permalink to comment#

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

  5. User Avatar
    Teri
    Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    geoffroy
    Permalink to comment#

    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. User Avatar
    Jeff
    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. User Avatar
    Brian
    Permalink to comment#

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

  12. User Avatar
    Rob
    Permalink to comment#

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

  13. User Avatar
    Caron
    Permalink to comment#

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

  14. User Avatar
    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. User Avatar
    idris
    Permalink to comment#

    thanx for this…i was looking for a help…

  16. User Avatar
    Bill
    Permalink to comment#

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

    thewpnovice

  17. User Avatar
    Rob
    Permalink to comment#

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

    Thanks again!

    Rob

  18. User Avatar
    Danny
    Permalink to comment#

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

  19. User Avatar
    Nick
    Permalink to comment#

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

  20. User Avatar
    dias
    Permalink to comment#

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

  21. User Avatar
    eilish
    Permalink to comment#

    Thanks so much for this excellent tutorial.

  22. User Avatar
    Res
    Permalink to comment#

    use your system!

  23. User Avatar
    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. User Avatar
    Hillary

    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. User Avatar
    Ed

    Great tutorial, Chris. Thanks so much.

  26. User Avatar
    Jo

    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. User Avatar
    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. User Avatar
    June Laves
    Permalink to comment#

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

  29. User Avatar
    Feedback
    Permalink to comment#

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

  30. User Avatar
    Paulina
    Permalink to comment#

    It helped me a lot. Thank you!

  31. User Avatar
    Scott
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Troy
    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. User Avatar
    Kevin Mamaqi
    Permalink to comment#

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

    Thanks.

  36. User Avatar
    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. User Avatar
    Tal
    Permalink to comment#

    Thanks for the video.. Great work!!

  38. User Avatar
    William Smith
    Permalink to comment#

    Can this HTML email tutorial be downloaded?

    Thank you

    • User Avatar
      a.r.RAZU

      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. User Avatar
    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. User Avatar
    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.

  41. User Avatar
    MN Mohal
    Permalink to comment#

    sir,
    isn’t there any need to upload the image some where like any server. As you showed in your video that you copied the whole html code and then just sent, but if it is received on some other computer, in that case how the email be going to look there as no image is sent to other person rather we sent only the path of the image which correct only according to our computer but not for others . Please do assist this thing also.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag