Diseño web B2B
What Should a B2B Home Page Show in the First Five Seconds?
Equipo Artisma
Agencia de Marketing B2B
The company invested in a booth at the most important trade show in its industry. For three days, the salespeople handed out cards with a QR code that led to the website's home page. The following week, the director reviews the analytics: hundreds of visits from phones on the trade show dates, a time on page of just a few seconds and not a single form submitted. When he opens the website on his own phone, he understands what happened: the first screen shows a background video that is slow to load, the slogan "Committed to Excellence" and a cookie notice covering the bottom half. Nothing indicates what the company manufactures or how to request a quote, and the visitors who scanned the code with genuine interest left before finding out.
In the first five seconds, your home page should make clear what you do, for whom and what the next step is, with a first screen that loads fast and reads well on a phone.
The first screen decides whether the visitor stays on your website or goes back to the search results
The home page welcomes visitors who arrive by different routes: the prospect who typed your company's name after a meeting, the one who found you on Google, the one who scanned a code at a trade show or the one who opened a link a colleague forwarded. They all make the same decision in the first few seconds: stay or leave. And they make it based on what fits on the first screen, the portion visible before scrolling down.
Earlier in this series we reviewed which type of website fits your business, what the industrial buyer needs and which sections complete a B2B website. This article focuses on a single point in the journey, the shortest one and the one that carries the most weight: what the visitor sees upon landing on your home page.
Scanning before reading: how the visitor moves through the first screen
On a first visit, the eye jumps to the headline, the largest visual element and the buttons, and with those three pieces of information the visitor forms an idea of your company. If that idea matches what they were looking for, they stay; if they cannot form it, they go back. That is why every element on the first screen competes for those seconds, and any element that offers no useful answer takes time away from the ones that do.
The three answers the first screen must give before the visitor decides to leave
At Artisma we sum up the job of the first screen in three questions the visitor should be able to answer in the first five seconds: who you are, what you do and what the next step is.
What you do, in your buyer's words
The headline is the element with the most weight on the page. It should state what you offer in terms your buyer recognizes, with the specific product or service and, if it fits, the result they get. "Comprehensive quality solutions" could belong to any company; "We manufacture custom plastic packaging for the food industry" tells the visitor in one line whether they are in the right place. Brand slogans have their place further down, once the visitor already knows who they are dealing with.
Who you do it for: the line that filters in the right visitor
Below the headline, a short subheadline specifies whom you serve: industries, company size, region or type of project. That line serves two purposes. It confirms to the right buyer that the website is speaking to them, and it saves the visitor who is not a fit a call that would not have been worthwhile for your team either. A nearby trust element, such as a few customer logos, your track record or a relevant certification, reinforces the answer without taking up much space.
What the next step is: one primary call to action and one secondary
The first screen needs a visible primary button that leads to the action that best serves your sale: request a quote, schedule a call or send a WhatsApp message. A second button, with less visual weight, serves the visitor who is not ready yet, for example to view products or see case studies. More than two buttons on the same screen scatter attention, and generic text such as "Learn more" leaves the visitor unsure of what they will get by clicking.
The elements that steal those five seconds
Many home pages fail through excess. These are the elements that most often take up the first screen without answering any of the three questions.
Carousels, background videos and abstract slogans
Carousels split the first screen among several messages that rotate on their own, and the visitor rarely waits to see the second one. Background videos are heavy, slow to load on a mobile connection and usually covered by text that is hard to read. Abstract slogans, such as "Innovation that drives your future", take the headline's place without saying what you sell. All three are aesthetic choices paid for with clarity.
Largest Contentful Paint: how long it takes for the most important element to appear
The five seconds start counting from the click, and if the first screen is slow to appear, the visitor spends their patience staring at a blank screen. Google measures this moment with one of its user experience metrics, Largest Contentful Paint, which records how long it takes for the largest element on the screen to display, almost always the main image or the headline, and considers a result of 2.5 seconds or less to be good. A main image in WebP format at the right size, instead of a photo weighing several megabytes, is usually the adjustment that improves that figure the most.
Cookie notices, pop-ups and chat windows that cover the content
A cookie notice that takes up half the screen, a pop-up asking for an email address before the visitor knows what you do or a chat window that opens on its own over the headline blocks exactly what the visitor came to see. The cookie notice can be a discreet bar, the invitation to subscribe can wait until the visitor shows interest and the virtual assistant can appear as a button the visitor opens whenever they want.
On a phone, the first screen is smaller and is often the first one your buyer sees
Many B2B buyers look at a supplier's website for the first time on their phone: between meetings, in transit or at the trade show itself. Less fits on a vertical screen: a short headline, one line of subheadline and a button. If the design was conceived only for desktop, on a phone the headline breaks into six lines, the image pushes the button out of view and the three answers end up below, where many visitors never get to.
Vertical hierarchy: what to keep and what to cut in the mobile version
The mobile version of the first screen keeps the headline, the subheadline and the primary button, in that order, and leaves everything else for later. It helps to write a headline that works in a few lines, use an image that supports the text without pushing it down and keep the button within thumb's reach. The test is simple: open your website on a phone and check whether the three answers fit on the screen without scrolling.
How to check whether your home page passes the five-second test
The first screen can be evaluated with simple methods your team can apply in an afternoon:
Show the page for five seconds to someone outside your company, close it and ask them to say what you sell, for whom and what they would do next.
Check the home page's engagement rate and average engagement time in Google Analytics, separately for mobile and desktop.
Use a heat map to see how far visitors scroll and which elements they click.
Measure your home page's speed in PageSpeed Insights, paying special attention to the mobile result.
Compare clicks on the primary button with visits to the home page to find out how many visitors move forward.
If the person in the first test cannot answer the three questions, the problem lies in the message. If they answer them and the data still shows people leaving, it is worth reviewing speed, visual obstacles and the mobile version.
At Artisma we work on the first screen with what we call intentional copywriting: every word has a purpose, and in the first five seconds the visitor understands who you are, what you do and what the next step is. Calls to action lead to WhatsApp, email or an appointment, and visitor analytics stay active from launch to measure what happens on that first screen. On our website you can analyze your web page in less than 30 seconds and see how its mobile speed and contact channels score.
Frequently Asked Questions
Should I put my products on the first screen of the home page?
If your company has one main line or a few lines, mentioning them in the headline or the subheadline helps the visitor get their bearings. If you have many, name the general category on the first screen and present the lines in the next block, with a direct link to each one.
Does a video on the home page help or get in the way?
It helps when it shows something a photo cannot convey, such as a process or a machine in operation, and plays when the visitor chooses. As an autoplay background on the first screen it usually gets in the way, because it slows down loading and competes with the headline. A good alternative is a still image with a button to watch the video.
How often should I review the first screen?
Every time your main offering changes, you launch a campaign that sends traffic to the home page or the data shows engagement dropping. Even without changes, a quarterly review of the analytics and a five-second test with someone new will tell you whether the message is still clear.
If you send traffic to your home page from a trade show, a campaign or your salespeople's email signatures and do not know what visitors see in their first five seconds, it is worth reviewing before your next investment. Analyze your website at https://www.artismamkt.com and we will show you what your first screen answers today and what we would change so the right visitor takes the next step.