SitePoint’s latest book, Create Stunning HTML Email that Just Works, is a compendium of best-practice advice for designing and coding beautiful HTML email that’s compatible with any email client. We’ve made the third chapter, Design for the Inbox, freely available as a PDF to give you a taste of what’s in the book. Last week we gave you an excerpt from that chapter that was all about learning the principles behind designing successful emails. This week we’re presenting the design gallery that closes off the chapter, from which you can draw inspiration.
If you’d like to learn how to build emails like these for yourself, pick up the book and dive in!
Gallery of HTML Emails
Scan through these screenshots of some top-notch HTML emails, and think about what they’re trying to achieve. They’re categorized for convenience, but many of them would fit into multiple categories.
Clear Call to Action
These emails are very clear about what they want the reader to do. Giving your reader one obvious option will significantly increase your clickthrough rate.
The bgroup creative agency’s newsletter, shown in Figure 1, “bgroup creative newsletter”, draws attention to an already giant button with a comical character.
Figure 1. bgroup creative newsletter
The Scrapblog sales email in Figure 2, “Scrapblog sales email” has a call to action that isn’t a button, but is nonetheless very compelling, drawing the reader in to learn why they should be ordering before this date.
Figure 2. Scrapblog sales email
The email from Xero, shown in Figure 3, “Xero event reminder”, uses a more conventional call-to-action button. It’s highly effective because of the strong color contrast with the otherwise monochrome theme of the rest of the email.
Figure 3. Xero event reminder
Structure and Layout
Here are some designs that show how flexible even an environment as limited as email can be.
The email shown in Figure 4, “Week van het ontwerpen conference announcement” for a Belgian design conference makes excellent use of typography and layout to clearly separate its various sections.
Figure 4. Week van het ontwerpen conference announcement
The email from Dekalb Tire, shown in Figure 5, “Dekalb Tire sales email”, also makes excellent use of layout. It uses a few different line thicknesses and textures to delimit sections without making the email appear cluttered.
Unlike the previous two examples, Figure 6, “Kunstenfestivaldesarts festival announcement” shows an email that uses text as its primary design element, but still manages to create a clear structure through clever use of a three-column layout.
Figure 6. Kunstenfestivaldesarts festival announcement
Typography
Although fonts based on Flash and JavaScript are unavailable in email clients, and as we’ve mentioned it’s best not to rely on images for your content, it’s still possible to produce beautiful typography in an email.
For a fantastic example, take a look at Figure 7, “New phone number announcement from cabedge.com”, from cabedge.com. Using just a few fonts in varied sizes and colors, combined with a clever idea, the email really catches your interest and relays its message.
Figure 7. New phone number announcement from cabedge.com
Figure 8, “Frost Design newsletter” illustrates another great typography-centric email design. Frost Design use a single-column layout very effectively thanks to strong separations.
Figure 8. Frost Design newsletter
Even though the email in Figure 9, “Reconsider newsletter” consists mostly of a large image file, it makes the image subservient to the primary content. We talked about using typographic characters as design elements in plain text emails, but Reconsider Design provide an excellent example of how this technique can be applied equally well to HTML emails: the two slash characters (//) that precede each heading provide a strong visual cue, tying the design together. Even better, they work independently of images being enabled.
Figure 9. Reconsider newsletter
Special Purpose
Although most of this book is focused around regular email newsletters, there are plenty of other uses for HTML email. Have a look at these standout examples. Unlike newsletters, these special-purpose emails have even greater freedom to center on a single key message or idea.
Figure 10, “Invitation: Dr. Flahoo’s Halloween Hang Out” shows a great example of an invitation email. All the key information is presented in a single column, with an interesting theme tying the design together.
Figure 10. Invitation: Dr. Flahoo’s Halloween Hang Out
Figure 11, “Holiday card from cabedge.com” shows a holiday greeting card sent by cabedge.com. Notice how the graphic at the top reinforces the holiday theme while also serving as a subtle arrow that draws the eye down the the message, which is short and sweet.
Figure 11. Holiday card from cabedge.com
The reminder email from DHL Express shown in Figure 12, “Reminder email from DHL Express” has a lot of positive features: it uses an image as a supporting element rather than for core content; it has a clearly stated, personal message; and it has an obvious call to action.
Figure 12. Reminder email from DHL Express
Almost Image Free
Just because you use HTML doesn’t mean you have to use lots of images. These emails employ striking design without relying on images being downloaded.
This example in Figure 13, “GHP invitation email”, an invitation to attend an organizational meeting by the Greater Houston Partnership, consists almost exclusively of blocks of text. Yet it uses the features of HTML to make that text clear and readable, conveying its message as simply and directly as possible.
Figure 13. GHP invitation email
The product announcement email from Huge Paper in Figure 14, “Nice Matte announcement from huge” makes excellent use of a simple color scheme. By combining this with a clear layout and plenty of whitespace, it’s a strong design without relying on images.
Figure 14. Nice Matte announcement from huge
We’ve already seen part of the pulse8 email presented in Figure 15, “Moving announcement from pulse8” in ???, so of course it has a strong call to action. What’s even more impressive is that it relies on no images at all, and still conveys its message powerfully.
Figure 15. Moving announcement from pulse8
Ready for more?
I hope these emails inspire you to reconsider HTML email as a valid addition to your array of web design services. Remember that you can download the entire chapter this article was drawn from for free as part of the sample PDF. If you’re keen to start building stunning HTML emails right away, grab your copy of the book. It’s available in print form, or as a digital ebook pack containing PDF, Mobi, and EPUB versions.
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
