Design

Druckversionen mit CSS

Viele Webdesigner legen die Aufmerksamkeit einer Website auf ihr Design im Browser. Dass jedoch viele Besucher Artikel gern ausdrucken, um sie offline zu lesen, vergessen viele. Deshalb ist es umso wichtiger, geeignete Druckversionen bereitzustellen. Gestaltungselemente, Navigation und nebensächliche Informationen treten in den Hintergrund, wichtig ist allein die (Haupt-)Information.

Viele CMS bieten von Haus aus spezielle Druckversionen an, die automatisch erzeugt werden. Doch solche umfangreichen Skripte sind meist nicht notwendig, denn mittels CSS kann man Druckversionen gestalten, die informativ und lesbar sind und trotzdem erkennbar zu einer Website gehören.

Artikel über Druckversionen mit CSS

Es gibt bereits eine Menge aufschlussreiche Informationen zum Thema „Druckversion mit CSS“. Daher habe ich hier eine kleine Liste zusammengestellt, die weiterhelfen und zum Nachdenken anregen.

Eigenes Layout für die Druckversion

Bei der Erstellung einer print.css geht nicht nur einfach darum, unnötige Bereiche auszublenden, sondern auch darum, das Drucklayout an die eigene Website anzupassen. Es ist gut, wenn sich der Besucher auch Wochen nach dem Ausdruck noch an den Fundort erinnern kann – dank des Layouts des Ausdrucks. Der Wiedererkennungswert sollte gewahrt werden. Dazu eignet sich besonders das Logo und bekannte Schriftfarben der Website (auch wenn viele Besucher aus Kostengründen einen Schwarz-Weiß-Druck vorziehen).

Gerade jetzt können kleinere Probleme auftreten, wenn beispielsweise das Logo in einer riesigen Headergrafik gespeichert wurde oder für das Website-Design einen Farbverlauf besitzt. Im Dreamwaver-Tutorial ist dieses Problem einfach gelöst: Das Logo im Header besitzt einen Farbverlauf und wird im Druck durch ein einfacheres Logo ersetzt. Beide Grafiken sind im Quelltext vorhanden, werden aber durch die verschiedenen Stylesheet entweder ausgeblendet oder angezeigt.

Das richtige Logo der Seite im Stylesheet für die Anzeige im Browser (media="screen")

#logo{
  display: none;
}

Das Logo für den Druck in der print.css (media="print")

#printlogo{
  display: block;
}

Auch Links und Abkürzungen sollten beim Druck berücksichtigt werden. Wie man die URL von Links in einer Druckversion anzeigen kann zeigt Heiko vom Webstandards-Blog in seinem Artikel Webseiten ausdrucken? Webstandards bieten Alternative!

Beachte: Das Drucken von Hintergrundbildern und farbigen Schriften wird oft von den Browsern unterdrückt, daher sollte man darauf verzichten. Auch die Seitenränder können nur vom Besucher selbst in den Browsereinstellungen festgelegt werden. Wenn man also zu große Abstände im Stylesheet vergibt, kann wertvoller Platz auf dem Papier verschenkt werden.

Mehrwert für Besucher?

Der Vorteil von Druckversionen durch CSS liegt klar auf der Hand: Geringer Zeitaufwand für ein einheitliches Drucklayout. Doch woran erkennt der Besucher, dass die Website eine spezielle Druckversion anbietet, sobald im Browser auf Drucken klickt? Viele haben bereits schlechte Erfahrung gemacht, da durch die fehlende print.css das gesamte Website-Design durch den Drucker lief. So werden kurzerhand alle wichtigen Information per copy&paste in ein Textbearbeitungsprogramm kopiert, angepasst und ausgedruckt.

Wie also zeige ich meinem Benutzer (möglichst dezent), dass er einen Artikel, eine Seite einfach drucken kann und sich so Arbeit spart?

Kategorie: Design

von

Hallo, ich bin Nadja und arbeite als Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

4 Kommentare

Kommentare sind geschlossen.