We have been made aware that there are nefarious individuals making job offers at Konverge that do not exist. The goal of this scam is to attain personal information from job seekers. Click below for some telltale signs that a job offer is a scam.


Learn More Dismiss

menu

Above the Fold & Under the Fold


  • Author: The Konverge Team
  • Published: 6/29/2022 12:53:32 PM
  • 5 minute read

Above the Fold Blog

What is the Fold?

The fold represents the border between visible and non visible content on a screen. When content is placed in plain sight (ie when a user loads a website), it’s considered “Above the fold”.

Content placed above the fold is important for a couple of reasons as you may imagine. It will be the first thing that leaves an impression on someone visiting the site. It may (and often is) the primary portion of a site that users interact with. In some cases it will be the only part they interact with, especially if users are encouraged to join a mailing list or click on an ad right away.

There is a more technical analysis done in an article available on Nielsen Norman Group's Site, where it’s stated that “The average difference in how users treat info above vs. below the fold is 84%”.

On the contrary, content that’s outside of the initial view is considered “Under the Fold” or “After the jump”. This is content that the user will need to scroll down or click through something to see.

There’s also a couple other types of hidden content we could consider “Under the Fold”. Elements like drop down menus, toggles, or even tooltips.

This blog is going to explore some “Above the fold” themes and beautiful examples of using the space above the fold. Then go into detail on some ideas that explore less obvious uses of this precious screen space.

Common uses of Content Above the Fold

As promised let’s look at how some common websites are using the space right in front of our eyes. Note, these screenshots are roughly 16:10 on a 13.3in screen.

Google: A big logo and an input ready for your needs

Above the Fold Blog

Source: www.google.com

Wikipedia: A Menu and Some Current Events

Above the Fold Blog

Source: https://en.wikipedia.org/wiki/Main_Page

Netflix: A Slogan and a Sign Up Form

Above the Fold Blog

Source: https://www.netflix.com/

Twitch: Live Streams and a Sign up Footer

Above the Fold Blog

Source: https://www.twitch.tv/

Other “Above the Fold” Considerations

The screenshots shown above speak for themselves. The content that’s shown initially makes sense for each platform and is unique to each individual site. However there are other use cases for Above the Fold content that are interesting and important to be aware of as well.

Do we even need anything Under the Fold?

It should be noted that you can fit a lot of information in one view, especially on a computer screen. Craigslist is a famous example of this, where nearly the entire home page fits on a laptop with a 13” screen. This is pretty impressive given their homepage contains hundreds of separate links (although some with a font size of only 11px).

Let’s have a look.

Above the Fold Blog

Source: https://toronto.craigslist.org/

This works well since craigslist helps serve a number of different users seeking different things. If you think about the front page of craigslist is basically one big menu.

Quick Tech Analysis

Just for fun, let’s see how many links there really are here.

// in the browser console..
$('a').length // all links
// -> 425

// how about links just in the center view..
$('#center a').length
// -> 190

Loading the Fold

When designing a site that will provide dynamic content on a page above the fold there will inevitably be considerations made for a loading state. We haven’t got the speed at which algorithmic based content can be loaded instantaneous (yet). Especially in remote parts of the world of which there are many even within Canada and the U.S.

As a developer or designer you don’t know how long this is going to take, but we obviously want this to be as short as possible. In these cases, it’s good practice to let the user know that they’re being served and they will have their content soon.

Examples of Above the Fold Loading States

Using Placeholders

Above the Fold Blog

Source: https://www.airbnb.ca/

Airbnb uses a skeleton and placeholder style loading experience which outlines approximately what the user’s content will be. This screen clearly indicates a loading state insisting the user to ‘stand by’ while we fetch the content that relates specifically to them. It also provides a less jarring experience when the placeholder shapes are turned into real content for the available accommodations at Airbnb.

Using a Full Screen

Above the Fold Blog

Source: https://www.gmail.com

Gmail uses a more simplistic loading experience. Still very clean and clearly indicates that your content will be ready soon, even with a status bar for progress.

Let’s take a minute to see how a few simple lines of code can be used to make a sufficient loading animation like this.

Above the Fold Blog

<!-- One div is all we need! -->
<div class='loading'></div>

.loading {
/* Position the element in the middle of the screen */
    width: 100px;
    height: 100px;
   position: absolute;
   top : calc (50% - 50px);
   left: calc( 50% - 50px);


   /* Create the circle */
  box-sizing: border-box;
   border-top: 8px solid rgb(240,82, 0);
   border-right: 8px solid rgba(240,82,0,.3);
   border-bottom: 8px solid rgba(240,82,0 ,.3);
    border-left: 8px solid rgba(240,82,0,.3);
   border-radius: 100%;


    /* Use the keyframes animation created below */
   animation: rotate 1s infinite linear;
}


   /* Create a rotation animation */
@keyframes rotate{
    from {transform: rotate(0deg) translate3d(0,0,0)}
    to {transform: rotate(359deg) translate3d( 0,0,0)}
}

Conclusion

Content can be categorized as either “Above the Fold” — when it’s shown initially, or “Under the Fold” — when it’s hidden until a user takes the appropriate action to see it (usually scrolling down). Above the Fold content should be prioritized and important. It should lead to engaging content through links, or prompt the user for action through buttons. Keep it simple if possible and avoid excessive content as this may confuse or overwhelm visitors.

Don’t underestimate what can be done with the amount of space available Above the Fold. It may also be feasible to break the aforementioned rules and show lots of content initially, if the experience doesn’t require simple or straightforward flow. This can give users access to a wide variety of directions to go in and links to follow.

Finally, when serving dynamic content it’s usually best to show a loading screen to let the user know that the backend is processing their data. It’s important to have the site appear as responsive as possible by showing initial HTML/CSS even though it may take a second to have all the data necessary to complete to experience.

If you're having a tough time deciding what information to display above and below the fold, why not talk to us? Konverge has over 28 years of experience in software development, and we can make sure the you show the right above the fold experience to your users. Fill out the form below or click here to contact us today!

Subscribe and stay updated with our FREE newsletter.

Recent Posts

Let's Talk

To learn more about Konverge’s ultimate custom software solutions, please contact us for your free consultation.


We take your privacy seriously and will never share your information. For details see our Privacy Policy.

Busy Office Banner