Print CSS – Perfekt ausgedruckte Websites

Weshalb sollte jemand eine Website ausdrucken? Was ist denn überhaupt ein Print CSS und warum brauchen wir das? Auch 2021 werden immer noch viele Webseiten ausgedruckt. In diesem Artikel zeige ich weshalb und was man dabei beachten sollte. Zudem gibt es einige Tipps und Links für die technische Umsetzung. Denn auch viele Entwickler und Designer kennen sich in diesem Nischenthema gar nicht so gut aus, was verschenktes Potential ist. Eine gute Website sollte aber auch offline überzeugen.

Was ist ein Print CSS / Print Stylesheet?

CSS steht für Cascading Style Sheets und ermöglicht dem Browser Anweisungen für die Gestaltung eine Website beziehungsweise des HTML einer Website zu geben. Im CSS werden Abstände, Farben und Aussehen aller Elemente auf einer Website definiert.

Ein Print CSS ist ein CSS, welches nur für den Druck gilt. Im responsiv Webdesign (RWD) wird häufig spezifisches CSS für eine bestimmte Bildschirm- oder Fenstergrösse geschrieben. Es ist aber eben auch möglich für einen bestimmten Medientyp zu schreiben.

Dabei gibt es zwei Typen:

• @print
• @screen

Mit einem Print CSS kann man das Aussehen der Website für das Auszudrucken optimieren.

Weshalb braucht es im Jahr 2021 ein Print CSS?

Auch 2021 wird immer noch viel ausgedruckt. Vielleicht bist du im papierlosen und vollständig digitalisierten Büro angekommen. Für den durchschnittlichen Benutzer gilt das aber noch lange nicht. Vielfach werden beispielsweise Transaktionsbestätigung, Quittungen oder andere wichtige Dokumente ausgedruckt und abgelegt. Manchmal aus rechtlichen Gründen oder weil es die Buchhaltung so fordert, manchmal einfach aus Gewohnheit.

Andere häufig ausgedruckte Beispiele sind Reiseunterlagen, Kochrezepte oder Brand Guidelines. Für viele ist die Möglichkeit auf Papier zu arbeiten der beste Weg etwas zu lernen. Zudem sind die Informationen so auch offline verfügbar und nicht vom Akkuladestand eines Geräts abhängig.

Als digital Native wundert man sich vielleicht darüber. Aber Tatsache ist, es gibt viele gute Gründe eine Webseite auszudrucken. Es ist ein wichtiges Bedürfnis des Benutzers. Da wir eine möglichst gute User Experience erreichen möchten, müssen wir diesem Bedürfnis Rechnung tragen.

Vorteile des Print CSS

Die Vorteile eines Print CSS hängen vom Use Case ab. Es gibt viele Möglichkeiten, die User Experience beim Ausdrucken zu verbessern. Du findest einige Ideen und Vorschläge im nächsten Absatz aufgelistet. Wir empfehlen ein Vorgehen nach dem benutzerzentrierten Design Ansatz. Denn wenn man weiss, weshalb die Benutzer ein Dokument ausdrucken, kann man ihr Bedürfnis umso gezielter unterstützen. Weshalb eine Seite ausgedruckt wird, ist also für ein Print CSS zentral.

Was in einem Print CSS vorkommen kann

Es gibt tausend Möglichkeiten und Methoden, ein Design anzupassen. Hier findest du eine nicht abschliessende Auflistung von Best Practices, Ideen und Möglichkeiten.

• Inhalt ausblenden. Alles was in einem ausgedruckten Format kein Sinn macht, sollte man ausblenden. Dazu gehören häufig:
  • Header mit umfangreiche Navigation.
  • Grosse, dekorative Bilder und grosse Farbflächen werden häufig ausgeblendet, damit ein Ausdruck weniger Tinte braucht.
  • Animierte oder dynamische Inhalte, welche ohne Aktualität kein Sinn machen
  • Videos und iFrames.
  • Zusätzliche interaktive Elemente wie Share Buttons oder Related Content, der offline ja nicht klickbar ist.
• Design überschreiben / optimieren. Das Design von Elementen kann mit CSS überschrieben werden. Häufige Anwendungsfälle:
  • Anpassung der Schriftgrösse und Zeilenabstand für eine gute Lesbarkeit.
  • Optimierung von Umbrüchen innerhalb der Elemente.
  • Optimierung der Seitenumbrüche.
  • Anpassung von Innen- und Aussenabständen für ein gutes Mass an Weissraum.
  • Optimierung von Seitenrändern, damit jeder Drucker damit zurecht kommt.
  • Hat die Website ein Dark Mode oder ein light-on-dark Farbschema, sollte für ein Ausdruck das Design von Schwarz auf Weiss angepasst werden.
