Neue Bestandskunden-Shops online
In den letzten Monaten haben wir die 1&1 Bestandskunden-Shops redesigned und auf eine neue technische Basis gestellt. Dabei wurde die Gelegenheit genutzt um neue Ansätze und Technologien in dieses Redesign zu integrieren. Das Ergebnis sind Webseiten, die modernste Frontend-Anforderungen erfüllen. Anhand von Screenshots möchte ich zeigen, welche Anforderungen das sind und wie sich diese auf die Qualität der Seiten auswirken.
Vereinheitlichte Elemente
Nahezu konsequent wurden für diese neuen Shops einheitliche Elemente verwendet, die sich lediglich in Hintergrundbildern und wenigen anderen Details unterscheiden. Dies ermöglicht den Einsatz von XSLT-Templates, welche mit wenigen Parametern immer gleiches Markup erzeugen. Das CSS für das Layout ist dabei denkbar schlank, da diese einheitlichen Elemente natürlich auch mit einheitlichen CSS-Regeln gestylt werden können.
Die Verwendung der XSLT-Templates, Scripte und Styles erstrecken sich modular über verschiedene Shops in unterschiedlichen Sprachen. Dabei wurde auf einen konsequenten Einsatz von UTF-8 geachtet.
Validierung und wenig Inline-Code
Sämtliche Seiten und Stylesheets validieren gegen die Regeln des W3C. Bei der Entwicklung wurde weiterhin darauf geachtet, möglichst wenige Inline-Styles und Inline-Events zu verwenden.
W3C Markup Validation Service
Firefox-Extension Inline Code Finder
Semantisches Markup und Accessibility
Für die Elemente der Seite wurde semantisch sinnvolles Markup gewählt. Weiterhin wurde auf eine durchgängige Headline-Hierarchie geachtet. Da die Shops JavaScript voraussetzten und massiv von AJAX Gebrauch machen, werden interaktive Zustände über WAI-ARIA-Attribute kommuniziert. Dies alles stellt eine größtmögliche Zugänglichkeit sicher. Die nachfolgenden Screenshots zeigen die Seite in unterschiedlichen Darstellungen - darunter eine kontrastreiche Darstellung, eine Darstellung auf einem Mobilgerät und die Ansicht des Markups ohne Stylesheets.
Wenige Probleme werden von der Firefox Accessibility Extension gefunden
Eine kontrastreiche Darstellung mit Hilfe der Firefox Accessibility Extension
Mobile Ansicht der Seite
Ansicht ohne Styles mit der Web Developer Extension
Headline-Hierarchie, wie sie von Screenreader genutz wird (Web Developer Extension)
Optimierte Ladezeiten
Eine weitere Maßnahme war die Optimierung der Ladezeiten der Seiten. Der nächste Screenshot zeigt eine Analyse mit der Firefox-Extension YSlow - bis auf wenige Kriterien zeigt die Analyse beste Bewertungen.
Interaktive Elemente
Als JavaScript-Framework wird qooxdoo genutzt. Neben DOM-Manipulationen und Event-Listening wurden damit auch komplexe Interaktions-Elemente wie Lightboxen oder Auto-Vervollständigungen umgesetzt.
