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

Posted in Tutorials • Posted on 14 Comments

Preview-html-email-tipsHTML 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.

How-to-create-send-html-email-tips

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.

Design-best-practices-resources-beginners-html-email-tips

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.

Getting-started-marketing-html-email-tips

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.

Campaign-monitor-html-email-tips

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.

Guide-creating-newsletters-html-email-tips

6. The 10 Basics of HTML Email Newsletters

Here you will find 10 basic tips for putting together your own HTML email newsletters.

Basics-newsletters-html-email-tips

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.

Design-build-without-losing-mind-soul-html-email-tips

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.

Tips-for-designing-html-email-tips

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.

Easy-ways-to-improve-your-html-email-tips

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.

I-would-wish-i-had-known-sooner-html-email-tips

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.

Ensuring-look-great-get-delivered-html-email-tips

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.

Tips-html-email-tips

6. Rock Solid HTML Emails

Useful tips and guides from David Greiner, the co-founder, of Campaign Monitor.

Rock-solid-html-email-tips

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!

Tipsbest-practises-outlook-html-email-tips

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.

Tips-tricks-blog-html-email-tips

9. Using CSS in HTML Emails: The Real Story

Some tips on HTML email writing and using CSS in them.

Using-css-real-story-html-email-tips

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!

Tips-first-campaign-html-email-tips

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.

Subject-lines-rules-write-right-html-email-tips

12. Smart Email Marketing

20+ useful tips to strengthen your email marketing performance.

Smart-marketing-html-email-tips

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.

Using-css-in-newsletters-html-email-tips

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.

Create-free-newsletter-with-wordpress-using-feedburner-html-email-tips

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.

Build-wordburner-newsletter-manager-wordpress-feedburner-html-email-tips

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.

How-to-code-newsletters-html-email-tips

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.

Create-newsletter-template-html-email-tips

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.

How-to-code-newsletter-html-email-tips

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.

Newsletter-distribution-mailing-services-best-free-online-solutions-html-email-tips

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.

Marketing-tips-for-great-newsletters-html-email-tips

21. Best Practices for Coding HTML Emails

This article features the most important things of coding html emails.

Best-practises-coding-html-email-tips

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.

Principles-html-email-tips

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.

Starter-templates-for-marketing-campaigns-html-email-tips

2. Cake Mail Newsletter Templates

Choose from 6 basic and 15+ advanced templates for your HTML emails.

Cake-newsletter-templates-html-email-tips

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.

Free-templates-html-email-tips

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.

Excellent-newsletter-templates-best-html-email-tips

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.

Free-newsletter-templates-html-email-tips

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.

Guide-css-support-html-email-tips

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.

Standarts-project-html-email-tips

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.

Premailer-html-email-tips

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.

Acid-html-email-tips

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.

Emogrifier-html-email-tips

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.

Is-not-spam-html-email-tips

Inspiration

1. Email Gallery

Gallery-html-email-tips

2. Campaign Monitor Gallery

Gallery-campaign-monitor-html-email-tips

3. Beautiful Email Newsletters

Beautiful-newsletters-html-email-tips

4. HTML Email Gallery

Gallery-2-html-email-tips

5. 30 Excellent Graphic Email Newsletter Designs for Your Inspiration

Excellent-graphic-newsletter-templates-designs-inspiration-html-email-tips

6. 60+ Inspiring Email Newsletter Designs

Inspiring-newsletter-designs-html-email-tips

Software

1. Campaign Monitor

Campaign-monitor-2-html-email-tips

2. Litmus

Litmus-html-email-tips

3. Cake Mail

Cake-html-email-tips

4. Emma

Emma-html-email-tips

5. Mail Chimp

Mail-chimp-html-email-tips

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

14 Comments Best Comments First
  • Darkgaro

    Saturday, July 17th, 2010 23:33

    1

    Wow 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?

    0
    • Daniel

      Sunday, July 18th, 2010 13:31

      2

      Yes, there are 5 under ‘Software’.

      0
  • Eko

    Tuesday, July 20th, 2010 02:50

    6

    Amazing resources, this what I looking for…thanks for the great resources

    0
  • Keith

    Monday, July 19th, 2010 16:10

    5

    I prefer to use plain text emails for my email marketing, I seem to get a better open/click rate that way…

    0
  • Abhishek

    Monday, July 19th, 2010 12:22

    4

    Nice tutorial…

    0
  • ESN

    Monday, July 19th, 2010 11:17

    3

    Wow, that is a very comprehensive list. Thank you for including my tutorial. :)

    0
  • André Novais de Paula

    Tuesday, July 20th, 2010 16:38

    7

    Very good article full of great resources! Thank you.

    0
  • Daniel Miguel

    Wednesday, July 21st, 2010 01:02

    8

    Now that’s a really helpfull post, creating e-mail marketing campaings got a lot easier now!

    Greetings from Brazil.

    0
  • Fedrick

    Saturday, July 24th, 2010 01:45

    13

    Good 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.

    0
  • Josie Bond

    Wednesday, March 28th, 2012 18:14

    14

    Thanks for the info about designing html emails. A lot of great tips and links.

    0
  • Nabeel

    Wednesday, July 21st, 2010 18:47

    12

    Holly molly! What an amazing list of resources….Thank you so much :)

    0
  • David

    Wednesday, July 21st, 2010 09:43

    11

    Hi, 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.

    0
  • Guido

    Wednesday, July 21st, 2010 14:08

    9

    Great post. Thanks for this. Btw. 16 years old? You’re on the right track. Eventually you’ll get there! Best of luck!

    0
  • Jesse

    Wednesday, July 21st, 2010 15:12

    10

    Can’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!

    0
  • Josie Bond

    Wednesday, March 28th, 2012 18:14

    14

    Thanks for the info about designing html emails. A lot of great tips and links.

    0
  • Fedrick

    Saturday, July 24th, 2010 01:45

    13

    Good 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.

    0
  • Nabeel

    Wednesday, July 21st, 2010 18:47

    12

    Holly molly! What an amazing list of resources….Thank you so much :)

    0
  • David

    Wednesday, July 21st, 2010 09:43

    11

    Hi, 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.

    0
  • Jesse

    Wednesday, July 21st, 2010 15:12

    10

    Can’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!

    0
  • Guido

    Wednesday, July 21st, 2010 14:08

    9

    Great post. Thanks for this. Btw. 16 years old? You’re on the right track. Eventually you’ll get there! Best of luck!

    0
  • Daniel Miguel

    Wednesday, July 21st, 2010 01:02

    8

    Now that’s a really helpfull post, creating e-mail marketing campaings got a lot easier now!

    Greetings from Brazil.

    0
  • André Novais de Paula

    Tuesday, July 20th, 2010 16:38

    7

    Very good article full of great resources! Thank you.

    0
  • Eko

    Tuesday, July 20th, 2010 02:50

    6

    Amazing resources, this what I looking for…thanks for the great resources

    0
  • Keith

    Monday, July 19th, 2010 16:10

    5

    I prefer to use plain text emails for my email marketing, I seem to get a better open/click rate that way…

    0
  • Abhishek

    Monday, July 19th, 2010 12:22

    4

    Nice tutorial…

    0
  • ESN

    Monday, July 19th, 2010 11:17

    3

    Wow, that is a very comprehensive list. Thank you for including my tutorial. :)

    0
  • Darkgaro

    Saturday, July 17th, 2010 23:33

    1

    Wow 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?

    0
    • Daniel

      Sunday, July 18th, 2010 13:31

      2

      Yes, there are 5 under ‘Software’.

      0

Comments are closed.

54.227.171.163 - unknown - unknown - US