Search "best cafe websites" and you'll find listicles of gorgeous sites chosen by designers, for designers — parallax scrolling, artful typography, a 40-megabyte video of steam. They win awards. They also take eight seconds to load on 4G, which means the customer at the bus stop closed the tab at second three.

This guide takes the customer's definition of "best" instead. Below: the 30-second test any cafe site must pass, the seven patterns that good ones share, one of our own builds annotated section by section so you can see the patterns applied, and the archetypes that suit different kinds of cafe. Everything here is stealable — that's the point. Whether you build with us, a DIY builder, or an agency, this is the standard to hold the result to.

The 30-second test

A cafe website is good if a stranger on a phone, on mobile data, can answer three questions inside thirty seconds: what do you serve, when are you open, where are you — and comes away thinking the place looks worth walking to. That's the entire exam. Design flourishes are welcome only after those marks are banked.

It sounds like a low bar. Most cafe websites fail it. They fail on speed (image sliders, video headers), on menus (a PDF two taps away), on hours (buried in the footer, wrong since Christmas), or on mobile (a desktop site squeezed onto a phone, where 80-odd percent of the visits happen). Keep the test in mind as we go — every pattern below exists to pass some part of it.

Pattern 1: One page, everything on it

The best cafe sites have quietly converged on the same architecture: a single page you scroll, not a menu of pages you navigate. Photos up top, menu, hours, map, contact, feed — one thumb-swipe from top to bottom. No hunting through "About / Menu / Gallery / Contact" navigation, no wondering which page has the opening hours.

This isn't a budget compromise; it's the correct shape for the job. A cafe visitor wants five facts and a vibe. One page delivers both faster than five pages ever can, loads quicker, and gives Google a single, dense, unambiguous document about your business. (The full argument lives in what a cafe website should include.)

Pattern 2: The menu is text on the page, not a PDF

The single biggest divider between good and bad cafe sites. Good ones put the menu directly on the page as real, selectable text with prices. Bad ones link to a PDF — which loads slowly, demands pinch-and-zoom, and is invisible to Google, so the site never appears when someone searches "vegan brunch [town]" even though it's right there on page two of the PDF.

Text menus also stay honest more easily: changing one price is a one-line edit, not a round trip through whoever has the InDesign file. If your menu currently lives in a PDF, here's the guide to fixing it — it's one of the easiest wins in this whole subject.

Pattern 3: It loads before the customer gives up

The best cafe sites load in about a second on a phone. This is mostly the discipline of what they leave out: no auto-playing video, no slider of six full-resolution photos, no chat widget, no cookie-wall theatrics. Speed isn't a technical vanity metric — it's the difference between being seen and being skipped, both by the customer (who bails after a few seconds) and by Google (which uses speed in ranking).

The quickest audit in the world: open your site on your phone, on mobile data, not wifi. Count one-elephant, two-elephant. If you get bored, so does everyone.

Pattern 4: Photos of this cafe, not of coffee in general

Good cafe sites are built from photographs of the actual room, the actual counter, the actual food — because the customer is deciding whether to walk to this place, and stock photography answers a question nobody asked. A slightly imperfect photo of your real window seat beats a flawless stock latte every time; one is evidence, the other is decoration.

The good news is that phone cameras crossed the good-enough line years ago. Window light, a steady hand and ten deliberate shots will outperform most paid shoots from a decade ago — here's the exact shot list.

Pattern 5: Hours and location work as hard as the photos

On the best sites, opening hours appear high on the page, per-day (not "Mon–Fri 8–4" hiding the Sunday question), and match the Google Business Profile exactly — that agreement is a trust signal Google explicitly rewards. The address comes with an embedded map and a tap-for-directions link; the phone number is a tap-to-call link, not just printed digits. Every practical fact is one thumb-tap from action.

It's mundane, and it's the majority of the site's actual value. A customer forgives a plain design; they don't forgive arriving at a closed door.

Pattern 6: Instagram embedded, doing what it's good at

