Web design & development field prepares many dilemmas for you: to use clean style or not, to incorporate latest trends on your website or not, to make accent on visual front or functionality, to make design responsive or not, etc.

We cannot answer all these question at once; instead we’ll start with one very important aspect: the fold.

What does the Fold Mean?

The fold is a term used by website owners and developers to identify the portion of site content which is shown without scrolling down. This is an area visible right when a user enters a website.

Newspaper Origin

Where have the origins come from? Everything is simple: the press set this term long before web design became so important and developed field. Print newspapers had the most sensational articles featured at the top of the page so that to engage readers to flip through the entire paper.

Variety of Screen Resolutions

The problem with the fold today is the resolution. The iPad has a resolution of 1024×768, the iPhone 4 has a resolution of 960×640, my 22 inch monitor has a resolution 1920×1080, and still the most common today is 1280×720. It is no longer one type of computer that everyone has, but today there is a mass of computer monitor designs and sizes, so it is hard to build a general above-the-fold design. Anyway, some users will see more, others less, where is a golden mean then? I suppose it is in the fold denial, because general term is dead now.

Mobile Devices Are Changing the Fold

We have told you about screen resolution just a few lines above, but it is also worth mentioning that we don’t know which devices will appear tomorrow, in a month or in a couple of years. Today people use tablets and smart phones, but they were out of our cognition a few decades ago.

Epoch of Scrolling

Scrolling above all – this is how websites are created these days. It was usual thing to browse a website above the fold and don’t know how to act further when web browsers were unexplored. Today users live online, they communicate, shop, advertise and do business on the Internet, and they know everything about it. Another thing is that users don’t like read and pay too much attention on one site section, so they scroll, scroll and scroll again. It is your task to make them stop at this or that element, and as you understand it is not about the fold. It is just few seconds when users look at the hero area of the site, so you don’t need to stuff everything on one page zone. You should put a right proportion of content on the entire page, and doing so you will double your chances to be noticed and read.

Examples of How to Engage Users to Scroll

Once you decide to make your website scrolling-active, you need to think over all possible options to make it work and be engaging. How users will understand they need to scroll? Why do they need to scroll? What will they get if scroll?

Path trails to scroll – This is when you use some elements to show the way through your website. Here I mean both elementary arrows and creative solutions like air balloon, sneak, anything you can just imagine.

Beach Boar Website with Table Tennis Racket

Sparks Studio

Column layout – this feature can help a lot to intrigue users, especially of one of the columns is broken by the fold. Then, users start scrolling to read to the end of the section and so they unwittingly come to the Footer and get another portion of information you have prepared.

Navigation is to be above the Fold

Navigation is a cornerstone to any website and it is not a surprise that it should have the best position and the most user-friendly functionality. The best position is above the fold, that’s without a doubt. Why? Because users may not want to scroll the entire home page, but they have a concrete goal and need to see a particular page, like about us, contact, payment, portfolio, etc. If you make them scroll in order to browse more pages, they will give it all away and find another site. Many developers do a mistake by designing huge hero areas with images taking all space above the fold (and big hero area is in trend today). You’d better put the navigation bar over this image at the top, rather than make it below the section and visible only after a bit of scroll.

Website Design with Top Navigation

Where Are Calls to Action More Effective?

The answer on this question depends on many factors: which type of services/products you offer, a client can make a decision immediately or he will need to read more before, you have one or a couple of calls to action to be featured on the page. Now, let’s describe every point one after another.

Call to action (CTA) button is effective above the fold, when you give exhaustive information on your product in the Header. This may be a slide presentation, bullet lists with advantages of your product, any statics, etc. So, the user has formed an impression of your company and he can make a decision. In this case, above the fold buttons will act in your favor.

One-page Website with CTA Button above the Fold

If you have a long story to tell your customers, and you want them to know each pro and con of your product, you need to place your CTA below the fold, and better do in in the Footer. Thereby, when clients are sure they need it, they will see a push right in front of them. Though, you should make your story attractive, interesting, engaging and purposeful, if no you will have zero response.

When you can use multiple calls to action? Only when you make them differently purposed and placed in different content sections. In addition, it is better to create various designs for them all to differentiate one from another. If you have all the same button put just everywhere, it will spoil your online presence and worsen your end results.

Website with Multiple Calls to Action

How to put CTA in the middle? There are some tricks you should know:

• put call to action on a sidebar, preferably on the left side because we usually read from left to right and everything on the left comes to eye first:
• make call to action design noticeable, color it brightly and use large fonts;
• use white space around your call to action to make it stand out among other content.

The biggest mistake you can make is mixing CTA with other content items. So never ever put it on a cluttered and messy layout, it won’t work for sure.

Contact Info: Above or Below the Fold?

Not all users like browsing long websites with much content, some of them find these sites only to get contacts of the company to make a call. That is why contacts is better to be above the fold, it can be a single line with phone number or a compact block with more detailed info. In addition to this, don’t forget about a separate Contacts page, is it a must for any site.

Above the Fold is Still Important: Home Page and Landing

Above the fold design principle is not equal for all website pages. While it is unimportant and unnecessary on content pages, it is quite vital for home page design and landing pages. Here you have a chance to attract viewers by nice hero section with images, or by slide presentation. Nevertheless, keep to the rules of all to action and navigation design we discussed earlier.

Final Tips: Elements to Feature above the Fold and below It

We hope you haven’t got confused with the article; anyway we will give you the key points of the above-the-fold design briefly and summarize everything in simple tips to follow:

1. Feature your name above the fold. Logotype has a great impact on brand awareness and this is actually why the website is created – to promote your name/company.
2. Use top navigation. This is the most vital element of a multi-page website, so the fold principles really matter here.
3. Place top news above the fold. Let customers be aware of your events and new products straightaway, don’t keep them guessing.
4. Social media buttons work well both above and below the fold. If your website page has long scrolling, don’t make a choice – just put social sharing buttons at the top and the bottom. Header buttons are good for visitors who already know you and were looking for your website exactly to find these follow buttons. Footer buttons are great, because if users are interested in your content, they will scroll down anyway.
5. Find appropriate call to action position for your particular website. Each company and service provider has different aim at having a website, so calls to action are different for them, too. In this post, we give a good clarification on this design issue, we hope you read it thoroughly, come back if not.
6. Don’t put everything above the fold. In other case, you will get a terrible website with cluttered layout, moreover with empty and boring below the fold design.
7. Neglect above the fold principles, if your website is used by mobile users mostly. People are used to scroll when they browse sites via smartphones or tablets.
8. Scrolling is in trend, so give a better exposure to it rather that to above the fold design, which is not a must in the modern digital world.