Design for the phone first, then make it beautiful on the desktop

Pull up the visitor reports for any of our local clients and the pattern holds: most of the people who find the site are holding a phone, and many of them are standing somewhere with a problem in front of them.

Who is actually looking at the page

Picture the person who finds a landscaper's site. The sprinkler is spraying the driveway, they are standing in the yard, and they searched for a company on their phone with wet hands. They are not going to scroll through a story about the company's values. They want to know, within a second or two, whether this company fixes sprinklers in their town and how to reach them.

That person is the reason we design the phone screen first. The desktop visitor exists, and we take care of them, but they are usually calmer, further from a decision, and more willing to read.

What fits on the first screen

A phone screen is small and the top of it is the most valuable space on the whole site. We treat it like a shop window. Before any scrolling, the visitor should be able to see:

• What the business does, in plain words, not a slogan.
• Where it works, by city or county.
• One piece of proof: a real photo of real work, or a line about how long the company has been doing this.
• One button that does the obvious thing, usually call, text, or request a quote.

That is the whole list. Logos of partners, a photo slider, a video that plays by itself, the awards: all of that moves down the page or off it. If the owner wants a big hero image, it earns its place only if it shows the work and leaves room for the words.

Thumbs, not cursors

On a desktop, a cursor can hit a tiny link. On a phone, a thumb hits an area the size of a thumb. So every button and link on a phone layout is tall enough and far enough from its neighbors that a person cannot tap the wrong one. The phone number is a real tap to call link, not text to copy. The menu opens with one tap and shows a short list, not every page on the site.

We also keep the primary action within reach of the thumb as the visitor scrolls. On most of our client sites, a slim bar with call and text buttons stays at the bottom of the phone screen the whole way down. A visitor who decides on the fourth screen should not have to scroll back to the top.

One obvious action

A page with five equal buttons is a page with no button. We pick one action for each page and make it visually louder than everything else. On a service page for a painting company that is request an estimate. On a careers page it is apply. On a retirement advisor's site it is book a call. Secondary actions exist, but they are quieter and lower.

The website assistant follows the same rule. On the phone, it sits out of the way until tapped, and when it opens, its first questions are answered by tapping, not typing. Typing a paragraph on a phone is work and most people will not do it.

Why desktop is the second pass

Once the phone layout works, the desktop version is mostly a matter of giving the same content more room. Photos get bigger. Two columns appear where there was one. The project gallery for a custom home builder shows a grid instead of a stack. Nothing new is added that the phone visitor does not get, and nothing important is hidden from the phone visitor that the desktop visitor sees.

Working in this order prevents the common failure, which is a site designed on a wide monitor, approved on a wide monitor, and then squeezed onto a phone where the headline wraps to six lines, the buttons sit below the fold, and the first thing a visitor sees is half of a stock photo.

How we check it

Before launch we open every page on an actual phone, not a browser window made narrow. We read it standing up. We try to tap the wrong thing. We check it on a slow connection. And after launch, the visitor reports tell us where phone visitors stop scrolling, which is usually a sign the page said something they did not need.

Every site we build starts on a phone screen, whether it is a cabinet shop's showroom page or the rider app a transit company puts in a student's hand.

Questions people ask