Hallo sagen
Website-Framework für die Tour de Suisse und weitere Veranstaltungen
- Kunde Cycling Unlimited AG
- Agentur OWNBIT GmbH
- Unsere Leistungen
- Projektleitung
- Konzeption
- Wireframes & Webdesign
- Entwicklung
- tourdesuisse.ch tortour.com alpenbrevet.ch
Für die Tour de Suisse bzw. deren Veranstalterfirma Cycling Unlimited AG durften wir eine umfangreiche mehrsprachige Website von Grund auf neu konzipieren, gestalten und umsetzen. Die Besonderheit dabei war, dass die erarbeitete Website-Basis nicht nur für tourdesuisse.ch, sondern auch alle weiteren durch Cycling Unlimited AG organisierten Velorennen (Tortour, Alpenbrevet usw.) genutzt werden wird. Es wurde also ein Website-Framework geschaffen, das alle notwendigen Bausteine für die verschiedenen Webauftritte enthält und vom Kunden je nach Veranstaltung einfach eingesetzt und angepasst werden kann.
Auch funktional bietet die Website einiges, wie z.B. die Möglichkeit, Inhalte in Seitenbereiche zu unterteilen, um die vielen Inhalte klar zu strukturieren und voneinander abzugrenzen (Tour de Suisse Men, Tour de Suisse Woman). All dies natürlich in Kombination mit Mehrsprachigkeit. Da einige Inhalte in mehreren Bereichen auftauchen, musste eine Möglichkeit geschaffen werden, diese Inhalte komfortabel und ohne Redundanzen zu verwalten.
Highlights in Kürze
"Auf die inneren Werte kommt es an."
Einige der coolsten Punkte an dieser Website sind nämlich von aussen nicht sichtbar, sorgen aber dafür, dass Cycling Unlimited kosteneffizient und mit einem Lächeln auf dem Gesicht seine Web-Bedürfnisse abdecken kann.
Website Framework
Cycling Unlimited kann selbstständig neue Websites für weitere Events auf Basis des erarbeiteten Frameworks erstellen.
Dank 40+ auf das Konzept angepasste Inhaltsbausteinen, können so ziemlich jegliche Inhalte sinnvoll abgebildet werden.
Performance & Verfügbarkeit
Wenn der oder die erste Fahrer:in ins Ziel einfährt, wollen es alle wissen: Wer hat gewonnen? Spätestens in diesem Moment steigt die Serverlast extrem in die Höhe. Die Feuertaufe hat die das Setup letztes Jahr mit bis zu 15'000 Requests pro Sekunde gemeistert.
Backend-Experience
Weil sowohl Front- als auch Backend vollständig auf das eigenes für und mit Cycling Unlimited erarbeitete Konzept zugeschnitten sind, ist das Einfügen und Bearbeiten von Inhalten ein Kinderspiel. Es wurde ein gutes Gleichgewicht zwischen Flexibilität und Eas-of-Use angestrebt, welches genügend Freiheiten biete ohne technisch weniger versierte Personen zu überfordern. So lassen sich Content-Arbeiten besser im Team verteilen.
Kosten-Nutzen & Langlebigkeit
Diese Website ist auf ein top Kosten-Nutzen Verhältnis und eine lange Lebensdauer ausgerichtet. < 300h Gesamtprojekt
Die auf Wordpress basierte Anwendung ist in der Lage agil auf andere Veranstaltungen angewendet zu werden - ganz nach unseren Bedürfnissen und ohne unnötigen Schnickschnack. Wir haben zusammen mit der OWNBIT GmbH einen Sportevent spezifischen Baukasten geschaffen, der flexibel für andere Veranstaltungen ausgerollt werden kann und somit ansprechende Websites innert Stunden realisiert.
Website-Framework
Ein wichtiges Ziel dieses Projektes war es, eine wiederverwendbare Basis für weitere Websites zu schaffen. Cycling Unlimited organisiert nebst der Tour de Suisse diverse weitere Velo-Events. Für diese Events kann neuerdings die gleiche Basis genutzt werden.
Das Framework besteht aus dem multifunktionalen Theme und zusätzlichen weiteren eigens erstellten Plugins. So kann ein neuer Webauftritt für ein weiteres Velo-Event einfach mit dem gleichen "Baukasten" durch Cycling Unlimited erstellt werden. Für die visuelle Anpassung an den jeweiligen Event stehen die nötigen Einstellungsmöglichkeiten zur Verfügung.
Das multifunktionale WordPress-Theme wird durch den Kunden selbständig für weitere Events angepasst. Dabei müssen lediglich Brand-Angaben (Farben, Logos usw.) hinterlegt und die gewünschten Bausteine aktiviert werden und schon kann das multifunktionale Theme für eine weitere Website in neuem Look verwendet werden. Dies führt zu einer grossen Kosteneinsparung.
Erweiterungen wie z.B. das Hinzufügen von neuen Bausteinen oder auch das Fixen von Bugs stehen dann allen Webauftritten auf dieser Basis zur Verfügung.
Nebst den inhaltlichen Bausteinen stehen auch diverse Funktionen zur Verfügung:
- Lokale Lösung um Ads auf der Website auszuspielen (zufällig mit Gewichtung) inklusive Tracking via Google Anayltics und Abschaltung nach bestimmter Anzahl Ausstrahlungen. Das Ganze wurde natürlich so konzipiert, dass die Website trotz zufälliger Ausspielung vollständig via Cloudflare gecached werden kann.
Ziel ist es, nicht nur Zeit zu sparen und die Performance zu verbessern, sondern auch die Kosten auf unsere Veranstaltungen zu verteilen.
Zugeschnittene Verwaltungslösungen
Durch das auf den Kunden zugeschnittene WordPress-Backend kann die modular aufgebaute Website vom Kunden selbstständig und flexibel bearbeitet und erweitert werden.
Flexibel und trotzdem einfach
Dank der 40+ sich nach dem Konzept gerichteten Bausteinen, können Inhalte auf konsistente, einfache und effiziente Weise eingegeben und bearbeitet werden. Nebst den typischen Standardbausteinen stehen unzählige weitere spezifische Bausteine und Verwaltungslösungen bereit, sodass alle Bedürfnisse einer Velo-Event-Website abgedeckt werden: Countdown, Etappen, News, Fahrer, Teams, Sponsoren, Partner usw.
Durch den Einsatz moderner Technologien wie z.B. Container-Queries wird die Komplexität für den CMS-Benutzer stark reduziert, da die Bausteine sich selbständig an die Umgebung anpassen.
Massgeschneidert
Für die Verwaltung von Inhalten, die ein fixes Format oder eine damit verknüpfte Funktionalität haben, wurden spezifische Module und Verwaltungsoberlächen entwickelt. So können z.B. Etappen, Etappenorte, Fahrer, Teams, Sponsoren, Partner usw. einfach und effizient verwaltet und miteinander verknüpft werden. Das Frontend weist automatisch die korrekten Verknüpfungen auf und zeigt die Inhalte in der gewünschten Form an.
Seitenbereiche
Für die redundanzfreie Verwaltung von Seitenbereichen (bei der Tour de Suisse sind das z.B. die Bereiche für Männer und Frauen), wurde ein Konzept ausgearbeitet, das es erlaubt, Seiten in verschiedenen Bereichen einzuklinken und so Inhalte nur einmal zu pflegen, auch wenn darin z.B. Bereichs-spezifische Links auf Unterseiten vorkommen. Solche Links werden nämlich automatisch auf die entsprechende Seite im richtigen Bereich durch das System angepasst.
Es können beliebig viele (oder keine) Seitenbereiche definiert werden. Je nachdem, was für den entsprechenden Webauftritt benötigt wird.
Etappenorte
Für die Verwaltung der Etappenorte wurde eine isolierte zweite WordPress Installation eingeführt. Das Besondere hier ist, dass die jeweiligen Ortschaften selbstständig ihr eigene Etappenort-Seite anpassen können.
Technology
- Deklarariv anlegen (UI im Backend innert wenigen Minuten)
- Konsistenz der Editing experience
- Trennung von DAten und Ausgabe
- Kein HTML Editing, sondern JSON Tree (machschinen-lesbar)
Performance & Verfügbarkeit
Die Tour de Suisse stellt besondere Anforderungen an die Performance resp. Verfügbarkeit der Website, da der Grossteil der gesamten Websiteaufrufe in extremen Lastspitzen erfolgt. Zum Beispiel dann, wenn der oder die erste Fahrer:in ins Ziel kommt. Dann müssen schon mal 15'000 Requests pro Sekunde abgehandelt werden.
Die gesamte Website ist cachebar, damit sie über CloudFlare ausgeliefert werden kann. Im Vergleich zu früheren Websites konnten so bis zu 90% der Infrastrukturkosten eingespart werden. Dynamische Teile wie z.B. die mit gewichteter Zufälligkeit ausgespielten Werbeanzeigen, wurden entsprechend Caching-kompatibel implementiert.
Cloudflare wurde in das WordPress Backend integriert, sodass der Cloudflare Cache nach inhaltlichen Anpassungen bequem für die gewünschten Seiten geleert werden kann (ohne sich separat ins Cloudflare einzuloggen, um dort den Cache zu leeren). So wird die Belastung auf den eigentlichen Webserver so weit wie möglich reduziert.
Saubere Datenschutzlösung
Inhalte für die keine entsprechende Benutzer-Erlaubnis vorliegen, sind standardmässig blockiert und werden als Platzhalter angezeigt. Im vergleich zu herkömmlichen Plug-and-Play Lösungen, bei denen einfach ein externes Script eingebunden wird, werden Datenschutzrelevante Stellen im Quelltext vor der Übertragung an den Browser "entschärft". Mit dieser Lösung können beliebige externe Dienste erlaubt oder deaktiviert werden (auch kompliziertere Fälle, bei denen Skripte dynamisch von einem inline-Script injiziert wird usw.).
Mit diesem Tool können die jetztigen und auch die zukünftigen technischen Datenschutzanforderungen problemlos umgesetzt werden.
Summaries für die verschiedenen Kategorien
Productivity Technology