e=css²

Doctype

ungültig

gültig

Tabellen

49 Stück
bis zu fünffach verschachtelt
überladen mit redundanten Attributen

4 Stück
nur einfach verschachtelt
keine redundanten Attribute

Quellcode

38 Kb (ohne Images)
850 Zeilen
unstrukturiert (schwer lesbar)
unkommentiert

16 Kb (ohne Images)
320 Zeilen
sauber strukturiert (besser lesbar)
kommentiert

Hochgerechnet auf 120 Content-Seiten ergibt sich folgendes:
1.8 Mb statt 4.6 Mb primärer Quellcode;
480 statt 5.880 zu rendernde Tabellen bzw.
38.400 kommentierte statt 102.000 unkommentierte Zeilen Code.

Das Hauptmenü

7.5 Kb
180 Zeilen
Javascript
Blind_GIFs
wirre Tabellen
wenig Kontrast

1.3 Kb
17 Zeilen
kein Javascript
keine Blind_GIFs
saubere Liste
mehr Kontrast

Die Farbgebung der Links wurde kontrastreicher gestaltet, um Menschen mit Fehlsichtigkeit (zum Beispiel Rot/Grün-Schwäche = 10% aller deutschen Männer) bessere Lesbarkeit zu bieten.

Javascript

PopUp-Fenster funktionieren nicht bei deaktiviertem Javascript.
Auch die Hover-Effekte im Hauptmenü sind wirkungslos.

Bei deaktiviertem Javascript öffnet sich alternativ ein neues Browserfenster.
Hover-Effekte im Hauptmenü stattdessen per CSS geregelt.

Diese Maßnahme bewirkt weiterhin, daß der Link zum neuen Fenster in der Statuszeile angezeigt wird. Dies ist aussagekräftiger als die lapidare Anzeige "javascript:;"

Images

Der Code ist durchsetzt mit Blind_GIFs und Navigations-Grafiken ('Pfeile').

CSS-Anweisungen statt Blind_GIFs, Navi-Pfeile ausgelagert (CSS).

Im Quellcode befinden sich nur noch Referenzierungen auf produktbezogene Images. Dies erhöht die Übersichtlichkeit und verringert Fehlerquellen bei der Referenzierung.

CSS

Das vorher angelegte CSS ist rudimentär und notiert fast ausschließlich Farbzuweisungen.

Konsequente Nutzung von CSS verschlankt den Quellcode und reduziert Redundanzen.

Schriftbild

Diffuses Schriftbild durch zu geringe Zeilenhöhe und zu helle Farbe; zu wenig Kontrast bei Linkfarben; unstrukturierte Überschriften; Auszeichnung in 'PX' nicht skalierbar.

Besser lesbares Schriftbild mit größerer Zeilenhöhe; mehr Kontrast für Links; klar strukturierte Überschriften (visuell und semantisch); Auszeichnung in '%' skalierbar.