Websites ausdrucken mit der print.css!

Als Entwickler und Webdesigner kommt man im Laufe vieler Projekte um das Thema ” Websites ausdrucken ” nicht herum. Ebenso oft wird dies auch einfach vergessen. Aber was gibt es dabei zu beachten und warum ist es so, dass gerade mal wieder nicht alles auf eine A4 Seite beim ausdrucken passt, oder das Linien und Umbrüche ganz anders auf dem Monitor dargestellt werden. Da wachsen einem schon schnell mal ein paar graue Haare, wenn man nicht ein paar Tricks kennt, mit denen man den Drucker bändigen kann. 

Hand aufs Herz – beim wem sieht der Ausdruck gut aus?

Vielen geht es doch so, man erstellt einen Shop oder einen Blog. Entwirft und Plant das Template, füttert die Seite mit viel tollem Content und beachtet jeden tollen Trick zur Suchmaschinenoptimierung und Erfolgssteigerung der Seite. Doch an den User, der gern ein Angebot oder eine Kontaktseite ausdrucken möchte, denken wenige. Dabei ist es gar nicht schwer und dauert auch nicht lange, die eigene Website für Drucker zu optimieren.

Anzeige




Print.css – Was bringt mir das?

Oftmals hat man auf einer A4 Druckerseite nur begrenzten Platz. In der Regel ist eine A4 Seite 210 x 297 mm Groß, das entspricht einer Pixelgröße von 595 x 842 Pixel bei einer Auflösung von 72 dpi. Nicht viel! Daher sollte man sich Gedanken machen, wie die eigene Seite auf dem kleinen Platz optimal Dargestellt und auch der Umwelt zuliebe Tinten- oder Toner-schonend angeboten werden kann. Denn Auf einem Laserdrucker mit nur einem Schwarztoner bringt es nichts, bunte Farben für Menüelemente oder ähnliches auszuliefern.

Print.css erstellen, bearbeiten und Ergebnisse ansehen

Damit unsere künftigen Anpassungen ein Plätzchen im Template bekommen, erstellen wir uns die print.css im CSS Ordner der aktuellen Website und verlinken diese wie hier im Beispiel gezeigt direkt im Head-Bereich der Website.

<head>
<link rel="stylesheet" type="text/css" href="www.domain.tld/meinTemplate/print.css" media="print" />
</head>

Wichtig hierbei ist, der Parameter media="print", damit die Browser und Drucksoftware die korrekte Infos bekommen, dass die entsprechenden Anweisungen nicht aus der eigentlichen styles.css kommen, sondern durch die print.css noch konkreter und speziell für Drucker definiert wird.

Nutzen Sie den Browser Google Chrome zur Vorschau

Damit wir nicht ständig im Browser auf die Druckvorschau wechseln müssen um Änderungen der print.css anzuzeigen, kann man sich mit dem Google Chrome Browser die Printausgabe simulieren lassen.
Öffnen Sie die Entwicklerwerkzeuge in Google Chrome am PC mit der Taste F12 und am Mac mit den Tasten-Shortcut ⌥ + ⌘ + i oder alternativ oben Rechts auf Menü > Weitere Tools > Entwicklertools.

Mit einem Klick auf “Toggle Device Mode”(1) und anschließend auf “Show Drawer” (2) gelangen Sie in den Emulations-Modus von Google Chrome. Hier kann man sich die Darstellung der Website auf den unterschiedlichsten Geräten simulieren lassen. Um nun aber den Ausdruck ihrer Website zu simulieren, klicken Sie in der unteren Leiste auf Emulation (3) und links auf Media (4). Aktivieren Sie dann den Haken bei CSS media (5) und stellen in dem DropDown-Feld (5) den Wert “print” ein. google_entwicklertools_printcss

Nun können Sie sehen, wie Ihre Website auf mit den Anweisungen in der print.css die Ausgabe für Drucker steuert.
Optimieren Sie mit Hilfe der print.css alle Elemente auf Ihrer Website, um sie für Drucker und den Leser zu verbessern. Zum Beispiel blenden Sie unnötige Bilder aus, Werbebanner die sowieso nur für Adsense als Klick-Ad gedacht sind oder farbige Elemente innerhalb der Navigation oder in der Seite. Weiter kann man auch zum Beispiel Blätterfunktionen ausschalten, Sucheingaben oder unnötige Link-Schaltflächen.

All das interessiert den eigentlichen Besucher nicht, der den aktuellen Beitrag ausdruckt. Versetzen Sie sich in den Besucher und schauen Sie, was sie am ehesten Erwarten, wenn Sie die eine oder andere Seite ausdrucken und blenden Sie so alles andere was keiner auf dem späteren Ausdruck braucht aus.

Vergleich unserer Website mit und ohne Print.css

Deutlich ist in dem Vergleich zu sehen, dass die Ausgabe mit der print.css rechts effektiv nur in s/w abgebildet ist. Wir haben die Ausgabe unserer Website für die print.css so angepasst, das alle Elemente in reinem Schwarz dargestellt werden. Dazu nutzen wir in der CSS den Wert

.class {color:rgb(0,0,0)}

 

. Der Wert rgb(0,0,0) gibt an, dass aus dem Farbraum RGB, in dem sich der Drucker sowie befindet (außer 1- und 4-Farbdrucker), keine Farbe zugemischt wird und stattdessen auf 100% Schwarz zurückgegriffen werden kann.

Das spart beim Nutzer nicht nur Druckkosten und Farbe im Drucker, sondern schont auch die Umwelt! ;)




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren

Menü