Greatest Practices for Your Web site (+ Examples)

Above-the-fold (ATF) content material is vital for net design as a result of it’s the place customers type their first impressions. And the place they count on to see sure web site options.

Plus, ATF content material can have an effect on SEO (web optimization).

What Does ‘Above the Fold’ Imply?

Above the fold refers back to the seen a part of a webpage earlier than the consumer scrolls down

By extension, the fold is the place the loaded web page first cuts off on the backside of the display. Something beneath this level is beneath the fold.

Because the illustration beneath reveals, the consumer’s gadget impacts the exact level of the web page fold. Different components, similar to browser settings, additionally have an effect on the dimensions and form of the viewing window, often called the viewport.

When designing above the fold, give attention to dimensions that work for the common consumer. Most screens and gadgets will show the highest 600 pixels of a web page.

Designers ought to implement responsive structure, which robotically adapts to completely different viewports.

Be aware: The above the fold which means comes from newspaper publishing. Newspapers are usually displayed on newsstands folded in half, so editors place essentially the most attention-grabbing components above the fold—actually.

Above the Fold Greatest Practices

Above-fold content material is essential in capturing guests’ consideration. We’ve rounded up greatest practices that may assist you to ship an excellent consumer expertise (UX). And in the end enhance income.

Plus, we’ve included above-the-fold web optimization methods that may assist your pages rank increased in Google.

Listed below are greatest practices to your ATF design:

The web site header is the topmost a part of a webpage, usually duplicated throughout each web page of a website. It retains key components in the identical easy-to-reach place. Which is nice for UX.

An internet site header usually contains the model brand, which hyperlinks to the homepage. So customers can navigate to this key web page rapidly. 

The header usually contains the principle navigation menu, too—i.e., hyperlinks to the principle sections of your website. 

Many net designers save area by inserting the principle navigation in a hamburger menu. Particularly on cellular. However this implies it takes customers an additional click on to entry key pages.

Under are another components to contemplate together with in your web site header:

1. Banner: Use an internet site banner to promote distinctive promoting factors like free transport 
2. Signal-in/sign-uplinks: Encourage guests to create an account or register, which makes it simpler so that you can observe buyer habits and enhance engagement
3. Area/language flag: If in case you have a multi-regional or multilingual website, enable customers to modify between choices
4. Search operate: Embody a search bar or icon so customers can rapidly discover what they need
5. Buying cart icon: If in case you have an ecommerce website, make it as straightforward as attainable for customers to begin the checkout course of

Including further components to your web site header can enhance its performance. However a cluttered design takes up beneficial area above the fold and could be tough for customers to navigate. Designers should strike a stability right here.

Embody a Distinctive Heading

Each web page ought to have a novel, descriptive heading displayed above the fold. This permits customers to rapidly perceive the web page’s function. 

On the Mashable website, distinguished headlines inform guests precisely what to anticipate.

Together with a novel heading may help with above-the-fold web optimization.

When requested about ATF’s impression on rankings, Google’s John Mueller stated: “The vital half for us is admittedly that there’s some quantity of distinctive content material within the above-the-fold space. 

“If in case you have a banner on high and you’ve got a generic hero picture on high, that’s completely wonderful. However among the above-the-fold content material needs to be distinctive for that web page. And that may very well be one thing like a heading.”

To additional enhance your on-page web optimization, wrap the headline in H1 tags (the topmost HTML heading).

Like this:

Make sure the heading contains your major key phrase (the principle search question you need to rank for).

Tip: Use Semrush’s On Web page web optimization Checker to make sure your web page contains an optimized H1 tag. And to get different web optimization suggestions to your web page.

Get to the Level

Customers ought to have the ability to discover what they’re searching for rapidly and simply. So get to the purpose as quickly as attainable. Ideally above the fold.

When constructing a web page, ask your self the next questions:

• When somebody lands on this web page, what do they need to obtain? 
• How can I assist them obtain this purpose rapidly?

Take the lads’s denims class web page on Levi’s website. Customers are instantly greeted by varied product choices and photographs.

On the Prana web site, a lot of the product photographs and data sit beneath the web page fold. Customers need to scroll to get to the great half. Which means the web page is much less more likely to seize their consideration.

Additionally take into account the Semrush weblog template.

The estimated studying time and desk of contents set readers’ expectations upfront. And guests can begin studying the article with out scrolling previous pointless visible components.

Discover how the author will get straight to the purpose, too. That is an web optimization copywriting method often called BLUF (backside line up entrance).

Don’t waste area on fluffy introductions. Give attention to giving your guests what they got here for.

