Ultimate Guide to HTML Emails – Basics, Tips, Tutorials and Resources
HTML emails is a great marketing tool, and if built good, they work great. In 2009 HTML email ROI was $43.52 for every dollar spent on it. If you are a freelancer be aware that sooner or later your clients will start asking for you to build HTML emails.
You might think that it’s not a big deal. Just a miniature HTML web page. But the difference from building HTML websites is that you aren’t building it to just a couple of browsers with very similar structure, but to 20+ email clients people are using. And believe me, they won’t swallow your code so easily. Each of them has it’s own particularities and that makes
HTML emails so hard to make. Below you will find 50+ tutorials, tips, resources, templates to get familiar with HTML email building.
Basics
1. How to Create and Send HTML Email
See pros and cons of using HTML email, and learn how to send HTML email in 7 easy steps.

2. 20 Email Design Best Practices and Resources for Beginners
Even for experience designers, building email newsletters isn’t easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn’t work as it should in every email clients. This is where these twenty best practices come in handy.
3. Getting Started in Email Marketing
Mailchimp, one of the most powerful email marketing tools, shares lot of useful articles with you. From designing and coding HTML email to deliverability and spam filter avoiding. You can also download Mailchimp’s Email Marketing Field Guide.
4. Campaign Monitor Articles & Tips
Campaign Monitor is an email marketing software for designers and their clients. You can find here great articles covering almost everything beginner can learn from, guides, email templates, plugins, and they even have their own email marketing book.
5. A Guide to Creating Email Newsletters
In this article, you’ll be able to explore common design patterns of email newsletters and learn which approaches work well, so that you’ll be prepared to create one for yourself and your clients.
6. The 10 Basics of HTML Email Newsletters
Here you will find 10 basic tips for putting together your own HTML email newsletters.
7. Design and Build Email Newsletters Without Losing Your Mind (and Soul)
This article gives you the information you need to plan, design and build an HTML newsletter that renders well and is actually useful to recipients. It’s a quick and dirty guide to effective email newsletters.
Tips & Advanced Tutorials
1. 10 Tips for Designing HTML Emails
If you don’t know anything about HTML emails, they’re annoying to develop and break all the rules you’ve ever learned as a web designer, but being able to code them is a valuable skill to possess. This article will look at ten quick and easy tips to get beginners started on the road to creating beautiful and functional emails.
2. 6 Easy Ways to Improve Your HTML Emails
Designing email newsletters sends you back ten years. Deprecated tags, tables, inline styling, oh my! This article lists six methods that will immediately improve your email layouts.
3. 8 HTML Email Tips I Wish I’d Known Sooner
The solution for designers who need to design HTML email is to create designs that work relatively consistently across platforms and email clients. This article shows you eight tips for making that happen.
4. Ensuring your HTML Emails Look Great and Get Delivered
Getting your email to look good is only one piece of the puzzle, so here are some recommendations on how you can improve the chances of your emails actually getting delivered.
5. 20 HTML Email Tips
This list of 20 best practises addresses critical issues in coding and design in three key areas: format, functionality and usability. PDF format.
6. Rock Solid HTML Emails
Useful tips and guides from David Greiner, the co-founder, of Campaign Monitor.
7. Tips and Best Practices for HTML Emails in Outlook 2007, 2010
For the Outlook 2007 and 2010 version Microsoft switched from the IE rendering engine to the Word engine, which is completely crippled compared to IE. Even if they switch to IE for 2012, we’ll have clients using 2007 and 2010 for years. So if you haven’t yet learned the ins and outs of designing emails for Outlook, now’s the time to learn!
8. Campaign Monitor Blog
Here you will find tons and tons of useful tips and tutorials on HTML email building from experts in this area.
9. Using CSS in HTML Emails: The Real Story
Some tips on HTML email writing and using CSS in them.

