Below The Digital Fold

The fold. It’s that critical line about 300-600 pixels down in an email that keeps everyone so focused on what to put above it. You might have heard the phrase “Above The Fold”, where you have to get a subscriber’s attention and include certain details above the fold (or before they start scrolling) to make sure you get their attention. It’s said that 80% of users will pay attention to what’s above the fold while 20% of users will pay attention to what’s further down the email.

Others have argued that the “above the fold” concept is becoming obsolete since people have learned to scroll as the internet has evolved. I can see the reasoning behind people wanting to do away with the fold rule – when it comes to digital mediums, a fold doesn’t seem as important because it could be anywhere depending on the viewers screen setup.

Another argument is that the fold concept just simply won’t go away because it’s a rule that has been around since the days of newspaper, the thing that actually has a fold.

It all stems from how websites can be coded now. Designs are more “open” making layouts less traditional and coding techniques have dramatically improved over the years. On the web, things like parallax and infinite scrolling and making elements fly in from the side or sections scroll into view rather than moving down the page, make scrolling interactive and fun instead of a bothersome chore.

When it comes to email, because the fold has been such a “hardline” rule, people have fallen into the common trap of trying to cram EVERYTHING important under the sun above the fold. This has been another argument for ignoring the fold in email – it keeps designers so focused on putting what’s important above it that everything ends up there.

While I completely agree with not cramming above the fold, I don’t agree with ignoring it. I think the fold should be approached as: anything above it should be compelling enough to make subscribers view what’s going on below it. The fold should simply be a visual indication of hierarchy – the most important part of the message is above the fold while the rest of the important message below the fold backs up the main message.

Just because those 80% look at what’s going on above the fold, doesn’t mean you’ll get more clicks or conversions if you put everything above as if nothing below the fold is important.  And even though people are used to scrolling, when it comes to email – they don’t have to scroll. If the message above the fold isn’t engaging enough or relevant to the subscriber, they’ll simply go on to the next email. Or alternatively, if everything is crammed above the fold, the email will look tacky and unprofessional to the subscriber and they’ll keep it moving through their inbox.

Back to that 20% of users that will scroll down the email, something you said above the fold was interesting enough for them to scroll down to want to read more!  So even though 20% is obviously less than 80%, those 20% are taking the time to read your message! You’re more likely to get a click from them because they’re engaged – this is the reason why content below the fold needs to be just as exciting and important as what’s above it.

Since we don’t have jQuery at our disposal and about 650 pixels of width for our email, how can we go about keeping things interesting below the fold? Check out these creative examples!

 

Rather than go with the traditional large image of a hoodie (or a model wearing one) along with two or three column sections beneath to show additional colors – American Apparel decided to make scrolling fun. As you scroll, you go down a stack of folded hoodies to show just how many colors are available. The focus is on one message only – hoodies, no pricing, no sales, no coupon codes – just all the colors you can shop for.

 

Beneficio made clever use of slicing images with regular text to look like an airplane traveling between the different travel specials they were advertising. Supplementing content that’s below the fold with a continuing image that started above the fold not only piques interest so a subscriber can follow it on down, it keeps the main message of the content relevant once the main image is out of view.

 

It’s not every day you see an email as bold and bright as Code School’s and they keep up the theme of Summer Camp in the consistent imagery and color scheme. Because the main image is more of a teaser, naming out Summer Camp but not telling exactly what it is, you scroll down to read the first couple lines of text. Then you start to see the top of the footer image, so in curiosity, you scroll all the way down to see the full image and BAM! they’ve got you below the fold and engaged.


In case you didn’t notice, the main message of these examples are all above the fold and everything below the fold supplements that main message either by explaining in more detail, showing options or discount specials!

Don’t ignore those 20% of subscribers just because they might need a little more convincing to click through to your site. They’ve scrolled down and have already established that you’ve got their attention – make it worth their time. Keep your email content first to establish what’s important and use design to keep their attention and draw it to where you need it to go, below the fold.

Until next time – happy designing!