Jamstack Case Study – Zuverlässig, schnell, barrierefrei und bilingual

Das ist die erste einer Reihe von Case Studies zu denen von uns entwickelten Jamstack Websites. Für Taxi Bastone aus Schorndorf haben wir eine Website entwickelt, die schnell, zuverlässig, barrierefrei und bilingual ist.

Taxi Bastone erreicht bei Lighthouse in allen Bereichen eine sehr gute Punktzahl.

Seit Inhaber Domenico Bastone 2008 sein Taxiunternehmen in Schorndorf gegründet hat, steht Taxi Bastone für zuverlässigen Service bei der Personen- und Sachbeförderung. Mit mittlerweile 10 Fahrzeugen, einer Zweigstelle in Winterbach und 21 Mitarbeiter*innen bietet Taxi Bastone neben dem Taxiservice auch ein breites Spektrum an weiteren Leistungen an, von Fernfahrten bis hin zum Flughafentransport und vielem mehr.

Als Herr Bastone uns bat, ihm eine neue Website zu entwerfen, war für uns sofort klar: Das war ein Fall für den Jamstack. Für die Anforderungen, die wir in einem gemeinsamen Workshop mit Herrn Bastone erarbeiteten, war eine Website auf Basis des Jamstack wie geschaffen: Eine Taxi-Website sollte es Nutzer*innen ermöglichen, möglichst schnell, zuverlässig und ohne Hindernisse eine der Taxi-Leistungen zu buchen. Das ist das zentrale Ziel der Website und darauf sollte die Technik immer zugeschnitten sein.

Der Jamstack bot sich hier aus drei Gründen besonders an: Geschwindigkeit, Zuverlässigkeit und Barrierefreiheit (Accessibility). Allerdings gab es auch eine zusätzliche Herausforderung: Die Website sollte bilingual, also sowohl auf Deutsch als auch auf Englisch abrufbar sein.

Geschwindigkeit

Die sehr hohe Geschwindigkeit einer Jamstack Website erleichtert die Buchung enorm und gibt Nutzer*innen das Gefühl, sie würden eine App benutzen, statt einer Website. Und das auch unterwegs auf dem Smartphone, was für ein Taxiunternehmen natürlich von großer Bedeutung ist. Selbst bei sehr schlechter Internetverbindung zum Beispiel in ländlichen Regionen, dürfte eine Jamstack Website noch schneller sein, als die meisten klassischen Websites.

Abgesehen von der Entwicklung auf dem Jamstack gibt es noch einige kleinere Optimierungen, mit denen sich noch mehr Speed herausholen lässt. Zum Beispiel werden alle Bilder “below-the-fold” erst nachträglich geladen, um den initialen Seitenaufbau nicht zu verlangsamen (sogenanntes Lazy Loading). Auch werden alle Bilder in einem modernen Format wie WebP und immer in der passenden Größe, je nach Gerät, ausgeliefert. Eine Smartphone-Nutzer*in bekommt also keine Bilder in Desktop-Größe, die erst clientseitig geschrumpft werden müssten.

Lighthouse, ein Tool von Google zum Testen von Websites, vergibt für die neue Taxi Bastone Website im Bereich “Performance” einen Wert von 97 von 100 möglichen Punkten.

Zuverlässigkeit

Für ein Taxiunternehmen, auf das sich die Kund*innen verlassen, wäre es fatal, wenn die Website zu bestimmten Zeiten nicht mehr erreichbar oder überlastet wäre. Dank CDN kann das bei einer Jamstack Website nicht passieren. Egal wie hoch der Andrang ist. Selbst wenn einer der Edge Server im Netzwerk mal ausfallen sollte, existieren immer noch eine hohe Zahl an alternativen Servern, die jederzeit einspringen können (mehr dazu in diesem Artikel).

