19.11.06Drucken von Webseiten - State of the Art
Stand der Technik, Probleme, Lösungen, Ausblick
In vielen Fällen wollen die User ihre besuchten Webseiten ausdrucken, doch das erweist sich mitunter als schwierig. Als Webdesigner kann man mit CSS gestalterisch eingreifen und die Druckausgabe optimieren. Doch das wird bisher leider allzu oft noch sehr stiefmütterlich behandelt. In den letzten zwei, drei Jahren hat sich daher auch nur wenig geändert. Schnell stößt man hierbei nämlich an gewisse Grenzen, sobald es sich um mehr als den einfachen Ausdruck handelt.
Warum auch im Web gedruckt wird
Das Drucken von Webinhalten erfolgt aus zwei verschiedenen Motivationen heraus:
- Ausdruck ganzer Webseiten z.B. als Screenshot
- Ausdruck konkreter Inhalte: z.B. Fahrpläne, Ergebnislisten oder Textpassagen
Was soll nicht gedruckt werden?
- Navigationsmenüs
- Werbebanner
- und ähnliches
Grafiken, die mit den Inhalten in Wort und Schrift in Verbindung stehen - sprich Informationen transportieren - werden mitgedruckt, sofern man dies nicht mit CSS unterbindet.
Die Praxis
Es gibt zwar in den meisten Content-Management-Systemem integrierte PDF-Lösungen zur Bereitstellung von Funktionen zum Ausruck einer Webseite, doch nicht immer werden CMS eingesetzt. Zudem haben PDF-Dokumente auch Nachteile. Eine schnelle und elegante Methode ist die direkte Ansprache des Druckers über ein für ihn aufbereitetes CSS-Stylesheet. Sehen wir uns ein gelungenes Beispiel im Web einfach mal an.
Positives Beispiel: “A List apart”
Auf der linken Seite, der Artikel, wie er auf der Website von A List Apart dargestellt wird. Auf der rechten Seite die Druckvorschau des Browsers: Auf das Wesentliche reduziert und dennoch ansprechend aufbereitet. Sekundäre Inhalte, Werbebanner und Navigation wurden ausgeblendet. CSS genügt.
Probleme und Lösungen/Alternativen
Allgemein hat man als Webdesigner vor allem mit der fehlenden Unterstützung essentieller CSS-Eigenschaften für den Druck zu kämpfen. Gerade der Internet Explorer, auch in der Version 7, verhindert spezielle Optimierungen von Webinhalten für den Druck. So lässt sich in diesen Browser, und damit für einen Großteil der Besucher, das Pseudo-Element :after nicht nutzen. Mit seiner Hilfe kann man hinter einem Element Inhalte ausgeben, zum Beispiel die URLs hinter den Links. Das macht durchaus Sinn, denn Links lassen sich auf bedrucktem Papier nun mal schlecht anklicken. Will man die IE-Browser in dieser Form unterstützen, muss man die Adresse (URL) zusätzlich angeben, oder sie eben ganz weglassen.
Problem 1: Verwirrte User
Viele User erwarten als Ausdruck eine exakte Kopie der Webseite auf dem Bildschirm (siehe dazu http://www.themaninblue.com/writing/perspective/2004/07/09/). Fehlen bestimmte Elemente im Druck, könnte dies unter Umständen zu Irritationen führen. Könnten die User aber nicht auch positiv überrascht sein, und sich freuen, dass man sich die Mühe gemacht hat, das Druckbild für sie zu optimieren, damit diese Druckertinte sparen kann? Schwer zu sagen. Manche meinen sogar, man würde den Benutzer in diesem Falle bevormunden.
Wer das Druckbild optimieren möchte, hat einige Möglichkeiten. Man könnte das Logo der Firma beispielsweise mit ausgeben, um den Besuchern eindeutig anzuzeigen, von welcher Seite sie einen Druck angefertigt haben. Auch hilfreich sind Hinweistexte am Seitenanfang: “Druckversion vonä / Im Web: http://link.html”. Diese Elemente kann man im HTML-Quelltext einbinden und mit CSS für die Ausgabe am Bildschirm verstecken.
Dass die Benutzer ein genaues Abbild der Webseite beim Druck erwarten, hängt mit der Erfahrung bei der Tastenkombination STRG + P (unter Windows) und APFEL + P (beim Mac) zusammen. Diesen Usern kann man aber mit einem Link “Druckversion des Artikels” behilflich sein. So kann man explizit auf eine druckoptimierte Ausgabe des Artikels verweisen. Der Besucher wird dann mit hoher Wahrscheinlichkeit nicht mehr die exakte Ausgabe der Webseite erwarten.
Problem 2: Hintergründe und Farben
Hintergründe und Farben werden von den Druckern zunächst ignoriert. Das ist auch so vorgesehen, um Ressourcen in Form von Tinte und Toner zu sparen. Die User können das in den Einstellungen aber auch ändern. Doch dies ist nur den wenigsten tatsächlich bekannt. Wer mag, kann die User auf der Webseite ja entsprechend über Einstellungsmöglichkeiten informieren.
Im Prinzip muss man sich mit den fehlenden Hintergründen und Farben arrangieren. Da aber vordergründig Informationen in Textform gedruckt werden wollen, sollte auch dies eigentlich kein Problem darstellen.
Ist PDF eine Alternative?
Der Druck von Webinhalten über generierte PDF-Dokumente bietet sich vor allem beim Druck von längeren Dokumenten und Dokumentationen an. PDF-Dokumente sind vom Dateivolumen her aber unter Umständen groß, was zu längeren Ladezeiten beim Benutzer und erhöhtem Traffic beim Betreiber führen kann.
Auch bei den Softwarelösungen PDFreactor und Boom!, die beide PDF erzeugen, spielt CSS eine Rolle in der Darstellung. Die genannten Probleme bestehen also auch hier weiterhin. Ãœber alternative Lösungen sollte man sich daher unabhängig vom Ausgabeformat Gedanken machen. Ansehen sollte man sie Lösungen auf jeden Fall.
Fazit
Man sollte die User mit in die Ãœberlegungen zum besseren Druck von Webinhalten einbeziehen und ihnen nicht kommentarlos, stark abgewandelte Ausdrucke vorsetzen. Dazu genügt meist schon ein kleiner Hinweis. Optional kann man auf Programme wie z.B. url2bmp für Windows oder die beim Mac integrierte Druckfunktion APFEL + SHIFT + 3 verweisen, sollte ein Besucher ausdrücklich den Wunsch haben, die ganze Seite im Originallayout auszudrucken. Vielen Besuchern dürfte es aber nur Recht sein, wenn man ihre Druckpatronen schont, in den man ihnen möglichst übersichtliche und gut lesbare Dokumente anbietet.
Artikel zum Thema Druck CSS
- Ruck zuck zum Druck (Manuel Bieh)
- Webseiten ausdrucken? Webstandards bieten Alternativen (Webstandard Heiko)
- Print-friendly CSS and Usability (Roger Johansson)
- Printing the Web (Mark Boulton)
- Print to preview (Pete McVicar bei A List Apart)
- Going to print (Eric Meyer bei A List Apart)
Referenzen und Tutorials zum Thema Druck CSS
- CSS Print Profile (W3C)
- Druck-Layouts mit CSS (The Styleworks)
- Stylesheets für ein Drucklayout (SELFHTML)
PDF-Lösungen
Den Artikel hören
Dieser Artikel ist außerdem im Technikwürze Podcast (Ausgabe 47) erschienen. An dieser Stelle vielen Dank an den Technilwürze-Macher David Maciejewski für die wieder einmal gute Zusammenarbeit.
manuel am Nov 20, 2006 | Reply
kleiner fehler: entweder muss man zusätzlich angeben, oder hat man zusätzlich anzugeben. ansonsten aber guter text :)
Steffen am Nov 20, 2006 | Reply
Zu dem IE Problem: Die Pseudo Klassen :before und :after kann man mit dem Wildcard * umgehen. Wenn man Kommentare mit dem Wildcard anspricht, reagiert der IE darauf und formatiert dementsprechen. Andere Browser korrekterweise nicht.
Ist ein älterer und für die Entwickler peinlicher Fehler des IE.
Jens Grochtdreis am Nov 20, 2006 | Reply
Dieser Bug ist noch immer nicht beseitigt und beschränkt uns viel mehr, als alle IE-Bugs zusammen. Ich bin immer froh, zumindest für Ausdrucke den IE auf dem Rechner zu haben.
Engelbert am Nov 20, 2006 | Reply
Unlängst habe ich ja meine Community Homepage http://www.web4myfriends.com relauncht und eben auch aus diesen Gründen ein eigenes Print-Stylesheet erstellt. Ich glaube, dass es mir ganz gut gelungen ist und meine User zufrieden sein können, wenn sie sich etwas von mir ausdrucken.
Schau es Dir doch mal an - in meiner Rezeptsammlung findest Du bestimmt ein Rezept, daß Du bei Gelegenheit mal ausprobieren möchtest… (-:
Sei herzlichst gegrüßt,
Engelbert
Jens Grochtdreis am Nov 21, 2006 | Reply
Heiko am Nov 22, 2006 | Reply
Alex am Nov 23, 2006 | Reply
Elmar am Nov 30, 2006 | Reply
Für diesen Fall ist meine aktuelle Lösung ein Perl-Skript, das anhand der rel=”contents”, rel=”prev” und rel=”next”-Links alle Artikel einliest und ein einziges Dokument erzeugt mit speziellem Print-CSS.
Eine nicht in allen Browsern funktionierende Lösung ist die Skalierung der Bilder, die alle in einem div sind, das Abbildungsdbeschriftungen berücksichtigt, da (X)HTML leider keine caption o. ä. für Bilder kennt (z. Zt. setze ich im Stylesheet die div-width und height auf 25%. Trotzdem werden in manchen Browsern die Bilder zu groß dargestellt, d.h. dann “pixelig” im Ausdruck). Hier werde ich das Skript anpassen müssen mit umgerechneten Werten für die Attribute width und height des img-Tags (hier funktionieren 25% nicht).
Frank am Nov 30, 2006 | Reply
schöner Artikel, aber auch bei A lis Apart sind noch Daten drin, die ich als Druck nicht haben will. Aber darüber kann man sicher streiten.
Im Fall WordPress habe ich mal ein Tutorial erstellt, bei dem man ein ansprechendes Drucklayout erstellt, so dass auch Links mit eingearbeitet werden.
Im eigenen Deisgn habe ich das auch Konsequent umgesetzt, so dass, so hoffe ich, die Druckausgabe so ist, das der Leser zufrieden ist und den Druckgeldbeutel schont.
Liebe Grüsse Frank
Engelbert am Dez 20, 2006 | Reply
Mittlerweile habe ich nachgezogen: Alle Seiten von meiner Homepage lassen sich nun einfach über die Druckfunktion des Browsers übersichtlich ausdrucken.
Stefan am Jan 18, 2007 | Reply
Um Irritationen vorzubeugen gefällt mir Deine Idee, direkt an den Anfang des Dokument den Hinweis “Druckversion von URL” zu setzen, sehr gut.
Gregor am Sep 19, 2007 | Reply
Moritz am Feb 1, 2008 | Reply
Viele Grüße
Matthias am Apr 22, 2008 | Reply
Sollte es ihm um das Layout gehen - das ist wohl selten der Fall, kann er eine Bildschirmprint mit einem Grafikprogram (z.B. Paint) machen.
Sollte es ihm um den Content gehen - was wahrscheinlich ist, wird er froh sein, diesen in aufbereiteter Form zu erhalten. Und zwar auf einem oder zwei Blättern und nicht auf - sagen wir - Zwanzig, was ja schon mal vorgekommen sein soll.
Druckversion als Überschrift zu wählen halte ich für empfehlenswert.
Viele Grüße
Alexander am Mai 10, 2008 | Reply
Hani am Jun 2, 2008 | Reply
Ich schau mir die Seite zuerst immer in der Druckvorschau an und mache es dann ggf. so wie Gregor: Copy/Paste, das leider nicht besonders komfortabel ist. Ich bin jedesmal positiv “verwirrt”, wenn der Inhalt und nur der Inhalt ausgedruckt aus dem Drucker kommt.
@Alexander: Den Ausdruck extra mit “Druckversion” zu übertiteln halte ich persönlich nicht für notwendig bzw. eher für störend. Die Verwirrtheit wird sich in Grenzen halten, da der Anwender den Text im Ausdruck schnell wiedererkennt, den er vorher in der Bildschirmansicht zumindest “angelesen” hat. Als Überschrift erwarte ich eine übergeordnete Info zum Inhalt. Aber darüber kann man streiten.
Ein Drucklink ist IMHO nur eine Krücke. Wenn das CMS oder die Blog-Software das anbietet, ohne das man sich um ein eigenes Druck-CSS kümmern muss, ist das OK. Da vielleicht nicht jeder, der ein Blog/Webseite betreibt ausreichende Kenntnisse in CSS oder Zeit hat, ein eigenes Druck-CSS zu erstellen. Jedenfalls besser, als ein verkrüppelter Ausdruck.
Das Non-plus-Ultra ist IMO eine Druck-CSS-Datei, die nur den Inhalt an den Drucker schickt, wenn ich die Browser-Druckfunktion benutze. Denn dafür ist sie wohl mal gedacht gewesen ;-) . BTW: Über die Browserdruckfunktion kann ich den Inhalt über ein “PDF/PS-Drucker” auch als PDF oder PS abspeichern, ohne das ich einen weiteren PDF-Drucklink brauche.
Gruß Hani, der oft Inhalte von Webseiten ausdruckt.
Knut am Jun 21, 2008 | Reply
Das ganze mit Druckversion zu übertiteln halte ich für überflüssig.
Jens am Aug 8, 2008 | Reply
alle s für interessante Themen gibt. Werde jetzt öfters mal vorbeischauen.
Auyana am Dez 3, 2008 | Reply
Stefan am Dez 10, 2009 | Reply