“Above the fold” is a term that often refers to the top of a newspaper and is generally the most interesting or exciting topic in the entire paper. This is designed to attract the reader’s attention and get them to purchase the newspaper. Due to the advancement of technology, this term has evolved and now applies to website design. The above the fold section of your website is the section that a viewer will see immediately upon viewing your site before they begin to scroll down. Just like the front-page article of a newspaper, the above the fold section of your website should be interesting enough to attract the attention of your viewers.

Importance of the Fold

The above the fold section of your website is one of the most important sections on your website. This will be the first thing anyone who visits your site will see, so it should be attractive and provide a positive first impression for your viewers. For B2B businesses, this section is a great place for a call to action. Businesses with a call to action above the fold generally generate more leads and tend to have higher conversion rates than businesses that do not.

Where is the Fold?

The section above the fold is impossible to measure exactly. The size of this section varies depending on the size of the screen and the device the viewer is using to view the site. In a best-case scenario with an average desktop screen size, the section is approximately 1,000 pixels wide and 600 pixels tall. This would mean that the window is maximized and there are no toolbars installed that would push the content downward. Using certain analytics, such as Google Analytics, you will be able to see which devices many of your viewers are using to access your site and adjust your design accordingly.

Mobile Considerations

The majority of today’s online traffic comes from mobile devices. This must be taken into consideration when designing any aspect of a website but is especially important for the above the fold section. Since this is what your viewers will see immediately upon loading your site, it is a major deciding factor for the viewer to continue viewing or to leave your site. Most mobile viewers use their mobile device in portrait mode rather than landscape mode to search the internet. This means that your webpage will be turned sideways in order to fit to the screen. This could cause many different problems in your website content if it is not properly designed. This could contribute to a high bounce rate if many of your viewers are attempting to view your site on mobile and the content of your page above the fold does not appear properly.

Designing Above the Fold Content

When designing your above the fold content there are several considerations that you should account for. Many viewers make the decision to continue or leave a site within seconds, so they should be able to get a general idea of what your business is and what products/services you have to offer almost immediately. First, you should be sure to include a company logo so your viewers immediately see a recognizable logo and can easily determine that they have reached the correct site. This will also reinforce your brand image. Along with your company logo, there should also be a navigation menu that makes it easy for your viewers to find what they are looking for on your website. Another very important consideration is an image. The image above the fold will be one of the first things that catches a viewer’s eye, so it should be attractive enough to keep the viewer’s attention. You should also include an effective headline and some content that encourages the viewer to continue to view your website. A call to action could also be included above the fold and could potentially increase your lead generation. Lastly, your above the fold design should be unique. It is a good practice to look at competitors’ web design to differentiate yourself and make your website stand out.

Testing Your Design

Testing of your design can be done through A/B testing. A/B testing is a comparison between two different versions of the same page. In this case, you would be comparing two different versions of your above the fold content. The changes you make could be as simple as rewording a header or changing your main image, or they could be a complete redesign of the page. Once both designs are completed it is time to test them. Design A will serve as the control and Design B is the variance. Using a tool such as Google Analytics, monitor data such as bounce rate and session duration for a set period and then switch to Design B for the same period. Then, compare the results from the analytics to determine which design had more success.

Conclusion

Your above the fold content can be make-or-break for your website. If your content above the fold does not attract enough attention within the first few seconds of viewing, it is likely that the rest of your site won’t be viewed at all. Always be sure to keep mobile devices in mind while designing your above the fold content (as well as the rest of your website). Once you have a design for your above the fold content, be sure to refine it with A/B testing for the best possible results.