Articles

Articles from around the internet on the topic of how to code HTML emails and newsletters.

Guidelines for a Solid HTML Email Template

A good overview and discussion of email coding issues as well as basic code examples.
https://www.campaignmonitor.com/guides/coding/guidelines/

How To Code An Email Newsletter in 6 Simple Steps

Good line by line discussion of coding an html email. More amusing, she links to my SitePoint article: I recommend instead reading the 2-3 articles written for this site (click the Resources link and select the first item, Code HTML Email Articles) which are up to date.
http://blog.crazyegg.com/2012/05/14/how-to-code-an-email-newsletter/

The Ultimate Guide to CSS

Updated regularly, this is the definitive guide when you have questions about which email software supports a particular CSS style.
https://www.campaignmonitor.com/css/

Responsive Email Design

A guide from Campaign Monitor, an email delivery service. It has some excellent ideas, with code.
https://www.campaignmonitor.com/guides/mobile/

Build an HTML Email Template from Scratch

Two articles, one about HTML email as a background piece and the other a hands on tutorial.
http://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email–webdesign-12908
http://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch–webdesign-12770

Say Hello to the HTML Email Boilerplate

Also from TutsPlus, my only caution is this template relies heavily on non-inline CSS which often is stripped or ignored by some email software. Translation: test early and often if you go this route.
http://webdesign.tutsplus.com/articles/say-hello-to-the-html-email-boilerplate–webdesign-5143

How to Code HTML Email

Lots of important background information, not much actual code or discussion of code.
http://kb.mailchimp.com/article/how-to-code-html-emails/

How to Create a Responsive HTML Email from Scratch

Line by line description of the process to code an html email. Only quibble is inline CSS should be specific: padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; instead of padding: 0 0 0 0; (be specific to increase your odds older email software reads your CSS properly). Also SPANs instead of DIVs should work better. However, their use of the @media queries to target phones is correct and useful.
http://www.copernica.com/en/blog/how-to-create-a-responsive-html-email-from-scratch

Design and Build Email Newsletters Without Losing Your Mind (and Soul)

Light on the coding of HTML email but excellent on the many other issues related to designing effective HTML email newsletters.
http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

The Foundations of Coding HTML Email

An infographic with many of the basics. However, CSS compatibility is so complex the best resource is from Campaign Monitor.
https://litmus.com/blog/html-email-coding-101-infographic

How to Code HTML Email Newsletters

I totally forgot SitePoint had published this article by me. It has background and code. No responsive design code discussion. And the Code HTML Email articles on this site are more up to date.
http://www.sitepoint.com/code-html-email-newsletters/