I’ve gotten this question a lot over the years.. “Is it going to be ‘above the fold’?” I probably sound like a broken record every time I answer. “There really is no ‘fold’ on the web. There are a ton of devices, screen sizes and/or resolutions the user could view the page on.” “Right, but what will they see without having to scroll?”
The term “above the fold” is an old publishing reference that we seem to have carried into the digital age. It’s used to refer to the actual fold in a newspaper. Anything “above the fold” could easily be seen at a glance and was considered important. With no smartphones or tablets and less variations of desktops, the term may have been better suited for the web in the early 90’s. Today, however, I can confidently tell you that “the fold” does not exist. Websites today are built to be fluid. There are so many devices, desktop platforms and browsers to view web pages on that this structure is our best bet.
Because so many people are familiar with (and love to refer to) “the fold”, I’ve learned to turn it into a concept, rather than a concrete measurement. Next time someone insists on discussing “the fold” in relation to your web page, try talking through some of the points below.
Often when I’m having discussions about landing page design (or emails) I find that people want to pack everything they can into the top maybe 500-800 pixels of the page. “Can we move the form up?” “Do you think we should move that image up so people see it?” Let’s pause right here. I could find hundreds of stats to tell you that people scroll. Instead, I’m just going to ask a simple question. When was the last time you got to a website and thought the content stopped at the bottom of your browser window?
There was a time when web designers were taught to design things assuming that users did not know exactly how the internet worked. That time is (thankfully) over and we should give our users the benefit of the doubt. I stumbled upon this blog post, Scroll Behavior Across The Web, last week. While the actual data might be a tad outdated (circa 2013), the findings are still relevant. The post states that
This is actually pretty logical considering that’s where most of the content is. Rather than keeping every important thing above this imagery fold, we should be focused on making a compelling argument so that people want to scroll.
Let’s talk specifically about landing pages; single pages where the purpose is usually to collect a lead. Generally speaking, these pages contain the following items
- Imagery of sorts (header image, maybe an asset image)
- Copy about the download/offer
- CTA button
There are other items that may be included, such as a ‘you might also like’ section, but for all intents and purposes, those are the main components. It’s not a whole ton to work with so it can be tempting to want to throw everything at the top of the page. Fight the temptation and consider the users journey.
Be straightforward with your headline. When users land on the page, whether it be via an email or organically, do they know what it’s about? In an attempt to be playful or “different” headlines can get confusing and indirect. Keep those antidotes for the subheads.
» DESIGN TIP: Headlines should be large and in-charge! You want them to be the first thing a user sees on the page. If you’re using a background image make sure the font you chose is readable over it.
Use images when they are relevant. If the landing page promotes a piece of content, such as a white paper, show the white paper. If the page is a contact form to set up a meeting, do you need a random stock image of people that look like they’re meeting? Probably not.
» DESIGN TIP: Get creative. You don’t have to give away all the goods but give the user a sneak peak of what they’re getting. Impose the cover onto a tablet or a computer. Mockup World has a ton of free downloads you can use to accomplish something relevant and interesting.
Understand that not all users will get to your page the same way. Now that we’ve pulled the user from the headline down to the body copy (and potentially below the scary fold), we have to make sure the copy is informative. Though you may be promoting this download through an email campaign, it’s important to note that this landing page is live on the web. The majority of your traffic may come from the promotional email, but what about the users that don’t? Make sure your copy makes sense to those who have not read the email first.
» DESIGN TIP: Be conscious of the font-size you use. I like to use 16px as a standard starting point on desktops. Also, check other devices to see how it looks. You may want to bump it up a few pixels on a tablet or a phone so it sits better in those layouts.
Forms, the golden ticket. Where do you put them? Try to think about where it logically makes sense in the process. (And test your audience!) Most forms I’ve seen lie next to the body copy. This way, if the user has come from the email, reads the page headline and is ready to download they can. Alternatively, if they want to read more about the piece the body copy is right there.
» DESIGN TIP: Use directional cues. Arrows just make things easier and draw the users eye to where you want them to go. You don’t need to go crazy with tons of arrows pointing to the form, but a little extra help never hurt anyone.
CTA’s should be informative. Don’t deceive the user. They should know right off the bat what clicking a button is going to do. If I click a button that reads “Register Now” I expect that I will be registered for the event upon my click. If it takes me to another page where I then have to fill out more information chances are I’m going to be annoyed.
» DESIGN TIP: Make your CTA’s obvious. If it’s a button, it should look like one. Also, try creating some contrast with colors. When everything on the page is blue, a blue button isn’t going to be so noticeable. Try introducing a new color or using one that’s not dominant on the page.
So, back to “the fold”. The concept of the fold is acceptable. Important information should be at the top of the hierarchy but remember that not everything is weighted equally. Think in terms of taking the user on a journey that begins “above the fold” and ends somewhere below it.