Nach 10 Jahren: Neue Website des L58-Ski geht online 🎉
Nach nun zehn Jahren ist es soweit: Unsere Webseite l58-ski.org brauchte dringend eine Frischzellenkur. Die alte Seite, aufgebaut auf Basis des CMS Joomla, hatte viele Jahre treue Dienste geleistet.
Die bisherige Joomla-Installation erhielt seit Langem keine Updates mehr, Erweiterungen waren nicht mehr kompatibel oder funktionierten nur noch eingeschränkt. Anstatt weiter mit Workarounds und Notlösungen zu arbeiten, haben wir uns dazu entschlossen, das Projekt von Grund auf neu aufzubauen – technisch wie inhaltlich.
Im Zuge dieser Neuentwicklung wurden sämtliche Inhalte überarbeitet, aktualisiert und teilweise neu geschrieben. Die bestehenden Blogbeiträge aus der Joomla-Zeit wurden manuell migriert und dabei nicht einfach nur übernommen, sondern inhaltlich modernisiert. Besonders spannend war dabei der Einsatz von künstlicher Intelligenz, die uns dabei geholfen hat, die migrierten Artikel automatisch mit passenden Tags zu versehen – ein großer Vorteil für die Navigation und inhaltliche Struktur der Seite.
Alte Posts per lokal ausgeführter KI mit Tags versehen.
Die neue Version von l58-ski.org basiert nun auf dem statischen Website-Generator Jekyll, genauer gesagt auf dem Chirpy-Theme, das eine moderne, minimalistische Oberfläche mit vielen nützlichen Funktionen vereint. Beiträge und Seiten werden in Markdown geschrieben – ein leicht verständliches Textformat, das sich hervorragend für technische und redaktionelle Inhalte eignet. Ergänzt wird das Ganze durch den Einsatz von Bootstrap 5, das für ein konsistentes, responsives Layout sorgt, sowie durch eine PWA-Funktionalität, sodass die Seite auf Mobilgeräten auch wie eine App genutzt werden kann.
Ein besonderes Highlight findet sich auf unserer neuen Wettkampfseite: Hier ist eine interaktive OpenStreetMap-Karte eingebettet, auf der alle möglichen Strecken anschaulich dargestellt sind – und das vollständig mit Leaflet über unseren eigenen Server bereitgestellt.
Interaktive OSM-Karte für die Wettkampfstrecken
Zusätzlich bietet die Seite nun auch dynamisch generierte Höhenprofile für jede Strecke, sodass Besucher auf einen Blick sehen können, welche Höhenmeter sie aufwärts und abwärts erwarten.
Dynamische Höhendiagramme der Wettkampfstrecken
Auch funktional hat sich einiges getan: Über das neue Kontaktformular, das im Menü erreichbar ist, lassen sich Anfragen jetzt ganz bequem direkt auf der Seite verschicken – ohne Umweg über externe E-Mail-Programme.
Direkter Draht zur Vereinsleitung ohne externes Mailprogramm
Ein weiteres zentrales Element ist die neu gestaltete “Wir”-Seite, auf der sich unser Team vorstellt. Dort finden sich Informationen zur Vereinsleitung, sowie ausführliche Porträts aller Trainerinnen und Trainer, Übungsleiterinnen und Übungsleiter samt ihren Qualifikationen und den betreuten Trainingsgruppen. Zusätzlich werden alle, die hinter den Kulissen mitwirken – Helferinnen und Helfer, sowie Kampfrichterinnen und Kampfrichter, die bei Wettkämpfen im Einsatz sind – mit großem Respekt sichtbar gemacht. Damit wollen wir nicht nur Transparenz schaffen, sondern auch das Engagement würdigen, das unsere Vereinsarbeit trägt.
Wir: Leitung, Trainer, Übungsleiter, Helfer und Kampfrichter.
Unsere Vereinschronik wurde in einer visuell ansprechenden Timeline aufbereitet, die wichtige Meilensteine unserer Vereinsgeschichte übersichtlich und modern präsentiert.
Hübsche Timeline der Vereinschronik, Aktuelles zuerst.
Ein weiteres Detail, das wir überarbeitet haben, ist die Menüleiste unten links: Dort finden sich nun praktische Icons, über die man direkt per Mail Kontakt aufnehmen oder auf unsere Facebook-Seite, Instagram-Seite sowie den RSS-Feed zugreifen kann. Alles auf einen Blick – ohne Schnickschnack.
Shortcuts für Mail, Facebook, Instagram und RSS-Feed.
Ein großer Vorteil der neuen Architektur: Die komplette Seite ist statisch, das heißt, sie besteht aus einfachen HTML-Dateien, die beim Aufruf direkt vom Webhosting-Anbieter ausgeliefert werden. Es gibt keine Datenbank, keine serverseitige Logik, keine Anmeldesysteme – und damit auch kaum eine Angriffsfläche für Bots oder Sicherheitslücken durch Plugins. Außerdem nutzen wir keine Cookies, was nicht nur datenschutzrechtlich angenehm ist, sondern auch den nervigen Cookiebanner überflüssig macht. Ein echter Pluspunkt für die Nutzerfreundlichkeit.
Natürlich ist die Seite heute voll responsiv gestaltet und passt sich automatisch an Mobilgeräte und Tablets an. Ladezeiten sind minimal, die Inhalte übersichtlich strukturiert – und wir behalten jederzeit die Kontrolle über Code und Inhalte, ohne auf komplizierte Admin-Interfaces angewiesen zu sein.
Zum Abschluss möchten wir einen kleinen Blick zurückwerfen. Als Erinnerung haben wir ein paar Screenshots archiviert:
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
-
You can set the position of the description in different ways for example top, bottom, left or right
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