Tip: Need assistance writing copy that makes an impression from the beginning? Try Semrush’s content material writing providers.

Steadiness Adverts with Unique Content material

Should you monetize your web site with Google AdSense or one other promoting program, you would possibly need to show adverts above the fold. The place extra customers can see and click on on them.

That’s OK. However it’s vital to stability promoting with your personal content material. If guests are greeted by massive blocks of adverts—not what they got here for—they may depart your website for a competitor.

Plus, unbalanced adverts can hurt your above-the-fold web optimization. Particularly on cellular, the place they will take up a bigger portion of the display.

In 2012, Google launched a web page structure algorithm replace that demoted websites utilizing ATF adverts “to an extreme diploma.”

The announcement stated: “Should you click on on an internet site and the a part of the web site you see first both would not have quite a lot of seen content material above-the-fold or dedicates a big fraction of the location’s preliminary display actual property to adverts, that is not an excellent consumer expertise. Such websites might not rank as extremely going ahead.”

Google recommends following the Higher Adverts Requirements, which advise towards the next cellular net experiences (amongst others):

• Pop-up adverts
• Massive sticky adverts
• Advert density above 30%

For instance, ESPN locations cellular promoting above the fold to maximise clicks. However the advert is balanced by a considerable amount of unique content material.

Enhance Loading Speeds

Your above-the-fold content material ought to load rapidly. If customers are left ready too lengthy, they’re extra more likely to exit your web page. Plus, loading speeds impression web optimization rankings.

Crucial web page velocity metrics are often called Core Internet Vitals:

Largest Contentful Paint (LCP)	The time is takes for the biggest picture or textual content block to load
First Enter Delay (FID)	The time it takes for the web page to reply to a consumer’s interplay
Cumulative Format Shift (CLS)	A measurement of surprising actions that happen throughout loading

You’ll be able to verify your Core Internet Vitals in Google Search Console.

Or use Semrush’s Website Audit software. The Core Internet Vitals report reveals key metrics at a look. And offers detailed suggestions on learn how to enhance.

Under are some greatest practices for enhancing ATF load time:

• Construction your HTML: Construction your HTML so ATF content material masses first
• Minify HTML, CSS, and JavaScript: Streamline your code so it’s processed extra rapidly
• Inline crucial CSS: Crucial CSS is a way that extracts the CSS for ATF content material and locations it within the <head> part of the HTML. This can assist ATF content material load extra rapidly. 
• Optimize photographs: Resize, reformat, and compress picture recordsdata to make sure they’re as small as attainable—with out sacrificing high quality
• Preload assets: Use the rel=”preload” hyperlink attribute to load high fold components early within the rendering course of

Tip: Learn our information to be taught extra about web page velocity and learn how to enhance it.

Make It Look Good

Your ATF content material ought to operate correctly. However it must look good, too. If guests don’t like what they see, they’re extra more likely to depart.

Internet designs have simply 0.05 seconds to make an excellent first impression, in keeping with a Behaviour & Info Know-how examine.

Listed below are some high ideas for above-the-fold design:

• Be certain that textual content is simple to learn and has a transparent visible hierarchy
• Add distinctive visuals to interrupt up textual content and help understanding
• Insert related movies and animations to seize customers’ consideration
• Save area by utilizing recognizable icons—discover choices in Google’s Materials Symbols
• Use empty area (also referred to as unfavorable or white area) to forestall your structure from trying cluttered
• Make sure the design enhances your model identification
• Be certain that your website meets accessibility pointers

Tip: Need assistance from an skilled? Try Semrush’s trusted net design businesses.

Analyze Efficiency Metrics

Efficiency metrics let you know what’s working in your above-the-fold design. And what isn’t. 

Crucial metrics rely in your particular targets. However the ones beneath are price contemplating. They usually’re all accessible by Google Analytics.

Metric	Description	Why It Issues
Bounce fee	The proportion of tourists who depart the web page with out taking any motion	Stronger ATF content material can lower bounce charges
Exit fee	The proportion of tourists who depart your website from the present web page	Stronger ATF content material can lower exit charges
Scroll depth	The portion of the webpage your common customer views	Reveals whether or not your ATF content material encourages customers to scroll down the web page
Purpose conversion fee	The proportion of tourists who take the specified motion (e.g., make a purchase order)	Stronger ATF content material can enhance conversion charges
Natural visitors	The variety of unpaid visits referred by engines like google similar to Google	Good above-the-fold web optimization can enhance natural visitors

Tip: Learn our Google Analytics information for assist getting began.

To view key information in a single place, join your Google Analytics and Google Search Console accounts to Semrush’s Natural Visitors Insights software. 

