Last week a mobile website check told me a client's online store was broken on phones. The product name and the option buttons looked like they were running off the right edge of the screen. I was ready to start fixing it.
It wasn't broken. The problem was how I had looked at it.
The client is a woman-owned self-care brand that sells handmade products online. Here's what happened, and the simple habit it taught me.
What made the store look broken on phones?
We were working on the product photos for two of her creams. While taking proof screenshots at phone width, the pages looked wrong. Titles spilled off the side. Buttons were cut in half.
The catch: a desktop browser window can't really shrink to phone size. Mine stopped at around 500 pixels wide. So the page drew itself wider than a phone, and my screenshot cropped it down to phone width afterward.
The page wasn't overflowing. My picture of it was.
How to do a real mobile website check
When we re-ran the check properly, we used a tool that draws the page at true phone size, the way an actual phone would. We tested three common phone widths across every product page.
The result:
- All 16 published products fit cleanly at every phone width.
- 48 out of 48 checks passed.
- The "broken" layout did not exist.
If you check your own site, use one of these:
- Open it on your actual phone. Better yet, open it on two different phones.
- Use your browser's built-in phone preview mode, not a squished window.
- Ask a friend or customer to send you a screenshot from their phone.
A shrunken desktop window feels like a phone. It isn't one.
The real bug was smaller than the fake one
The proper check did find one genuine problem. It just wasn't the scary one.
The product pages only showed the first five photos in each gallery. One cream had eight photos. Its most useful image, the one listing the key features, was sitting in eighth place. Customers had never seen it.
The fix was one line in the page template that removed the five-photo limit. No redesign. No new layout work. We changed only that one file, so nothing else on the live store could be accidentally overwritten.
After the change, all eight photos showed, and all 16 products still fit on every phone width.
What the fix revealed that we hadn't planned for
Removing the limit had a side effect worth knowing about. Photos that had been hidden for weeks suddenly became visible to every shopper.
Some of them were rough: a picture saved from a chat app and another in an unusual phone format. Nobody had checked them, because nobody could see them.
So before you "unhide" anything on your site, look at what's about to appear. A fix that shows more also shows what you forgot was there.
Three habits worth stealing
Check at real size before you fix anything
The most expensive fix is the one for a problem you don't have. Confirm the bug on a real device first.
Look for the boring bug behind the scary one
The dramatic problem was imaginary. The quiet one, a hidden best photo, was costing sales. Ask: what are customers not seeing?
Make the smallest change that solves it
One line beat a redesign. Smaller changes are easier to check and easier to undo.
The takeaway: before you fix your website for phones, make sure you're actually looking at it the way a phone does. If you're not sure how your own store looks on a real phone, that's a ten-minute test worth doing this week.