I am actually working on writing a guide to html email design and best practices called Modern HTML Email. You can learn more here.
I love getting email updates from cool companies and I sign up for newsletters whenever I can. Awhile back, I learned about Barley. Barley is a premium web editor for managing sites and content without the hassle of a traditional CMS. Their site and demo video are absolutely gorgeous, so I was excited to see how seriously they take their email marketing.
I first opened their latest update on my phone and was thrilled to see such a beautifully executed email. It is a stellar example of a single-column layout, which I highly recommend utilizing for campaigns with a large mobile audience. They work exceedingly well across devices and are one of the easiest ways to start implementing a responsive approach. Here’s how their responsive email looks:
The simple graphics, ample whitespace, and clearly defined sections make for a clean, elegant email. The images and text scale very well and the “wrap” pattern used for the bottom navigation works great in this context.
When I sat down at my desk, I checked out the same email in Gmail on Firefox. Here’s what was rendered:
It looks like they failed to explicitly declare some table and image widths, leading to a broken desktop view that reflects less-than-ideally on their brand. Unfortunately, this is a problem I’ve noticed a lot lately. Companies large and small have taken to testing only in their preferred browser or ignoring issues outright. I checked out the same email in Gmail on Chrome:
That looks better.
I am an advocate for creating solely for your audience. If the folks at Barley know that the majority of their users will be reading their emails on their phone or in Chrome, then no worries. However, setting explicit widths to insure that the email is consistent across browsers and overriding those widths as necessary is such an easy fix, I wonder if this is just an oversight on their part.
The only other issue I noticed is that there was no link to a web version. Not a huge deal, but it definitely made taking screenshots a bit trickier!
On the whole, Barley puts out an awesome email. The content is completely relevant to their audience and the design is elegant and uncluttered. With a few quick fixes, this could be one of my current favorites.
If you haven’t already, check out their site and product. It looks amazing.