So optimieren Sie die Druckversion

Manche Webdesigner wehren sich vehement gegen eine ansprechende Ausgabe ihrer Internetseiten. Schnöde schwarzweiße Textseiten in verheerender Optik sind die Folge. Nachfolgend finden Sie Profi-Tipps dagegen.

Weniger ist mehr

Logo, Layout-Bilder, Hintergrundgrafiken, Navigation, Links, Fußzeile, Grafiken, Werbebanner - eine schön gestaltete Internetseite besteht aus vielen Elementen, die für den visuellen Gesamteindruck nötig sind. Dazwischen versteckt sich der Inhalt. Überlegen Sie sich erst, welche Teile Ihrer Internetseite die eigentliche Information beinhalten. Weswegen möchte der Anwender die Seite drucken?

Was davon ist überflüssig? Es hilft oft, wenn Sie die entsprechende Seite vor der Druckoptimierung einmal selbst drucken. Streichen Sie im Ausdruck alles, was stört. Überprüfen Sie den Rest auf eine ordentliche Darstellung und konzentrieren Sie sich darauf.

Sagen Sie dem Drucker, was er tun soll

Mit Hilfe von CSS-Deklarationen geben Sie dem Drucker die nötigen Anweisungen. Hier gibt es grundsätzlich verschiedene Möglichkeiten: eine separate CSS-Datei oder gezielte CSS-Anweisungen. Eine eigene Print-CSS-Datei binden Sie im Head-Bereich eines (X) HTML-Dokuments so ein:

Der Name print.css ist hier nicht ausschlaggebend. Diese Bezeichnung ist zwar gängig, aber nicht nötig. Die Angabe des Media-Attributes durch media="print" gibt diese Information weiter.

Möchten Sie nur eine einzige CSS-Datei verwenden, können Sie die Druckausgabe auch über eine CSS-Syntax ansprechen:

Blenden Sie störende Elemente aus

Beschränken Sie sich auf den eigentlichen Inhalt und entfernen Sie überflüssige Elemente aus dem Druckdokument. Alle nicht benötigten Container können Sie ganz einfach unsichtbar machen, indem Sie den jeweiligen Elementen das Attribut display zuweisen und den Wert none vergeben. In diesem Beispiel wird die Navigation, die Sidebar und die Werbefläche ausgeblendet. Ersetzen Sie die Container-Namen entsprechend den Bezeichnungen in Ihrer Webseite.

Wählen Sie die optimale Schrift

Der Inhalt, also im Wesentlichen der Text, ist das Wichtigste der gedruckten Version einer Internetseite. Schriften, die auf dem Bildschirm gut lesbar sind, ergeben im Druck nicht immer ein ordentliches Schriftbild. Ändern Sie deshalb wenn nötig die Font-Angabe für die Druckversion.

Grundsätzlich sind Serifen-Schriftarten, wie Times New Roman, in gedruckter Form meist besser lesbar als serifenlose Schriften wie Arial. Beschränken Sie sich für die Print-Ausgabe auf systemeigene Standardschriften. Die Auswahl der geeigneten Fonts ist hier wie bei der Webseiten-Gestaltung eingeschränkt, Sie vermeiden damit aber unnötige Schwierigkeiten.

Geben Sie in Ihrer print.css die Schriftart also separat an - wenn nötig auch gänzlich abweichend zur Bildschirmdarstellung.

Definieren Sie die Schriftgröße richtig

Geben Sie für die Druckausgabe die Schriftgröße nicht in Pixel, sondern in Punkt an. Dieser Wert ist eine absolute Größe, die auf jedem Ausgabegerät gleich interpretiert wird. Eine Angabe in Pixel würde hier abhängig von der Auflösung des Druckers zu sehr unterschiedlichen Ergebnissen führen. Ein optimales Ergebnis erzielen Sie mit einer Schriftgröße von 12 pt. Der Text ist hier gut lesbar.

Schriftgröße und Schriftfamilie zusammengefasst:

Legen Sie die Farben für den Druck fest

Egal wie farbenfroh Sie Ihre Webseite gestaltet haben - für die Druckversion sollten Sie erst für alle Schriften die Farbe Schwarz definieren und für alle Elemente die Hintergrundfarben in Weiß ändern. Damit der Hintergrund stets nichtfarbig ausgegeben wird, erzwingen Sie das am besten mit dem Zusatz !important für die gesamte Webseite.

Den CSS-Klassen für Headlines können Sie eine Farbe für den Druck zuweisen. Denken Sie daran, dass bei einem Schwarzweißdruck jede Farbe in Graustufen umgewandelt wird. Wählen Sie die Farben also nicht zu hell, damit der Text lesbar bleibt.

Passen Sie den Inhalt an das Papierformat an

Nutzen Sie die Papierbreite. Da Sie nicht wissen können, in welcher Größe und auf welchem Format die Internetseite gedruckt wird, überlassen Sie das dem Anwender bzw. dem Drucker. Erlauben Sie deshalb in der Druckversion den Inhalts-Containern, die vollständige bereitstehende Breite auszufüllen.

Das erreichen Sie durch die Einstellung auto oder 100%. Auch diese Angaben versehen Sie mit dem Attribut !important. So vermeiden Sie, dass sich die Angaben anderer CSS-Klassen möglicherweise bei der Druckversion durchsetzen.

Darstellung von Links

Links können Sie durch eine Unterstreichung kennzeichnen. Diese Hervorhebung ist gängig und wird von den Anwendern auch als Link-Kennzeichnung wahrgenommen. Die Auszeichnung für die Zustände :hover und :focus benötigen Sie hier nicht und können diese in der print.css weglassen.

Allerdings geht durch das bloße Kenntlichmachen eines Links in der Druckversion eine wesentliche Information verloren: Wohin führt dieser Link und wie lautet die URL? Damit diese Angaben auch in gedruckter Form verfügbar sind, können Sie in der Print-Klasse durch die Pseudoelemente :before und :after oder über das Attribut content: zusätzliche Informationen mitgeben.

Erstellen Sie eine sinnvolle Fußzeile

Am Ende des gedruckten Dokuments können Sie zusätzliche Informationen einfügen. Sinnvoll ist hier z.B. die Copyright-Angabe und die URL der Webseite. Fügen Sie diese Angaben wieder mit Hilfe von Pseudoklassen und dem Attribut content: in Ihre Print-Version ein.

Bilder in der Druckausgabe

Die meisten Browser ignorieren Hintergrundgrafiken in der Druckversion. Direkt über einen img-Tag eingefügte Grafiken können Sie in Ihr Drucklayout integrieren oder die Ausgabe aller Bilder unterbinden.

Möchten Sie Bilder in die Druckausgabe integrieren, geben Sie wenn nötig eine Standardgröße für die Bilder im Inhalt an.