Responsive website design, phone first

Responsive means one page that fits every screen

A responsive page is not a second mobile site. It is the same page, at the same address, that reflows to fit the screen in front of it.

On a wide screen, text and images can sit side by side. On a phone, they stack into one column and the text wraps. Nothing is cut off and nothing needs a sideways scroll.

That matters because the phone version is the one search engines read. A page that is genuinely useful on a desktop and unreadable on a phone is unreadable to most of your visitors, and to the engines too.

Four things usually break on a phone

Most phone problems come from a page that was designed on a desktop and never checked on a phone. The same four faults show up again and again.

A fifth one is quieter: a menu that only opens on hover. Phones have no hover, so the menu never opens.

• Text so small a visitor has to zoom to read a sentence
• Links and buttons packed so close a thumb hits the wrong one
• A table wider than the screen that forces a sideways scroll
• An image with a fixed width that spills past the edge of the page

How a generated page behaves on a phone

Every page the builder writes is laid out in one column first. The main heading, then the answer capsule, then each section in order, then the questions people ask, then the form.

The heavy things wait until they are asked for. A hero video from a YouTube or Vimeo link is click-to-load, so nothing autoplays and nothing eats a visitor's data. The book-a-time section loads only when a visitor opens it.

No analytics script and no cookie are added unless you add your own, so there is nothing extra to download before the page shows. The whole page passes a check that runs before anything publishes, validated against Google Search Essentials and modern web standards.

Tap targets and the thumb test

A thumb is wide and a little clumsy. Links that sit one line apart get the wrong tap, and a visitor who taps the wrong thing twice leaves.

Buttons need room around them. The form on every page has a label on every field, so a visitor knows which box they are tapping into.

The Text us link beside your phone number is one tick to add, and on a phone it is the easiest next step there is. One tap and they are typing.

Check your own site in two minutes

You do not need a tool for this. You need your phone and a quiet minute.

If all five pass, your site works where most of your visitors are. If one fails, you know exactly what to ask the in-app assistant to change.

• Open the homepage and read the main heading without zooming
• Tap the menu, then a service link, with your thumb, not a stylus
• Scroll a long page and watch for anything that slides sideways
• Fill in the form and send yourself a test message
• Type a wrong address after your domain and check the not-found page appears

Images that survive a narrow screen

A wide hero photo gets cropped to a tall slice on a phone. A photo with the subject in the middle survives that. A photo with the subject at the edge loses it.

That choice is yours. When you pick a hero image, look at it narrow as well as wide. If the phone crop cuts off the point, ask the assistant to swap it.

The same goes for text over an image. What reads fine on a wide screen can land on the busiest part of the photo when the screen narrows. Keep the photo calm behind the words, or keep the words off the photo.

What is yours to decide

The builder handles the layout, the column, the wrapping and the check that runs before anything publishes. You decide what goes on the page.

How long each page is, which photo leads, whether there is a video, whether the Text us link is on. Say what you want to the in-app assistant in plain language and it makes the change.