Evaluate the next metrics (and plenty of extra) throughout your touchdown pages:

• Variety of key phrase rankings
• Bounce fee
• Purpose completion fee

Above the Fold Web site Examples

These above-the-fold examples present greatest practices in motion. Throughout varied sorts of web sites and pages.

Get inspiration to your ATF designs:

Lush

Above the fold on this Lush homepage, a hanging product picture grabs customers’ consideration. 

Enjoyable, daring, and colourful, the picture is on model. And it really works in tandem with the linked Mom’s Day heading to have interaction customers.

Lush overlays different helpful hyperlinks on the picture, moderately than utilizing a navigation bar. This helps preserve give attention to the Mom’s Day marketing campaign. And makes the web site header clear and straightforward to make use of. As an alternative, the search bar (full with recommendations) ensures customers can discover what they want.

On the fitting facet of the web page, round indicators present there’s extra to be found beneath the fold.

Kombu

Individuals touchdown on this Kombu product web page have most likely tried the drink earlier than. And are prepared to position an order. The ATF design is centered on that easy act.

The “add to cart” button seems prominently towards a high-contrast background. And the minimalistic structure ensures no distractions.

That stated, there’s a “Scroll” immediate within the lower-left nook. Letting guests know they will get extra data if they need it.

Tip: See our devoted information for extra product web page examples and greatest practices.

ESPN

On ESPN’s desktop website, promoting takes up a comparatively excessive proportion of the web page. However it complies with the Higher Adverts Requirements for desktop experiences by avoiding pop-up adverts, auto-play video adverts with sound, countdown adverts, and enormous sticky adverts.

One standout factor of this ATF design is the “upcoming occasions” bar. It seems on the high of most pages and robotically updates to the present sport in view.

The occasions bar delivers beneficial data upfront, serving to guarantee a constructive consumer expertise. It additionally brings collectively helpful hyperlinks that encourage guests to stay on-site. 

Additionally notice the auto-playing video that begins above the fold. This helps appeal to customers’ consideration and encourage them to scroll down. (The sound is muted by default, to make sure compliance with Higher Adverts Requirements.)

Smile Direct Membership

It’s clear that pricing is vital to Smile Direct Membership’s prospects. The ATF banner, headline, and outline sort out pricing objections upfront.

The accompanying picture showcases the product (clear aligners) and its advantages (straight enamel). Whereas the award brand and Trustpilot evaluations construct belief.

Discover how the CTA button “AM I A CANDIDATE?” seems twice above the fold. It’s clear to the consumer what they need to do subsequent. They usually can begin straight away.

Guests who need extra data can discover key hyperlinks within the navigation bar. Or open the reside chat within the lower-right nook.

Nordstrom

Nordstrom’s product class pages have a number of navigational options above the fold.

Subcategory tabs, similar to “Over the Knee” and “Climbing,” give a right away impression of an enormous and numerous product vary. Reassuring customers they’ll discover what they’re searching for.

On the identical time, product filtering and sorting choices stop customers from feeling overwhelmed. They know the product vary received’t be too tough or time-consuming to navigate.

So, they’re extra more likely to stick round. And discover the proper product.

Airbnb

The Airbnb homepage matches important navigation components above the fold, encouraging vacationers to begin their search. Icons make it straightforward for customers to search out and visualize lodging varieties.

In any other case, the structure leaves as a lot area as attainable for eye-catching listings from the “Wonderful views” class. 

Every lodging preview comprises particulars that matter most to vacationers. And entice click-through.

• Photographs
• Common star score
• Location
• Dates
• Host sort
• Value

While you search a location, Airbnb ranks outcomes based mostly on high quality, reputation, and value. Serving to make sure that essentially the most partaking listings seem above the fold.

And a map seems. Whether or not you’re on desktop, cellular, or the app. As a result of Airbnb is aware of areas are essential to travel-planning customers. 

Make Enhancements with Break up Testing

Should you replace your ATF content material, it’s vital to check key metrics earlier than and after. So you possibly can guarantee your modifications have a constructive impact.

Higher but, use break up testing (or A/B testing). This lets you examine two above-the-fold designs and see which performs greatest, in keeping with actual consumer information.

Right here’s how:

1. Create a brand new model of your ATF content material (often called the variant)
2. Show the outdated model (often called the management) to half of customers and the variant to the opposite half
3. Analyze key metrics over a set time interval
4. Implement the model that carried out greatest

The SplitSignal app makes it straightforward to run A/B exams and measure the impression on natural visitors. You don’t want net growth or information science experience.