Webdesign nach Webstandards

Webstandards - mehr Effizienz durch standardkonformes Webdesign

Es zieht sich wie ein roter Faden durch diese Webseiten zum Thema Webpräsenz - der Hinweis auf Webstandards bzw. standardkonformes Webdesign und die damit verbundenen Vorteile (für alle). Da dieser Ratgeber aber für Betreiber von Webangeboten und nicht für Webdesigner und Webentwickler gedacht ist, werde ich versuchen, dieses Thema möglichst »untechnisch« zu behandeln. Als Auftraggeber und/oder Betreiber einer Website ist es sicherlich von Vorteil, grundsätzlich zu wissen, was man grob unter Webstandards zu verstehen hat. Ob Sie nun aber auch genau wissen müssen, was unter semantischem Markup, wohlgeformtem und validem (X)HTML-Code und CSS genau zu verstehen ist … ? Ich denke, das würde zu weit führen.

Altes und neues Webdesign

Die treffendere, aber zu lange Überschrift müsste eigentlich lauten: die klassische, historisch gewachsene Art des Webdesigns und die moderne, zukunftsorientierte Art standardkonformen Webdesigns.

Die klassische Art des Webdesigns

Auch heute noch werden viele, wenn nicht gar die meisten Internetseiten mit unsichtbaren Tabellen-Layouts erstellt. Diese Tabellen dienen ausschließlich der Positionierung der Elemente und Inhalte einer Webseite. Dabei wird jeder einzelne Bestandteil einer jeden Seite (alle Textelemente, alle Grafiken) separat definiert. Wieder und wieder werden z. B. für jeden Textabschnitt Schriftart, -größe, -farbe, -ausrichtung etc. festgelegt. Das Erscheinungsbild der gesamten Website muss auf jeder einzelnen Webseite explizit festgelegt werden. Man kann sich leicht ausmalen, was es bedeutet, auf einer zig oder gar hunderte Seiten umfassenden Website ein paar seitenübergreifende Änderungen bzgl. des Designs vornehmen zu wollen.

Standardkonformes Webdesign (= Webdesign nach Webstandards)

Ein Internetauftritt nach den Vorgaben der gültigen Webstandards ist von dieser unglücklichen Vermischung von Inhalt und Design bereinigt. Externe und nur einmalig zu erstellende Stilvorlagen steuern das Layout einer Website zentral. Die einzelnen (X)HTML-Seiten beinhalten nur noch strukturierte Inhalte.

Was sind Webstandards ?

Webstandards sind Empfehlungen des W3C (World Wide Web Consortium) zur Standardisierung von Technologien zur Erstellung und Entwicklung von Webangeboten.

Es fällt auf, dass es sich bei diesen Webstandards lediglich um »Empfehlungen« handelt ohne gesetzlich vorgeschriebene Verbindlichkeit. Niemand muss sich also zwingend daran halten. Warum es sich dennoch lohnt, diese Empfehlungen zu befolgen, dazu kommen wir gleich.

Das W3C ist ein 1994 gegründetes und weltweit anerkanntes Gremium, das zahlreiche Techniken wie z. B. HTML, XML und CSS quasi standardisiert hat. Dennoch ist das W3C aber keine zwischenstaatlich anerkannte Organisation und somit auch nicht autorisiert, verbindliche Standards festzulegen. Aber dieses Gremium ist weltweit anerkannt und seine Empfehlungen gewinnen zunehmend an Bedeutung.

In aller Kürze nun ein Blick auf die Webstandards des W3C, die sich grob in folgende Anforderungen unterteilen lassen:

1. Trennung von Inhalt (Text) und Layout (optischer Gestaltung)
2. logische Strukturierung des Dokuments
3. fehlerfreie Umsetzung der verwendeten Technologien im Dokument

Ganz ganz knapp sollen diese 3 Anforderungen näher erläutert werden.

Trennung von Inhalt und Layout

Ein Webdokument solte logisch unterteilt sein in die

