Weboldal

A kávézók weboldalai gyakran ugyanabból a sablonból készülnek: egy stock fotó gőzölgő csészéről, egy „Rólunk” bekezdés, egy PDF-étlap, amit telefonon senki nem tud elolvasni. Egy ilyen oldal semmit nem mond el arról, milyen érzés belépni az ajtón.

A Kapucínusnál a hangulat a termék része. A célunk az volt, hogy a weboldal:

• első pillantásra a kávézó saját világát hozza – a logó krémes-barna színeit, a saját fotókat, a nyugodt ritmust,
• telefonon is kényelmesen olvasható étlapot és itallapot adjon, kategóriákra bontva,
• egy kattintással megmutassa, hogyan lehet odatalálni,
• és a kávézó maga frissíthesse a kínálatot, a képeket és a szövegeket, fejlesztő nélkül.

A színek a logóból születtek

Nem kész témából dolgoztunk. A teljes paletta a Kapucínus logójából indul – mélybarna betűk krémes törtfehér alapon –, és ezt bővítettük a pasztellbarnák, a latte- és mokkaárnyalatok, valamint egy jeges kávé barnáinak skálájával. A kávézó saját szürkészöld színét – amelyet az ügyfél által küldött referenciából mintáztunk – visszafogottan, csak a láblécben és néhány apró részletben használjuk. Minden szövegszín-párosítást akadálymentességi (WCAG AA) kontrasztra ellenőriztünk.

Három betűtípus, három szerep

• Newsreader – elegáns, szerkesztőségi hangulatú talpas betű a címekhez és a történetmeséléshez,
• Instrument Sans – tiszta, jól olvasható betű a navigációhoz és a szövegekhez,
• Qwigley – a kávézó által kiválasztott kézírásos betű, amely apró, „a pult mögül” odavetett megjegyzésekként jelenik meg: frissen őrölve, jó étvágyat!, várunk szeretettel.

A magyar tipográfia szabályait is betartjuk: a weboldal automatikusan gondoskodik róla, hogy a sorok végén ne maradjon árván egy „a”, „az” vagy „ha” – apróság, amit kevesen vesznek észre, de mindenki érzi, hogy a szöveg rendezett.

Nyitány: jeges kávé, amely lefolyik a képernyőről

Az első látogatás egy kis szertartással kezdődik. A képernyőt egy tejjel márványozott jeges kávé tölti ki, amely lassan lefelé csorog a logó mögött, majd lefolyik a képernyő aljáról, és alóla előtűnik a kávézó. Ez nem videó, hanem egy valós időben futó WebGL-animáció, amelynek színeit az ügyfél saját referenciafelvételéből mintáztuk – így pehelykönnyű, és minden képernyőméreten éles.

Az élmény soha nem áll a látogató útjába: munkamenetenként csak egyszer jelenik meg, bármilyen kattintásra vagy billentyűre azonnal továbbenged, telefonon is akadásmentes, csökkentett mozgás beállítás mellett pedig egyáltalán nem jelenik meg.

Szekcióváltások kávéból és tejből

A barna és krémes szekciók között nincs éles vonal és nincs sablonos hullám. Helyette egy egyedi, generált képi átmenet fut: kávé, amely szétterül a tejben – finom csíkokkal, cseppekkel, lágy ívekkel. Egy apró részlet, ami miatt az egész oldal egyetlen összefüggő csészeként hat.

Főoldal

Váltakozó hero diák a kávézó saját fotóival – „A nap legjobb negyedórája”, „Reggeli, ami kitart délig”, „Délután egy szelet torta”, „Nyáron a teraszon” –, mindegyiken két egyértelmű gombbal: Étlap és itallap, Útvonaltervezés. Alatta a bemutatkozás, a kiemelt termékek, a közösségi média és a helyszín térképpel.

Étlap és itallap

Hat kategória egy oldalon, egy rögzített kategóriasávval, amellyel egy koppintással lehet ugrani: Kávék, Hideg italok, Koktélok, Reggeli és szendvicsek, Torták, Sütemények. Minden tételnél rövid, étvágygerjesztő leírás, ahol van, saját fotó, és jól látható jelölés a vegán és gluténmentes finomságoknál. Az étlap valódi szöveg, nem PDF – telefonon is olvasható, és a keresők is értik.

Rólunk

A kávézó filozófiája három pontban – „Kávé, figyelemmel”, „Édes, könnyű, mindenkinek”, „Időt is adunk mellé” –, a hely hangulata („Bent és kint”: napfényes ablakok, puha székek, nyáron terasz a fák alatt) és a csapat bemutatása.

Galéria

Szerkesztői elrendezésű fotógaléria kategóriaszűrőkkel (Kávé, Italok, Sütemények, Hangulat) és teljes képernyős nagyítással, amely billentyűzettel is teljesen kezelhető.

Helyszín

Térkép, egykattintásos útvonaltervezés, nyitvatartás és elérhetőség. Telefonon egy alsó, mindig elérhető sáv kínálja a két legfontosabb lépést: étlap és útvonal.

Minden szerkeszthető – fejlesztő nélkül

A weboldal tartalma adatbázisból érkezik, a kódban semmi sincs beégetve. A kávézó egy biztonságos admin felületen kezeli:

