Email design starts from the top down.

If you stop and think about it, it’s a logical statement – that’s how the email loads and is presented to the user. Therefore, what you want the user to see first should be placed at the top of the email to grab their attention and inspire interaction. This sacred area of your email template is called the “above-the-fold” area and can make or break a design.

Since you only have, on average, 400-450 pixels of vertical space, this area doesn’t give you much room to toy with the images and copy needed to truly feature your content. Factor in some additional space for a logo, main navigation bar and perhaps a refer-a-friend link, and your header section is starting to resemble a layer cake rather than an email that’s designed to attract the user.

With so much going on at the top, it’s easy to get caught up in the technical aspects of the “template” rather than the creative, eye-catching promise of the “design.” To help gain some critical distance and assess the challenges properly, let’s review some examples of above-the-fold sections. Each sample below has been vertically measured at 420 pixels which is a good average number of what the user will see before they have to scroll:

Lego does an excellent job at building an efficient and good looking above-the-fold area. Not only is most of the main featured section displayed in the preview pane, but a smaller sub-feature section makes it in there as well. Utilizing a clean design with minimal copy and navigation, Lego’s template works harder than most at getting the user to interact from the start. Read More »

Today I thought I’d call attention to a cool little creative trick I’ve seen Brooks Brothers do for a while now. As you can see from the image below, they insert a “headline” text link (“Father’s Day Gift Guide – Shop Now”) in the header of each email that summarizes the main offer from the body of the message.

This technique accomplishes a few important things worth highlighting.

First of all, by summarizing the main offer in the form of a text link in the header, Brooks Brothers gets their most important call to action above-the-fold where it is easily found in the preview pane. This is a fundamental issue for any email campaign, regardless of industry or the type of message.

Secondly, the text link in the header is a great way to grab the attention of text-only viewers, many of whom tend to be mobile users. Think about it: if you were Brooks Brothers, a retailer held in high regard by the business set, why not make your email campaigns as Blackberry-friendly as possible? I’d be willing to bet that an above average portion of Brooks Brothers subscribers view their messages on handheld devices due to the nature of their business.

When it comes to email creative, you can never be too attentive to the needs of your customers. Email header testing is a worthwhile investment, and I would recommend testing similar techniques to see what works best with your customers.