Layout Checkliste
In meinen Anfängen im Jahr 2003 war es mir unwichtig, ob mein Layout mit unterschiedlichen Internet Browsern oder auf anderen Betriebssystemen fehlerfrei dargestellt wird. Heute spielen Zugänglichkeit und Benutzerfreundlichkeit eine sehr große Rolle, wie auch die Vielseitigkeit und neuen Möglichkeiten im Web.
Howto: Layout Check
- Trennung von Design und Inhalten
- Valides CSS/(X)HTML Markup
- Skalierbarkeit im Browser
- Unterschiedliche Bildschirmauflösungen
- Unterschiedliche Browser und Betriebssysteme
- Selbsterklärende Inhalte und Navigationen
- Zugänglichkeit und Benutzerfreundlichkeit
- 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 sauber geliedert?
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?
3. Skalierbarkeit im Browser
Ist der Inhalt lesbar und die Navigation erreichbar wenn man die Größe des Browserfensters ändert oder eine Verlauf-Sidebar verwendet? Passt das Design noch in das Browserfenster oder ergeben sich Verschiebungen bei den Grafiken und Seitenlayout?
Sind die Inhalte weiterhin lesbar und die Navigation erreichbar, wenn man unter Windows zwischen normaler Schrift (96dpi) und großer Schrift (120dpi) wechselt?
4. Unterschiedliche Bildschirmauflösungen
Ist der Inhalt lesbar und die Navigation erreichbar wenn man unterschiedliche Bildschirmauflösungen verwendet? Erscheinen horizontale Scrollbalken um die Seiteninhalte zu lesen?
- 800×600
- 1024×768
- 1280×800/1440×900 (Laptop Wide Screen)
- 1280×1024
- 1600×1200
- Kleinbildschirme bei Mobile Phone und PDA
- MultiMedia TV Auflösungen
- Spielekonsolen wie Playstation und Nintendo
5. Unterschiedliche Browser und Betriebssysteme
Wie verhält sich das Seitenlayout, wenn man unterschiedliche Browser auf verschiedenen Betriebssystemen verwendet (CSS-Unterstützung)? Ist die eingesetzte Schriftart verfügbar und werden Texte mit Sonderzeichen korrekt dargestellt?
- Microsoft Internet Explorer (Windows)
- Firefox (viele Betriebssysteme)
- Opera (viele Betriebssysteme)
- Safari (Mac OS und Windows)
- Google Chrome (Linux, Mac OS X und Windows)
- Seamonkey (Linux, Mac OS X und Windows)
- Konqueror (Linux mit KDE-Desktop)
6. Selbsterklärende Inhalte und Navigationen
Sind die Inhalte einfach und verständlich gehalten, stimmt die Schriftgröße und der Zeilenabstand? Sind die Navigationspunkte selbsterklärend und ist die gesuchte Information ohne langes Suchen auffindbar?
7. 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 dieses Seitenlayout durch ein Bildschirmlesegerät vorlesen lassen? Ist die Webseite gut mit, aber auch ohne Maus bedienbar, kann man alle Navigationselemente und Links über Tastatur erreichen?
8. CSS für das Drucken
Wenn das Seitenlayout gedruckt werden soll, wird dann nur der Inhalt gedruckt oder auch Navigationen, Werbung und die Auszeichnungen mit den <acronym>- und <abbr>-(X)HTML Tags?
Im Idealfall sollte dies über eine zusätzliche CSS-Datei für das Drucken entsprechend geregelt werden. Auch sollten die Auszeichnungen mit den <acronym>- und <abbr>-(X)HTML Tags für den Druck aufgehoben werden, da diese auf dem Papier fälschlicherweise für Links gehalten werden können.
Weiterführende Links:
Letzte Überarbeitung: 13. Mai 2010
Konzept: