Drucken von Webseiten – 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
- Werbebanne 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.
!(L box)/images/blog/printcss_ala_screen.jpg (ALA-Screenshot screen)! !(L box)/images/blog/printcss_ala_print.jpg (ALA-Screenshot print)!
Ala Scrennshots vorher/nachher
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 zusätzlich anzugeben, 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
- Webseiten ausdrucken? Webstandards bieten Alternativen
- Print-friendly CSS and Usability
- Printing the Web
- Print to preview
- Going to print
Referenzen und Tutorials zum Thema Druck CSS
PDF-Lösungen
News
2007 kommen neue Telemediengesetze
Im Jahr 2007 werden in Deutschland neue Internetgesetze in Kraft treten, die besonders für Blogger und Podcaster deutlich mehr Vorschriften bringen werden. Inhaltlich wurden die meisten Bestimmungen aus den alten Gesetzen Teledienstegesetz und Mediendienste-Staatsvertrag übernommen, der Regelungsrahmen jedoch ändert sich: Auch Internetseiten, die bisher unter das lockere Teledienstegesetz fielen, gelten nun als Telemedien und müssen daher mehr Vorschriften erfüllen. Vor allem Blogger und Podcaster sind von den neuen Gesetzen betroffen:
Mit den neuen Telemediengesetzen gilt dann beispielsweise die allgemeine Impressumspflicht. Eine Ausnahme besteht nur für Angebote, die ausschließlich persönlichen oder familiären Zwecken dienen.
Neu ist ebenfalls eine Art Pressekodex für alle redaktionell tätigen Angebote, der besagt, dass wohl auch ein Nachrichtenblog die Nachrichten vor der Veröffentlichung auf Inhalt, Herkunft und Wahrheit überprüfen muss.
Auch die Platzierung von Werbung wird im neuen Telemediengesetz geregelt: Werbung muss als solche gekennzeichnet werden.
Die wohl wichtigste Änderung betrifft jedoch den Datenschutz: Anbieter von Telemedien können mit dem neuen Recht gezwungen werden, die Daten ihrer Nutzer herauszugeben. Die genaue Regelung wird derzeit noch von Bundestag und Bundesrat diskutiert.
Ohne große Änderungen werden die bisherigen Entwürfe der Telemediengesetze wohl in Kraft treten. Wie effektiv sie sein werden, wird sich zeigen. Doch bereits jetzt wird Kritik laut, die neuen Gesetze wären keine Verbesserung der bisherigen Lage sondern nur zu unverständlich und zu weit von der Realität im Netz entfernt.
(Quelle: Telepolis, Journalistisch anmutende Nachrichtenblogs)
Linktipps
- Michael Jendryschik befasst sich mit Mikroformaten und veröffentlicht auf seinem neuen Blog mikroformate.de eine S5-Präsentation: Mikroformate: Konzepte und Grundlagen .
- Eine umfangreiche Linkliste zu Cheat Sheets, meist einseitigen Übersichten zu bestimmten Bereichen, bietet Dieter Mayer in seiner ContentSchmiede: Good to have-Cheat Sheets.
- Das Digital Web Magazine beleuchtet anhand des Redesigns der New-York-Times-Website die Arbeit eines Webentwicklerteams, das zwischen Best Practice und den Beschränkungen im echten Arbeitsalltag entscheiden muss: Perfection Meets Reality.
- Das Valencia Community College in Orlando, Florida hat im September eine kleine aber interessante Umfrage zum Mobilen Web gestartet und nun die Ergebnisse im eigenen Blog veröffentlicht: The mobile web experience.
Ausblick auf CSS 3
In diesem Teil der Reihe Seltene/Unbekannte CSS-Eigenschaften werde ich einige neue Eigenschaften von CSS 3 vorstellen.
string-set: Belegt Variablen mit Werten, die später weiter verabrietet werden können.
Beispiel:
Gibt man einem Element folgende Eigenschaft
string-set: header content();
Belegt man die Variable header mit dem Inhalt des Elements, welches dann wie folgt in anderen Elementen ausgegeben werden kann.
content: string(header, first);
content habt ihr ja schon in der letzten Folge kennengelernt. string gibt den Wert der enthaltenen Variable zurück. first stellt sicher, dass nur der Inhalt des ersten Elements mit der Zuweisung string-set: header content(); ausgegeben wird.
crop: Bestimmt den angezeigten Auschnitt eines Bild-Elements. Eine Möglichkeit, den Auschnitt des Bildes zu bestimmen ist mit dem Wert rect();. In den Klammern finden sich die Offset Angaben des gewünschten Ausschnitts.
crop: rect(0px, 115px, 85px, 30px);
Die Offset Angaben werden wie bei der Shorthand Methode im Uhrzeigersinn – beginnend oben – hingeschrieben.
