What is page fold or above the fold when referring to websites

Get the details on what a page fold is when it refers to websites!

In this article I discuss above the fold or page fold as it refers to websites. After being online for so many years developers learn some great techniques that will help ensure they are growing in their skills. Whether its new design techniques, CSS tricks for mobile responsiveness or simply the basics of design and implementation. What were going to look at today is above the fold or page fold in hopes that when you design your next website you do it right so that you can rest at ease knowing you’ve learned the basics of development and design.

One of the most important techniques when developing a new website and its theme is to stay above the fold. The page fold of a website is the landing area in which users see your website on their own screens without scrolling of any type. However different this may be for smaller screens to larger ones the idea should still be the same and something to always consider. When a user lands on your website it’s said that they may not scroll down and that they may even bounce off of your page if they have a hard time getting through your website. Below is an example of a typical wireframe with two examples of page fold loads. If you see the examples focus on the purple line and arrows. The purple lines would be our page fold area for a smaller screen such as a 13.5” MacBook Pro.  The turquoise line you see is what you may see if you were looking at the website using a larger screen such as a 22″ widescreen monitor:

Above the page fold example via a Wireframe

In a previous article I discussed how it is never wise to change your primary navigation too much, but try to stay in line with all of the other websites that are out there to ensure your users can navigate through your website easily. However, that is not the only case that we need to think about here. Above the fold to me refers to your sales pitch, or how you are offering products or services at the very same time. On many instances about a quarter top of your website is the page fold. If you visit a widely popular website you will probably notice that they are offering you as much as they can right away. Then, if you choose to you can offer more products and services under the fold.

You may also consider viewing my own website www.dustinface.com to see how I’ve utilized this idea.  Since you may not have several screens here are a few print screens of one on a 13.5″ MacBook and the other on a 22″ widescreen monitor.  However, because my website is more of a portfolio and blog my website may differ widely from yours as far as the specific design elements and “call to action”:

Website page fold on a 13.5" MacBookWebsite page fold on a widescreen monitor


This may sound silly, but Google also looks at the page fold when it pertains to advertising on a website and is trying to set standards of the design of websites. Although the article was written in 2012 here was their take on this then: http://googlewebmastercentral.blogspot.com/2012/01/page-layout-algorithm-improvement.html

Here is a statement from Google about above the fold or more specifically “Top Heavy” advertising pages:

“We’ve heard complaints from users that if they click on a result and it’s difficult to find the actual content, they aren’t happy with the experience. Rather than scrolling down the page past a slew of ads, users want to see content right away.

So sites that don’t have much content “above-the-fold” can be affected by this change. If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience.

Such sites may not rank as highly going forward.”

With all of this being said, you can see how important it is to give your user the best experience possible.  Although some of the above information relates more to advertising, we can see how Google views websites for better search results.  With these and other techniques I write about in my own blog you can be on the path to successful development!

You know the basics of the way typical websites are laid out by understanding more of page fold or above the fold, you can start learning the design portions of each part of the theme. Follow my blog series of creating a Custom WordPress Website & Learning the Basics of Websites. Stay tuned and I will show you examples of how to customize your WordPress website the way that you see fit, I will give you examples of what I did and how you could use the same ideas to do your own customization.

See more on my latest blog