Tools I use
Check it on a phone before you share it
A page that looks good on your laptop can break on a phone. In 15 minutes, you learn a 5-minute check you can run on any page.
- Pixel
- One tiny dot on a screen. A normal phone is about 390 dots wide.
- Sideways scroll
- The page moves left and right when you swipe. It means the page is too wide for the screen.
- Chrome device view
- A mode in Chrome that shows your page as it looks on a phone. You do not need a phone.
- Console
- A box in Chrome where you type a short test and get an answer.
01 · The question
"I can't see the Order button"
You make a page for a bake sale. On your laptop, it looks great. You send the link to a friend in a message.
Two minutes later, she writes back: "I can't see the Order button."
You open the page on your laptop. The button is right there. So what did she see?
First, a quick guess.
02 · Your guess
Out of 10 visits to web pages around the world, how many come from a phone?
A wrong guess costs nothing. Guessing first helps you remember the answer. Pick one to open the next part of the lesson.
03 · The 6 steps
The 5-minute phone check
Press Next step to see each step. Each step shows how I do it, and an easy way you can do by hand.
04 · Remember
Your laptop is not your reader.
You see your page on a big screen, with a mouse. Most readers see it on a small screen, with a thumb.
So test it on the small screen first. Then look at the big one.
In a restaurant
A chef tastes the soup before it goes to the table. Not after the guest complains.
On the street
A shop owner walks outside and looks at the window from the street. The view from inside the shop is not the view a buyer has.
5 things to look for
- Text cut off. A word is hidden at the edge, or behind a picture.
- Sideways scroll. The page slides left or right when you swipe.
- Buttons too small or too close. Your thumb hits the wrong one.
- Text too small. You must pinch the screen to read it.
- Broken pictures. A picture is missing, too wide, or covers the text.
Is a narrow laptop window enough?
It is a good start, but it is not a phone. A real phone also has touch, a notch (the cut-out at the top of the screen) and a sharper screen. Chrome's device view is closer. Your own phone is the best test.
05 · Two checks
Pass two checks to finish
A miss is fine. Each miss gives you a new case.
Check 1 of 2 · Which problem is it?
Check 2 of 2 · Put the 6 steps in order
Tap the steps from first to last. If you tap the wrong one, you get a hint.
06 · Tell a friend
Your one-minute answer
A friend asks: "How do you know your page works on a phone?" Say it in your own words. Here is a version you can use:
The one-minute version
"Most people open a page on a phone, so I check it there before I share it. I look at it at 3 sizes: phone, tablet and laptop. I scroll the whole page. I swipe sideways to see if the page is too wide. I zoom in on the buttons and the text. I press every button. If I fix something, I check all 3 sizes again."
Try it today · 5 minutes · free · safe
Take the last page you shared. Open it on your own phone. Look for the 5 things from section 04. Write each problem down.
No phone close? Open the page in Chrome on your laptop. Press F12, then the small phone-and-tablet icon, and pick a phone.
For a second pair of eyes, take a screenshot on your phone. Send it to Claude or ChatGPT with this prompt:
This is a screenshot of my web page on a phone.
List any text that is cut off, buttons that look too small,
and anything that looks broken. Say where on the screen each one is.Check: did you find at least one thing to fix? Most pages have one.
| Device view | Chrome: press F12 (Cmd+Option+I on a Mac), then the phone-and-tablet icon. |
| Sideways test | In the Console, type document.documentElement.scrollWidth > window.innerWidth. true means the page is too wide. |
| Best test | Your own phone. |
Stuck? Ask Claude. Say "explain how to open Chrome device view like I am new".
Back to all lessons