Download Free: A\/B Testing Guide<\/em><\/span><\/a><\/h3>\n\n\n\n\n People judge a website by its cover.<\/p>\n<\/blockquote>\n\n\n\n
And a website\u2019s first impression on its users depends a lot on its \u201cabove the fold\u201d content.<\/p>\n\n\n\n
However, with the users\u2019 behavior evolving over time, the traditional usage of the fold might no longer be relevant.<\/p>\n\n\n\n
This post digs deeper into the subject and offers you relevant actionable tips to increase conversions<\/a>.<\/p>\n\n\n\nYou can find the following topics inside the post:<\/p>\n\n\n\n
\n- What Does \u201cAbove the Fold\u201d Mean?<\/li>\n\n\n\n
- Why a Website\u2019s Above the Fold Matters for CRO<\/li>\n\n\n\n
- Legacy Above the Fold Practices<\/li>\n\n\n\n
- Why Legacy Practices are Irrelevant Now?<\/li>\n\n\n\n
- Current User Behavior and Above-the-Fold Practices<\/li>\n\n\n\n
- Actionable Tips<\/li>\n<\/ul>\n\n\n
What does \u201cAbove the Fold\u201d mean?<\/h2>\n\n\n
Above the Fold<\/a> is the portion of a web page that is visible without scrolling.<\/p>\n\n\n\nIt is the first sight that visitors encounter on a web page. Consequently, website designers and developers give a lot of thought to what goes above the fold.<\/p>\n\n\n\n
For example, this is what Mailchimp displays above the fold on its homepage:<\/p>\n\n\n\n![\"Mailchimp](\"https:\/\/static.wingify.com\/vwo\/uploads\/sites\/3\/2015\/08\/Send-Better-Email-MailChimp-2015-08-17-12-02-07.jpeg\")
Image Source: Mailchimp<\/figcaption><\/figure>\n\n\n\nQuick Trivia:<\/strong> The term \u201cAbove the fold\u201d has originated from the newspaper industry.<\/p>\n\n\n\nNewspapers are usually folded in half before they are put on sale. Since readers can only see the top half of a newspaper, it is imperative for the content above the newspaper\u2019s fold to be compelling \u2014 influencing readers to buy a piece. It has, therefore, become a common practice to display a newspaper\u2019s most intriguing stories and graphics above the fold.<\/p>\n\n\n\n
During the web\u2019s early days, the above-the-fold concept was carried over from newspapers to websites.<\/p>\n\n\n
Why a website\u2019s above-the-fold matters for CRO<\/h2>\n\n\n
Whenever visitors land on a web page, they expect to immediately find the information they require. If the web page doesn’t offer information\/value right away, visitors leave.<\/p>\n\n\n\n
By including relevant information and user actions above the fold, your website will keep visitors engaged \u2014 right from the start. With this, the chances of your visitors exploring your offerings will be higher<\/a>.<\/p>\n\n\n\nAnd, the better the visitors understand your offerings, the better they are positioned to make a conversion.<\/p>\n\n\n
Legacy above the fold practices<\/h2>\n\n\n
The legacy best practices \u2014 during the 90s and early 2000s \u2014 advised putting all<\/strong> of a web page\u2019s important elements above the fold.<\/p>\n\n\n\nThis was based on the theory that anything placed below the fold<\/a> will rarely be viewed by web visitors.<\/p>\n\n\n\nHere is Apple’s website from the 90s:<\/p>\n\n\n
\n![\"Apple](\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/3\/2015\/08\/websites-in-90s-Google-Search-2015-08-18-15-34-50.jpeg\")
Image Source: Apple.com<\/figcaption><\/figure>\n<\/div>\n\n\nMany websites limited themselves to around 600 pixels<\/em> in height. Articles on websites spanned multiple pages, requiring users to click instead of scrolling to read more.<\/p>\n\n\n\nWhy did these practices exist?<\/strong><\/p>\n\n\n\nAt this time, scrolling was not so intuitive for users. Navigating down a website used to take some effort (owing to clumsy scroll bars).<\/p>\n\n\n\n
Jacob Nielson, from the Nielson Norman Group<\/a> explained this further: \u201cThis reluctance to scroll made sense at the time, because people were used to having computers show all their choices. Dialog boxes, CD-ROM multimedia shows, and HyperCard stacks all worked that way, and didn’t require scrolling.\u201d<\/p>\n\n\n\nThese factors heightened the importance of the above the fold space.<\/p>\n\n\n\n
Above the fold, thus, became the most valuable real estate of a web page.<\/p>\n\n\n\n
Download Free: A\/B Testing Guide<\/em><\/span><\/a><\/h3>\n\n\nWhy legacy practices are irrelevant now<\/h2>\n\n\n
Because now, users scroll!<\/strong><\/p>\n\n\n\nScrolling down a website on PCs has become effortless \u2014 with the scroll wheel of a mouse or the double-finger slide on a touchpad.<\/p>\n\n\n\n
Still, the changing behavior of users can be largely attributed to the increased usage of mobile devices.<\/p>\n\n\n\n
While using a smartphone or a tablet, users scroll down almost involuntarily. With the smaller screen size of the devices, users expect<\/strong> a web page to provide more information below the fold.<\/p>\n\n\n\nAs the limitation \u2014 that users will rarely view below-the-fold content \u2014 is no more in place, websites don\u2019t have to constrain themselves to just above the fold.<\/p>\n\n\n\n
Moreover, the whole concept of the fold becomes ambiguous when multiple screen sizes are involved.<\/strong><\/p>\n\n\n\nCurrently, there are numerous devices with different screen sizes available across the world. This makes it impossible to define a single point where the fold lies.<\/p>\n\n\n\n
Below are the different screen sizes for mobile Android devices<\/a>:<\/p>\n\n\n\n![\"Luke](\"https:\/\/static.wingify.com\/vwo\/uploads\/sites\/3\/2015\/08\/Luke-Wroblewski-on-Twitter-There-is-no-fold.-part-6-httpt.coT1b7AnkDCS-2015-08-17-16-41-51.jpeg\")
<\/figure>\n<\/div>\n\n\nIn addition, more and more websites with Responsive Design<\/a> are being rolled out.<\/p>\n\n\n\nA responsive design allows a website to change its layout according to the screen resolution of the device on which it is being viewed.<\/p>\n\n\n\n
These design practices, too, make it impossible to define a universal fold.<\/p>\n\n\n
\n![\"Responsive](\"https:\/\/static.wingify.com\/vwo\/uploads\/sites\/3\/2015\/08\/Responsive-design-to-engage-with-members-from-any-device-Premier-IT-2015-08-17-15-54-43.jpeg\")
Image Source: Atom.com<\/figcaption><\/figure>\n<\/div>\n\n\nFurthermore, there are multiple studies that show how elements placed below the fold attract similar (or higher in some cases) user attention, compared to elements placed above the fold.<\/p>\n\n\n\n
\u201cPositions slightly below the fold between 600 and 1000 pixels typically have both high viewership and high engagement\u201d \u2014 Chartbeat.<\/p>\n\n\n
\n![\"Scroll](\"https:\/\/static.wingify.com\/vwo\/uploads\/sites\/3\/2015\/08\/Scroll-behavior-across-the-web-Chartbeat-Blog-Chartbeat-Blog-2015-08-17-18-34-11.jpeg\")
Image Source: Chartbeat<\/figcaption><\/figure>\n<\/div>\n\n\n\u201c66% of attention on a normal media page is spent below the fold\u201d \u2014 Chartbeat.<\/p>\n\n\n\n
\u201cFor continuous and lengthy content, like an article or a tutorial, scrolling provides even better usability than slicing up the text to several separate screens or pages\u201d \u2014 UXMyths<\/a>.<\/p>\n\n\n\n\u201cThe most clicked link on the homepage is at the very bottom\u201d \u2014 Milissa Tarquini.<\/p>\n\n\n
Current user behavior and above-the-fold practices<\/h2>\n\n\n
The above section makes it abundantly clear that the fold does not drive user engagement on a web page<\/a>.<\/p>\n\n\n\nYet, above the fold holds a great deal of importance for web pages.<\/p>\n\n\n\n
Let’s see how.<\/p>\n\n\n\n
With the overwhelming availability of information across the internet, users are spoiled for choice. They have become impatient, and they leave a website that doesn’t offer them information right away.<\/p>\n\n\n\n
For this reason, users spend the majority of their time looking at information above the fold \u2014 judging the website<\/strong><\/a>.<\/p>\n\n\n\n\nAbove the fold is where users decide whether to stay on a website or not.<\/p>\n<\/blockquote>\n\n\n\n
However, the objective of Above the Fold has now changed from providing all the information through 800×600 pixels<\/em>.<\/p>\n\n\n\nIt is now used to engage users and provide cues about what the web page has to offer.<\/p>\n\n\n\n
\nToday, above the fold space focuses on building up users\u2019 intent towards making a conversion.<\/p>\n<\/blockquote>\n\n\n\n
Delving further.<\/p>\n\n\n\n
Yes, users scroll. But they don\u2019t scroll just for the fun of it.<\/p>\n\n\n\n
To scroll down a web page, the users need a compelling reason. And this compelling reason cannot lie far down the web page. Most users would bounce before even reaching that point. The users must be kept intrigued right from the start \u2014 above the fold.<\/p>\n\n\n\n
A web page above the fold should be promising. It should make the users scroll down and browse through additional content. As users will be engaged for a longer time, the conversions are set to rise.<\/p>\n\n\n\n
You can additionally use the above-the-fold space to highlight your brand image<\/strong>.<\/p>\n\n\n\nBy positioning certain branding elements above the fold, you can clearly project yourself as a differentiated brand in the industry.<\/p>\n\n\n
Actionable tips to boost conversions:<\/h2>\n\n\n
Below are a few actionable tips to make users scroll through, and engage more with your website.<\/p>\n\n\n
1) Encourage users to scroll<\/strong><\/h3>\n\n\nConsider your web page as a story. With each content line and element, your users should be impelled to view the next section of your web page.<\/p>\n\n\n\n
\nThe climax of the web page story should be accompanied by a CTA.<\/p>\n<\/blockquote>\n\n\n\n
Here are some techniques to make your users scroll down:<\/p>\n\n\n\n
Include a web element that lies on both sides of the fold.?<\/strong><\/p>\n\n\n\nHere is an example from VWO\u2019s homepage.<\/p>\n\n\n\n![\"VWO](\"https:\/\/static.wingify.com\/vwo\/uploads\/sites\/3\/2015\/08\/Worlds-Easiest-AB-and-Split-Testing-Software-Visual-Website-Optimizer.-2015-08-16-18-41-47.jpeg\")
<\/figure>\n\n\n\nThe web page presents users with a partial rectangular graphic right on the fold.<\/p>\n\n\n\n
The text over the graphic says, \u201cWatch how easy it is to A\/B test your website.\u201d This makes it almost obvious that the graphic is a video. And since the users cannot view the video just yet, they will scroll below to do that.<\/p>\n\n\n\n
You can use any web element in place of the video to achieve your end goal \u2014 even plain text!<\/p>\n\n\n\n
Offer a preview of the content that the web page contains below.<\/strong><\/p>\n\n\n\nFor instance, I\u2019ve given a preview of this post\u2019s contents at the start.<\/p>\n\n\n\n
The preview makes the users aware of everything the web page has to offer. If the users want to browse through the information offered on the preview, they will scroll.<\/p>\n\n\n\n
Offer an explicit cue for scrolling.<\/strong><\/p>\n\n\n\nInstead of providing subtle cues, you can directly tell your visitors that the page contains more information below the fold.<\/p>\n\n\n\n
You can display a downward arrow, a scroll icon, a \u201cScroll down\u201d text, or anything similar.<\/p>\n\n\n\n
Here is an example:<\/p>\n\n\n\n
![\"Scroll](\"https:\/\/static.wingify.com\/vwo\/uploads\/sites\/3\/2015\/08\/Innovative-Examples-Of-Websites-Utilising-Video-Backgrounds-2015-08-18-18-11-56.jpeg\")
<\/em>Image Source: DesignWoop<\/a> <\/p>\n\n\n2) Offer website\u2019s differentiators above the fold<\/h3>\n\n\n
There have been multiple cases where placing a website\u2019s credentials \u2014 trust badges, social proof, etc. \u2014 above the fold has resulted in an increased number of conversions.<\/p>\n\n\n\n
Below is an example \u2014 the variation outperformed the control.<\/p>\n\n\n\n![\"Comparison.png\"](\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/3\/2015\/08\/Comparison.png.jpeg\")
Image Source: White Card Courses<\/figcaption><\/figure>\n\n\n\nHigher conversions imply that users engaged more when websites displayed their differentiating factors clearly.<\/p>\n\n\n\n
That being said, you shouldn\u2019t put up these web elements above the fold without testing their effectiveness. You can create an A\/B test to see which version of your website performs better.<\/p>\n\n\n\n
Related Post:<\/strong><\/em> See How Betfair Used Persuasion Principles to Increase Conversions by 7%<\/a><\/p>\n\n\n3) Keep your content top-notch<\/h3>\n\n\n
People judge a website by its cover.<\/p>\n<\/blockquote>\n\n\n\n
And a website\u2019s first impression on its users depends a lot on its \u201cabove the fold\u201d content.<\/p>\n\n\n\n
However, with the users\u2019 behavior evolving over time, the traditional usage of the fold might no longer be relevant.<\/p>\n\n\n\n
This post digs deeper into the subject and offers you relevant actionable tips to increase conversions<\/a>.<\/p>\n\n\n\n You can find the following topics inside the post:<\/p>\n\n\n\n Above the Fold<\/a> is the portion of a web page that is visible without scrolling.<\/p>\n\n\n\n It is the first sight that visitors encounter on a web page. Consequently, website designers and developers give a lot of thought to what goes above the fold.<\/p>\n\n\n\n For example, this is what Mailchimp displays above the fold on its homepage:<\/p>\n\n\n\n Quick Trivia:<\/strong> The term \u201cAbove the fold\u201d has originated from the newspaper industry.<\/p>\n\n\n\n Newspapers are usually folded in half before they are put on sale. Since readers can only see the top half of a newspaper, it is imperative for the content above the newspaper\u2019s fold to be compelling \u2014 influencing readers to buy a piece. It has, therefore, become a common practice to display a newspaper\u2019s most intriguing stories and graphics above the fold.<\/p>\n\n\n\n During the web\u2019s early days, the above-the-fold concept was carried over from newspapers to websites.<\/p>\n\n\n Whenever visitors land on a web page, they expect to immediately find the information they require. If the web page doesn’t offer information\/value right away, visitors leave.<\/p>\n\n\n\n By including relevant information and user actions above the fold, your website will keep visitors engaged \u2014 right from the start. With this, the chances of your visitors exploring your offerings will be higher<\/a>.<\/p>\n\n\n\n And, the better the visitors understand your offerings, the better they are positioned to make a conversion.<\/p>\n\n\n The legacy best practices \u2014 during the 90s and early 2000s \u2014 advised putting all<\/strong> of a web page\u2019s important elements above the fold.<\/p>\n\n\n\n This was based on the theory that anything placed below the fold<\/a> will rarely be viewed by web visitors.<\/p>\n\n\n\n Here is Apple’s website from the 90s:<\/p>\n\n\n Many websites limited themselves to around 600 pixels<\/em> in height. Articles on websites spanned multiple pages, requiring users to click instead of scrolling to read more.<\/p>\n\n\n\n Why did these practices exist?<\/strong><\/p>\n\n\n\n At this time, scrolling was not so intuitive for users. Navigating down a website used to take some effort (owing to clumsy scroll bars).<\/p>\n\n\n\n Jacob Nielson, from the Nielson Norman Group<\/a> explained this further: \u201cThis reluctance to scroll made sense at the time, because people were used to having computers show all their choices. Dialog boxes, CD-ROM multimedia shows, and HyperCard stacks all worked that way, and didn’t require scrolling.\u201d<\/p>\n\n\n\n These factors heightened the importance of the above the fold space.<\/p>\n\n\n\n Above the fold, thus, became the most valuable real estate of a web page.<\/p>\n\n\n\n Because now, users scroll!<\/strong><\/p>\n\n\n\n Scrolling down a website on PCs has become effortless \u2014 with the scroll wheel of a mouse or the double-finger slide on a touchpad.<\/p>\n\n\n\n Still, the changing behavior of users can be largely attributed to the increased usage of mobile devices.<\/p>\n\n\n\n While using a smartphone or a tablet, users scroll down almost involuntarily. With the smaller screen size of the devices, users expect<\/strong> a web page to provide more information below the fold.<\/p>\n\n\n\n As the limitation \u2014 that users will rarely view below-the-fold content \u2014 is no more in place, websites don\u2019t have to constrain themselves to just above the fold.<\/p>\n\n\n\n Moreover, the whole concept of the fold becomes ambiguous when multiple screen sizes are involved.<\/strong><\/p>\n\n\n\n Currently, there are numerous devices with different screen sizes available across the world. This makes it impossible to define a single point where the fold lies.<\/p>\n\n\n\n Below are the different screen sizes for mobile Android devices<\/a>:<\/p>\n\n\n In addition, more and more websites with Responsive Design<\/a> are being rolled out.<\/p>\n\n\n\n A responsive design allows a website to change its layout according to the screen resolution of the device on which it is being viewed.<\/p>\n\n\n\n These design practices, too, make it impossible to define a universal fold.<\/p>\n\n\n Furthermore, there are multiple studies that show how elements placed below the fold attract similar (or higher in some cases) user attention, compared to elements placed above the fold.<\/p>\n\n\n\n \u201cPositions slightly below the fold between 600 and 1000 pixels typically have both high viewership and high engagement\u201d \u2014 Chartbeat.<\/p>\n\n\n \u201c66% of attention on a normal media page is spent below the fold\u201d \u2014 Chartbeat.<\/p>\n\n\n\n \u201cFor continuous and lengthy content, like an article or a tutorial, scrolling provides even better usability than slicing up the text to several separate screens or pages\u201d \u2014 UXMyths<\/a>.<\/p>\n\n\n\n \u201cThe most clicked link on the homepage is at the very bottom\u201d \u2014 Milissa Tarquini.<\/p>\n\n\n The above section makes it abundantly clear that the fold does not drive user engagement on a web page<\/a>.<\/p>\n\n\n\n Yet, above the fold holds a great deal of importance for web pages.<\/p>\n\n\n\n Let’s see how.<\/p>\n\n\n\n With the overwhelming availability of information across the internet, users are spoiled for choice. They have become impatient, and they leave a website that doesn’t offer them information right away.<\/p>\n\n\n\n For this reason, users spend the majority of their time looking at information above the fold \u2014 judging the website<\/strong><\/a>.<\/p>\n\n\n\n Above the fold is where users decide whether to stay on a website or not.<\/p>\n<\/blockquote>\n\n\n\n However, the objective of Above the Fold has now changed from providing all the information through 800×600 pixels<\/em>.<\/p>\n\n\n\n It is now used to engage users and provide cues about what the web page has to offer.<\/p>\n\n\n\n Today, above the fold space focuses on building up users\u2019 intent towards making a conversion.<\/p>\n<\/blockquote>\n\n\n\n Delving further.<\/p>\n\n\n\n Yes, users scroll. But they don\u2019t scroll just for the fun of it.<\/p>\n\n\n\n To scroll down a web page, the users need a compelling reason. And this compelling reason cannot lie far down the web page. Most users would bounce before even reaching that point. The users must be kept intrigued right from the start \u2014 above the fold.<\/p>\n\n\n\n A web page above the fold should be promising. It should make the users scroll down and browse through additional content. As users will be engaged for a longer time, the conversions are set to rise.<\/p>\n\n\n\n You can additionally use the above-the-fold space to highlight your brand image<\/strong>.<\/p>\n\n\n\n By positioning certain branding elements above the fold, you can clearly project yourself as a differentiated brand in the industry.<\/p>\n\n\n Below are a few actionable tips to make users scroll through, and engage more with your website.<\/p>\n\n\n Consider your web page as a story. With each content line and element, your users should be impelled to view the next section of your web page.<\/p>\n\n\n\n The climax of the web page story should be accompanied by a CTA.<\/p>\n<\/blockquote>\n\n\n\n Here are some techniques to make your users scroll down:<\/p>\n\n\n\n Include a web element that lies on both sides of the fold.?<\/strong><\/p>\n\n\n\n Here is an example from VWO\u2019s homepage.<\/p>\n\n\n\n The web page presents users with a partial rectangular graphic right on the fold.<\/p>\n\n\n\n The text over the graphic says, \u201cWatch how easy it is to A\/B test your website.\u201d This makes it almost obvious that the graphic is a video. And since the users cannot view the video just yet, they will scroll below to do that.<\/p>\n\n\n\n You can use any web element in place of the video to achieve your end goal \u2014 even plain text!<\/p>\n\n\n\n Offer a preview of the content that the web page contains below.<\/strong><\/p>\n\n\n\n For instance, I\u2019ve given a preview of this post\u2019s contents at the start.<\/p>\n\n\n\n The preview makes the users aware of everything the web page has to offer. If the users want to browse through the information offered on the preview, they will scroll.<\/p>\n\n\n\n Offer an explicit cue for scrolling.<\/strong><\/p>\n\n\n\n Instead of providing subtle cues, you can directly tell your visitors that the page contains more information below the fold.<\/p>\n\n\n\n You can display a downward arrow, a scroll icon, a \u201cScroll down\u201d text, or anything similar.<\/p>\n\n\n\n Here is an example:<\/p>\n\n\n\n There have been multiple cases where placing a website\u2019s credentials \u2014 trust badges, social proof, etc. \u2014 above the fold has resulted in an increased number of conversions.<\/p>\n\n\n\n Below is an example \u2014 the variation outperformed the control.<\/p>\n\n\n\n Higher conversions imply that users engaged more when websites displayed their differentiating factors clearly.<\/p>\n\n\n\n That being said, you shouldn\u2019t put up these web elements above the fold without testing their effectiveness. You can create an A\/B test to see which version of your website performs better.<\/p>\n\n\n\n Related Post:<\/strong><\/em> See How Betfair Used Persuasion Principles to Increase Conversions by 7%<\/a><\/p>\n\n\n\n
What does \u201cAbove the Fold\u201d mean?<\/h2>\n\n\n
Why a website\u2019s above-the-fold matters for CRO<\/h2>\n\n\n
Legacy above the fold practices<\/h2>\n\n\n
Download Free: A\/B Testing Guide<\/em><\/span><\/a><\/h3>\n\n\n
Why legacy practices are irrelevant now<\/h2>\n\n\n
<\/figure>\n<\/div>\n\n\nCurrent user behavior and above-the-fold practices<\/h2>\n\n\n
\n
\n
Actionable tips to boost conversions:<\/h2>\n\n\n
1) Encourage users to scroll<\/strong><\/h3>\n\n\n
\n
<\/figure>\n\n\n\n
<\/em>Image Source: DesignWoop<\/a> <\/p>\n\n\n2) Offer website\u2019s differentiators above the fold<\/h3>\n\n\n
3) Keep your content top-notch<\/h3>\n\n\n