Good cafe sites don't compete with the owner's Instagram — they embed it. A live feed near the bottom of the page means the site always shows this week's bakes and specials without anyone updating anything, and it hands the personality job to the platform built for it while the page handles the facts. It's the both/and setup from website vs Instagram, expressed in layout.

Pattern 7: One thing to do next

Weak sites end in a cul-de-sac of social icons. Strong ones end with a single obvious action matched to how the cafe actually works: call to book, get directions, order the beans. Counter-service cafe? "Find us" and tap-to-call. Tea room doing afternoon tea? The phone number, huge. Not six options — one, chosen deliberately.

A related tell, while we're here: what the good sites don't end with. No newsletter signup nobody asked for, no "book a table" widget on a counter-service cafe, no wall of awards. Every element a visitor has to scroll past is a small tax on the thing they came for — and the best cafe sites are visibly the work of someone who kept asking "which customer does this win us?" and deleting whatever had no answer. (That question gets a full treatment in the don't-pay-for list.)

A worked example: Cafe Marigold, annotated

Principles are cheap, so here's one of our own builds held against them — Cafe Marigold, a neighbourhood cafe site from our examples gallery, built in two days. Top of page: one full-width photo of the room in daylight, the cafe's name, and today's hours immediately visible — questions one and three of the 30-second test answered before the first scroll. No slider, no video, which is most of why the page loads in under a second.

One scroll down: the menu, as text, grouped the way regulars think about it (brunch, lunch, cakes, coffee), every item priced. Google reads every word, so the site surfaces for dish-level searches a PDF would sit out. Below that: per-day hours and the embedded map with tap-for-directions, then a photo gallery that's all Marigold — the counter, the plants, the flat white on the marble table by the window. Bottom of page: the Instagram feed running live, and a single closing action — tap to call. Nothing on the page is clever. Everything on the page is load-bearing. That's the whole aesthetic.

Worth noticing what the design decisions were actually responding to. The palette came from the cafe's own photos — the warm plaster and the marigold-orange crockery — not from a template's idea of "cafe". The typography does one flourish (the headings) and otherwise stays out of the way. And the menu sits above the gallery, not below it, because for a neighbourhood cafe the "what do you serve?" question outranks the "what does it look like?" question — a brunch destination might reasonably flip the two. Good cafe sites aren't interchangeable; they're the same seven patterns weighted differently per cafe, which is what the archetypes below are about.

The archetypes: same bones, different emphasis

The seven patterns hold across every kind of cafe, but the emphasis shifts with the business — and this is where "best" becomes personal. These are the archetypes we build against, drawn from the gallery:

  • The bakery — the morning bakes lead, photographed properly, with pre-order by phone front and centre, because the croissant business is won by 7:45am.
  • The brunch spot — this is the menu people check from bed on Saturday morning, so the menu sits high, prices included, and the page loads in under a second on a phone held at a horizontal angle.
  • The coffee shop / roastery — the brew menu plus the beans-to-take-home story in one scroll; the site quietly doubles as a shop window for retail bags.
  • The tea room — afternoon tea is booked, not walked into, so the phone number is the hero and the hours sit at the very top.
  • The neighbourhood all-rounder — the Marigold shape: balanced menu, room photos and map, tuned for "cafe near me" rather than any single dish.

The steal-this checklist

Hold any cafe website — yours, a quote's mockup, one of ours — against this list:

  • Passes the 30-second test on a phone, on mobile data
  • One page; menu, hours, map, photos, phone all present
  • Menu is real text with prices, current within the season
  • Loads in about a second — no sliders, no video header
  • Photos are of this cafe, not stock
  • Hours per-day, matching the Google Business Profile exactly
  • Tap-to-call and tap-for-directions both work
  • Instagram feed embedded and alive
  • One clear closing action, matched to how the cafe takes its business

See your cafe done right, free

The fastest way to understand these patterns is to see them wrapped around your own cafe. Send one photo and your Instagram link and we'll build a free mockup of your cafe's website in 48 hours — then you can run it through the checklist above yourself, line by line. If it fails any of them, we'd genuinely like to know.