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.

Responsives Design

Anordnung und Gestaltung der einzelnen Elemente der Website sind darauf ausgelegt, dass die Darstellung der Website auf die Anforderungen unterschiedlicher Endgeräte (Computer, Tablet, Smartphone) angepasst ist.

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 Designvarianten:

  • 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.

Weiterführende Links: