Webseite der Feuerwehr Rheinhausen
Das „Schöne“ an Webseiten für Hilfsorganisationen ist, dass der Ansatz ein ganz anderer ist als bei den Webseiten, die wir alle üblicherweise so erstellen und live bringen. Während sonst oft der „Werbeeffekt“ im Vordergrund steht, rückt bei BOS-Webseiten oft die schnellst-/bestmögliche Information der Bürger in den Vordergrund.
(“BOS“ steht für „Behörden und Organisationen mit Sicherheitsaufgaben“, klassischerweise alles was Blaulicht auf seinen Fahrzeugen hat, also auch die Feuerwehr.)
Woher kommt diese veränderte Anforderung? Ich denke er ist der Neugier der Menschen geschuldet: Wenn wir als Feuerwehr mit Blaulicht und Martinshorn durchs Dorf fahren, dann möchte danach meistens jeder wissen, warum wir das getan haben.
Auf der anderen Seite haben wir als Feuerwehr natürlich auch ein Interesse daran uns gut darzustellen und für uns zu werben. An erster Stelle steht aber der Anspruch, die Bevölkerung über unsere Arbeit, die ja aus Steuermitteln finanziert wird, zu informieren.
Das bringt gestalterisch aber auch technisch einige Anforderungen mit sich, wie ich finde. Darauf will ich im Folgenden eingehen. Vielleicht können sie jemandem helfen, der selbst mal eine solche Webseite neu machen muss.
Wenn im Folgenden von „Wir“ die Rede ist, dann meine ich das Team, das sich in den letzten Wochen/Monaten mit dem Relaunch der Webseite beschäftigt hat. Während die Technik größtenteils an mir hing, haben ganz viele Kameradinnen und Kameraden fleissig neue Texte geschrieben oder überarbeitet, nach Bildern gesucht, an der Struktur gewerkelt und noch vieles mehr. Und unsere Arbeit ist da auch noch nicht vorbei, so eine Webseite will ja gepflegt und ausgebaut werden...
Gestalterisch
Gestalterisch halten wir die ganze Sache etwas dezenter. Die Webseite muss eine maximal breite „Zielgruppe“ ansprechen und dazu gehören auch viele Menschen, die nicht besonders technikaffin sind. Diese Leute kennen sich deshalb oft nicht besonders gut mit Designtrends oder bestimmten Funktionsweisen aus, so dass die Benutzerführung relativ einfach sein muss.
Mit Hinblick auf die weiter zunehmende Verbreitung von mobilen Endgeräten, haben wir einen „Mobile First“-Ansatz gewählt. Der ist besonders für die Startseite und Beitragsansichten wichtig, da hier von besonders vielen Zugriffen mit mobilen Endgeräten ausgegangen werden kann.
Dank des Einsatzes von Bootstrap 4 als Framework im Hintergrund, können hier die sog. „Cards“-Komponenten verwendet werden, die dem Ganzen einen etwas App-artigen Eindruck verleihen. Das ist eine gute Mischung aus „optisch ansprechend“ und „benutzerfreundlich für alle Nutzergruppen“.
Ansonsten sind auch die einzelnen Beitragsseiten eher schlicht gehalten. Ein Headerbild im oberen Bereich, etwas Text, Zusatzinformationen in einer Sidebar, alles grafisch nicht außergewöhnlich aber sicher funktionell und gut zu erfassen. Das wird dem informativen Ansatz ziemlich gerecht, denke ich.
Ansonsten haben wir uns für den Relaunch vorgenommen, mehr mit großformatigeren Bildern zu arbeiten. Die Artikelheader sind deshalb relativ groß gehalten und auch auf manch statischer Seite finden sich schon Bilder die ordentlich Platz im Viewport einnehmen.
Das werden wir mit der Zeit sicher noch weiter ausbauen, dafür müssen wir aber teilweise erst neues Bildmaterial erstellen, was im aktuellen Jahr, aus bekannten Gründen, nicht ohne Weiteres möglich ist. So haben wir für einige Seiten auf altes Bildmaterial zurückgegriffen, teilweise Symbolbilder genutzt oder auch erstmal ein paar Bilder noch weggelassen.
Technisch
Um künftig die Pflege der Seite auf viele Schultern verteilen zu können, kommt als technische Basis WordPress zum Einsatz. Wir lösen damit eine alte Version von Joomla ab, die sich auch nicht mehr sinnvoll hätte aktualisieren lassen.
Um Zusatzinformationen für die Beiträge zu erfassen, nutzen wir das berühmte “Advanced Custom Fields“-Plugin. Wenn man das einmal eingerichtet hat, ist die Beitragserstellung bzw. -anreicherung mit strukturierten Informationen sehr einfach möglich.
Beiträge erstellen wir mit dem Classic Editor, ansonsten kommt nur noch das WordPress-Plugin von tinypng.com zum Einsatz, das automatisch hochgeladene Bilder verkleinert und komprimiert.
Allgemein legen wir viel Wert auf Geschwindigkeit und Datenschutz.
Guten Datenschutz stellen wir dadurch sicher, dass wir in Deutschland hosten, keine Trackingtools einsetzen, alle Ressourcen von unserem Server ausliefern etc. pp. Auch die Share-Links in den Beiträgen sind datenschutzfreundlich, wie man das macht, habe ich schonmal hier beschrieben.
Das alles zusammen spart uns auch ein nerviges Cookie-Banner, da alles was wir tun „technisch notwendig“ ist und damit keine Einwilligung erfordert.
Hohe Geschwindigkeit stellen wir durch die Umsetzung einiger „best pratices“ sicher:
- Alle Bilder sind durch Bildkompressoren optimiert worden
- Wenn möglich nutzen wir responsive img-Tags, damit der Browser ein Bild laden kann, das zur Bildschirmgröße passt
- Statische Ressourcen (Bilder, Scripte, CSS) cachen wir so lange wie möglich, damit sie selten geladen werden müssen
- Der Server überträgt alle Daten komprimiert zum Browser
- Wir versuchen möglichst wenige HTTP-Requests zu machen
Google belohnt das aktuell mit 99 von 100 (Desktop) bzw. 90 von 100 (Mobil) Punkten in seinen “Page Speed Insights“ für unsere Startseite. Auch andere Performance-Messungen geben uns gute bis sehr gute Noten für die Geschwindigkeit.
Diese Ergebnisse sind nicht alles und immer mit etwas Vorsicht zu genießen, aber meistens sie sich auch im Erlebnis der Nutzer wieder.
WordPress-seitig verzichten wir aktuell auf weitere Caching-Systeme. Eventuell greife ich bei Zeiten nochmal ein Transient-basiertes Caching zurück, wie ich das früher schon einmal gemacht habe, (2012! Wow, wie die Zeit vergeht!) aber für den Moment sind Startseite und Archiv ausreichend schnell mit ihren Queries gegen die Datenbank.
Fazit
So eine Feuerwehr-Webseite darf ruhig etwas schlichter aussehen als die hochglanzpolierten Webseiten, die wir sonst so erstellen. Priorität sollten Geschwindigkeit, Benutzerfreundlichkeit und Datenschutz haben.
An dieser Stelle nochmal ein großes Dankeschön an alle Beteiligten.
Das Ergebnis kann man sich übrigens hier anschauen: Freiwillige Feuerwehr Rheinhausen
Über mich
Ich bin gelernter Mediengestalter, studierter Druck- und Medientechniker und leidenschaftlicher Tüftler und Bastler.
Beruflich beschäftige ich mich mit der digitalen Transformation von Unternehmen, sowie der Automatisierung von Unternehmensprozessen, in der Druck- und Medienbranche. Mehr dazu findet sich im Lebenslauf.
Privat interessieren mich Kaffee(maschinen), Themen rund um Webentwicklung, das Internet im Allgemeinen und Speziellen und vieles, vieles mehr.
Ich freue mich auf Feedback per E-Mail unter kontakt@flomei.de, einen Euro für die Kaffeekasse oder etwas von meiner Amazon Wunschliste.