Your Site Will Be Seen on Tiny Screens
You’ll probably build your site on a laptop. But lots of people will open it on a phone first. Especially if you share the link in a chat or on social media.
A site that only works on a big screen feels broken on a small one. That’s where responsive design comes in (a site that adapts itself to whatever screen it’s on).
Good, Not Identical
Here’s the key idea. You don’t have to squeeze every cool thing onto a phone:
Every screen gets a good experience, not the same experience.
Some of the best parts of your site might be big: a huge animated header, a wide gallery, a fancy layout. That’s great! On a laptop, go big.
For each big piece, you just decide what a phone gets instead:
| Choice | What it means | Example |
|---|---|---|
| Rearrange | Same thing, laid out differently | Three columns side by side become three stacked on top of each other |
| Simplify | A lighter version of the same idea | A wide gallery becomes a row you swipe through |
| Swap | Something different that fits | A heavy animation becomes a still image, maybe with a “see the full version on a bigger screen” note |
The Two Things That Are Never OK
Whatever you decide, a phone should never get:
- Text so tiny you have to pinch and zoom to read it.
- A page that spills off the side, so you have to scroll sideways.
Those two are the signs of a site where nobody thought about phones at all. Everything else is a choice.
Pick Your Star Screen
Every site has a star screen, the one it’s mainly designed for:
- A showpiece site with big visuals and animations? The laptop is the star.
- A café menu that people check while walking down the street? The phone is the star.
Decide which one yours is, and add it to your requirements. It tells Claude where to spend its effort.
Make It a Rule: Put It in CLAUDE.md
Here’s the smartest move. Don’t ask for a phone-friendly version after the site is built. Put it in your notebook before the first page exists:
Add a section like this to your CLAUDE.md:
## Screens
- Desktop is the main experience. Go big there.
- It must still work well on phones: nothing spills off the side,
text stays readable, buttons are easy to tap.
- If something is too big for a phone, rearrange it, simplify it,
or swap it for a lighter version. Ask me when unsure.Now every single page Claude builds, it builds with phones in mind. Write the rule once, instead of fixing every page later.
A Few More Rules Worth Adding
While you’re in the notebook, a few small things make a site feel finished. Add them to the same place:
## Always
- Keep images small so pages load fast.
- Give every page a title and a short description,
so links look nice when shared.
- Add a small icon for the browser tab.- Small images matter because huge photos make a site slow, especially on phones.
- Titles and descriptions are what show up when someone shares your link in a chat (that little preview card).
- The tab icon (also called a favicon) is the tiny picture next to your site’s name in the browser tab. Without one, you get a boring blank default.
How to Check It
You don’t need a phone to test a phone. In your browser, on your preview:
- Press F12. A panel of developer tools opens. (Don’t worry, you won’t need most of it.)
- Press Ctrl+Shift+M. The page switches to a phone-sized view.
- At the top, pick a phone model from the list, and scroll through your site.
And once your site is live, open it on your real phone too. It’s the truest test.
Rule in the notebook, check in the browser, final check on a real phone.
Try it
Decide your site’s star screen, then add the Screens and Always rules to your CLAUDE.md. Then open any preview (your playground site is fine) in the phone-sized view, and look for the two never-OK problems.
See an example prompt
Add a "Screens" section and an "Always" section to CLAUDE.md. Desktop is the main experience, but the site must work well on phones: nothing spills off the side, text stays readable, buttons are easy to tap. If something is too big for a phone, rearrange it, simplify it, or swap it for something lighter, and ask me when unsure. Always keep images small, give every page a title and description, and add a tab icon.