So. Hiervon bin ich nun derzeit absolut begeistert. Das ist einfach der Hammer für mich. Die Trennung von Inhalt und Gestaltung, realisiert durch Cascading Style Sheets (CSS). Sieh' selbst:
variante1.css
variante2.css
pur, ohne CSS
screen.css (ursprüngliches Design)
Was das Geniale daran ist? Der Code der Site ist immer derselbe – mit Ausnahme des Verweises auf die jeweilige CSS-Datei, aus der die gewünschten Gestaltungs-Definitionen gelesen werden.
In der Datei screen.css ist zentral definiert, welchen Zeichensatz und welche Schriftfarbe und -größe Überschriften, Texte und Links von www.thomscheiner.de haben. Jede einzelne der Seiten kuckt dann in diese Datei rein und nutzt diese Einstellungen.
Durch eine Änderung in der Datei screen.css ändert sich das Erscheinungsbild meines gesamten Web-Auftritts, da ja jede meiner Seiten diese Einstellungen nutzt.
Nun kann man noch viel mehr als nur Schriftfarben zuweisen: Hintergrundfarben und -grafiken, Textausrichtungen, Größen, exakte Positionen, Rahmen, Innen- und Außenabstände, Textumbruch, Textfluß, und das sowohl für Texte als auch für Tabellen, Links, teils sogar Bilder...
Ohne großen Aufwand kann dem Surfer die Wahl ermöglicht werden zwischen gigageilem Design und einer Variante mit stärkeren Kontrasten und extra-großer Schrift. (Zugegeben: Um dem Surfer eine handliche und Speicherplatz sparende Wahl-Möglichkeit zwischen den Designs zu verschaffen, sollte man auch die Server-seitige Programmierung mit php beherrschen oder zumindest JavaScript. Um aber ohne Wahl-Option nur mit einer einzigen Design-Variante zu arbeiten, braucht's echt nur HTML mit CSS.)
Ganz wichtig wird der Einsatz dieser Technik spätestens, wenn Menschen mit Sehschwächen zu den Nutzer gehören: Braille-Drucker und -Zeilengeräte bekommen dank CSS speziell für Blinde aufbereitete Daten geschickt. Sprachausgabe kann separat definiert werden, wie auch eine eigene CSS-Datei für Projektoren (wegen der Farbunterschiede von Monitor und Projektor). Und selbst Handheld-PCs können dank CSS die Daten aufbereitet bekommen.
In der Praxis wird noch immer oft nur eine CSS-Datei für die normale Ausgabe auf dem Monitor sowie eine CSS-Datei für Druck-Ausgabe (also etwa nicht mit weißer Schrift auf blauem Hintergrund, sondern Schwarz auf Weiß) gemacht; aber die WebDesigner denken langsam um...
Im Code dieser Seite sieht der Einsatz von CSS etwa so aus:
<div id="inhalt">
<div id="satz">
<h1>farbe</h1>
<p>So. Hiervon bin ich nun derzeit absolut begeistert. (...)</p>
</div></div>
Im Code der Datei screen.css ist für die Überschrift <h1> und den normalen Text <p> angegeben:
#inhalt #satz p {color:black; font-size:80%;}#satz h1,h2 {color:grey; font-family:'Trebuchet MS',Verdana,Arial;}