Ratgeber Internet: Webseiten drucken

So optimieren Sie die Druckversion

Abgeschnittene Texte und unnötige Grafiken müssen nicht sein. Den Anwender nervt, wenn er sich aus vielen gedruckten DIN-A4-Seiten mühsam den interessanten Inhalt heraussuchen muss. Schenken Sie deshalb der Druckversion Ihrer Webseite ein wenig Aufmerksamkeit und optimieren Sie die Ausgabe.

© Archiv

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

© Hersteller/Archiv

Grafische Elemente: Was ist beim Druck wichtig? Was bläht den Ausdruck unnötig auf?

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:

<link rel="stylesheet" href="print.css" type="text/css"
media="print"/>

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:

@media print

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.

#navigation, #sidebar, #advertising {
display: none;
}

Wählen Sie die optimale Schrift

© Hersteller/Archiv

Reduzieren Sie die Bildgröße für den Ausdruck und achten Sie auf eine übersichtliche Darstellung einzelner Artikel.

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.

body {
font-family: Georgia, "Times New Roman", serif;
}

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.

body {
font-size: 12pt;
}

Schriftgröße und Schriftfamilie zusammengefasst:

body {
font: 12pt Georgia, "Times New Roman", serif;
text-align: justify;
}

Legen Sie die Farben für den Druck fest

© Hersteller/Archiv

Die Druckausgabe: Nutzen Sie das Papierformat vollständig und integrieren Sie zusätzliche Informationen wenn nötig.

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.

body {
background: #fff !important;
color: #000;
}

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.

body, #content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}

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.

a:link, a:visited {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
}

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.

a[href]:after {
content:" <"attr(href)">";
background-color: inherit;
color: #520;
font-style: italic;
text-decoration: underline;
}

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.

#container:after {
content: "\ Alle Rechte vorbehalten. (c) 2012 Name,
www.domain.de";
color: #000 !important;
font-size: 10pt;
border-top: 1px solid #000;
}

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.

img {
display: none
}

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

@media print {
img {
width: 50%;
height: 50%;
}
}

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Drucker-Hack

Viele netzwerkfähige Drucker lassen sich über das Internet konfigurieren und sind nicht hinreichend abgesichert. Nach einem Drucker-Hack konnten…
Malware-Schutz

Mit dem Gratis-Tool EMET von Microsoft verpassen Sie Ihrem PC ein kostenloses Sicherheits-Update und sichern fragwürdige Programme nach.
Computer ohne Werbung

Wer unachtsam Programme installiert, kann sich schnell unerwünschte Software-Parasiten einfangen. Wir geben 5 Tipps, wie Sie Adware vermeiden.
Firefox-Add-ons für YouTube

Werbung blockieren, Fenster im Vordergrund anpinnen und mehr: Mit diesen Add-ons für Firefox machen Videos auf YouTube noch mehr Spaß.
Kauf, Standards und Co.

Wir geben 7 Tipps zu Powerline-Netzwerken und verraten, worauf Sie beim Kauf und Einsatz der Adapter achten müssen.