Best Practices for Your Website (+ Examples)

Above-the-fold (ATF) content material is necessary for internet design as a result of it’s the place customers kind their first impressions. And the place they anticipate to see sure web site options.

Plus, ATF content material can have an effect on SEO (search engine optimisation).

What Does ‘Above the Fold’ Imply?

Above the fold refers back to the seen a part of a webpage earlier than the person 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 under the fold.

Because the illustration under exhibits, the person’s machine impacts the exact level of the web page fold. Different elements, corresponding to browser settings, additionally have an effect on the scale and form of the viewing window, often known as the viewport.

When designing above the fold, concentrate on dimensions that work for the common person. Most screens and gadgets will show the highest 600 pixels of a web page.

Designers ought to implement responsive layout, which routinely adapts to totally different viewports.

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

Above the Fold Finest Practices

Above-fold content material is essential in capturing guests’ consideration. We’ve rounded up greatest practices that may make it easier to ship an incredible person expertise (UX). And in the end improve income.

Plus, we’ve included above-the-fold search engine optimisation methods that may assist your pages rank greater in Google.

Listed here are greatest practices on your ATF design:

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

A web site header usually consists of the model brand, which hyperlinks to the homepage. So customers can navigate to this key web page rapidly. 

The header usually consists of the primary navigation menu, too—i.e., hyperlinks to the primary sections of your web site. 

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

Beneath are another parts 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 check in, which makes it simpler so that you can monitor buyer habits and improve engagement
3. Area/language flag: In case you have a multi-regional or multilingual web site, enable customers to modify between choices
4. Search perform: Embody a search bar or icon so customers can rapidly discover what they need
5. Buying cart icon: In case you have an ecommerce web site, make it as straightforward as attainable for consumers to begin the checkout course of

Including further parts to your web site header can improve its performance. However a cluttered design takes up helpful area above the fold and might be troublesome for customers to navigate. Designers should strike a steadiness right here.

Embody a Distinctive Heading

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

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

Together with a novel heading can even help with above-the-fold search engine optimisation.

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

“In case you have a banner on prime and you’ve got a generic hero picture on prime, that’s completely fantastic. However among the above-the-fold content material must be distinctive for that web page. And that might be one thing like a heading.”

To additional improve your on-page SEO, wrap the headline in H1 tags (the topmost HTML heading).

Like this:

Make sure the heading consists of your major key phrase (the primary search question you wish to rank for).

Tip: Use Semrush’s On Page SEO Checker to make sure your web page consists of an optimized H1 tag. And to get different search engine optimisation suggestions on your web page.

Get to the Level

Customers ought to have the ability to discover what they’re on the lookout 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 wish to obtain? 
• How can I assist them obtain this purpose rapidly?

Take the lads’s denims class web page on Levi’s web site. Buyers are instantly greeted by varied product choices and pictures.

On the Prana web site, a lot of the product pictures and knowledge sit under the web page fold. Customers need to scroll to get to the nice half. That 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 parts.

Discover how the author will get straight to the purpose, too. That is an SEO copywriting technique often known as BLUF (backside line up entrance).

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

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

Steadiness Adverts with Unique Content material

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

That’s OK. Nevertheless it’s necessary to steadiness promoting with your individual content material. If guests are greeted by massive blocks of adverts—not what they got here for—they may depart your web site for a competitor.

Plus, unbalanced adverts can hurt your above-the-fold search engine optimisation. Particularly on cell, the place they’ll take up a bigger portion of the display.

In 2012, Google launched a page layout algorithm update 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 does not have numerous seen content material above-the-fold or dedicates a big fraction of the positioning’s preliminary display actual property to adverts, that is not an excellent person expertise. Such websites could not rank as extremely going ahead.”

Google recommends following the Better Ads Standards, which advise towards the next cell internet experiences (amongst others):

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

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

Improve 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 search engine optimisation rankings.

An important web page pace metrics are often known as Core Web Vitals:

You possibly can verify your Core Internet Vitals in Google Search Console.

Or use Semrush’s Site Audit instrument. The Core Internet Vitals report exhibits key metrics at a look. And offers detailed suggestions on how you can enhance.

Beneath are some greatest practices for bettering 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 important CSS: Critical CSS is a method that extracts the CSS for ATF content material and locations it within the <head> part of the HTML. This may help ATF content material load extra rapidly. 
• Optimize pictures: Resize, reformat, and compress picture information to make sure they’re as small as attainable—with out sacrificing high quality
• Preload sources: Use the rel=”preload” hyperlink attribute to load prime fold parts early within the rendering course of

Tip: Learn our information to learn more about page speed and how you can enhance it.

Make It Look Good

Your ATF content material ought to perform correctly. Nevertheless 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 first impression, in keeping with a Behaviour & Information Technology study.

Listed here are some prime suggestions for above-the-fold design:

• Make certain textual content is simple to learn and has a transparent visible hierarchy
• Add distinctive visuals to interrupt up textual content and support understanding
• Insert related movies and animations to seize customers’ consideration
• Save area by utilizing recognizable icons—discover choices in Google’s Material Symbols
• Use empty area (also called unfavourable or white area) to forestall your format from trying cluttered
• Make sure the design enhances your brand identity
• Make certain your web site meets accessibility guidelines

Tip: Need assistance from an skilled? Try Semrush’s trusted web design agencies.

Analyze Efficiency Metrics

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

An important metrics rely in your particular targets. However the ones under are value contemplating. They usually’re all accessible by means of Google Analytics.

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

To view key information in a single place, join your Google Analytics and Google Search Console accounts to Semrush’s Organic Traffic Insights instrument. 

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

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

Above the Fold Web site Examples

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

Get inspiration on 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 consumers.

Lush overlays different helpful hyperlinks on the picture, slightly than utilizing a navigation bar. This helps hold concentrate on 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 ideas) ensures consumers can discover what they want.

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

Kombu

Individuals touchdown on this Kombu product web page have in all probability 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 format ensures no distractions.

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

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

ESPN

On ESPN’s desktop web site, promoting takes up a comparatively excessive proportion of the web page. Nevertheless 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 ingredient of this ATF design is the “upcoming occasions” bar. It seems on the prime of most pages and routinely updates to the present sport in view.

The occasions bar delivers helpful info upfront, serving to guarantee a optimistic person expertise. It additionally brings collectively helpful hyperlinks that encourage guests to stay on-site. 

Additionally word the auto-playing video that begins above the fold. This helps entice 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 necessary to Smile Direct Membership’s clients. The ATF banner, headline, and outline deal with pricing objections upfront.

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

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

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

Nordstrom

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

Subcategory tabs, corresponding to “Over the Knee” and “Mountain climbing,” give a right away impression of an unlimited and various product vary. Reassuring consumers they’ll discover what they’re on the lookout for.

On the identical time, product filtering and sorting choices forestall consumers from feeling overwhelmed. They know the product vary gained’t be too troublesome or time-consuming to navigate.

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

Airbnb

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

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

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

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

While you search a location, Airbnb ranks results based mostly on high quality, recognition, and worth. Serving to make sure that probably the most partaking listings seem above the fold.

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

Make Enhancements with Cut up Testing

Should you replace your ATF content material, it’s necessary to check key metrics earlier than and after. So you may guarantee your modifications have a optimistic impact.

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

Right here’s how:

1. Create a brand new model of your ATF content material (often known as the variant)
2. Show the outdated model (often known as 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 assessments and measure the impression on natural visitors. You don’t want internet improvement or information science experience.