Verzeichniswebseite für veganes Essen in Hamburg
Was war das Ziel?
Wir wollen eine Verzeichniswebseite erstellen, die eine gute Übersicht über alle veganen Restaurants, Cafés, usw. bietet, da es relativ schwierig ist, aktuelle Informationen dazu zu finden.
Der Fokus liegt auf:
- Gute Navigation und übersichtliche Darstellung der wesentlichen Informationen. Es soll einfach sein, schnell auf dem Handy einen Ort zu finden.
- SEO-optimierten Inhalt, der Spaß macht zu lesen, damit die Inhalte gut gefunden werden, aber auch die Leser*innen anspricht
- Es soll eine Kartenansicht mit Filtern geben
- Das Design soll ansprechend sein und dem Inhalt nicht im Weg stehen
Ein wichtiger Unterschied: hier sind wir selber auch Stakeholder. Inhalte und SEO-relevantes macht unsere Lieblings SEO-Managerin Marthe Schubert, die andere Stakeholderin für dieses Projekt. Sie ist auch maßgeblich für die Recherche und Pflege der Inhalte verantwortlich.
Im Zuge der SEO- und UX Optimierung habne wir hier ein besonderes Augenmaß auf Performance gelegt und dafür einige Register gezogen. Eine kurze technische Auflistung gibt's unter Performance.
Was habt ihr erreicht?
Wir haben erstmal viel Recherche betrieben und alle aktuell geöffneten Orte auf die Webseite und auf die Karte eingetragen.
Aktuell gibt es pro Monat rund 600-700 Besucher*innen, ca. 400 Klicks über Google mit ca. 18.5k Impressionen. Das sind keine riesigen Nummern, aber für ein relativ junges Projekt in einer relativen kleinen Nische gar nicht übel.
Die Webseite lädt natürlich schnell, ist ziemlich barrierefrei und hat eine übersichtliche Karte, die auch auf Mobilgeräten gut funktioniert.
Design und Aufbau
Der Aufbau der Webseite ist intuitiv. Mit der Navigation kommt man über eine klare Auflistung schnell zu den gesuchten Informationen. Sie versucht, die Nutzer*innen da abzuholen, wo sie mit Ihrer Frage stehen.
Auch auf dem Handy ist die Webseite sehr einfach zu bedienen.
Auf den Karten der jeweiligen Orte findet sich die Adresse, eine kurze Auflistung der angebotenen Speisen, ein ansprechender Kurztext mit Foto, wichtige Tags und natürlich die Öffnungszeiten.
Die einzelnen Listen sind filterbar für aktuell geöffnete Orte, sowie strikt vegane, wo auf etwaige Milch oder Ei-Allergie geachtet wird.
Performance & Technisches
Performance ist bei einfachen Webseiten einfach. So hat es auch hier angefangen. Mit wachsender Anzahl an Orten und Informationen enstanden neue Challenges. Es folgt eine kleine Auflistung der Herausforderungen und Lösungen. Achtung: es wird technisch!
Am Anfang haben wir die SVGs inlined. Das ist erstmal kein Problem. Wenn auf einer Seite dann aber plötzlich 100 SVGs zu parsen sind, dauert das etwas länger. Hier haben wir auf eine stark gecachte Sprite-Map gewechselt, was die DOM-Größe drastisch reduziert hat und trotzdem mit Light und Dark Mode funktioniert.
Um die initiale Ladezeit und die Zeit, bis Nutzer*innen die Seite nutzen können TTI zu verbessern, haben wir per content-visibility das Rendern der einzelnen Orte etwas nach hinten verlagert.
Die Bilder sind natürlich ebenfalls optimiert. Dazu setzen wir auf aktuelle Formate, wie webp, image sourcemaps und lazyloading, um die Bilder nur in den notwendigen Größen zu laden.
Um die Karte schnell und responsiv zu halten, nutzen wir Programmiertricks, die long running tasks aufbrechen, gerade wenn die Karte gefiltert oder gezoomt wird.
Weitere technische Details
Für die Privatssphäre unserer Nutzer*innen, setzen wir auf das Analytics-Tool Matomo, das die Möglichkeit bietet, ohne Cookies auszukommen. Die Daten sind weniger detailliert, anonymisiert und lokal auf unserem Server gespeichert. Das reicht vollkommen aus.
Alle Daten und Texte sind im Code hinterlegt. Mit kluger Typisierung unterbinden wir Tag-Duplikate und können die Daten für die Karte als geo-json wieder benutzen.
Vielen Dank fürs Lesen. Wenn die eine Seite dieser Art zusagt, melde dich. Wir helfen dir gerne!
Bereit für dein Projekt?
Wir würden gerne mehr über dein Vorhaben erfahren. Egal ob mit einer konkreten Idee, einer vagen Vorstellung, kleinem oder großen Budget. Erzähl uns mehr, unverbindlich und ohne doppelten Boden.