• zu transportierenden Informationen (Texte mittels HTML) einerseits
• und in die darstellende Form dieser Informationen (Gestaltung via CSS) andererseits.

Stellen Sie sich ein einfaches Textdokument vor, das Sie in einem Textverarbeitungsprogramm wie z. B. MS Word erstellen. Dort haben Sie den eigentlichen Inhalt (Text), den Sie in Absätze, Aufzählungen und diverse Überschriften unterteilen können. Zusätzlich stehen Ihnen noch verschiedene Formatierungsmöglichkeiten zur Verfügung (Formatvorlagen), mit denen Sie das Erscheinungsbild Ihres Dokuments steuern können. Sie legen damit Schriftarten, Schriftgrößen, Farben, Einzüge, Seitenränder, Zeilenabstände etc. für die verschiedenen Textelemente und auch Bilder fest.

Ähnlich verhält es sich mit einem Webdokument. Hier wird HTML für den reinen Text und die logische Unterteilung in Absätze, Überschriften, Aufzählungen, Hyperlinks etc. verwendet. Mittels Cascading Stylesheets (CSS) wird dann festgelegt, wie das ganze Dokument mit seinen einzelnen Textelementen und Bildern gestalterisch dargestellt wird. Ein Stylesheet ist also am ehesten mit einer Formatvorlage zu vergleichen.

So sollte es zumindestens sein. Aber - genauso wie bei einem Textdokument - sieht die Wirklichkeit leider oft anders aus. Wer kennt es nicht, dass in einem Word-Dokument unzählige Leerzeichen anstelle eines Einzuges verwendet werden? Entsprechend wurden und werden in HTML-Dokumenten z. B. Tabellen zweckentfremdet als Stilmittel für das Layout benutzt. Und das ist kein standardkonformes Webdesign (mehr).

Die logische Strukturierung eines Webdokuments

Das Webdokument sollte inhaltlich (die Betonung liegt auf »inhaltlich«) logisch strukturiert sein. D.h. eine Überschrift ist eine Überschrift und nicht eine fett ausgezeichnete Textpassage eines Absatzes. Eine Tabelle sollte Daten tabellarisch aufbereiten und nicht zur Gliederung des Layouts verwendet werden. Werden diese Vorgaben eingehalten, so behält das Dokument schlicht und ergreifend seine inhaltliche Struktur.

Die fehlerfreie Umsetzung von HTML und CSS

Im Fachjargon spricht man hier von validem und semantisch korrektem Markup, was tatsächlich nichts anderes bedeutet, als die fehlerfreie Umsetzung der verwendeten Technologien - also (X)HTML und CSS. Inhaltliche Rechtschreibefehler sind damit nicht gemeint. Nur fehlerfreie und sinnvoll strukturierte Webseiten garantieren auf allen Browsern und Ausgabegeräten die Verfügbarkeit und Funktionsfähigkeit Ihres Webangebotes.

Die Vorteile von Webstandards

Webdesign nach Webstandards bietet viele Vorteile. Viele Webdesigner sehen das zwangsläufig nicht so, da so manch einer sich dazu von gewohnten und liebgewonnenen Arbeitstechniken verabschieden und grundlegend umdenken müsste. Aber das soll und darf ja nicht Ihr Problem sein. Aus unternehmerischer Sicht des Betreibers überwiegen eindeutig die Vorteile standardkonformen Webdesigns.

