www.e-workers.de
Web- und Screendesign ohne Barrieren

ungültig

gültig

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

4 Stück
nur einfach verschachtelt
keine redundanten Attribute

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

16 Kb (ohne Bilder)
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.

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 (z.B. Rot/Grün-Schwäche = 10% aller deutschen Männer) bessere Lesbarkeit zu bieten.

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:;«

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.

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

Konsequente Nutzung von CSS verschlankt den Quellcode und reduziert Redundanzen.

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.