• a hero diákat – képpel, címmel, leírással és kézírásos megjegyzéssel,
• a termékeket és kategóriákat – leírással, árral, fotóval, vegán és gluténmentes jelöléssel,
• azt, hogy mely termékek kerüljenek kiemelésre a főoldalon,
• a galériát – képfeltöltéssel és kategóriákkal,
• a Rólunk-szövegeket, a helyszínt, a nyitvatartást és a közösségi linkeket,
• a keresőoptimalizálási beállításokat és a jogi adatokat.

Az admin kezdőoldala ráadásul teendőlistaként mutatja, mi hiányzik még – például nyitvatartás vagy telefonszám –, így semmi nem marad ki véletlenül.

Képek, amelyek gyorsak és nem ugrálnak

Minden feltöltött fotót a rendszer automatikusan modern AVIF és WebP formátumokba, több méretben kódol, és előre ismeri a méretét és alapszínét. A képek helye betöltés előtt le van foglalva, így nincs ugráló oldal, telefonon pedig mindig csak akkora kép töltődik le, amekkora kell.

Saját fotók, őszinte tartalom

Minden kép a Kapucínus saját fotója – kávé, torta, limonádé, terasz –, egyik sem stock vagy generált. Ami nem ellenőrzött adat (ár, nyitvatartás, telefonszám), az nem kerül ki kitalált értékkel: a felület egyszerűen elrejti, amíg a kávézó meg nem adja.

Adatvédelem, amely tiszteli a látogatót

Saját fejlesztésű süti-ablak, amely soha nem takarja ki a főcímet, és ahol a „Csak a szükségeset” egyenrangú a „Mindent engedélyezek” gombbal. A Google Térkép csak hozzájárulás után töltődik be – addig is látszik a cím és az útvonaltervezés.

• Egyedi nyitány. A lefolyó jeges kávé egy valós idejű, saját fejlesztésű WebGL-animáció – nem sablon, nem nehéz videó.
• Szigorú, a logóból épített design rendszer. Minden szín, betűméret, térköz és árnyék egyetlen helyen definiált, így öt oldalon át sem csúszik szét a vizuális egység.
• Átgondolt mozgásvilág. Finoman előbukkanó tartalom, automatikusan váltakozó hero, amely megállítható, és csökkentett mozgásnál is teljes értékű élményt ad.
• Akadálymentesség alapkövetelményként. Billentyűzettel bejárható menü, galéria és nagyítás, látható fókuszjelzés, ellenőrzött kontrasztok.
• Vállalati szintű biztonság. Titkosított jelszótárolás, adatbázisban tárolt munkamenetek, minden admin műveletnél szerveroldalon újraellenőrzött jogosultság, az admin felület kizárva a keresőkből.

• Helyi fókusz: kávézó, sütemény, torta, reggeli – Hatvan; a város, a térkép és az útvonaltervezés minden releváns helyen, egyetlen adatforrásból.
• Gazdag strukturált adatok: CafeOrCoffeeShop (kávézó) vállalkozástípus, cím és koordináták, nyitvatartás, teljes étlap Menu / MenuSection / MenuItem formátumban (az árakkal együtt, amint az adminban megadják őket), morzsamenü és WebSite adatok.
• Élő, gépileg olvasható adatok: az /llms.txt nem statikus fájl, hanem az adminból frissülő útvonal – ha változik a kínálat vagy az elérhetőség, a mesterséges intelligencia alapú keresők (ChatGPT, Perplexity, Google AI Overviews) is a friss adatot látják.
• Oldalanként választható megosztókép: az adminban minden oldalhoz megadható, melyik fotó jelenjen meg, ha valaki megosztja a Facebookon vagy Messengeren.
• Technikai alapok: sitemap, robots.txt, szemantikus HTML, helyes címsor-hierarchia; a jogi oldalak és az admin nem indexeltek.

A Kapucínus Kávézó ma olyan weboldallal rendelkezik, amely pontosan olyan, mint egy délután a kávézóban: meleg, nyugodt, és minden részletében átgondolt. A látogató néhány másodperc alatt látja, mit kérhet, hogyan juthat oda – és már a képernyőn kedvet kap egy szelet tortához. A kávézó pedig maga kezeli a kínálatot, a képeket és a szövegeket.

Nem siettetünk. Csak minden nap ugyanúgy odafigyelünk. A Kapucínus weboldala ugyanezt a receptet követi.

Lassítja-e a weboldalt a nyitóanimáció? Nem. A lefolyó jeges kávé egy könnyű, valós időben futó animáció, nem letöltendő videó; munkamenetenként csak egyszer jelenik meg, egy kattintással átugorható, és csökkentett mozgás beállításnál ki sem töltődik.

Miért jobb az online étlap, mint egy feltöltött PDF? Mert telefonon is kényelmesen olvasható, kategóriák között egy koppintással lehet ugrálni, a keresők és az AI-asszisztensek is értik a tartalmát, és az adminban percek alatt frissíthető.

Feltölthetünk magunk új termékeket és fotókat? Igen. Az admin felületen képfeltöltéssel együtt kezelhetők a termékek, a kategóriák, a hero diák, a galéria és a szövegek, a képeket pedig a rendszer automatikusan optimalizálja.