Dieser Beitrag beschäftigt sich mit dem Thema “Druckerfreundlichkeit auf kreuvf.de” und schneidet webdesign-technische Hintergründe an.
Mit der Weiterentwicklung des HTML-Standards ist die Trennung zwischen dem Inhalt einer Seite und dessen Layout deutlich in den Vordergrund getreten. Was sich zuerst vielleicht umständlich und aufwendiger anhört als eine Variante “Inhalt + Design”, ist in Wahrheit eine geniale Möglichkeit seine Daten portierbar in andere Datei- und Anzeigeformate zu halten und sich so im Endeffekt Zeit zu sparen.
Stellen wir uns vor jn. verfasst eine Webseite mit dem Thema “HTML lernen in 20 Kapiteln” und baut diese größtenteils auf wie ein Buch. Also eine Seite mit dem Inhaltsverzeichnis und dann pro Kapitel mehrere Seiten zu verschiedenen Themen, am Ende ein Glossar. Nehmen wir mal an die Seite ist sehr erfolgreich und immer mehr User wollen die Seite gerne als Buch haben. Wären Design und Inhalt jetzt miteinander verbunden, müsste der Webmaster jede einzelne Seite per Hand nachbearbeiten und z.B. Schriftgrößen, die am Bildschirm ok sind, für den Druck anpassen. Das würde eine mehrstündige Beschäftigungstherapie darstellen, die durch sinkende Konzentration desöfteren pausiert werden müsste.
Jetzt hat dieser Webmaster aber nicht umsonst eine so erfolgreiche Seite zum Thema HTML und hat die dort vorgeschlagenen Techniken, nämlich Inhalte wie Bilder, Texte, Listen und Tabellen vom Design zu trennen, konsequent eingesetzt. Alle Dokumente zu seinem Projekt greifen auf eine einzige Datei mit Designangaben zurück. Zudem hat er die Möglichkeit mehrere dieser Designdateien, sogenannte Cascading Style Sheets, kurz CSS, pro Seite anzugeben und zu bestimmen für welches Medium diese Designdatei gültig sein soll. In unserem konkreten Fall hat dieser Webmaster also mindestens eine Designdatei für die Betrachtung auf Bildschirmen und eine Designdatei für den Druck. Der riesige Vorteil: Ändert er eine Einstellung in der Designdatei, ändert er das Aussehen der gesamten Seite.
Ein weiteres Problem für den Druck sind störende Elemente, die nur für die Bildschirmbetrachtung sinnvoll sind, wie Werbebanner, Navigations- und Statistikleisten. Auch hierfür hat CSS einfache Abhilfe: Man blendet diese Bereiche einfach aus. Umgekehrt kann man bestimmte Inhalte, die nur für den Druck interessant sind, für den Bildschirm ausblenden.
Und genau jene Techniken verwende ich auch auf kreuvf.de. In den Genuss dieser Technologie gelangen sie mit halbwegs modernen Browsern wie etwa Opera oder Firefox. Probieren sie es doch gleich hier aus. Firefox-Nutzer gelangen zur Druckvorschau über Datei –> Druckvorschau. Achten sie mal genau darauf welche Elemente beim Druck wegfallen und wie sich andere Elemente verändern.
Aber wie gesagt: Nicht nur der Blog, sondern alle Bereiche auf kreuvf.de (das Board ausgenommen) haben zusätzliche Designangaben für den Druck, sodass man ohne allzu große Umstände direkt aus dem Browser heraus drucken kann.
Nachtrag 11:18 Uhr: Durch Zufall habe ich ein passendes Zitat (englisch) gefunden.
I concluded that the print stylesheet made the users’ lives better without them even noticing. That’s the way technology should be.
Quelle: Printfriendly CSS and Usability
Kommentare zu diesem Artikel abgeben (benötigt Boardaccount)