Die Seite
Link: www.sgr-regensburg.de
Fertigstellung: März 2009
Der Inhalt
Auf den Seiten der Segelsportgemeinschaft Regensburg finden sich Neuigkeiten des Segelclubs, Bilder- und Videogalerien, Infos zu Terminen und Regatten, Onlineanmeldeplattform für Vereinsevents, uvm.
Die Technik
Auf der Startseite befindet sich nun meine PS Image Gallery. Die Anzeige der Vorschaubilder wurde deaktiviert.
Die Anzeige der weiteren Bilder in den Galerien wird über ein jQuery-Lightbox-PlugIn von Leandro Vieira Pinho realisiert, Videos laufen mit dem Flowplayer bzw. auf YouTube.
Zur Navigation dient weiterhin mein CSS Dropdown Menü. Im Kopfbereich der Seiten ist ein Countdown bis zur nächsten Veranstaltung der SGR eingebaut. Bei deaktiviertem JavaScript ist wie bisher ein PHP-Fallback vorhanden. Neu ist auch der RSS-Feed, welcher dynamisch per PHP/MySQL aktualisiert wird.
Für kürzere Ladezeiten der Seiten wird die Nummer des auf der Startseite zufällig generierten Hintergrundbildes in einem Cookie gespeichert. Das Bild wird dann beim Betreten weiterer Seiten aus dem Cache des Browsers geladen.
Das Backend der Seite wurde komplett neu programmiert. Eine durchdachte Datenbankstruktur vereinfacht das Einpflegen von neuen Inhalten deutlich. Auf ein großes CMS wie etwa Wordpress, Joomla oder TYPO3 wurde auch mit Hinblick auf die Seitenperformance verzichtet.
Stolz bin ich auf die Online-Anmeldeplattform. Sie ist eine echte Webapplikation. Die Eingaben der Formulare werden per JavaScript live-validiert und beim Absenden nochmals serverseitig durch PHP geprüft. Es gibt eine Teilnehmerliste und korrekt ausgefüllte Formulare werden per PHP-Mailer an den User und die Organisatoren des Events versendet. Zusätzlich gibt es noch einen RSS-Feed, der über die aktuellen Anmeldungen informiert. Und alles ist auf einer Single-Page vereinigt. Trotzdem kann mit den Browserbuttons "Vorwärts" und "Zurück" navigiert werden. Möglich macht es der Einsatz von Hash-Tags gepaart mit der Überwachung der Adresszeile durch JavaScript.
Im Bereich SGR on Tour können zusätzliche Information über eigens gestaltete Popup-Fenster, die per AJAX nachgeladen werden, eingesehen werden. Für im Browser deaktiviertes JavaScript ist ein Fallback eingebaut.
User, welche mit einem veralteten Internet Explorer (kleiner gleich Version 7) auf der Seite unterwegs sind, werden auf die Aktualisierung ihres Browsers hingewiesen. Die Webseite ist leider erst mit Internet Explorer 8 oder höher kompatibel. Bei deaktiviertem JavaScript wird ebenso eine dezente Warnung ausgegeben.
Auch für Smartphone- und Tablet-Nutzer wurde die Seite weiterentwickelt. Als Lesezeichen auf dem Homebildschirm eines Smartphones oder Tablets wird nun das SGR-Logo angezeigt. Die verbesserte Performance der Seite wirkt sich bei langsamen Internetverbindungen positiv auf das Benutzererlebnis aus. Auf ein extra Design vergleichbar dessen einer App wurde auf Grund des Arbeitsaufwandes und der als gering erachteten Nutzung der Seite durch Smartphone-User verzichtet.
Des Weiteren habe ich im SGR Layout gestaltete HTTP-Fehlerseiten entworfen und verknüpft. Es kann ja durchaus vorkommen, dass sich ein User mal verirrt.
Die Performance
Durchschnittliche Bewertung von Yahoo's YSlow (3.1.4 - Rulesets YSlow(V2)): A Performance Score 92
Bei der Überarbeitung habe ich ein besonderes Augenmerk auf die Performance gelegt. Dafür habe ich den kompletten JavaScript Code verbessert und in einer Datei abgelegt. Diese ist wie die CSS-Datei für das Layout minifiziert worden und nach dem Prinzip "CSS at top" und "JavaScript at bottom" in das HTML-Dokument eingebunden. Um nun die Anzahl der HTTP-Requests weiter zu senken, sind kleine Bilder, wie z.B. Icons, in sogenannten Spritesheets vereinigt. Dazu kommt dann noch die Optimierung der Dateigrößen aller Bilder. Im Bereich SGR on Tour werden die Popup-Fenster per AJAX nachgeladen. All das zusammen und noch weitere kleine Performance-Tricks ergeben dann die beste Performance-Stufe in Yahoo's YSlow, nämlich A.
Eine weitere Steigerung des Performance-Scores wäre noch mit der serverseitigen Aktivierung der gzip-Kompression, um alle an den Browser zu übermittelnden Dateien noch kleiner zu machen, möglich. Diese Aktivierung hat aber bisher leider (noch) nicht geklappt.
Die Webtechnologien
- HTML5
- CSS3
- PHP
- MySQL
- AJAX
- jQuery
Die Zukunft
- PS Image Gallery zusätzlich zur Lightbox in allen Bildergalerien
- Web-Interface zum Eintragen von Neuigkeiten
