Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Examples of HTML Email Worth Opening

by
Languages:
This post is part of a series called 52 Weeks of Web Design Inspiration.
Big Smiles and Happy Faces in Web Design
15+ Tools for Building Your Portfolio on the Web

I’ve been designing emails this week, and so I’ve understandably been paying more attention to email design around me. With so many to draw inspiration from, here are some examples of email designs which I think do their job properly.

Style

My personal taste means that design with plenty of space will keep coming back in this inspiration roundup, here’s Death to Stock with their use of the Courier font, plain colours and acres of whitespace:

More monospaced type here, from notanotherbill.com. It’s raw–harking back to the days of typewriters, gun powder, and gentlemen’s beard oil:

Eventbrite know how to use color and whitespace; this is the squished-down version of one of their newsletters:

Another spacious email from Wistia, drawing attention to a single blog post. This one actually features an animated GIF too, for some extra focus. My only criticism might be the awkward line breaks on narrow screens:

Clear Calls to Action

Email campaigns might typically see about 20% being opened, with just two or three percent actually being clicked. Concentrating on those calls to action is therefore paramount; remove the clutter, get to the point, and make sure users know what action they’re expected to take.

This promotional email from Typecast, with just two or three clickable items, plus clear copy, directs the user extremely effectively: 

Apple takes no risks in having members’ accounts expiring; this CTA demands attention:

Digest

Getting users to scan emails is tough, so convincing them to take time to properly read content is a real challenge. I love themoderndesk.com newsletters for the consistent presentation, the sleek images, and the bullet points letting me know what to expect further down in the email:

The New York Times Magazine bravely puts its editorial column front and centre; if you’re not here for the content, clear off.

Color

Be daring, be bold, be colorful (if the occasion calls for it). Rich thumbnails, sharp white boxes for text, coupled with a striking yellow to offset the images works really well for Bezar (now AHAlife) “marketplace for creative and inspiring objects”.

MailChimp do a great job with all their emails–here’s a colorful reminder of their A/B testing tools:

Contrasting colors, harsh angles, some rather confronting textures, and bold type. The least you’d expect from London’s Design Museum, matching their branding and website perfectly.

We’ve mentioned Spotify and their colorful designs in the past, and the same is true of their direct marketing. Here’s one from a month or two ago. It uses image-based text for the lead message, so it’s not exactly accessible (and I’m not sure where to opt for a text-based version) but the aesthetics are a winner:

Email Templates on Envato Market

Always worth rounding off with some examples you can get your hands on through Envato Market. Here are some email templates to enjoy!

Viso - Responsive Email  Builder Online
Viso - Responsive Email + Builder Online
Notify - Notification Email  Themebuilder Access
Notify - Notification Email + Themebuilder Access
Market - Responsive Newsletter with Template Builder
Market - Responsive Newsletter with Template Builder
Moka - Responsive Email and Newsletter Template
Moka - Responsive Email and Newsletter Template

Further Reading

Now you’ve been inspired, check out these tutorials from some of the best HTML email minds in the business, then get designing your own email!

More inspiration:

Advertisement
Advertisement
Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.