Zwei Jahre sind seit dem letzten größeren Update vergangen, seit gestern ist nun die neue Website der Schwenninger Wild Wings online. Technisch basiert die Site weiterhin auf dem Open Source CMS Typo3. In der täglichen redaktionellen Arbeit hat sich Typo3 bewährt, das System läuft stabil und die x selbst-entwickelten oder zumindest angepassten Erweiterungen wären eine Menge Migrations-Holz. Ausserdem haben wir mit Matthias eine ausgewiesene Koryphäe der Typo3 Administration in unseren Reihen.
Was sich geändert hat ist das Layout der Site. Und damit meine ich nicht einfach nur das „Aussehen“, das Design der Seite. Denn, seien wir ehrlich, ob die Boxen mit Ergebnissen, Tabelle etc links oder recht angeordet sind, interessiert Otto-Normalfan herzlich wenig. Trotzdem war es an der Zeit für einen Frühjahrsputz. Im Laufe der Zeit altert vor allem die Startseite einer Webpräsenz merklich. Inhalte ändern sich, passen nicht mehr ins ursprünglich geplante Raster, neue Inhalte müssen meist quick and dirty eingebaut werden (Nach dem Motto „kannsch mol schnell…“). All das führt zu einem unruhigen Seitenaufbau und ist der Übersichtlichkeit wenig zuträglich.
Das neue Layout greift zwar die bisherigen Elemente (Sidebar-Boxen, News-Ticker, Quicklinks) auf, wirkt aber deutlich ruhiger und übersichtlicher. Als Key-Visual wird nun auch online die von einem Schlagschuss zersplitterne Eisfläche verwendet, die auch schon auf Spielplakaten, der Stadionzeitschrift etc verwendet wird.
Was aber wirklich neu ist, spielt sich unter der Haube ab. Das neue Layout basiert auf dem kommenden Webstandard HTML5 und ist „responsive“ angelegt.
Was bedeutet das nun? Zum ersten bedeutet es, dass ältere Browser (vor allem Internet Explorer 6 und 7) in die Röhre schauen. Diese Browser sind technisch nicht in der Lage, den neuen Standard korrekt umzusetzen. Die Seite bleibt zwar benutzbar, aber nicht in vollem Umfang.
Dieser Schritt ist mehr als nur konsquent. IE6/7 sind über Jahre alt und sollte definitv von niemanden mehr verwendet werden. Selbst Microsoft rät mittlerweile von deren Benutzung ab. Trotzdem verwenden laut Statistik noch ca 3% der Besucher von wildwings.de diese alten Browser.
Und „responsive“? Dieses Buzzword taucht momentan im Bereich der Webentwicklung an jeder Ecke auf. Jede Website MUSS unbedingt und ohne wenn und aber nicht nur „responsive“ sein, sondern am „responsivsten“. Ansonsten kannst du einpacken.
Spass beiseite, „responsive“ bedeutet einfach, dass sich ein Seitenlayout an das darstellende Medium anpasst. Bis vor kurzer Zeit gab es nur Desktop-Rechner, meist mit einer Bildschirmauflösung von 1024×768 Pixel. Dort musste die Website gut aussehen, alles andere war egal.
Mittlerweile gibt es Smartphones, Tablets, Retina Displays und jeden Tag kommen neue Geräte hinzu. Und natürlich soll eine Website auch überall zumindest benutzbar sein, am besten auch toll aussehen – und mit eben diesem HTML5 gibt es jetzt auch das entsprechende Werkzeug dafür.
Auf wildwings.de äussert sich das wie folgt: bei großer Auflösung (> 1024px) erscheint das Key-Visual („der Puck“) als großflächiges Hintergrundbild, bei kleineren Auflösungen wird es in der Header-Grafik und der Fusszeile der Seite integriert. Und schrumpft die Auflösung unter 800 Pixel Breite werden die Boxen auf der linken Seite nach oben in den Hauptbereich geschoben. So bleibt die Site auf allen Medien les- und benutzbar.
Noch ist nicht alles perfekt, aber das Fundament für eine zukunftsfähige Site sind gelegt!