Email Design: Breaking the Rules

Recently, I received an interesting email from J.Crew. It’s in some ways unconventional and goes against one common best practice. Best practice would tell you the call-to-action should be “above the fold”. “The fold”, however, is an antiquated term and hard to define in today’s email universe. You can basically translate this to saying that the call-to-action should be visible without scrolling. This is a bit tricky considering the various monitor resolutions, tablets, and smart phones people view their email on. As a designer, this can be frustrating because if you truly stick to this best practice it can cause some limitations in your design. What I like about this email is the fact that it doesn’t follow best practice. There’s no clear call-to-action initially — you have to scroll down to see it. What this email did was make me curious. Not only did curiosity make me scroll down, it made me click to “find out why”. Now, I’m not saying throw caution to the wind and ignore best practices. They’ve been established for a reason. What I am saying is its ok to shake things up and break the rules now and then.



Gmail Grid View

In case you’re not aware Gmail is currently doing a field trial that allows you to view image previews of promotional emails. It’s referred to as the grid view. I signed up for the field trial and it’s definitely something retailers will want to take advantage of. There was however an issue I noticed. Some of the emails did not have an image preview. With a little research I discovered there are a few things that can cause this problem. This article at FreshInbox provides some helpful information about fixes for the issue.



Mobile First Email Design

A little over two months ago Lane Bryant began sending emails in a slimmer format. They changed the overall width of their emails from 640 pixels to 480 pixels. This change is not limited to Lane Bryant either. This is a trend you’ll see with many other retailers. So what gives? It’s no secret that email opens on mobile devices is a big deal (currently about 50% are opened on a mobile device). This is another shift toward mobile friendly email design. Slimmer emails with larger text sizes and fewer navigation links are all practices that make email mobile friendly. This is not necessarily responsive design, it’s a “mobile first” mentality. I expect to see more retailers embracing this in the future.


Lane Bryant is also including mobile signup in the email footer. Engaging customers via SMS messaging is something that isn’t talked about much as it should be. If you have the capability it’s definitely something to consider.  Customers that trust you with their phone number are typically your most loyal customers.




Black Friday Email Creative

When I logged into my inbox Friday I expected to see a lot of black and I wasn’t disappointed. Black is naturally the go to color for Black Friday creative. However, when everyone is using black, how do you make your creative stand out in the crowd? Let’s take a look at some examples that did just that.

First let’s look at some examples that get lost in the sea of black. These examples from Staples and Fab are representative of the average Black Friday email creative. Not bad by most standards but they don’t exactly stand out.

This example from American Apparel uses black. However, they’ve created an eye catching contrast by using black elements on a light background. By using plenty of whitespace they’re able to really make the bold text and image stand out.

J.Crew uses a splash of red to create high contrast. The use of a bright red sweater in this example really makes it pop. I also find it interesting there’s no mention of “Black Friday”. Instead they call it “The gifts, gifts, gifts! Event”.

Coldwater Creek chose to use black as an accent color. It still references Black Friday and uses the color black but red is the featured color here. All that red combined with black and green accents give the email a nice seasonal feel.

Tiger Direct used an animated ticker in their creative. Animation is a good way to draw attention. In this case it also helps emphasize the limited amount of time you have to take advantage of the sale.

Another way to stand out is to avoid using black at all. This email from Nordstrom is full of bright colors which help it stand out. Barring the dotted border they completely avoided using black. They could have used black for the text “BLACK FRIDAY” but instead chose gray.



Considerations for Smartphone-Friendly Email Marketing

I recently spoke with Website Magazine about seven things to consider when designing email for mobile devices. You can read the full article here.



What is and what could be - A responsive design experiment.

For quite some time now GAP has been sending emails that are 832 pixels wide. While most desktop resolutions can easily accommodate this width, without responsive design this would still be considered best practice. That being said, I thought it would be an interesting experiment to examine one of their emails and see how it could be made responsive. Below you’ll see how the email currently looks on a smart phone. You can see how the content is hard to read. You could easily mis-tap an element in the layout causing you to be directed somewhere you didn’t intend to go. The bottom line is this is not providing a good experience for the recipient.


