What "Above the Fold" Means to Your Online Success
"Above the Fold"? What's That?
This term got its origin from the newspaper business. "Above the fold" referred to the content of the newspaper that appeared literally before the fold that make most newspapers easier to carry around. Newspaper publishers quickly discovered that getting leading story headlines and other important content "above the fold" sold more papers.
When referring to websites "above the fold" notes the 'real estate' that appears on your devices' screen before scrolling in your browser. It's very important to remember that the information that is displayed "above the fold" can vary greatly depending on screen size and orientation.
The graphic above shows our websites "above the fold" when viewed on different screen sizes and / or devices. The top four screenshots shows how our desktop site looks on a netbook, iPad and a few desktop computers. The three screenshots on the bottom row shows how our mobile site looks in an iPhone in different orientations and a Samsung Galaxy.
2 Great Tools to View Your Sites in Various Screen Sizes
By the way... want to see YOUR website, blog or social media account viewed in a wide variety of screen sizes, devices and / or orientations? Here is a great tool:
- The Responsinator is another great tool for viewing your sites in mobile and tablet screens
We use both of these tools when checking sites during our initial website design or re-design process.
What Shows "Above the Fold" Matters a LOT
So you make ask... what difference does this make? It can make a HUGE difference! People typically take less than 5 seconds to decide if they are going to stay on a website or other online channel. If the right information isn't in plain view "above the fold" during their initial scan they move on. You have lost your visitor who may never return again. Goodbye lead. Goodbye sale. We hardly knew ye.
The Web Page Paradigm
"On any given Web page, users will either...
click something that appears to take them closer to the fulfillment of their goal, OR click the BACK button on their Web browser."
Where is that "Call to Action" Baby!
We recently updated several of our clients' sites to get more key information above the fold for the vast majority of devices and screen sizes.
The BEFORE and AFTER screenshots shown above highlight changes we made to LodgingOvations.com. The BEFORE image shows an image carousel spanning the entire width of the website. The AFTER screenshot shows that we moved the property management company's "property search / booking widget" thereby decreasing the width of the image carousel slider. Some social media icons and a "Best Price Guarantee" banner were also moved up the page.
The results? We found significant increases in conversion rates and revenues by moving key elements further up the page!
I should note that occasionally keeping certain calls-to-action below the fold or repeating these call-to-action both above ad below the fold can also improve conversions or site performance. The best way to really determine what will improve site performance is to use a testing tool like Visual Website Optimizer. But alas, online testing is a subject for another blog post on another day.
The key take-away? Where key elements appear on your website pages really, really matters a lot. And we have found way more often than not moving the most important calls-to-action "above the fold" results in improved website performance.
How About You?
Have you made updates to the placement of key elements on your website by moving these "above the fold"? Please feel free to share your results (or questions or general comments) below.
By Roy McClean