Die Seite
Link: www.saar-mode-pelz.de
Fertigstellung: Juni 2012
Der Inhalt
Auf den Seiten von SAAR findet man Mode mit virtuellem Schaufensterbummel, die aktuelle Pelzkollektion, Aktionen des Hauses, Neuigkeiten von SAAR uvm.
Die Technik
Das Außergewöhnliche dieser Seite ist, dass der Inhalt der Seite nicht in einer (meistens 1000px breiten) Box eingezwängt ist, sich automatisch je nach Bildschirmauflösung zentriert und der linke bzw. rechte Teil neben der Box ohne Inhalt ist. Diese Seite verwendet stattdessen die Media-Query-Funktionalität von CSS3 um den Inhalt auf allen Bildschirmen unterschiedlichster Größen und Auflösungen optimal über die ganze Anzeigefläche zu verteilen. In Browsern, die keine CSS-Media-Queries kennen, wird das Layout der Seite mittels JavaScript korrekt umgesetzt.
Die Seite funktioniert trotz des starken Einsatzes von CSS3 in allen gängigen und auch älteren Browsern. Für Versionen kleiner 9 des Internet Explorers wurde ein externes Skript (CSS3 PIE) eingebaut, damit die neuen CSS3 Eigenschaften wie etwa border-radius oder box-shadow richtig angezeigt werden.
Der Inhalt der Seite kann dank einer einfachen Datenbankstruktur von den Mitarbeitern des Modehauses selbstständig aktualisiert werden.
Die Performance
Durchschnittliche Bewertung von Yahoo's YSlow (3.1.4 - Rulesets YSlow(V2)): B Performance Score 82
Ich habe die Anzahl der HTTP-Request für eine gute Performance der Webseite niedrig gehalten. "CSS at top" und "JavaScript at bottom" wurde natürlich (wie in allen meiner Webprojekte) auch beachtet. Außerdem sind alle von extern eingebundenen Dateien (JS und CSS) mit einem eigenen Tool minifiziert worden. Weiter wirkt sich der starke Einsatz von AJAX-Requests positiv auf die Ladezeiten der Seiten aus.
Die Webtechnologien
- HTML5
- CSS3
- PHP
- MySQL
- AJAX
- jQuery
