Trennung von Inhalt und Optik
… bzw. Trennung von Inhalt (neudeutsch: Content) und Layout, oder vornehm:
Trennung von Struktur und Präsentation.
Schauen wir uns einmal an, woraus eine Web-Präsenz besteht:
Diese Seite ohne Layout
Diese Seite mit Layout „grün“
Drei-Ebenen-Modell
- Der Inhalt – und zwar einschließlich seiner logischen Struktur: Überschriften, Absätze, Listen, Datentabellen, Bilder (soweit sie Inhalte illustrieren); insbesondere: Links
- Das Layout, also die optische Präsentation: Raumaufteilung, Farben, Schriften, dekorative grafische Elemente
- Sonderfunktionen und Spezialeffekte: Funktionale Elemente, die die Benutzung komfortabler oder attraktiver machen, zum Beispiel Menüs, die sich auf- und zuklappen lassen oder sofortige Rückmeldungen bei fehlerhaften Formulareinträgen.
Der entscheidende Vorteil liegt auf der Hand:
Je wichtiger die Ebene, desto einfacher die technischen Mittel.
Vorteile
Da nun der HTML-Code frei von allem Ballast ist, ergeben sich die Möglichkeiten:
Im Glossar: Screenreader, Braille
- Barrierefreiheit: Assistive Techniken, wie Screenreader (Programm, das einen Text laut vorliest), Braille-Zeilen (ein Gerät, das Text in Blindenschrift zum Ertasten wiedergibt) erhalten sauber strukturierten Code, ohne durch Elemente behindert zu werden, die lediglich für die grafische Darstellung gedacht sind
Diese Seite, Mobilversion
- Mobilgeräte: Unsere Inhalte können leicht für alternative Ausgabemedien aufbereitet werden. Es ist z. B. sinnvoll, für mobile Geräte wie PDAs oder Mobiltelefone ein Layout anzubieten, das für sehr kleine Bildschirme geeignet ist.
Diese Seite auf Papier
- Druck: Die „Druckversion“, wie sie auf konventionellen Seiten gelegentlich angeboten wird (eine für den Ausdruck optimierte HTML-Seite), wird überflüssig – die Benutzerin druckt einfach die gerade angezeigte Seite aus und erhält den Inhalt in einer für das Medium Papier geeigneten Form – nahezu alle aktuellen Browser unterstützen diese Funktion. (Probieren Sie es einfach mit dieser Seite!)
- Flexibilität: Das Layout unserer Inhalte wird in einer zentralen Datei – dem Stylesheet – festgelegt, dort kann es leicht geändert werden, ohne daß alle Seiten einzeln (automatisiert oder gar manuell) bearbeitet werden müssen, wie es bei konventionell aufgebauten Web-Präsenzen der Fall ist.
- Kurze Ladezeiten: Durch das Wegfallen von aufwendigen Layout-Tabellen werden die einzelnen Seiten erheblich schlanker und selbst mit langsamen Modem-Verbindungen sehr schnell aufgebaut
- Suchmaschinen-Freundlichkeit: Suchmaschinen wie Google benötigen, um Seiten inhaltlich zu indizieren, Strukturinformation.
Probieren Sie es aus:
Wenn Sie etwa diese Seiten mit abgeschaltetem JavaScript (Ebene 3) aufrufen, so funktioniert das Auf- und Zuklappen der Menüs nicht mehr. Stattdessen sind einfach alle Menüs schon aufgeklappt, so daß trotzdem alle Seiten erreichbar sind. Die Navigation benutzt also JavaScript, ohne davon abhängig zu sein.
Mehr im Glossar: Was genau sind JavaScript und CSS und wie schalte ich es ab?
Rufen Sie diese Seiten mit einem Browser auf, der keine Cascading Stylesheets (CSS) (Ebene 2) unterstützt, so sehen Sie alle Inhalte in einem schlichten Standard-Layout: Zwar langweilig, aber sauber, übersichtlich und strukturiert. (Das gilt auch für Netscape-Browser der Version 4.)
Grundlage für diese Möglichkeiten ist die Arbeit mit validem, das heißt schlicht und einfach: syntaktisch korrektem HTML-Code. Mehr dazu: Web-Standards