What is the key to writing, organizing and designing great HTML mails?
Really nailing plain text e-mails first.
At least in my opinion. Besides you always need a plain text version of your e-mail. And it’s much easier to practice and understand the principles in a plain text e-mail.
I also believe you should try to learn from great examples (which may have lots of little shortcomings) instead of reviewing what went wrong with bad examples.
So here are three great examples of plain text e-mails.
- One from Google’s Think, the plain text version of a HTML mail,
- one from Jeff Fousts Space Review, who even sends out minimalist HTML mails
- and one from the Jakob Nielsen newsletter.
Think (and Structure E-mails) With Google
The e-mail is plain and simple. The, pretty long links are separated by breaks whenever possible. So the text is easy to read.
Different topics are separated by horizontal lines (===). Action items are specifically highlighted in the usual “link type” form as “Learn more >” and “< Subscribe here >”.
And they use proper item lists, not with hyphens (-) but with proper enumerations (#1) to make the list pop out more.
Nicely done on the points of structure and readability. If you’re looking for more tips and tricks, check out the litmus post. They cover good structure under the terms “scanability & content hierarchy” .
Structure and Readable Links with the Space Review
In addition to all the great points of the Think with Google newsletter, the Space Review uses more highlighting (“**” to indicate a headline).
And what I particularly dig, super short links. The long links in the Google e-mail due to the tracking parameters are OK, since they are usually separated by breaks, but this looks just way better.
How could Google, or indeed anyone, implement such short links in their newsletter? Simply use their URL shortener. Indeed there are a bunch of free URL shorteners you could use even on a WP run website. You’d then turn the complex links with all the tracking parameters into a short simple link (preferably pointing to your own website).
Perfect Stylistic Balance With The NNGroup
Finally the last example provides all the good features of the last two.
But it also finds a perfect balance between text, links and structure. Just notice how the short summaries are about the same length.
They even indicate the reading time per article, which is something that shows effort and thought put into a newsletter.
I still think, plain e-mails are extremely important. And I’m not sure you really need fancy HTML mails.
You can find a bunch of great examples, not just of newsletters, in Seth Godins book “The big red fez – how to make any web site better”. It’s from 2002 (?) but the principles are solid and all still apply.