Wir analysieren den Stand der Technik beim Drucken von Webseiten, dazu das Interview mit dem Autor: Björn Seibert. Martin stellt ein bischen was von CSS 3 vor und Nadja erzählt vom neuem Telemediengesetz, welche sich alle Podcaster und Blogger unbedingt ansehen sollten.

Diese Folge jetzt anhören

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.

ALA-Screenshot screen 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

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.

Diese Folge jetzt anhören

Tags: , , , ,

Dieser Beitrag wurde am Montag, 20. November 2006 um 00:00 Uhr in der Kategorie Podcast veröffentlicht.
Du kannst einen Kommentar hinterlassen, oder einen Trackback von deiner Seite aus senden.

Kommentare

  • Avatarbild von Silvan Hagen Silvan Hagen
    am 21. November 2006, 07:54 Uhr

    Persönlich mag ich es sehr, wenn die Website sich leicht ausdrucken lässt und alle unnötige Balast weg fällt. Ich denke, die wenigsten benötigen einen 1 zu 1 Ausdruck der Seite und wie ihr resp. Björn beschreibt, bietet sich auch noch der Screenshot an.

  • Avatarbild von Martin Thielecke Martin Thielecke
    am 23. November 2006, 09:44 Uhr

    Argl, “Das macht Sinn” ist wieder eines der vielen Millionen falscher Sprueche, die falsch aus dem englischen uebersetzt sogar im Fernsehen andauernd ausgestrahlt werden. Hochwertige Uebersetzer machen daraus das richtige “Das ergibt Sinn” (siehe http://www.seiberler.net/zwiebelfisch.htm).

  • Avatarbild von Björn Björn
    am 23. November 2006, 20:04 Uhr

    Argl, “Das macht Sinn” ist wieder eines der vielen Millionen falscher Sprueche, die falsch aus dem englischen uebersetzt sogar im Fernsehen andauernd ausgestrahlt werden.

    Theorie != Praxis -> Umgangssprache

  • Avatarbild von Marcel Schwarzenberger Marcel Schwarzenberger
    am 24. November 2006, 13:36 Uhr

    Oje, ich halte es für wenig sinnvoll, sich jetzt hier nur über Umgangssprache auszulassen.
    Wichtiger ist doch das Thema: Drucken von Webseiten. Ich bin kein Fachmann im Schreiben entsprechender Seiten, aber sehr wohl ein kritischer Nutzer von Webangeboten, die ich auch ausdrucken will. Ich halte das Angebot von eigens eingerichteten Druckansichten für sehr sinnvoll und hilfreich und bin dafür jedem Internetbetreiber dankbar. Ich muss oft Inhalte von (redaktionellen) Webseiten für meine Arbeit speichern. Wenn ich dann nur mit unerwünschten Grafiken und Frames zu kämpfen habe, nervt das. Fazit: Ich lege beim Ausdruck Wert auf gestraffte Informationen und nicht die komplette Weidergabe des Designs.

  • Avatarbild von Björn Björn
    am 24. November 2006, 14:09 Uhr

    Hallo Marcel,

    vielen Dank für das Feedback aus Nutzersicht!

  • Avatarbild von Frank Frank
    am 13. Dezember 2006, 12:20 Uhr

    Hallo,
    schöner Artikel, aber auch bei A list 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 Design 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

  • Avatarbild von macx macx
    am 13. Dezember 2006, 12:32 Uhr

    Schaut gut aus. Kleiner Tipp: Erhöhe das line-height etwa auf 130% oder 140%, dann ist der Text besser lesbar.

  • Avatarbild von Max Max
    am 25. Oktober 2007, 11:18 Uhr

    Hallo,

    man kan Tw 47 nicht runterladen,
    würde ich mir gerne anhören…
    könnte ihr mir vielleicht mailen
    ob und wann es geht?

    danke

    mfg

Und was hast du zum Thema zu sagen?

Fülle bitte alle mit *-gekennzeichneten Felder aus.


Du darfst Textile verwenden, um deinen Beitrag auszuzeichen.