What is Below the fold?
The part of a webpage that a user must scroll to see is “below the fold” in web slang. The phrase “below the fold,” a holdover from newspaper publishing, was first used when there was an actual, physical fold in the middle of the page. Anything on top or bottom of the fold was referred to as “above the fold” and vice versa.
Traditionally, less critical content was positioned below the fold because it was largely inaccessible when a newspaper was on the newsstand.
The phrase “below the fold” persisted in the 1990s as publishing moved online. The phrase is still used in web design today to describe content 600 pixels or less from the top of the page or below the bottom of a browser window.
Why is content below the fold significant?
The positioning of content on a webpage influences how many users engage with it. When a user first loads a page, “below the fold” content is hidden from them, and if they navigate away from the page before scrolling, they will never see it.
According to data, placing advertisements and content on a website below the fold significantly lowers the likelihood that it will be seen.
A well-known Google study found that ads above the fold had a viewability rate of around 73%, and ads below the fold had a viewability rate of 44%. In advertising, an advertisement is deemed to have been “viewed” if at least 50% of its pixels are visible on the user’s screen for at least one second.
Ad revenue is typically lower for ads below the fold than for ads at the top of the page due to decreased visibility. Because it is less visible and therefore commands a lower price, companies that sell advertising space on their websites typically do so.
Ways to measure below the fold?
It is impossible to specify the precise location of the fold on a webpage because it can vary depending on screen resolution, browser, and the sizes of the screens on thousands of phones, tablets, and computer monitors.
Most web designers continue to concur that the fold line should be around 1,000 pixels wide and 600 pixels tall.
In the best-case scenario, the browser window is maximized, there are no installed toolbars at the top that would push the content down, and the monitor and browser are the most typical ones, both having a resolution of 1024×786 pixels.
The most popular screen sizes for your website’s visitors will be shown by audience analytics.
Mobile considerations
The most popular size for many years was 1024×768. With the popularity of mobile devices, new dimensions like 320×568 and 360×640 are becoming more widespread.
Designing for the fold has become even more challenging as more people use mobile devices for web browsing.
There is a vast range of screen sizes available for mobile devices, and each user’s needs have different requirements and restrictions depending on the device and screen size.
Users of phones typically browse in portrait mode rather than landscape mode, and users of tablets and computers typically browse in horizontal mode are additional factors to consider.
Because many people use many different devices to access websites, current web design techniques call for responsive design, which uses flexible layouts, images, and cascading style sheets.
There is no set layout for a page with responsive design; content reflows to fit any screen size. Responsive websites “respond” to” the environment in which they are viewed or used.”
Important content still needs to be placed higher on the page, but modern pages should be made to encourage scrolling so that users can experience it.
According to studies, scrolling is more common on mobile devices than on desktops. However, as mobile usage has increased, some mobile scrolling behavior has spread to desktops, and many contemporary website designs now include “infinite scrolling” features.
Monitoring website usage
Monitoring how users interact with your website is crucial because content placement can affect engagement and conversions.
Analytics tools like Google Analytics can tell you how many visitors are coming from desktop versus mobile devices and what size screen they are using on average.
Programs that use heat maps, like Hotjar, and MS Clarity, can help you figure out how far down your users scroll and where they click on a page.
When you know how visitors move around your website, you can start A/B testing and try out various layouts to enhance user experience and achieve your conversion targets.