Außerdem erfüllt die Website auch alle Voraussetzungen für eine Progressive Web App. Nutzer*innen können die Website somit zu ihren Smartphone-Bildschirmen hinzufügen und dann wie eine Native App sogar offline benutzen. Zwar ist es damit logischerweise nicht möglich, ohne Internetverbindung eine Taxifahrt zu buchen. Es kann aber dennoch nützlich sein, da die Nutzer*innen so zum Beispiel Informationen wie die Telefonnummer von TAXI Bastone auch offline nachlesen können.

Barrierefreiheit

Barrierefreiheit sollte heutzutage bei jeder Website eine Rolle spielen. Es geht dabei darum, die Website so zu entwickeln, dass sie für alle Nutzer*innen unabhängig von ihren Einschränkungen geeignet ist. Für ein Taxi-Unternehmen, das auch Leistungen wie Krankentransporte anbietet, ist dieser Punkt aber besonders wichtig. Hierbei gilt es zum Beispiel, darauf zu achten, dass die Website mit einem Screenreader (so werden Tools für Nutzer*innen mit Sehbehinderung genannt, die Websites vorlesen können) gut und verständlich wiedergegeben werden kann.

Das statische HTML, das beim Jamstack zur Runtime ausgeliefert wird, ist für Screenreader besonders gut lesbar. Es gibt aber noch einige Optimierungen, auf die bei der Webentwicklung generell geachtet werden sollte: Kontakt- oder Buchungsformulare sollten ausschließlich Labels verwenden und nicht nur Platzhalter. Alle Bilder und Icons sollten mit aussagekräftigen alt-Tags oder aria-Labels versehen sein. Auch sollte bei der Farbgebung darauf geachtet werden, dass die Kontraste stark genug sind, um alle wichtigen Elemente zu erkennen. Ein barrierefreies Routing muss dafür sorgen, dass die Navigation auf die Unterseiten von Screenreadern korrekt angekündigt wird. Darüber hinaus gibt es noch eine Vielzahl von kleineren Optimierungen, die Menschen mit Einschränkungen helfen können.

Die neue Website von Taxi Bastone erreicht bei Lighthouse im Bereich “Accessibility” 100 von 100 möglichen Punkten.

Bilingualität

Eine gewisse Herausforderung stellte die Mehrsprachigkeit dar. Unsere Lösung hierfür ist ein Language Switcher in der Navigation, die Library react-intl von format.js und das gatsby-plugin-i18n. Die tatsächliche Implementation war aber recht anspruchsvoll. Es galt darauf zu achten, dass auch dynamische, über das CMS Prismic generierte Seiten, wie die News und Stellenangebote, mit einem Klick übersetzbar sind. Darüber hinaus muss auch für Google jederzeit klar sein, welche Version einer Seite in welcher Sprache ist und dass es sich dabei nicht um ein Duplikat handelt. Wir konnten hier aber eine sehr gute Lösung erarbeiten, die auch bei künftigen mehrsprachigen Websites von uns zum Einsatz kommen wird.

Ein rundum gelungenes Projekt

Auch wenn der Fokus auf diesen vier Punkten lag, erfüllt die Website auch alle weiteren Anforderungen, die für uns selbstverständlich sind. Das Design ist modern und wird durch professionelles Fotomaterial ergänzt, das wir extra von unserem langjährigen Partner Ralf Klamann haben anfertigen lassen. Die Website ist komplett responsiv und wurde auf allen Kombinationen aus Bildschirmgröße, Betriebssystem und Browser getestet. Auch die Grundlagen der Suchmaschinenoptimierierung wie die Crawlbarkeit, Sitemap und robots.txt, optimierte H-Überschriften und Metadaten haben wir umgesetzt. Die seit Kurzem für das SEO-Ranking relevanten Core Web Vitals sind ebenfalls alle kerngesund, wie der Lighthouse-Report zeigt. Und das Wichtigste: Der Kunde ist happy.

Tech Stack: Gatsby.js, React, Prismic CMS, Netlify