Safari Reader und die Trennung von Inhalt und Layout

Die Trennung von Inhalt und Layout ist das Leitmotiv für den Einsatz von Cascading Style Sheets. Hieraus ergeben sich drei wesentliche Vorteile:

• Dadurch, dass alle Styling- und Layout-Eigenschaften komplett in einer einzigen CSS-Datei liegen, werden Design-Änderungen im Handumdrehen möglich. Man muss nur noch in der zentralen CSS-Datei den betreffenden Wert ändern, und schon sind auf dem kompletten Webprojekt inklusive aller Unterseiten z. B. die Überschriften in einer anderen Schriftart umformatiert.

• Mit CSS ist es möglich, für verschiedene Ausgabemedien (Bildschirm, Papier, Projektion, Sprache) eine unterschiedliche Darstellung anzugeben.
  Beispiel: Häufig möchten Anwender Inhalte einer Webseite ausdrucken. Gerade längere Texte werden lieber in Papierform gelesen und mithilfe von Textmarker und Stift markiert und kommentiert. Allerdings macht es wenig Sinn, das Weblayout als genaues Abbild eins zu eins zu übernehmen. So sind einige im Web notwendige Elemente, wie z. B. die Navigationsleiste oder eine Suchfunktion, in Papierform schlicht sinnlos. Wenn sich der Ausdruck einer Bildschirmseite auf mehrere DIN A4 Seiten verteilt, Textinhalte abgeschnitten oder unnötige Grafiken und Werbebanner mitgedruckt werden, steigert das nicht gerade den Nutzwert einer Webseite und sorgt für unzufriedene Besucher. Vermeiden lassen sich diese Probleme durch die Erstellung eines eigenen Layouts, auf das nur dann zurückgegriffen wird, wenn der Anwender tatsächlich die Webseite ausdruckt.
• Ein anderes, typisches Beispiel ist das Bereitstellen einer optimierten CSS-Datei für Handys und Smartphones. Aufgrund der recht kleinen Displayauflösung und einer meist geringeren Datenübertragungsrate sollten die Inhalte vereinfacht und gebündelt werden.

• Menschen mit körperlichen bzw. altersbedingten Einschränkungen wie z. B. Sehschwächen bietet ein semantisch korrekt ausgezeichneter Quelltext die Möglichkeit, die Inhalte entsprechend ihrer Bedürfnisse umformatieren zu lassen (sog. barrierefreies Internet). Als Beispiel sei an dieser Stelle auf die Sortierung nach Gewichtung und Ursprung im Rahmen der CSS-Kaskade verwiesen, die ich im Buch auf den Seiten 125 bis 135 erklärt habe.

Jeder, der die Erstellung von Websites ernsthaft erlernen will, muss die Aufteilung von Inhalt und Präsentation von Beginn an verinnerlichen. Dem Otto-Normalsurfer, der Internetseiten lediglich konsumiert, blieb dieser Mechanismus bisher weitestgehend verborgen. Ändern könnte sich dies zumindest für Nutzer des Safari 5, der nun eine Funktion mit dem Namen Reader beinhaltet (Safari ist der Standard-Browser von Mac OS – es gibt ihn aber auch für Windows). Mit dieser Funktion kann man mit einem Klick Texte aus Webseiten herauslösen und ohne Drumherum ungestört und zusammenhängend durchlesen.

Konkret funktioniert das wie folgt: Rufen Sie eine Website mit Text auf, blendet Safari in der Adresszeile die Schaltfläche Reader ein. Klicken Sie darauf, filtert Safari sämtliche Bestandteile die nicht zum reinen Text gehören heraus wie etwa die Navigation und Werbung. Der reine Text wird nun in lesefreundlich formatiert in einem gesonderten Fenster angezeigt und zusätzlich dunkelt der Hintergrund ab. Über eine Leiste am Ende des Fensters kann der Text beliebig vergrößert und verkleinert werden. Als zusätzliches Features erkennt der Reader Text, der auf mehrere Seiten verteilt ist (sog Klickstrecken) und fasst diesen in dem Fenster zusammen.

Aus Sicht eines Webdesigners ist der Safari-Reader deshalb interessant, weil zum ersten Mal die Auswirkungen und Vorteile der Trennung von Inhalt und Layout auch für den Laien im alltäglichen Gewand sichtbar werden. Auftraggebern, die nach wie vor häufig ein unveränderbares Layout wie auf einer Papierseite fordern, kann damit eindrucksvoll verdeutlicht werden, dass keine vollständige Kontrolle über das Erscheinungsbild möglich ist. Das allerletzte Wort im Stylesheet hat stets der Betrachter, und nicht der Entwickler!