Web Layout: Above and Below the Fold
If you have been contemplating building your own website, you may have heard of the elusive and mysterious beast known as the "fold". Web designers have long been arranging websites with the fold in mind, but how do you know where the fold is? How do you know what it looks like? To fully understand the fold and how to properly use it, you must first know a little bit about this design tradition, let do some of the hard work for you.
The term "fold" was first created in reference to traditional newspapers. As newspapers were typically displayed by being folded in half and either placed on a counter or propped up in a magazine rack, the "fold" came to be the term for the bottom edge of the half-newspaper. The area "above the fold" is the portion of the newspaper seen by the glances of potential customers. Headlines and images became more attention-grabbing in order to attract buyers who would purchase the newspapers and eventually read the content hidden "below the fold".
When websites and the internet became popular in the 1990s, these phrases were applied to website design as well. Anything displayed "above the fold" on a website is located in the area first visible when a user visits the page, and it does not require any scrolling. Most designers place introductions, key information, and bold imagery above the fold to encourage visitors to scroll further down the page for the meat of the information. Major advertisements are also placed above the fold to attract potential customers.
Using the Fold to Your Advantage
As you are designing your own website, you may be thinking that the fold is an outdated concept based on the newspaper, an outdated mode of communication. You may be right. Despite statistics that seem to indicate that the majority of web surfers spend their time looking above the fold for information, believing that website design must be constrained to a tiny area of screen is ridiculous.
The key to effective web design is finding a balance between design aesthetics and the power of grabbing a visitor’s attention. By creating an eye-catching first impression featuring a colorful title, succinct introductory paragraph, and an attractive graphic all above the fold, users are significantly more likely to scroll below the fold to see the important information and content of the website.
Locating the Fold
Creating the balance by making a strong impression above the fold and by providing key content below the fold sounds like the perfect solution to the problem of the fold. However, it is nearly impossible to pinpoint the exact location of the fold when there are many web browsers, many screen resolutions, and many handheld devices to consider. With all these variables, there is no true rule for locating the fold.
The best strategy for your web design is to adopt the principle of the fold without worrying about its exact location. Try to focus your core message and eye-catching features in a general safety zone near the top of the page while still utilizing good design. Following a scaling hierarchy that places the most important information first, followed by the more detailed content at a readable size and font further down the page, will create the effect of the fold without pinpointing its exact location.
I hope you have enjoyed reading this post if so please share it on facebook or twitter. If you would like more information on web design please contact us here or call 1300 30 40 47 and we will be more than happy to go over the options with you.
Casey Gordon
Online Marketer