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:
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?
thanks very helpful video.
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
You are a genius.. Thank you for your help.
Fantastic. Perfect. I can’t say enough to thank you for posting this effort for free.
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
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
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.
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 :)
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!!!
Excellent Article. Thanks been looking for HTML mail tutorials and once again CSS Tricks helped me out !
Thx, I got the info I was missing to complete this process. Everything is working great now.
Rob
Thanks to Chris and Max (useful comment)! This helps a lot!
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.
thanx for this…i was looking for a help…
Fantastic tutorial. Thank you for taking the time to make this. It was very helpful.
thewpnovice
Very helpful! Saves time from creating templates and doing test sends from other options like Exact Target.
Thanks again!
Rob
Exactly what I needed – a great big thank you from the UK.
This video got me started woth e-mail marketing.
Thanks!
thanks a lot for this precious piece of information
it was of a great help to me
Thanks so much for this excellent tutorial.
use your system!
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.
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!
Great tutorial, Chris. Thanks so much.
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
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
You’re a lifesaver! You’re tutorial is spot on and helped me out so much!
Too much talking… way too much talking. Keep it simple, remove the excess.
It helped me a lot. Thank you!
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!
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!
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?
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.
Video and resources are really helpful, best “tutorial” I found about the topic.
Thanks.
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!
Thanks for the video.. Great work!!
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.
hello..
i have created HTML email by myself but can’t send it through gmail..
please see is my HTML is okay ?
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.
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.
Sir, jquery code not work in gmail please help me. and do we use jquery code in Apple mail template.
Many email clients will strip out or disable JavaScript/jQuery as a security measure.