Here’s what the email could look like on a smart phone with a little responsive magic. You can see how elements are much easier to read and the message is much clearer. By removing certain elements in the layout you can cut the clutter. This allows you to narrow it down to what is most important. Notice how the navigation has been narrowed down to two items. This makes everything easier to tap. This layout would greatly improve the overall experience for the recipient.




Nice example of an email series

Recently I received a series of seven emails from J. Crew. The series started on Monday and I received one email a day for seven days. The promotion was fittingly called “7 Days of Summer”. There were a few things I really liked about this campaign. Each day the sale was different. The design of the email was also a little different each day yet had a nice consistent feel. Below the navigation there was a progress bar where the day of the week was highlighted with a hand drawn circle. The use of hand drawn text in the design was a nice touch as well.

Email series can be applied to almost any holiday or event throughout the year. With the holiday season quickly approaching it may be something worth thinking about. “12 Days of Christmas” or “Countdown to the New Year” are just a few examples that could make a nice email series.



Responsive Design: A Few Simple Questions

In case you need more proof why responsive email design is important, take a look at this non-responsive example and ask yourself a few simple questions. Is this email easy to read? What is the call to action? Is this email providing a good experience for the recipient? Odds are your answers are no, I’m not sure and no.



Remember the preheader message.

Best practices for the preheader area in email tell you should include two things – a message to support the content of the email and a link to view the email in a browser. While the browser link is important, a supporting message is arguably more important. In Outlook, Gmail and the iPhone, the preheader text is displayed following the Subject Line. Since the iPhone holds 23% of the market share for email clients this is certainly something that should be taken advantage of.

Let’s take a look at two examples.

American Apparel

Subject Line:
KESH x American Apparel: The New Limited Collection

Please click here if you are unable to view the images.

This email from American Apparel doesn’t include a supporting preheader message. Instead, they’re using the space for a browser link only. Kudos for including a browser link, but as you can see on the iPhone preview, they’re missing out on an opportunity to better communicate the message.





Subject Line:
Casual Summer Clothes + The 4th of July Sale Is On

Kick Back With Summertime Clothes From Icebreaker, The North Face, prAna, & More ›

This email from Backcountry.com is a good example of best practices. There is a nice supporting message in the preheader as well as a browser link. Notice the preheader message is on the left and the browser link is on the right. Positioning is important. In order for the preheader text to appear after the subject line it needs to be the first instance of html text in the email. Positioning the preheader message on the left side ensures that it’s the first instance.





Implementing a Proper Email Subscription Point on Your Website

Email acquisition is a hot topic right now at Listrak. With Twitter’s release of the lead generation card and Listrak’s recent whitepaper on the importance of acquisition, I felt it relevant to talk about implementing a proper email subscription point on your website.

Beyond a modal popup solution, the subscription point should be a mini form in the header or footer of your site. By positioning it there, you’re ensuring that the mini form will be on all pages of your website. The most common placement is in the footer, but including it in both the header and footer certainly isn’t  a bad idea. The bottom line is you want the mini form to be easily noticed. Don’t ask for lots of information. Keep the form short and sweet. Ask for  email address only. You can work on acquiring more info later via a welcome message that points to your preference center.

Let’s take a look at a few examples.

Here’s a great example of what a subscription point should be. This example was located in the footer. It’s a mini form that only asks for your email address and it was very visible and easy to find. Well done.

This example has the subscription point located in the header. In this case it’s a text link that upon click displays a pop up mini form. The problem here is it’s hard to find. I really had to scan the page before I saw it. While this example does display a mini form, they would be better served having the mini form directly on the page.

In this example the subscription point was located in the footer. This one had several things going against it. It’s a text link that wasn’t easy to locate. This link directs you to another page that explains the benefits of receiving their email. You then have to click on yet another link that takes you to the account login page. So basically you need to create an account in order to receive their emails. Like it or not, people tend to be impatient, which is why a quick and easy solution is vital. Also, asking the visitor to create an account feels like a commitment. If it feels like a commitment, you’re surely going to scare some potential subscribers away.

Finally, let’s take a look at an example that has all the right things going for it. This is a great example for retailers to follow. There are three subscription points in this example, a link in the header, a modal pop up, and a mini form in the footer.