Ultimate Guide to HTML Emails – Basics, Tips, Tutorials and Resources

Advertisment

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