Guide
Make it work on phones
Most of your visitors are on a phone. Say so, because it is not assumed.
Difficulty: beginner
1. Say it explicitly, every time
Agents build and preview at desktop width by default. A site that looks right on a laptop can be unusable on a phone, and nobody will tell you.
Most visitors are on a phone. Design for a narrow screen first, then let it grow.
2. Say what has to be reachable with a thumb
Name the important action and where it should sit. Phones are held one handed and the top of the screen is the hardest part to reach.
The Book a table button must be reachable without scrolling and without stretching, so keep it in the lower half or make it stick to the bottom.
3. Say what to do with the menu
Navigation is the thing that most often breaks on a narrow screen. Decide it rather than letting it be decided.
On a phone, collapse the menu into a button in the top right that opens a full screen list.
4. Ask about the things that get forgotten
Tables, wide images, and long forms are the usual casualties.
Make sure the price table can be read on a phone without pinching, and that no part of the page scrolls sideways.
5. Check it yourself at 375 pixels
Do not take the answer on trust. Narrow the browser window until it is about the width of a phone and read the whole page.
Show me the home page at 375 pixels wide before you carry on.
Nothing about a website is responsive by accident. If it is not asked for it is often not done properly, and the failure is invisible from the machine the site was built on.
The last step matters most. Ask to see it narrow, and look.