10. Tips For Your First Email Campaign
Here are some tips you should give to new customers who are sending their first email campaigns. Share them with your clients before you begin your next email marketing projects, and you might prevent more than a few headaches!
11. Email Subject Lines: 15 Rules to Write Them Right
Fifty characters could be all that stands between you and success in your next email campaign. Fifty characters is all the space you have in a typical email subject line to catch your reader’s eye and entice him to open your email and take the action you want. Look at 15 rules to make it right.
12. Smart Email Marketing
20+ useful tips to strengthen your email marketing performance.
13. Using CSS and HTML in Email Newsletters
Gere are Groundwire’s guidelines for creating successful email newsletters that will look good even in the worst email clients.
14. Create a Free Email Newsletter Service using WordPress
In this tutorial, you will be using WordPress and Feedburner with a few plugins to create a simple Email Newsletter Service for your WordPress blog. You can track the performance of your newsletter by checking how many subscribers you have, how many clicks each link gets and much more.
15. Build a ‘WordBurner’ Email Newsletter Manager using WordPress and FeedBurner
Similar to previous one, this tutorial will show you how to use your regular WordPress website combined with Feedburner to make a simple email newsletter manager.
16. How To Code HTML Email Newsletters
This article brings you up to date on How best to Code HTML Email so that it will display well in most email software. It provides an exhaustive overview of how to code HTML email newsletters with links to free HTML email templates, CSS compatibility tables, services that test your HTML email, and much more.
17. Create an Email Newsletter Template
This is a two-part tutorial first showing you how to create the template in Photoshop and then how to turn it into working HTML page. Go to the second part here.
18. How to code an HTML Email Newsletter
This step-by-step tutorial, is going to show you exactly how to code an HTML email.
19. Email Newsletter Distribution And Mailing Services: Guide To The Best Free Online Solutions
In this guide you will find the best free email newsletter distribution and mailing services available out there, as well as complementary information to help you identify and select your ideal one.
20. Top 10 Marketing Tips for Great Email Newsletters
If you follow these 10 small business marketing tips, you’ll be on your way to creating an effective email newsletter to help build your business.
21. Best Practices for Coding HTML Emails
This article features the most important things of coding html emails.
22. The Principles of HTML Email Design
This article is an excerpt from Create Stunning HTML Email That Just Works, focusing on the first principles of HTML email design. Read on to start learning how to design beautiful and effective HTML emails.
Templates & Resources
1. Starter HTML Email Templates for Your Email Marketing Campaigns
Here are four basic, flexible templates from Mailchimp that you can use to get started. They’ve been tested to render properly in all the major email programs, like Outlook 2007, Lotus Notes, Gmail, and more. Just download all the templates in one .ZIP file and customize any way you want with your favorite text editor.
2. Cake Mail Newsletter Templates
Choose from 6 basic and 15+ advanced templates for your HTML emails.
3. 30 Free HTML Email Templates
Getting your email to look great in all the major email clients can be a challenge at times, so the hard work has been done for you with these 30 free email templates. They’re tested in all the major email clients, so add your own content.
4. Excellent HTML Newsletter Templates – Best Of
Here is round-up of some of the best free HTML newsletter templates on the Internet you can download without paying a penny.
5. 35+ Free HTML Email Newsletter
This article is showing you a great deal about 35+ free newsletter email templates, where you will find some great design for our personal and business use if there is policy for use listed templates for commercial use, you must follow links website which providing us very much professional and beginner level newsletter templates.
6. Guide to CSS Support in Email Clients
This guide has been put together to save you the time and frustration of figuring it out for yourself. With 23 different email clients tested, this guide covers all the popular applications across desktop, web and mobile email. For the complete report on all 24 email clients across the desktop, web and mobile email world, download the complete guide in PDF format.
7. Email Standards Project
The Email Standards Project works with email client developers and the design community to improve web standards support and accessibility in email.
8. Premailer
For the best HTML e-mail delivery results, CSS should be inline. This is a huge pain and a simple newsletter becomes unmanageable very quickly. This script is our solution.
9. Email on Acid
Preview your HTML email in the top 18, most popular email clients. Though only AOL, Gmail and Outlook 03 is free.
10. Emogrifier
This utility deals with the problems posed by certain email clients (namely Outlook 2007 and Google Gmail) when it comes to the way they handle styling contained in HTML emails. Emogrifier automagically transforms your HTML by parsing your CSS and inserting your CSS definitions into tags within your HTML based on your CSS selectors.
11. Is Not Spam
IsNotSpam online spam checker was created to help you test email and newsletter content, and alert if it is likely to trigger spam filters.
Inspiration
1. Email Gallery
2. Campaign Monitor Gallery
3. Beautiful Email Newsletters
4. HTML Email Gallery
5. 30 Excellent Graphic Email Newsletter Designs for Your Inspiration
6. 60+ Inspiring Email Newsletter Designs
Software
1. Campaign Monitor
2. Litmus
3. Cake Mail
4. Emma
5. Mail Chimp
Did you enjoy this article and found it useful?
Get even more from us:























































Emailwear
Posted 110 days ago 20Emailwear just realeased a collection of free newsletter templates http://www.emailwear.net/free-newsletter-templates/
Deirdre
Posted 208 days ago 19I would also think that Newsweaver is an excellent email newsletter software provider. There website is http://www.newsweaver.com/ and I found it very informative. Excellent article by the way, it’s very clear and easy to understand!
Web Design
Posted 228 days ago 18Thanks for putting this article together very informative!
web design
Posted 324 days ago 17thanks for the tips .. thanks for the nice tut.
cheers
Mail
Posted 437 days ago 16very Informative. I also find one article about this topic in a blog http://www.design2core.com/myblog/xhtml/html-email-newsletters-design-and-coding-tips./
Amazing
Posted 560 days ago 15Good story – but really a lot of that is un-neccessary – if you want your email to get delivered and look good, just take a screen cap of it and send out a simple html email with only one image in it, your screencap. This is what we do and it works fine.
Nabeel
Posted 563 days ago 14Holly molly! What an amazing list of resources….Thank you so much :)
Jesse
Posted 563 days ago 13Can’t forget this indispensable tool:
http://inlinestyler.torchboxapps.com/
These guys have made my life possible as an HTML email designer. A must have for your inline styles!
Guido
Posted 563 days ago 12Great post. Thanks for this. Btw. 16 years old? You’re on the right track. Eventually you’ll get there! Best of luck!
David
Posted 563 days ago 11Hi, thanks for posting these resources, i have struggled with HTML e-mails in the past, before i found some of these resources. Campaign Monitor has some really great tutorials on the basics of designing HTML e-mails as well as some nice free templates, i’d recommend anyone learning, to download a template and then take it apart and see how it is built.
Elliot Ross
Posted 563 days ago 10great post – tons of useful stuff here! also check out http://www.emaildesignreview.com for an email design gallery, useful articles and thoughts on best practice.
Daniel Miguel
Posted 563 days ago 9Now that’s a really helpfull post, creating e-mail marketing campaings got a lot easier now!
Greetings from Brazil.
André Novais de Paula
Posted 564 days ago 8Very good article full of great resources! Thank you.
Melanie
Posted 564 days ago 7Great blog post! Thanks for this very thorough list.
I’d like to add in there for the email delivery portion, the company I work for: http://www.Campaigner.com . We’ve got some awesome templates too.
Eko
Posted 564 days ago 6Amazing resources, this what I looking for…thanks for the great resources
Keith
Posted 565 days ago 5I prefer to use plain text emails for my email marketing, I seem to get a better open/click rate that way…
Abhishek
Posted 565 days ago 4Nice tutorial…
ESN
Posted 565 days ago 3Wow, that is a very comprehensive list. Thank you for including my tutorial. :)
Darkgaro
Posted 566 days ago 1Wow amazing guide … Thank you for gathering all those resources.
This is something I am definitely going to bookmark since there is just so much to go through :)
Also are there any resources that take care of the email delivery?
Daniel
Posted 566 days ago 2Yes, there are 5 under ‘Software’.