Modernes Webdesign
Ich habe versucht, auf diesen Seiten verschiedene Prinzipien modernen Webdesigns nicht nur umzusetzen, sondern ihre Vorzüge auch anhand von Beispielen zu demonstrieren. Zu den Merkmalen modernen Webdesigns gehören:
Trennung von Inhalt und Form
Die Inhalte sind in HTML-Dateien enthalten, das Aussehen wird mit Hilfe von Cascading Style Sheets (CSS) festgelegt. Durch die strikte Trennung des Inhalts von der Art und Weise, wie die Inhalte dargestellt werden, werden mehrere Ziele erreicht:
- Inhalte und Design sind getrennt voneinander leichter zu bearbeiten.
- Das Aussehen für verschiedene Ausgabemedien (z.B. Bildschirm vs. Drucker) kann unterschiedlich gestaltet werden.
- Die Dateien sind weniger komplex und Redundanzen werden vermieden, was unter anderem auch zu verkürzten Ladezeiten und geringerem Datentransfervolumen führt.
Demonstriert wird diese Trennung hier durch:
- die unterschiedlichen verfügbaren Cascading Style Sheets, zwischen denen nahtlos jeweils im Fußbereich der Seiten gewechselt werden kann, sowie
- ein Beispielprojekt, an dem im Rahmen einer Neugestaltung die Verbesserungen aufgezeigt werden können.
Semantisches Markup
Die Inhalte der HTML-Dateien, aber auch die verschiedenen Formatierungen in den CSS-Dateien sind anhand ihrer Beziehungen zueinander gekennzeichnet. Die Kennzeichnung bildet damit die Bedeutung der einzelnen Seitenbestandteile ab und ist nicht durch andere Aspekte wie die räumliche Anordnung oder das Aussehen bestimmt.
Eine konsequente Umsetzung dieses Prinzips bringt mehrere Vorteile mit sich:
- Die Darstellung wird unabhängiger von den jeweiligen Bedingungen auf Seiten der Nutzer
- Die Seiten sind von Computern (wozu auch Suchmaschinen und Sprachbrowser z.B. für blinde Nutzer gehören) leichter zu interpretieren. Das führt zu größerer Zugänglichkeit für Nutzer und für Suchmaschinen.
- Der Code ist auch von Menschen leichter zu lesen und zu verstehen.
Demonstriert wird dieses Prinzip hier mit Hilfe der unterschiedlichen vorhandenen Designs:
- Während die Darstellung verschiedener Seitenbestandteile abweichend gestaltet ist, bleibt die Bedeutung der einzelnen Bereiche gewahrt.
- Insbesondere bei der "nackten" Variante, die auf die vom jeweiligen Browser vorgegebene Formatierung zurückgreift, kann man sehen, dass die Darstellung der einzelnen Seitenbestandteile ihre Bedeutung widerspiegelt. Die Seiten bleiben auch ohne umfassende visuelle Gestaltungsmöglichkeiten lesbar und übersichtlich.