• Plattformunabhängigkeit und Browserkompatibilität:
  Da auch die Hersteller von Browsern und Endgeräten (ausser PC's gibt es ja noch diverse mobile Endgeräte etc.) die Empfehlungen des W3C beachten, erreichen Sie automatisch mehr Menschen. Auch zukünftige Webbrowser werden mit hoher Wahrscheinlichkeit Ihre Seiten vernünftig darstellen, ohne dass ständig kostenintensiv nachgebessert werden muss.
• Unterstützung verschiedener Ausgabemedien:
  Die empfohlene Trennung von Inhalt und Gestaltung ermöglicht es, mit relativ wenig Aufwand ein Webangebot an verschiedene Ausgabemedien anzupassen. So lässt sich z. B. das Layout einer Website für den Druck unabhängig von der Bildschirmausgabe festlegen. Und Sie haben sich doch bestimmt auch schon mal darüber gefreut, wenn eine interessante Webseite im Ausdruck ein vernünftiges, lesbares Erscheinungsbild ohne störende Navigations- und Stilelemente liefert?
• Pflege, Erweiterbarkeit, Flexibilität und Kosten:
  Auch hier zahlt sich die Trennung von Inhalt und Design aus. Bestehende Webseiten können durch Änderungen in einem zentralen Stylesheet seitenübergreifend geändert werden, ohne dass alle Seiten einzeln »angefasst« werden müssen. Die Website lässt sich um zusätzliche Seiten mit wenig Aufwand erweitern - das Layout wird quasi einfach übernommen. Die Zeit und damit auch die Kosten zur Pflege einer bestehenden Website werden durch Webstandards merklich minimiert. Und: Webstandards ermöglichen die längste »Lebensdauer« Ihrer Webseiten, da auch zukünftige Geräte und Browser diese gemeinsame Basis unterstützen werden und Ihre Seiten damit kompatibel bleiben.
• Suchmaschinenoptimierung von Haus aus:
  Suchmaschinen sind quasi blind für die gestalterischen Elemente einer Webseite. Und da die Formatanweisungen dank CSS ausgelagert sind, gewinnt der rein inhaltliche Anteil einer HTML-Seite an Gewicht. In Kombination mit der logischen Srukturierung des Dokuments (Überschriften, Absätze, Aufzählungen, Hyperlinks etc.) wird das Suchmaschinenranking automatisch verbessert.
• Optimale Bandbreite und schnellerer Download:
  Standardkonforme Webseiten sind vergleichsweise kleiner, da Ihr Quellcode von gestalterischen Anweisungen bereinigt ist (die befinden sich ja in einer zentral genutzen, externen CSS-Datei). Dadurch wird kostenpflichtiger Datentransfer beim Provider reduziert, die Webseiten werden schneller geladen und zügiger im Webbrowser dargestellt.

Webdesign nach Webstandards bietet also nur Vorteile? Meiner Meinung nach schon. Allerdings sollte man sich von dem Ziel verabschieden, eine Website auf allen erdenklichen Ausgabemedien pixelgenau exakt gleich darstellen zu wollen. Die Botschaft (also der Inhalt) einer Webseite und deren Zugänglichkeit und Bedienbarkeit stehen im Vordergrund standardkonformer Websites. Das mag so manchem detaillverliebten Designer oder gar Künstler nicht unbedingt gefallen.

Kontrollmöglichkeiten für standardkomformes Webdesign

Wie kann ich denn nun - auch als Laie - erkennen, ob eine Webseite standardkonform aufgebaut ist ? Das W3C bietet dazu auf seinen Seiten einen Online-Service, den jeder nutzen kann. Diese Überprüfung auf korrekten Code der HTML-Syntax (Quellcode des Webdokuments) nennt man Markup-Validierung.

Und hier finden Sie den Markup Validation Service des W3C. Geben Sie einfach die vollständige Adresse der zu überprüfenden Webseite ein (inkl. http://www.) und betätigen Sie den Check-Button. Ein grüner Balken in der Ergebnisseite signalisiert Ihnen, dass die überprüfte Seite den Anforderungen des W3C entspricht.

Zur »Belohnung« darf auf dieser Seite dann ein entsprechendes Icon (eine kleine Grafik, s. links) eingebunden werden. Ist die Webseite nicht valide - d.h. sie hat den Test nicht bestanden - so erscheint ein nicht zu übersehender roter Balken. Der W3C-Validator ist dann noch so freundlich und liefert eine genaue Beschreibung der zu beanstandenden Passagen des Webdokuments.