Warum verwenden so viele Websites keine Druck-Stylesheets?

Es erstaunt mich immer wieder, dass Leute auf einer Webseite nach einem Link oder einer Schaltfläche mit der Aufschrift „Drucken“ suchen müssen, insbesondere wenn man bedenkt, dass es eine Wundertechnologie gibt, die diesen Schritt überflüssig macht. Leider benutzt es fast niemand, obwohl es… 10 Jahre alt ist.

Es ist nicht nur albern, einen zusätzlichen Schritt zum Drucken zu erfordern, sondern die Verwendung von Druck-Stylesheets würde auch etwas Tinte für jeden sparen, der den druckbaren Link nicht verwendet. Und natürlich gibt es viele Leute, die Print-to-PDF verwenden, um Artikel für später zu speichern, ohne Papier zu verschwenden.

Was sind Druck-Stylesheets?

Die meisten Websites implementieren ihre Druckfunktion, indem sie Sie zu einer anderen Seite führen, die für Drucker anders formatiert ist – aber das ist wirklich nicht notwendig. Jeder Browser implementiert eine einfache CSS-Technologie, bekannt als Stylesheets drucken, die nichts anderes als eine Datei ist, die Elemente angibt, die ausgeblendet werden, wenn Ihr Browser die Seite druckt.

Für diejenigen, die nicht vertraut sind, bedeutet CSS Cascading Style Sheets, und so weiß Ihr Browser, wie er den HTML-Quellcode für eine Webseite so formatiert, wie Sie ihn tatsächlich auf dem Bildschirm sehen. Alles von Schriftarten, Farben, Rahmen und sogar Hintergrundbildern kann im Stylesheet angegeben werden.

Das Hinzufügen eines Druck-Stylesheets ist so einfach wie das Einfügen dieser einzelnen Zeile in den HTML-Code Ihrer Seite – der media=print-Teil des Codes weist den Browser an, dieses Stylesheet nur beim Drucken zu verwenden.

Diese Datei sieht im Allgemeinen etwa so aus:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }

Ja, es ist wirklich so einfach. Wie funktioniert es also? Hier ist links ein Beispiel für eine normale Webseite, auf der die gesamte Navigation, das Logo und die Anzeigen mit der zugehörigen ID deutlich sichtbar sind – und rechts die gleiche Seite mit dem angewendeten Druck-Stylesheet, bei der alle diese Elemente ausgeblendet sind.

Offensichtlich würden Sie es vorziehen, eines davon über das andere zu drucken, oder?

Beispiele für Fehler beim Drucken von Stylesheets

Leider gibt es nur viele riesige Websites, die sich nicht die Mühe gemacht haben, dies zu implementieren. Sehen Sie sich an, was passiert, wenn Sie versuchen, aus der New York Times zu drucken:

Einige Sites, wie das Gawker-Site-Netzwerk, sind sogar noch schlimmer. Sie haben nicht nur keine druckbare Ansicht, wenn Sie versuchen zu drucken, ähnelt sie auch einer Tintensuppe. Soweit wir das beurteilen können, gibt es keine Möglichkeit, von einer Gawker-Site aus zu drucken, ohne einen separaten Dienst wie Readability zu verwenden oder den Inhalt der Seite manuell hervorzuheben, was bei ihrem neuen Design fast unmöglich ist.

Es ist wirklich traurig. Viele der größten Websites scheitern einfach daran, diese Funktion zu implementieren.

Zum Glück verwenden einige Websites sie

Hier ist ein Beispiel für eine richtig formatierte druckbare Ansicht – ohne dass Sie sich die Mühe machen müssen, einen Drucklink zu finden. Die BBC News-Site formatiert die Artikel ordentlich für den Druck, komplett mit einem benutzerdefinierten Header. Sie enthalten Kommentare in der Druckansicht, aber es ist immer noch eine gute Arbeit.

Es gibt einige andere Websites, die das gleiche tun, wie zum Beispiel ArsTechnica und… unsere Seite, aber es wäre albern, Screenshots von allen zu zeigen. In unserer Forschung sind die Websites, die sie richtig implementiert haben, rar gesät.

Also zum Abschluss… nehmen Sie sich bitte die 5 Minuten Zeit, um ein Druck-Stylesheet für Ihre Site zu implementieren!