Layout und Design Checkliste

Layout und Web Design Checkliste

In meinen Anfängen im Jahr 2003 war es mir unwichtig, ob mein Layout und Web Design mit unterschiedlichen Internet Browsern oder auf anderen Betriebssystemen fehlerfrei dargestellt wird. Mit den Jahren sind Validität, Zugänglichkeit, Benutzerfreundlichkeit und Gebrauchstüchtigkeit immer wichtiger geworden. Selbst mit Erfahrung ist das bei der Vielseitigkeit der Internet Browser und den heutigen technischen Möglichkeiten im Internet nicht einfach umzusetzen.

Die Layout & Design Checkliste im Detail

  1. Trennung von Design und Inhalten
  2. Valides CSS/(X)HTML Markup
  3. Skalierbarkeit im Browser
  4. Unterschiedliche Browser und Betriebssysteme
  5. Selbsterklärende Inhalte und Navigation
  6. Zugänglichkeit und Benutzerfreundlichkeit
  7. CSS für das Drucken (Medium Papier)

1. Trennung von Design und Inhalten

Ist das Layout ohne CSS und Bilder/Grafiken logisch und strukturiert aufgebaut? Sind die Texte mit Überschriften und Absätzen im Design sauber gegliedert? Passen Schriftgröße und der Zeilenabstand auf der Web Site?

Testen kann man das mit folgenden Browsern:

  • OffByOne Browser unter Microsoft Windows
  • Dillo Browser unter Linux
  • Lynx Browser unter Linux und MacOS

2. Valides CSS/(X)HTML Markup

Entspricht das CSS /(X)HTML den Empfehlungen des W3C?

CSS/(X)HTML Validatoren

3. Skalierbarkeit im Browser

Ist der Inhalt lesbar und die Navigation immer erreichbar, auch wenn man die Größe des Browserfensters ändert oder eine Verlauf-Sidebar einblendet? Muss man horizontal Scrollen um alles lesen zu können? Wie verhält sich das Layout und Design der Website bei der Textzoom Funktion eines Internet Browsers?

Beispiele für verschiedene Bildschirmauflösungen

  • 1024x768
  • 1280x1024
  • 1680x1050
  • 1024x600/1366x768 (Netbook Bildschirme)
  • 1280x800/1440x900 (Laptop Wide Screen)
  • Kleinbildschirme bei Mobile Phone und PDA
  • MultiMedia TV Auflösungen
  • Spielekonsolen wie Playstation und Nintendo

Sind die Inhalte weiterhin lesbar und die Navigation erreichbar, wenn man unter Linux, Mac OS oder Windows zwischen normaler Schrift (96dpi) und großer Schrift (120dpi) wechselt? Entstehen Lücken oder ungewollte Textbrüche im Web Layout?

4. Unterschiedliche Browser und Betriebssysteme

Wie verhält sich das Seiten-Layout oder -Design, wenn man unterschiedliche Internet Browser auf verschiedenen Betriebssystemen verwendet (zum Beispiel die CSS-Unterstützung)?

Oft verwendete Internet Browsern

Browser Name Betriebssystem Plattform
Internet Explorer Microsoft Windows, IE 5 auch auf Mac OS
Mozilla Firefox viele Betriebssysteme, auch auf mobilen Geräten
Google Chrome Linux, Mac OS und Windows
Safari Mac OS und Windows, auch auf mobilen Geräten mit iOS
Opera viele Betriebssysteme, auch auf mobilen Geräten
Netscape/SeaMonkey Linux, Mac OS und Windows
Konqueror Linux, nur auf Systemen mit KDE

Ist die eingesetzte Web Schriftart auf allen Betriebssystem Plattformen verfügbar und werden Texte mit Umlauten oder Sonderzeichen korrekt dargestellt?

5. Selbsterklärende Inhalte und Navigation

Sind die Inhalte einfach und verständlich geschrieben? Sind die Navigationspunkte selbsterklärend und ist die gesuchte Information ohne langes Suchen auffindbar?

6. Zugänglichkeit und Benutzerfreundlichkeit

Können Menschen mit Behinderungen dieses Seitenlayout ohne Barrieren nutzen?
Ist genügend Kontrast für Menschen mit einer Farb-/Sehschwäche vorhanden?
Kann man sich diese Inhaltsseite durch ein Bildschirmlesegerät vorlesen lassen?
Ist die Website gut mit, aber auch ohne Maus bedienbar?
Kann man alle Navigationselemente und Links über Tastatur erreichen?

7. CSS für das Drucken

Wenn das Seitenlayout gedruckt werden soll, wird dann nur der Inhalt gedruckt oder auch Navigation, Werbung und die Auszeichnungen mit den <acronym>- und <abbr>-(X)HTML Tags?

Weiterführende Links:

Nach oben

 

Nach oben