mileon.net - Webdesign. Heldenstyle.

Arbeit mit Semantik: sinnvoll und effizient

Dokumente aus Textverarbeitungsprogrammen wie Word sind Webdokumenten nicht unähnlich. Beide transportieren Inhalte, überwiegend in Textform, die strukturiert und formatiert sind. Die Frage ist nur wie.

Kennen Sie Formatvorlagen?

Sie sind seit unzähligen Versionen in zahlreichen Textverarbeitungsprogrammen Standard: Formatvorlagen. Und doch sehe ich kaum jemanden, der sie wirklich produktiv einsetzt.

Der gängige Weg, ein Dokument zu Formatieren läuft so: Text schreiben, mit mehreren Absätzen voneinander trennen (ggf. mit Tabs und Leerzeichen ausrichten) , Textteil für Textteil markieren und über die Formatierungsleiste vergrößern, fetten, Schriftart wechseln usw.

Daraus ergibt sich ein einigermaßen konsistentes Bild der Textdarstellungen, das eine gewissen Logik erahnen lässt. Das Problem ist nur: rein technisch steckt dahinter keine. Denn jeder Absatz enthält eine Fülle von Formatierungsinformationen, die für auch gleich aussehende Absätze wieder und wieder definiert werden. Gleiches gilt für alle anderen Elemente wie Überschriften, Listen, Aufzählungen, Tabellen.

Formatvorlagen bringen Logik in das Dokument: sie sind wie eine Art Klassenname, der den Elementen zugeordnet werden. Diese Zeile ist eine Überschrift 1. Grades steht dann als einzige Information an dem entsprechenden Element. Dass diese Überschrift 20pt groß, fett und dunkelblau sein soll, steht dort nicht - sondern im großen Pool der Formatierungsregeln. Die Formatvorlage Fließtext kann beispielsweise die Infos "Arial, 12pt, 1,5 Zeilen Abstand, schwarz, linksbündig" beinhalten. Absätze, die als Fließtext verwendet werden, erhalten die Info "Du bist ein Fließtext". Fertig.

### Riesenvorteil Übertragbarkeit

Was ist, wenn jeder Fließtext doch nicht in Arial, sondern in Verdana gesetzt sein soll? Formatierungsregel für "Fließtext" ändern - und glücklich sein. Sie erahnen die Effizienz von Formatvorlagen?

Rein theoretisch lassen sich so Dokumente erstellen, die nur noch aus Inhalt und Klassennamen bestehen - und mit dem Austausch der Formatierungsregeln völlig neue Layouts mit einem Klick entstehen lassen können. Plattformübergreifend.

Praktisch wird diese Technik im modernen Webdesign eingesetzt. Dort redet man von Klassen und Stylesheets.

### Trennung von Inhalt und Layout

Dieses Prinzip der Vergabe von Klassennamen und der Verwendung von Formatierungs- bzw. Gestaltungsregeln entspricht dem Übercredo der Webstandards: Trennung von Inhalt und Layout. Das hat nicht nur technische Vorteile (kleinere Dateien, weniger HTTP-Requests durch Caching der Stylesheets etc.) sondern erspart eine Menge Arbeit. Denn die Stylesheets, also das Gestaltungsregelwerk, gilt Dokumentübergreifend für alle zugeordneten Webpages einer Website - und wenn man will auch darüber hinaus. Was früher zu Schweißausbrüchen geführt hat, ist nun mit der Editierung einer einzigen Datei erledigt.

### Webseiten und Semantik

Die Auszeichnungssprache HTML ist von Grund auf mit semantischen Elementen bestückt. Das heißt, es gibt mehr als nur "frei" ausgedachte Klassen, sondern fest zu verwendende Elementnamen. Sie beschreiben die Semantik, also die inhaltliche Bedeutung eines Elements. Einige Standardelemente sind Überschriften, Absätze, Listen, Zitate.

Das geht über die Formatierungsregel hinaus: ein Element kann aussehen wie es will, solange es nur semantisch korrekt bezeichnet ist. Das hat den Vorteil, dass die Bedeutung auch bei fehlenden Gestaltungsregeln nicht verloren geht - und das Dokument immer strukturiert bleibt und jederzeit fehlerfrei gelesen werden kann. Denn: nicht das Layout oder das Format definiert die Logik und die Struktur des Dokuments, sondern die semantisch korrekt bezeichneten Elemente.

### Beweis gefällig?

Sie können die saubere Auszeichnung mit semantischen Elementen auch an dieser Website testen. Der folgende Link entfernt nämlich besagte Stylesheets. Was sie dann zu sehen bekommen, ist hauptsächlich Text, der aber immer noch sinnvoll und logisch strukturiert ist - auch mit Formatierungen, denn jetzt greift das Standard-Stylesheet Ihres Browsers, das immer dann zum Tragen kommt, wenn keine Gestaltungsregeln vom Webauthor bereitgestellt wurden. Laden Sie die Seite einfach neu, wenn Sie wieder zur alten Ansicht gelangen möchten

Stylesheet entfernen
JavaScript aus dem Bookmarklet von David Dorward

### Was bedeutet das für die Entwicklung?

Wenn man diese Generalisierung der Gestaltungsregeln weiterdenkt, bedeutet das natürlich, dass auch viele mögliche Formatierungsbedürfnisse beim Anlegen der Stylesheets berücksichtigt werden müssen. Von daher ist es immer sinnvoll, sich wirklich intensiv über den gestalterischen Aufbau einer Website Gedanken zu machen - eine Art Handbuch für das Corporate Design der Website.

Um effizient bei der Arbeit bleiben zu können, stelle ich häufig den ein oder anderen "pingeligen" Kundenwunsch in Frage. Definiert eine Gestaltungsregel einen Abstand von 20 Pixel, aber der Kunde möchte an genau einer Stelle einen etwas geringen Abstand haben, stellt sich die Frage nach der Sinnhaftigkeit der zu investierenden Zeit, für einen von fünfzig Fällen eine extra Regel zu erstellen und einzubinden.

Das mag bequem klingen, aber es geht mit allgemeinem guten Design konform: gutes Design, das auf verschiedene Inhalte angewendet werden kann, ist durchdacht, die Elemente passen zueinander, auch wenn sich Inhalte verändern.

So jedenfalls erlebe ich täglich den reflektierenden Einfluss aus der technischen Entwicklung auf das Design. Gut, wenn man sich in beiden Bereichen zu Hause fühlt (ein bisschen Eigenwerbung muss sein). Eine Bitte an alle Menschen mit einem Wunsch nach einer Website: ziehen Sie von Anfang an beide Disziplinen mit in die Planung ein.