A coffee shop website designed to put the menu and hours on a phone screen

1. 01

   Menu and location are the 2 jobs, so they are the 2 buttons

   A person searching for a coffee shop wants to know what it serves and how to get there. The hero offers exactly those 2 actions, and the header repeats the menu link on phones.

2. 02

   The menu is short, priced and in 2 groups

   Visitors skim a cafe menu for one drink and one pastry. Coffee and espresso sit in one column, pastries and food in the other, each with a one-line note and a price, so the whole thing fits one screen.

3. 03

   Photos carry the atmosphere

   Cafes sell a place to sit as much as a drink. A hero of the barista, a menu photo, a roasting band and a quiet table shot do that work, and each image is sized so the page still loads quickly on mobile data.

4. 04

   The visit block is the last thing on the page, and complete

   Someone who scrolls to the bottom is ready to come in. Address, hours, a directions link and a call link sit together, so the final screen answers how to arrive without another tap.

• A short menu with prices, as text, grouped by drinks and food
• Hours, address and a one-tap directions link
• Photos of the room, the counter and 2 or 3 drinks
• A line about what makes your coffee yours: the roaster, the beans, the method
• Wi-Fi, seating and laptop policy, if customers ask about them
• A way to order ahead, if you offer it, linked from the header

See how FreeWebGuy builds a website for coffee shops.