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.
The header template from Under Armour is very aggressive in providing the user with multiple call outs about their free shipping offer.
There’s also a short sentence at the top describing the promotion along with a call-to-action. While not very eye-catching to desktop users, those on mobile devices will appreciate this line of copy since it loads quickly, and can be used to give a brief summary of the rest of the email. One small critique Under Armout could test is editing down and condensing the header content to give the main feature section more space. Since most of the content above the main feature doesn’t change, condensing this area will help the template remain “visually fresh” with a different look for each campaign.
Oakley’s monochromatic mailing takes header optimization for mobile devices a step further.
Their email header has a headline for the email, a link to the hosted page, and HTML navigation including a Forward-to-Friend link all within a section seemingly devoted to mobile devices. While this content quickly renders and is easily accessible by mobile users, it pushes the rest of the content down, forcing those viewing on desktop machines to scroll to uncover the rest of the feature section.
Pay attention to the above-the-fold section, and your users will appreciate it. Whether your header area is geared towards mobile users, desktop users, or a mixture of both, it’s important to test out what’s working, and throw away what’s not. Good luck and happy designing!