It's something we hear time and time again. "No one scrolls to the bottom of the site, so why are we putting X there?" But this is one of the biggest misconceptions we have about user behavior.

It's been ingrained in us that "above the fold" is all that matters, it's the most important space on a webpage. And it is very important, but the rest of the page is, too.


Origin Story
"Above the fold" originally referred to print newspapers. The content intended to grab the most attention, the most pertinent messaging, was encouraged to appear on the front page of a newspaper, above where it was folded for display on the street or on newsstands. Now "above the fold" is often used to mean content on a web page that is visible before a person is required to scroll down.
 Webpage Anatomy & Styling

Think of a page on your site like a living human body. We even name its parts that way.

 Webpage Anatomy Layout

 Everything works in conjunction with one another; if you had no head, there would be a lot missing; it contains a lot of information. People see your face and recognize who you are. They see your expression, and it sets the tone for what kind of mood you're in and what type of conversation is to follow. And it can communicate the most important messages. This is the same for your website. The best use of the header, "above the fold," serves the same purpose.

  • The logo tells visitors who you are. 
  • The branding and imagery let the visitor know what kind of experience they are going to have on your site. 
  • The navigation and calls to action tell the visitor what you want them to find and do while they are there.

The body of your web page is important, too. By looking at a body you can make a general assessment of health. This can be subjective and different for every site; test it out. Is the content too fat or too skinny? Is it wearing the right outfit? Gauge your audience and make sure you are providing enough content to engage them but not so much that you are overwhelming them. Also, test to make sure you are serving them the right content. You don't want to show up to a ball wearing a swimsuit. I mean, unless it's a beach ball ... hahahaha.

Sidebar: The Perfectly Curated Accessory

The sidebar is like carrying a purse or a backpack. It's great for when you have a little extra to give your visitor. But again, keep it simple and appropriate to the occasion. I remember growing up and spending time at my grandma's. If we were ever out and about, she literally had everything in her bag. *Sneeze* - here's a tissue. *Hungry* - here's a snack. *Got a Flat* - here's a spare tire ... well maybe not that extreme. But the great thing is, we only got the items we needed when we needed them, which is what you need to do in the sidebar, too. Make sure you are bringing the right bag to the event and only giving out the right content. 

This can be accomplished in multiple ways:

  1. Make the content relevant to the body of the page; related content.
  2. Serve personalized content based on previous pages visited; dynamic content personas.
  3. Let it be general enough that it can be useful for everyone; eNewsletter sign-ups, visitor guide requests, etc.

Use it to serve additional calls to action for lower priority content, or to provide a nudge toward something you've already talked about in the header or body.

No Bare Footers Allowed

Finally, back to the origins of our blog, the footer. Often lonely, forgotten, let's face it, most of the time it's a last thought. We issue a little legalese, add a couple links to the "boring" stuff, tell people who we are friends with, like Lonely Planet or TripAdvisor. But we forget the feet are just as crucial a part of your body as everything else.

Think about it. If you're having a conversation with someone, you're trying to bring them on a journey with you, trying to get them to a certain destination/page on your site. After you've spoken with them (header), illustrated it out for them (body & sidebar), and they still haven't found it, just walk them to it (footer). At this point you don't need to continue explaining details, you can instead give them the most direct path to where you want them to end up. And often times, that's what visitors want: clear direction.

"But Michele, you started us off saying no one scrolls to the bottom of the site?" You're right, I lied. 

The truth is, while not everyone scrolls to the bottom, not even most scroll to the bottom, those who do are the visitors really searching for something on your site. They are the ones who have heard what you said, read what you wrote, but are looking for more. Those who scroll present an opportunity to turn a lost visitor into the best visitor, one that converts, following through on the action you want them to complete. Below is just one example.

Experience Columbus: Scroll Call

SituationExperience Columbus partnered with Simpleview on a Conversion Rate Optimization (CRO) engagement. It was established that an increase in eNewsletter sign-ups had recently become one of their higher priority goals for the website.

Solution: After some initial analysis, it was noted that while the homepage of the website did provide a call to action in the footer to sign up for the eNewsletter, that every other internal page on the site did not. So, we threw out the preconceived notion that no one scrolls to the bottom and tested it out. We created this variation of the footer for the interior pages of the site:

Experience Columbus Footer CTA 

 

Results: The experiment ran for 15 days, across ~50,000 visitors, reached full significance and here is what we found: a 513% increase in conversions and 518% increase in conversion rate.

It really is amazing, isn't it? Adding one component, at the bottom of a page that "no one" scrolls to, had such a huge impact on conversions. Still, what I'm hoping everyone takes away with them today is that every area of the page anatomy serves an important purpose and the content curated to place in these areas drives the customer journey toward engagement and conversions.

Header:

  • Shows the visitor who you are
  • Sets the tone for their experience
  • Tells them generally what you want them to do.
Body:
  • Motivates the visitor to explore your site while providing the perfect balance of content
Sidebar:
  • Gives a little extra content to those who need it
  • Offers gentle nudges toward additional content or calls to action
Footer:
  • Reiterates who you are and where you've been
  • Can be used as a powerful tool to show the visitor exactly where you want to take them