Your first screen on a phone: what fits and what doesn't

On a phone, the first screen of your website is a narrow, short window, and everything that sat side by side on a laptop is now stacked on top of each other. Many visitors see your site on a phone first, so this small window is where their first impression is formed.

The part of the page that's visible without scrolling is called above the fold. On a phone it's much smaller than most people expect when they design on a laptop.

What happens to your layout on a phone

A typical homepage on a laptop shows a headline and a button on the left with an image on the right. On a phone, those three end up stacked:

1. The headline, often broken over several lines
2. The image, which can take up most of the screen
3. The button, which ends up below the first screen

The result: a visitor sees a headline and part of a photo, and has to scroll to find out what to do. Add a cookie banner at the bottom and a menu bar at the top, and there's very little left.

What should fit on the first screen

On a phone, aim for these on the first screen, in this order:

• The headline, short enough to fit on two or three lines
• One line of explanation, if it fits
• The main button, visible without scrolling
• A trust signal, like a review score, if there's room

A large hero image is the first thing to reconsider. On a phone it often pushes everything important down. Making it smaller, moving it below the button or leaving it out on small screens are all reasonable choices.

Common problems on small screens

• A cookie banner covering half the screen. Make it compact, or put it at the bottom with small buttons.
• A menu bar that takes up too much height, especially with a large logo.
• Text that's too small, or too large, so the headline takes up the whole screen.
• Buttons that are too small to tap or too close together.
• Pop-ups that are hard to close on a phone.

Check your own mobile first screen

Resizing your browser window gives a rough idea, but not exactly what a phone shows. The free above the fold checker loads your page on a 390 × 844 phone screen next to a laptop screen, exactly as StayOrBounce reviewers see it. Reviewers judge both, so a weak phone version shows up in your scores.