• Inhalt hinzufügen. Es ist auch möglich, via CSS zusätzliche Inhalte hinzuzufügen. Das sollte jedoch spärlich eingesetzt werden, da der Inhalt nur direkt im CSS File angepasst werden kann. Es gibt jedoch auch Inhalte, welche automatisch hinzugefügt werden können.
  • Ganzer Linktext ausschreiben. Wenn nur ein Wort verlinkt ist, macht es oftmals Sinn, den ganzen Link in Klammer hinter dem Wort auszuschreiben.
  • Vor der ausgedruckten Webseite könnte eine Mitteilung mit einem Hinweis auf die Quelle platziert werden.
  • Am Ende des Ausdrucks könnte ein Dankeschön oder auch ein Copyright-Hinweis platziert werden.

Darüber hinaus gibt es je nach Anwendungsfall weitere Optimierungen, welche wir empfehlen können. Je nach CMS und bereits vorhandenen Frontend Design und Code, können die Optimierungen einfacher oder schwieriger ausfallen. Deshalb empfehlen wir das Print CSS in jedem Website-Projekt bereits von Beginn an zu beachten.

Wie wird ein Print CSS technisch umgesetzt?

Ein Print CSS wird entweder in einem separaten Stylesheet (und somit auch als separate Datei) oder innerhalb des normalen Stylesheet umgesetzt. Bei einem separaten File ist es einfacher diese Datei als weniger prioritär für das Laden und Darstellen der Website zu kennzeichnen. Das wiederrum sorgt für eine gute Ladezeit. Wenn die Print-Anweisungen direkt neben den normalen Code stehen, ist es dafür einfacher modular zu arbeiten und das Print CSS ist für den Frontend Programmierer einfacher zugänglich. Je nach Projekt bietet sich die eine oder andere Methode an oder ist sogar durch ein Framework bereits vorgegeben.

Gute Tipps zur technischen Umsetzung der aufgelisteten Möglichkeiten findest du im Artikel «A Guide To The State Of Print Stylesheets In 2018» von Rachel Andrew. Hier ist weiterer guter Artikel aus dem Smashing Magazine (Magazin für Webentwickler und Webdesigner) mit vielen Beispielen über Print CSS. Zudem kann ich diesen Artikel von Eric Meyer empfehlen. Seit 2002 haben sich zwar einige technische Details geändert, die Grundprinzipien dahinter bleiben jedoch bestehen.

Einen Print Button hinzufügen

Eine Website kann jederzeit über das Menü im Browser ausgedruckt werden. Oder über die Tastenkombination «ctrl + p». Aber nicht jeder Benutzer ist auch ein Power User oder denkt im richtigen Moment daran, dass er die Website auch ausdrucken könnte.

Deshalb macht es Sinn an geeigneter Stelle ein Button zum Ausdrucken der Website zu platzieren. Technisch ist der Button super einfach gebaut. Er enthält nur eine Linie Javascript – die Anweisung die Website zu drucken. Um den Rest kümmert sich der Browser. Egal wie der Benutzer das Druckmenü aufruft, das Print CSS wird immer angewendet.

Wie testet man ein Print CSS?

Am einfachsten ist es die Webseite einfach auszudrucken. Dabei kann man auch einen PDF Drucker verwenden und nur ein PDF generieren statt jedes Mal Papier zu verbrauchen. Aber auch schon die Druckvorschau gibt viele Hinweise. Für Entwickler haben Firefox und Google Chrome auch eine entsprechende Vorschaufunktion in den Entwicklerwerkzeugen ergänzt.

Und nun?

Ich hoffe, dass der Artikel dir einige Einblicke in die Möglichkeiten für ein Print CSS gab. Am besten testest du deine Unternehmenswebsite mal selbst. Und wenn du in zukünftigen Projekten das Print CSS auf die Anforderungsliste nimmst, würde mich das auch freuen.

Sollte dich das Ergebnis deiner existierenden Website nicht überzeugen oder solltest du unsere Hilfe bei einem Relaunch oder Neugestaltung einer Website benötigen, stehen wir gerne zur Verfügung. Wir haben Erfahrung mit Print CSS für WordPress und andere CMS Systeme und helfen gerne.

Wir freuen uns auf deine Kontaktaufnahme, ob es dabei um Print CSS geht oder nicht.