Es überrascht mich immer wieder, dass die 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 unnötig macht. Leider benutzt es fast niemand, obwohl es… 10 Jahre alt ist.
Es ist nicht nur albern, einen zusätzlichen Schritt zum Drucken zu benötigen, sondern die Verwendung von Druckstylesheets würde Tinte für jeden sparen, der den druckbaren Link nicht verwendet. Und natürlich gibt es eine Menge Leute, die Print-to-PDF verwenden, um Artikel für später zu speichern, ohne Papier zu verschwenden.
Was sind Druckstylesheets?
Die meisten Websites implementieren ihre Druckfunktion, indem Sie zu einer anderen Seite wechseln, die für Drucker unterschiedlich formatiert ist. Dies ist jedoch nicht unbedingt erforderlich. Jeder Browser implementiert eine einfache CSS-Technologie namens Stylesheets drucken Dies ist nichts weiter als eine Datei, die Elemente angibt, die ausgeblendet werden sollen, wenn Ihr Browser die Seite druckt.
Für Unbekannte bedeutet CSS Cascading Style Sheets. Auf diese Weise kann Ihr Browser den HTML-Quellcode für eine Webseite so formatieren, wie Sie ihn tatsächlich auf dem Bildschirm sehen. Im Stylesheet kann alles angegeben werden, von Schriftarten, Farben, Rahmen bis hin zu Hintergrundbildern.
Das Hinzufügen eines Druck-Stylesheets ist so einfach wie das Einfügen dieser einzelnen Zeile in das HTML Ihrer Seite. Der Teil media = print des Codes weist den Browser an, dieses Stylesheet nur beim Drucken zu verwenden.
<link rel = ”stylesheet” href = ”print.css” type = ”text / css” media = ”print”>
Diese Datei sieht im Allgemeinen ungefähr so aus:
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }
Ja, so einfach ist das wirklich. Wie funktioniert es? Hier ist ein Beispiel für eine normale Webseite auf der linken Seite, auf der alle Navigation, das Logo und die Anzeigen mit der zugehörigen ID deutlich sichtbar sind. Auf der rechten Seite befindet sich dieselbe Seite mit dem angewendeten Druck-Stylesheet, auf der alle diese Elemente ausgeblendet sind.
Natürlich möchten Sie lieber eines davon über das andere drucken, oder?
Beispiele für Fehler beim Drucken von Stylesheets
Leider gibt es nur eine Menge großer Websites, die sich überhaupt 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 Websites, wie das Gawker-Netzwerk, sind noch schlechter. 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-Website aus zu drucken, ohne einen separaten Dienst wie "Lesbarkeit" zu verwenden oder den Inhalt der Seite manuell hervorzuheben, was bei ihrem neuen Design nahezu unmöglich ist.
Es ist wirklich traurig. Viele der größten Websites kümmern sich überhaupt nicht um die Implementierung dieser Funktion.
Zum Glück verwenden einige Websites sie
Hier ist ein Beispiel für eine ordnungsgemäß formatierte druckbare Ansicht - ohne dass Sie sich die Mühe machen müssen, einen Drucklink zu finden. Auf der BBC News-Website werden die Artikel für den Druck mit einem benutzerdefinierten Header übersichtlich formatiert. Sie enthalten zwar Kommentare in der Druckansicht, aber es ist immer noch eine gute Arbeit.
Es gibt einige andere Websites, die dasselbe tun, wie z ArsTechnica und… unsere Seite, aber es wäre dumm, Screenshots von allen zu zeigen. In unserer Forschung gibt es nur wenige Websites, die sie ordnungsgemäß implementiert haben.
Zum Abschluss nehmen Sie sich bitte die 5 Minuten Zeit, um ein Druck-Stylesheet für Ihre Site zu implementieren!
