When you think of folded reading material, the first thing that invariably comes to your mind is a newspaper. Newspapers, and print journalism, in general, follow the key mantra of placing the most important content in a way it catches the reader’s eyes.
This content can be anything, from a major headline, a call-to-action (CTA), to an important advertisement — basically, any content that demands to be seen immediately.
Consequently, the top half of the front page was designated for the aforementioned important content. That way, even if the paper was folded in half, just a cursory glance would give the reader an idea of the lead content.
From there, came the term ‘above-the-fold’ – which, if we’ll be honest, is pretty dated as of 2020.
The term is dated, not the idea.
Back then, above the fold meant literally above the fold. Today, in the context of websites, the fold is what your users see first when they land on your homepage.
TIll the late 90s, screen resolutions and sizes varied little. As a result, most websites operated within the same display range, making “the fold” a rather concrete location.
That was then; this is now – with web designing becoming the norm and web development agencies coming to the rescue of businesses.
With an average U.S. household having around 11 connected devices – including desktops, laptops, tablets, phones, and more – it is evident that screen sizes and resolutions are incredibly varied. As a result, the portion of a website that is instantly visible to one user may vary from screens to screens. It is, therefore, much harder to define a specific area or size to what was once known as “above the fold”.
However, the importance of above-the-fold, or first fold, or landing fold, or whatever phrasing you’d use, cannot be overstated. Especially now, when your average customer’s attention span is not more than eight seconds, it is all the more crucial to scrutinize your website’s first impression.
Ideally, a smart practice would be to place key information and calls to action in easy-to-view areas “above the fold”. These include core branding elements, primary site navigation, and fresh, enticing content that drives audience engagement:
- Unique selling proposition: this could be one line on how you’ll add value to your customers.
- Brief explainer copy: keeping things short, you can give a gist on why people should scroll. This can be followed by a CTA.
- Brand logo and navigation: this is generally taken care of by the website menu. The focus here should be on keeping the navigation intuitive and logo visible.
- CTAs: these can be used to direct your users to different parts of the website, like contact pages, specific service pages, specific sections on the page, etc. The placement of CTAs is crucial, and it should ideally follow either the USP tagline or the explainer copy – so that the user has an incentive for reading through the text you wrote.
Okay, pretty routine stuff so far.
The challenge (debate?) lies in implementing the above-listed elements on the first fold. The first question to tackle, then, is – what background to use? This question is common across platforms – whether you’re performing WordPress development, HubSpot development, or simple HTML coding.
While the website menu can take care of navigation and logo, the remaining content will have to go to below the menu; ideally over a suitable, relevant background.
In web designing, there are essentially three options you have for the said background:
- Video
- Image carousel
- Anything else except the above two
Let’s break down each of them one by one.
Video background
Before we begin outright dismissing video backgrounds (joking, maybe), let’s agree that videos tend to build an element of curiosity and suspense in the user. The dynamism they offer makes the visitor want to stay back and know more. Well, that’s at least what’s intended.
However,
- Video backgrounds are infamous for increasing the loading time. You don’t need a test to prove this; it’s common sense. This is a bad SEO practice and leads to poor SEO-responsive websites.
- Videos tend to distract your user from the primary message that you want to convey. The fluorescent colour button will keep screaming to be noticed, while your user’s attention will be somewhere else.
- When implementing a video background, you can either opt for autoplay, or for the user to click for the video to play. IMHO, both the options are ridiculous. The autoplay is outta-play, and the button is ideally a call-to-action for your background. Meta? Yes. Useful? Probably not.
They might work on specific landing pages in extremely specific niches, but most of the time, you’ll just hurt conversion.
Accessibility is another problem area for video backgrounds. Here are a few accessibility issues that are bound to create a negative UX:
- Poor performance on slower internet connections leading to poor SEO-responsive websites.
- Difficult to read text overlays.
- Excessive visual or audio variations/movements in the video, causing distraction.
- Not suitable for mobile devices at any cost.
Despite these evident drawbacks, there are many websites that integrate background videos extremely well because they keep the video content relevant to their brand and the purpose of the website.
For example, the background video on the website for Project Skin, a dermatology clinic, is spot on. It shows scenes of the clinic featuring an open and comfortable reception, friendly staff, and a mixture of services to establish their image as a luxury skin health clinic. The video demonstrates more than images alone could, giving potential clients a preliminary idea of what their experience would be like walking into the clinic.
So, if one paragraph of positives was enough to brainwash you from all the previous dismissals, here is a checklist that you should most definitely follow before implementing a video background:
- Think again. Do you really want to do this? If yes, move to the next point.
- Keep the videos short, not more than 20 seconds long.
- Don’t go in an infinite loop with the video. It looks bad and can drastically reduce speed.
- Make sure the video is optimized and as reduced in size as possible.
- Mute it by default and let people decide whether they want to sound or not.
- Try to avoid videos with lots of movement to make sure people aren’t too distracted.
- Use fade in and out transition effects for videos so that your visitors aren’t startled.
- Include a pause button so people can pause when they want to explore the rest of the website.
- Keep the text readable by using overlays.
- Use images as placeholders for devices that don’t support video playback.
“But..but…what about the dynamism that videos offer? If videos are to be dismissed, how will dynamism be achieved?“
“Hold on. Moving on.”
Image carousel
You’ve most definitely come across dozens, if not more, image carousels or sliders on websites. These are also known as rotating offers and are either static (you’ll have to click to reach the next slide – WOW), or dynamic (the information in front of you changes while you’re processing it – WOW),
Instinctively, you might have liked the concept of these sliders. After all, you get to display so much information. How bad can it be?
Short answer – very.
Slightly long answer –
A staggeringly low 1% of site visitors click on static image carousels. Additionally, 84% of those clicks are on the first slide, meaning all the remaining slides combined receive a sum total of 16% of the clicks.
The numbers aren’t much better for fancy, dynamic carousels, either. While they do receive more attention, the first slide dominates and receives 40% of all clicks. The second and third slides receive 18% and 11% fewer clicks.
If using carousels still seems like a good idea to you, it shouldn’t.
Carousels struggle to maintain a decent click-through-rate, and the lion’s share of clicks is gobbled up by just the first slide. Simply said, carousels are a waste for your incredibly valuable above-the-fold real estate.
Why, though? They do seem engaging, interactive, informative, and other adjectives that are generally thrown around. So what’s the exact problem?
Here:
- Banner blindness: When the images of your carousel look too much like a banner or advertisement (which they mostly do), your visitors ignore them and move on.
- Divided user attention: Images on sliders offer a number of different messages in the span of a few seconds. Your user has hardly processed ONE thing when whoosh – the image changes, and they have to refocus their attention. Refocusing isn’t that easy.
- The human eye: Humans are wired to react to sudden movement, and this movement is called a saccade. The speed of movement during each saccade can’t be controlled, and the eyes move as fast as they are able – completely losing focus. In prehistoric times, this might have been a good predatory skill, but today, you’re the prey. Your visitors will be too distracted by the image sliders to notice anything else.
- Snatching control: Visitors like to be in control when they arrive on your website. When you put a slider on your homepage, you take control out of your user’s hands and give it to the slider.
“But..but…image sliders allow us to show multiple USPs. What if our organization has many arms, and we want to show as much detail as possible on the first view?“
“Sure, showing as much information as possible is good if you’re trying to help your friend clear his examination. For your visitors, on the other hand, it might be overkill. Having said that, there are still subtler ways for formatting content so that the user sees more. Likewise, there are subtler ways of adding dynamism (except just videos). We’re inching towards them.”
ANYTHING, anything except the other two
Here’s the takeaway so far:
- You need dynamism but not at the cost of performance.
- You want to display relevant information, not overflood your visitor.
- You want to have as little distractions as possible so that your user focuses on your USP and the CTA.
- You want the user to be in control of your website, and not the other way round.
- The supposed problem being solved by the carousel was that of wanting to display more than one piece of information on the first fold.
With that, let’s explore the third option – which is basically everything except the first two. You’ll revisit the above-listed points in context to the third option, as you read below.
Before we go too deep into this, a little clarification – the third option is essentially using static images with added dynamism (if required), using JavaScript (JS) libraries.
The static images you can use for the above-the-fold can either stock images, illustrations, self-clicked images, or maybe just a colour gradient.
Let’s walk through each variation with examples of websites created by the same good folks who’re writing this blog:
Neat and minimal, this website uses a static background and particle.JS library for animations. The copy is such that it first introduces the reader with the company’s goals, then briefly explains it, then gives a call-to-action to the contact page.
Here, we’ve used gradients made from company colours. While the fold is completely static, the colours and shades used to give it a premium feel, especially since they are brand colours. The copy, here, is pretty simple – a tagline of what the company is all about, and a CTA. Note that here the CTA doesn’t lead to the contact page, but to a section that has more information.
Our very own! While developing this website, we were struggling with how to display more information on the first fold without overdoing it. Carousels were clearly not an option; neither were videos. So, we decided to step out-of-the-box. As you can see, the above-the-fold content here is structured in two columns. The left one has the tagline (which is dynamic, the text keeps changing), and the right one has key services.
If you’re using a carousel because you need to display more information, maybe you can try this layout, or experiment more along the same lines.
Here, the background image goes with the web copy (with a pinch of salt), and that makes this arrangement all the more attractive. Dynamism is achieved by animating the text phrases to auto-change, and a CTA is provided if the user wants more information.
What we’ve discussed above are just a few ways of playing around with above-the-fold content in a way that makes it neither entirely static nor less informative.
Quickly summarising the third option:
Background
For background, you have broadly four options:
- Images: These can be stock or custom images. You should keep in mind to upload the compressed version of images for improved website performance.
- Gradients: These can be either created as images or as CSS code snippets. Keep in mind that gradients are slopes (you see what we did there?), and with so many colours available, you really need to have a good eye to know which gradient is best for your cause. That said, gradients are an amazing tool to instantly relate your audience to your brand colours.
- Illustrations: If you’re reaching out to a younger target audience, you might want to go for an illustration-based approach. Like images, these can either be stock or created in-house. All in all, they should be relevant to your cause and to the copy.
- Solid colour: This is a bit daring but does well if you’re looking to establish a premium. Clubbing this with JS libraries to add hover animation effects creates a wonderful canvas for you to write your copy on.
Dynamism
With the background in place, now is the time to make it stand out by adding some dynamic elements. This isn’t a necessary second step; you can avoid it, but only if you absolutely don’t need it. Here’s an inexhaustive list of some of the most used JS libraries for animation. There’s a lot, lot more available, don’t shy away from researching:
- typed.JS: for creating a typewriter-like text-changing effect.
- particles.JS: for creating particle effects on the canvas. The particles change shape/position on hovering the mouse.
- bounce.JS: for creating elements that bounce on mouse hover/click.
- three.JS: for creating 3D models and animations.
Copy
With the canvas ready, you can now write your copy and display it in a way that’ll catch your reader’s attention. Ideally, an above-the-fold copy should have:
- Tagline / Mission statement: explaining what you’re all about.
- Brief explainer copy: a brief description of your company/services.
- CTA: a call-to-action for the user – this can either take them to the contact page, or any other section on the website.
If you mix and match the above-listed items, you’ll have a much better looking, performing, and engaging above-the-fold-content.
So, for those wanting to offer dynamism, video is not the only way to go. You can use one or a few JS libraries, and come up with effects that’ll be better than any video while being far less distracting. You can align the animations and effects to highlight your USP or CTA. or to bring your elements to life.
In conclusion
That’s pretty much all we had to say about above-the-fold content. We’d like to hear your thoughts on this – drop us a comment and let’s discuss!
