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.

So optimieren Sie die Druckversion

© 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

magnus.de, drucken, webdesign

© 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

magnus.de, drucken, webdesign

© 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

magnus.de, drucken, webdesign

© 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 zum Thema

Amazon-Bücher kostenlos
eBooks auf Amazon

Lesen auf einem elektronischen Endgerät soll Bücher billiger machen und für mehr Komfort sorgen. Bei Amazon kann man das Ganze mit kostenlosen…
Der Siegeszug der Webradios
Internet killed the Radiostar

Webradio liegt im Trend, keine Frage. Dennoch ärgern sich noch viele mit den wackeligen Antennen und rauschenden Signalen ihrer Analoggeräte herum.…
gbit-switches, hardware, netzwerk
Tipps zum eigenen LAN

Wir zeigen Ihnen, wie Sie ein Heimnetzwerk mit zwei oder mehreren Windows-Rechnern einrichten - bei Bedarf inklusive Internet.
Wir zeigen, wie Sie den Rechner automatisch starten lassen.
PC automatisch starten lassen

Schön wäre es, wenn sich der gewünschte PC oder Server allein durch Gedankenkraft einschaltet. Da es nicht so einfach geht, müssen andere…
Fritzbox Telefonie
7 Tipps

Die FritzBox bietet Telefoniefunktionen, die vielen Profi-Telefonanlagen in nichts nachstehen. Wir zeigen, wie Sie sie optimal nutzen.