Make websites easy to use

In the last lesson, Sam prepared the title, description and headings for ClearFlow's water heater repair page. The content has a clear purpose, and the page keeps its existing address: /water-heater-repair.

Now Sam thinks about the person reading it.

Imagine an Austin homeowner opening the page on a phone. They may be standing in the kitchen, looking for help with a water heater. They need to understand the service, read the information and find the right way to contact ClearFlow.

A page can look beautiful on a large monitor and still make those simple tasks difficult on a smaller screen.

A good design should make the next step easy, whichever screen someone uses.

An earlier review of ClearFlow's water heater page found something worth checking: the contact link looked small on a narrow phone screen and sat close to another tappable item.

The link itself worked in an earlier check. But a working link and an easy-to-tap link aren't quite the same thing.

Sam wants the revised page to avoid that problem. He compares two ways to display the draft content from Lessons 6–7. Neither layout is the existing live page.

The first action would use ClearFlow's existing phone contact link. The second would take the visitor to the existing /contact page. Sam isn't adding a different contact method or changing the service page address.

This is a design draft, so the next step is to check it on an actual phone and get the appropriate client approval before any live change.

For the visitor, the improvement is straightforward: it's easier to choose the right action without accidentally pressing the other one.

Sam prepares a short test. On a narrow screen, can someone:

1. Read the service heading and opening text without zooming or scrolling sideways?
2. Find the phone link and the contact form route without searching through the page?
3. Tap either action without hitting a nearby link by mistake?
4. Navigate the page using a keyboard, and see which link is selected?
5. Reach the same important service information available on a desktop?

Sam doesn't need a complicated dashboard to notice a crowded link or hard-to-read text. A real phone and a few careful checks can reveal practical issues.

There is also a good reason not to hide important wording from mobile visitors just to make the layout shorter. The page still needs to explain water heater repair for Austin homeowners. It can rearrange the content for a phone without removing what people came to read.

Accessibility is part of good design. It means more people can read, understand and operate the site, including people who use a keyboard, screen reader or screen magnification.

Sam checks a few simple things during the design review:

• Readable text: People can read the content and enlarge it without the layout falling apart.
• Clear link names: Call ClearFlow tells someone what a link does. A phone icon by itself may not be as clear.
• Enough space: Nearby actions can be selected without accidental taps.
• Visible focus: People using a keyboard can tell which control is selected.
• Useful form labels: The contact form tells people what each field is for and makes errors understandable.

These checks help real visitors. They're not tricks for adding extra keywords to a page.

Sam may use images while developing the redesign. But the image should contribute something to the experience, not simply fill space.

If ClearFlow supplies and approves a real photograph that helps explain its work, Sam can give it a short text description when that information isn't already conveyed elsewhere. That description is called alt text. It helps someone using a screen reader understand the image's purpose.

If Sam adds a decorative shape that doesn't provide information, it doesn't need a spoken description. In the website code, that usually means an empty alt value: alt="".

And if an image file is unnecessarily large for its place in the layout, Sam can prepare an appropriately sized version. The important part is to choose suitable images and then check how the page actually loads.

A slow page can frustrate visitors. A page that jumps around while loading can make them tap the wrong thing. And a button that responds slowly can make a site feel unreliable.

Google uses three measurements called Core Web Vitals to describe parts of that experience:

Sam doesn't need to memorize scores today. The useful habit is to check before deciding what needs fixing.

For example, Sam can run the page through PageSpeed Insights and test it on an actual phone. PageSpeed Insights may show controlled test results and, when enough information is available, experience data from real visitors. Those are different kinds of evidence. Sam should record what the tool actually reports instead of declaring that a site has failed simply because a button looks too small.

One important distinction: the crowded tap target from the earlier review is a usability issue, not proof of a poor INP score. It deserves attention on its own merits.

Better page experience supports visitors, but it doesn't promise a particular ranking or a stream of inquiries. Useful content, accessibility, performance and search visibility are related without being the same thing.

The earlier ClearFlow review found that its contact form and phone link were operational during the sample test. Sam wants the redesigned experience to keep those paths usable.

Before any launch, Sam will arrange a fresh check with the right access:

• Does Call ClearFlow open the phone action with the correct existing destination?
• Does Use the contact form lead to /contact?
• Can someone complete the form with a keyboard and understand any errors?
• When an authorized test message is sent, does the right person actually receive it?

A click on the phone link doesn't tell Sam whether someone completed a call. And a form submission doesn't automatically mean a booked plumbing job. The point of this check is to confirm that the website's inquiry route works as intended.

Sam brings the checks together.

Sam doesn't need to redesign every element at once. The known mobile contact-link concern is a good place to start because it affects a key action on ClearFlow's priority service page.

Sam turns to Cedarline's /services page, where the draft already explains website design, redesign and care.

That wording may be clear, but Sam also needs to check it on a phone. Can a visitor scan the service options, move to the work examples and find the contact route?

Pick one page on your own studio website and try the same exercise: open it on your phone and complete the action you want a visitor to take. If something is difficult, record it and decide what to check next.

Good usability isn't about a perfect-looking screenshot. It's about helping real people do what they came to do.

Sam now has more than a polished draft. There's a clear way to review how the page reads, how its actions work on mobile, whether its images help and what still needs testing.

The plan also keeps two very different jobs separate: making a page easy to use and making sure search engines can index it. The earlier noindex question hasn't gone away just because the page design is improving.