Przy Stole — strona restauracji, która wie, co dziś gotujecie
Rodzinna restauracja z ogrodem na krakowskim Ruczaju żyje w trzech rytmach: dania dnia zmieniają się co tydzień, karta co sezon, a stałe menu co kilka miesięcy. Zaprojektowałem i napisałem stronę, która nadąża za wszystkimi trzema — i panel, w którym właścicielka zmienia menu sama, bez dzwonienia do mnie.
01 — Wyzwanie
Menu, które zmienia się co tydzień
Przy Stole to rodzinna restauracja przy ul. Obrońców Tobruku: kuchnia polska i sezonowa, duży ogród z leżakami, kącik dla dzieci i przyjęcia okolicznościowe. Goście szukają jej w telefonie — sprawdzają menu, godziny i to, co jest dziś w zestawie dnia.
Problem: zestaw dnia zmienia się co tydzień i wydawany jest tylko od poniedziałku do piątku, w południe. Strona, która pokazuje go o 22:00 w sobotę, wprowadza w błąd. A strona, którą trzeba zlecać programiście przy każdej zmianie menu, po miesiącu przestaje być aktualna.
Cel był więc podwójny: strona ma sama wiedzieć, która jest godzina w restauracji, a właścicielka ma sama zmieniać treść — dania, ceny, godziny i ogłoszenia.
Materiał od klienta
Ogród, sala i to, co na talerzu
Zdjęcia od restauracji: wejście, ogród z leżakami, sala, jesienny ogród nocą i dania z karty.
02 — Proces
Jak powstawała strona — krok po kroku
Od pierwszej rozmowy do publikacji. Każdy etap kończył się czymś, co właścicielka mogła zobaczyć i zaakceptować.
-
01
Rozmowa i materiały
Najpierw restauracja, potem strona
Spotkanie z właścicielką: co gości najczęściej pytają przez telefon, które dania schodzą najlepiej, co wyróżnia lokal na tle Ruczaju. Zebrałem zdjęcia dań i wnętrza, papierową kartę i opinie z Google — z nich powstała mapa sekcji, zanim narysowałem pierwszy piksel.
- lista sekcji
- mapa treści
- zdjęcia od klientki
-
02
Kierunek wizualny
Ciepła gastronomia zamiast szablonu „restauracja”
Czerwień, krem i butelkowa zieleń wzięte z wnętrza i ogrodu. Ilustracje liści, kwiatów i jagód narysowane jako SVG, falowane szwy między sekcjami, ukośne pasy jak na obrusie. Każdy element da się przemalować w panelu sezonowym — o tym niżej.
- paleta
- typografia
- ornamenty SVG
-
03
Kod od zera
Ręcznie pisany HTML, CSS i JavaScript
Bez WordPressa i bez gotowego motywu. Najpierw wersja na telefon, bo stamtąd wchodzi większość gości, potem komputer. Zdjęcia w formacie WebP z jawnymi wymiarami, żeby strona nie „skakała” przy ładowaniu.
- mobile first
- WebP
- zero wtyczek
-
04
Dania dnia
Sekcja, która sprawdza zegar w restauracji
Oba stany sekcji — kreator zestawu i zapowiedź — trafiają do kodu strony, a skrypt odsłania właściwy. Godzinę czyta w strefie Europe/Warsaw, nie z zegara telefonu: gość z zagranicy albo z przestawionym zegarem widzi to samo, co ktoś stojący pod restauracją.
- kreator zestawu
- liczenie ceny
- strefa czasowa lokalu
-
05
Panel treści
Właścicielka zmienia menu sama
Panel Sveltia CMS po polsku: pięć kart menu, dania dnia, karta sezonowa, ogłoszenia, godziny, zdjęcia. Treść leży w plikach, a po zapisie strona przebudowuje się sama — po około minucie zmiana jest widoczna. Każda wersja jest zapamiętana, więc nic nie da się zepsuć na stałe. Do tego krótka instrukcja obsługi.
- panel po polsku
- historia zmian
- instrukcja
-
06
SEO, RODO, start
Widoczność w Google od pierwszego dnia
Tytuły i opisy z nazwą dzielnicy, dane strukturalne restauracji (adres, godziny otwarcia, ocena z opinii), mapa witryny i robots.txt. Baner cookies zgodny z RODO i polityka prywatności napisana pod ten lokal. Potem publikacja i szkolenie z panelu.
- JSON-LD Restaurant
- baner cookies
- sitemap
03 — Zobacz, jak to działa
Przestaw zegar i patrz, jak zmienia się sekcja
To przekodowany fragment strony restauracji — ta sama reguła i te same dania. Startuje od bieżącej godziny w Krakowie. Wybierz dzień, przesuń godzinę, a w porze lunchu złóż zestaw.
Pon.–pt. 12:00–17:00 — kreator zestawu. W tygodniu poza tymi godzinami — podgląd tego, co jest w karcie. W weekend — zapowiedź nowej karty, bo tej na kolejny tydzień jeszcze nikt nie zna.
Galeria sekcji
Restauracja sekcja po sekcji
Zrzuty z działającej strony przy-stole.pl — najedź, żeby przybliżyć.
04 — Szczegóły
Kreator zestawu pod lupą
- Wybór jak przy stoliku
Jedno danie główne, jedna zupa, napój opcjonalnie. Zwykłe pola formularza — działają z klawiatury i czytnika ekranu.
- Zdjęcia wybranych pozycji
Po kliknięciu dania jego zdjęcie wskakuje w okrągłą ramkę z podpisem. Gość widzi, co dokładnie stanie na stole.
- Podsumowanie zdaniem
„Krem z kukurydzy na pierwsze i pieczona ćwiartka kurczaka na drugie” — tak, jak powiedziałoby się kelnerowi, a nie lista kodów.
- Cena liczona na bieżąco
Zestaw ma jedną cenę, dopłaty dolicza się same. Kwotę ustawia właścicielka w panelu.
- Jedno stuknięcie do telefonu
Dania dnia zamawia się przez telefon, więc przycisk prowadzi prosto do połączenia z restauracją.
- Numer: telefon dzwoni, komputer kopiuje
Na telefonie numer w nagłówku od razu wybiera połączenie. Komputer nie zadzwoni — tam kliknięcie kopiuje numer do schowka.
Cała strona
Od pierwszego ekranu do stopki
Cała strona restauracji: hero z ogrodem, o nas, atuty, dania dnia, karta jesienna, menu z zakładkami, ogród, przyjęcia, galeria i kontakt. Przewijaj — ramka przesuwa się razem ze stroną.
05 — Sezonowość
Jesień na stronie jednym przełącznikiem
Restauracja ma kartę sezonową — jesienią korzenne napoje i dyniowy ogród. Na stronie to nie tylko nowa sekcja: zmienia się cały nastrój. Liście w girlandzie, pajęczyny w rogach, brązowe tło, a w nawigacji pojawia się pozycja „Jesień”.
Cały motyw sezonowy jest osobnym arkuszem stylów, który panel dokłada albo zdejmuje. Właścicielka włącza jesień jednym przełącznikiem i tak samo ją wyłącza — bez mojej pomocy.
Karta menu z zakładkami i filtrem
Kuchnia, napoje, alkohole i osobna karta dla najmłodszych. Kategorie da się przeklikać, a filtr „Vege” zostawia tylko dania bezmięsne. Pod kartą pasek z zestawem dnia odsyła do sekcji lunchu.
Każda pozycja, cena i opis pochodzi z panelu — właścicielka dopisuje danie, a ono pojawia się we właściwej zakładce.
06 — Na telefonie
Projektowana pod kciuk
Restaurację sprawdza się w drodze: na przystanku, w samochodzie, przy wyjściu z pracy. Dlatego wersja na telefon nie jest pomniejszonym komputerem — kreator zestawu układa się w jedną kolumnę, podsumowanie z ceną zostaje pod ręką, a przycisk „Zarezerwuj stolik lub zamów z odbiorem” ma rozmiar na kciuk.
W pierwszym ekranie: nazwa, dwa przyciski (menu i rezerwacja) i skrót do dań dnia na ten tydzień.
07 — Co dostała restauracja
Strona, która nie starzeje się po tygodniu
Zawsze aktualne dania dnia
Sekcja sama przełącza się między lunchem, podglądem karty i zapowiedzią — według godziny w Krakowie.
Samodzielna edycja treści
Menu, ceny, godziny, ogłoszenia i sezon zmieniane w panelu po polsku, z historią każdej wersji.
Mniej telefonów z pytaniami
Godziny, zestaw, cena i karta są tam, gdzie gość ich szuka — w telefonie, w pierwszych sekundach.
Fundament pod Google
Dane strukturalne restauracji, poprawne tytuły z lokalizacją, mapa witryny i szybkie ładowanie.
Pytania
Strona dla restauracji — najczęstsze pytania
Czy mogę sam zmieniać menu i ceny na stronie?
Tak — jeśli strona ma panel treści (CMS), tak jak Przy Stole. Logujesz się w przeglądarce, zmieniasz pozycję, zapisujesz, a strona aktualizuje się sama po około minucie. Panel jest opcją: prosta wizytówka bez częstych zmian go nie potrzebuje.
Czy dania dnia mogą pokazywać się tylko w porze lunchu?
Tak. Strona czyta godzinę w strefie czasowej restauracji i sama odsłania właściwy stan sekcji. Godziny i dni wydawania ustawia się w panelu.
Ile kosztuje strona internetowa dla restauracji?
Strony zaczynają się od 1 500 zł netto, ale każdą wyceniam indywidualnie — wizytówka z kartą menu to inny zakres niż strona z panelem, daniami dnia i kartą sezonową. Szczegóły na stronie cennika, a konkretną kwotę dostaniesz w darmowej wycenie.
Czy strona będzie widoczna w Google Maps i wyszukiwarce?
Strona dostaje dane strukturalne restauracji (adres, godziny, ocena), tytuły z nazwą dzielnicy i mapę witryny. To fundament, na którym Google buduje widoczność — łącznie z wizytówką w Mapach, jeśli ją prowadzisz.
Prowadzisz restaurację albo kawiarnię? Porozmawiajmy.
Spotkamy się w Krakowie albo online — jak wolisz. Opowiesz, jak działa Twój lokal, a ja zaproponuję stronę, która za nim nadąży.