Skip to content
Ercan Labs
← All workWEBSITE · PRIVATE · shipped

Mavi Konak QR Menu

A cafe menu behind a QR code: one static page, no server, designed from Kütahya tile patterns.

48
Files
1
Pages
0
External requests
static, no server
Build speed

How this was measured: File count from git; zero external requests confirmed in the network panel; no server runtime by design.

Architectureno runtime, no analytics
  1. QR
    • telefonzayıf sinyal
  2. PAGE
    • tek statik sayfa48 dosya
  3. STYLE
    • CSS gradyan desen
    • sistem fontu
  4. NETWORK
    • 0 dış istek
Zero requests: menu text is readable at first paint; everything else is decoration.

Problem

A cafe needs a menu behind a QR code. The requirement sounds trivial until the constraints arrive: it must open in two seconds on a phone with one bar of signal, the owner must be able to change a price without calling a developer, and it must not look like every other QR menu.

The visual starting point was local: the blue-and-white geometry of Kütahya tiles, not a generic food template.

Constraints

  • One page, no login, no app install.
  • Images must not block the first paint; the menu text has to be readable before anything else loads.
  • The pattern must be drawn, not photographed — a photo of tiles would be heavy and would not scale.

Architecture decisions

01

Static page instead of a CMS

48 files, no runtime. A menu changes monthly; a static rebuild is faster and cheaper than any admin panel, and there is nothing to keep patched.

Cost: The owner sends a message to change a price; there is no self-service editor.

02

Pattern as CSS gradients

The tile motif is built from repeating gradients and a limited palette. It stays sharp at any size and adds no image weight.

Cost: A hand-tuned stylesheet instead of a background image.

03

Text-first layout

Menu sections are plain text with a fixed type scale so the page is usable on a bad connection and readable by screen readers without an image alt experiment.

Cost: Less visual freedom than a photo-led layout.

04

No analytics

The page loads nothing from a third party; no cookie banner, no consent flow, no data leaving the phone.

Cost: No traffic numbers; the cafe learns about the menu the old way, from customers.

Proof

  • Files48
  • Pages1
  • External requests0
  • Servernone · static output

Known limits

  • No analytics means no measured behaviour: this case reports weight, not engagement.
  • Price updates go through the developer; that is a real friction point, not a feature.
  • One venue; the design is not packaged as a template.

What I learned

A QR menu is a performance problem wearing a design costume. Every kilobyte is loaded by someone standing at a table with a weak signal; the most useful design decision was the one that removed requests entirely.

Stack

AstroCSSStatic hosting