The newspaper industry quickly concluded that in order to attract an audience, they must present attention-grabbing headlines, content, and imagery on the top half of the page<\/strong>.<\/p>\n\n\n\n If no one could see the hidden content below the fold\u2013 above the fold content needed to be the most eye-catching<\/strong> story hot off the press.<\/p>\n\n\n\n This basic principle also applies to digital content.<\/p>\n\n\n\n Of course, websites do not have a physical fold like newspapers; the fold in this regard relates to the scrollbar. We could also consider a website\u2019s \u201cabove the fold\u201d as above the scroll<\/strong>.<\/p>\n\n\n\n Anything that isn\u2019t visible immediately and requires scrolling is considered below the fold. Unfortunately, the digital version of the \u201cabove the fold\u201d concept isn\u2019t quite as simple as the print version.<\/p>\n\n\n\n <\/p>\n\n\n\n The \u201cfold\u201d of a website is considered to be at the bottom of the screen<\/strong>. Anything above the fold is immediately visible to the reader as soon as the page loads and anything below the fold requires scrolling.<\/p>\n\n\n\n The exact location of the fold will depend on the device that the visitor is using to load the page. As we all know too well, desktops, tablets, and mobile devices have different screen sizes and resolutions, so all content must be formatted differently to be appealing to all users.<\/p>\n\n\n\n There are many free online tools you can use to visually test and place different aspects of your website relating to its \u201cFold\u201d.<\/p>\n\n\n\n While these are extremely helpful to help you get a physical idea of the layout, they can only provide a superficial presentation of the website and not an in-depth analysis. For this reason, it is recommended that a full website optimization<\/a><\/strong> is carried out.<\/p>\n\n\n\n It\u2019s important to know what designs will work best for your audience. How will you know if you are displaying the right information in the right place or if your design is attractive and clear enough to convert visitors? The easy answer is to implement experimentation<\/strong>.<\/p>\n\n\n\n One of the best ways to be sure that your above the fold content is getting you the best conversions is to use software to test the performance of your content and compare it to the original versions or perform an AB Test<\/a><\/strong>.<\/a><\/p>\n\n\n\n Wingify<\/a><\/strong> is a great example of a tool that allows you to test elements of your web page from headline CTA, to hero image, to web copy to see the best outcome. With Wingify\u2019s low-code solution, you can get these tests launched with ease and start increasing your conversions.<\/p>\n\n\n\n <\/p>\n\n\n\n While it is true there are no hard and fast rules for above the fold placement<\/strong>, some best practices often work as helpful guidelines.<\/p>\n\n\n\n The number one best practice when it comes to above the fold content is to make sure that the most engaging content is above the fold<\/strong>.<\/p>\n\n\n\n It is also important to never assume that following the best practices means one size fits all.<\/p>\n\n\n\n For many years, websites have been designed like newspaper front pages in a sense. By this, we mean that there has been a \u201ctemplatization\u201d methodology that leaves the majority of sites looking the same.<\/p>\n\n\n\n Having the same layout on every webpage you visit will lead visitors to experience some fatigue. Having a unique and innovative landing page template<\/a><\/strong> will help the digital experience feel a lot more natural as opposed to all websites following a cookie-cutter structure.<\/p>\n\n\n\n Some websites have done away with the fold altogether, designing pages with no below the fold content and eliminating the problem entirely. These \u201ccompact\u201d designs are aesthetically pleasing to the eye and are able to fit all screen sizes.<\/p>\n\n\n\n On the contrary, one of the worst things a website can do is present a \u201cfalse bottom<\/a>\u201d<\/strong> to the page. This is where a site has further information that requires scrolling, but it seems like there is nowhere else to scroll. In other words, its existence is not apparent to the visitor.<\/p>\n\n\n\n A fold shouldn\u2019t be an obstacle; it should flow naturally<\/strong> and draw the visitor in<\/strong> to look for more information.<\/p>\n\n\n\n User habits have changed enormously from the early days of the Internet and they will continue to change as technology evolves.<\/p>\n\n\n\n During the 90s, it was common for most visitors to rarely read anything below the fold due to slow connection speeds and ponderously slow websites. But now, users are far more likely to use the scroll function to get more information.<\/p>\n\n\n\n This had some companies resort to cramming information above the fold and over-stuffing the visitor with too much content. Thankfully, now it\u2019s far more common to be greeted with minimalist and elegant designs that allow the visitor to discover what the site has to offer.<\/p>\n\n\n\n Before 2010, there were no iPhones, Samsung Galaxy phones, Google Pixels phones, tablets, etc. This means that over 10 years ago, the above the fold line was more consistent due to the lack of variation in screen size.<\/p>\n\n\n\n However, we are now seeing more devices on the market every year and need to pay close attention to the responsiveness of above the fold UX designs<\/strong> to be compatible with different devices.<\/p>\n\n\n\n <\/p>\n\n\n\n One of the myths about above the fold designs is that it is always best practice to have a clear Call To Action (CTA)<\/a><\/strong> viewed instantly. This is an oversimplification of the concept.<\/p>\n\n\n\n Where you place the call to action depends on several factors:<\/p>\n\n\n\n \u201cCertain\u201d visitors are those who are likely to react to the call to action as they have largely made their minds up about purchasing, signing up, or downloading content before visiting the site.<\/p>\n\n\n\n This is where known brands have an advantage because there is little for this type of visitor to learn about their product or service. In these cases, placing a call to action above the fold is only a matter of convenience.<\/p>\n\n\n\n For visitors who are not certain of their intent, placing the call to action above the fold is generally the best practice. It\u2019s also important here to provide as much informative and relevant content as possible.<\/p>\n\n\n\n For uncertain visitors that are presented with a complex proposition, such as a product or service that isn\u2019t obviously beneficial to them, placing the call to action above the fold will not suffice. For these situations, you\u2019ll need to provide a more in-depth explanation of why your call to action should be acted upon. In fact, placing your call to action up front can appear a little pushy.<\/p>\n\n\n\n In any case, the call to action should be placed in a position where the visitor is most likely to convert<\/strong> and perform the desired action.<\/p>\n\n\n\n No matter how tactically you design your site, most of the attention will still be focused above the fold. It\u2019s human nature to focus your attention on the first thing that is presented to you. Therefore, shouldn\u2019t you maximize your engagement and flood the area with ads?<\/p>\n\n\n\n Unfortunately, the answer isn\u2019t so simple.<\/p>\n\n\n\n![\"Above](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/2022\/10\/above-the-fold-illustration-1.png\")
<\/figure>\n\n\n\nWhere is the \u201cfold\u201d on a webpage?<\/h3>\n\n\n\n
Online tools for defining above the fold placement<\/h2>\n\n\n\n
Testing above the fold designs<\/h3>\n\n\n\n
Best practices<\/h2>\n\n\n\n
Above the fold tendencies have changed<\/h3>\n\n\n\n
![\"heeader-41\"](\"https:\/\/static.wingify.com\/gcp\/uploads\/abtasty\/above-below-fold.jpg\")
<\/figure>\n\n\n\nCall to actions above or below the fold?<\/h2>\n\n\n\n
\n
Placement of Ads<\/h2>\n\n\n\n