In this article · 8 sections
- The 3 questions the first screen must answer
- What to include
- 1. A clear headline
- 2. A supporting line
- 3. One primary call to action
- 4. A quick trust signal
- 5. A relevant image
- What to remove
- Design for mobile first
- Speed is part of the first impression
- Examples by business type
- Frequently Asked Questions
- Do people still scroll?
- Should I put my phone number in the header?
- Are sliders bad for SEO?
- How do I know if my hero section works?
- Want a homepage that converts?
"Above the fold" is an old newspaper term for the top half of the front page — the part people see on the shelf. On a website, it means everything visible before the visitor scrolls. On a phone, that's a small area, and it carries a huge responsibility. If it doesn't immediately tell visitors they're in the right place, many will press back and choose the next result.
Here's what that first screen must do, what to include, and the common design mistakes that waste it.
The 3 questions the first screen must answer
- What do you offer?
- Is it for me? (my location, my type of need, my budget)
- What do I do next?
If a stranger can't answer all three within about five seconds, the hero section needs work.
What to include
1. A clear headline
Say what you do in plain words, not a slogan.
- Weak: "Driving Your Dreams Forward"
- Strong: "24×7 Taxi Service in Ludhiana — One Way, Airport and Outstation"
2. A supporting line
One sentence with your key difference: "Fixed fares, clean cars, verified drivers. Serving Punjab since 2015."
3. One primary call to action
Choose the single most valuable action — "Call Now", "Get a Free Quote", "Book on WhatsApp" — and make it the most visible button. A secondary action can sit next to it in a lighter style. Our guide to call-to-action buttons covers wording and placement.
4. A quick trust signal
Something visitors can verify: Google rating with review count, years in business, number of customers, a recognisable client logo, or a certification. Only use real numbers. More ideas in website trust signals.
5. A relevant image
Your actual product, team, vehicles or work — not a generic stock handshake.
What to remove
| Common element | Problem | Better option |
|---|---|---|
| Auto-rotating sliders | Visitors rarely see slides 2–5; they slow the page and distract | One strong static hero |
| Huge logo and tall menu | Pushes the message below the screen on mobile | Compact header |
| "Welcome to our website" | Wastes the most valuable words | Say what you do |
| Pop-up on arrival | Blocks content; Google discourages intrusive interstitials on mobile | Delayed or exit-intent prompts, or none |
| Heavy video background | Slow on mobile data; text hard to read | A compressed image |
Design for mobile first
Most visitors to local business sites arrive on phones. On a 390-pixel-wide screen, the first view might fit only a header, a headline, two lines of text and a button. Test your homepage on a real phone:
- Is the headline readable without zooming?
- Is the call or WhatsApp button visible without scrolling?
- Does anything jump around while loading? (This hurts Core Web Vitals.)
A sticky bottom bar with Call and WhatsApp buttons works well for service businesses on mobile.
Speed is part of the first impression
If the hero image takes four seconds to appear, visitors see a blank screen. Compress the hero image, serve it in WebP, give it width and height attributes, and don't lazy-load it — it's the most important image on the page. See image optimisation.
Examples by business type
- Clinic: "Dental Clinic in Mohali — Painless Treatment, Evening Appointments" + "Book Appointment" + Google rating.
- Manufacturer: "CNC Precision Components Manufacturer, Ludhiana — ISO Certified" + "Request a Quote" + client industries.
- Hotel: "Rooms 400 m from Golden Temple — Family Rooms with Parking" + "Check Availability on WhatsApp" + real room photo.
Frequently Asked Questions
Do people still scroll?
Yes, especially on mobile. But they only scroll if the first screen convinces them the page is relevant.
Should I put my phone number in the header?
For service businesses, yes — as a click-to-call link that's easy to tap on mobile.
Are sliders bad for SEO?
Not directly, but they often slow the page and hide content, which hurts user experience and conversions.
How do I know if my hero section works?
Check bounce and engagement rates in GA4, watch session recordings with a tool like Microsoft Clarity, or ask a few people unfamiliar with your business to describe what you do after five seconds.
Want a homepage that converts?
Joboo Web designs mobile-first homepages built around your main action. See website design, our landing page tips, or contact us.