Usability-Tipps - Kapitel "Inhaltspräsentation"

Was Sie bei einem Drucklayout beachten sollten

Im Web sieht vieles gut aus, was auf dem Papier in dieser Form ohne spezielle Anpassungen häßlich oder gar unbrauchbar aussehen kann. Daher bieten die meisten Websites entweder eine spezielle Druckansicht oder ein eigenes Drucklayout per CSS für ihre Seiten an, damit ein lesbarer und von Ballast befreiter Ausdruck möglich ist. Welche Besonderheiten sind bei einem solchen Drucklayout zu beachten und wie setzt man es um?

Um eine gut lesbar formatierte Druckausgabe zu erreichen, kann man neben echten und separaten „spartanischen“ Textversionen als Druckvariante vor allem spezielle Stilanweisungen in CSS einsetzen, die nicht benötigten Bereiche aus einer Seite zu entfernen, Zusatzinformationen wie z. B. Linkziele einzufügen, Textformatierungen, Abstände und Ausrichtungen anzupassen etc. Dabei kann auch für weitere Medientypen wie mobile Geräte etc. (und nicht nur für den Drucker und den Browser) ein ganz eigenes Layout und Schriftbild entworfen werden.

Ein so erstelltes Design für eine Printfassung kann entweder in den Metadaten jeder Seite für das entsprechende Medium „print“ deklariert (als separate Datei) eingebunden werden. ALternativ stehen die Anweisungen direkt in der „normalen“ CSS-Datei in einem speziellen Block (@media print {…}) . Auch im Fall eines CMS, das automatisch Druckfassungen aller Seiten zur Verfügung stellt, wird in der Regel der gleiche Inhalt wie auf einer „normalen“ Seite ausgegeben und nur durch zusätzliche Stilanweisungen per CSS in ein anderes Format gebracht.

Folgende Besonderheiten sollten Sie bei der Erstellung eines Drucklayouts beachten:

  • Ideal ist schwarze Schrift auf weißem Hintergrund. Passen Sie also Farben an und entfernen Sie auch Hintergrundgrafiken besser explizit aus der Druckansicht, wenngleich diese in der Regel heute automatisch beim Druck über den Browser entfernt werden.
  • Wenn Sie eine „Webschrift“ im Web einsetzen, kann in einer Printfassung eine separate Druckschrift verwendet werden, die zu Ihrem CI paßt.
  • Dabei können Sie auch gleich die Zeilenhöhe ggf. wieder reduzieren, wenn diese zu Gunsten der guten Lesbarkeit im Web vergrößert wurde.
  • Bereiche, die eine vorgegebene Breite haben, sollten den Rahmen des Papierausdrucks nicht sprengen. Das Ausblenden von Randspalten und die Neuformatierung des Hauptinhalts mit entsprechenden Außenabständen auf ca. 80% der Breite paßt auf die meisten Fälle und läßt Platz genug für spätere Lochung der Seiten.
  • Wenn Sie Randspalten, den Kopf und andere Standardelemente nicht komplett ausblenden können, denken Sie zumindest daran, dass die Navigation, umfangreiche Grafiken, Banner und Eingabemasken wie eine Suchfunktion o. Ä. keinen Wert auf einem Ausdruck haben und daher entfernt (display: none) werden können.
  • Ebenso ist es eine gute Idee, die Ziele von Links in einem Druckdesign als sichtbaren Zexz in Klammern an einen Link anzuhängen, um ihn auch offline wertvoll zu machen.
  • Sind Bilder mit sprechenden Titeln versehen, die als Ersatz für eine Bildunterschrift im Web dienen, können auf ähnliche Weise wie bei Links auch die Bildtitel (oder ALT-Texte) lesbar zur Abbildung ausgedruckt werden.
  • Im Fuß einer Seite ist es eine gute Idee, die üblichen Links zum Impressum etc. auszublenden und ersatzweise einen weiteren Bereich einzublenden, in dem Kontaktinformationen die Haupt-Webadresse, Anschrift, Telefonnummer etc. des Anbieters zu finden ist. Wenn Ihre Seiten potentiell zum Wettbewerbsvergleich oder der Weitergabe an einen Entscheider dienen, kann dies ein nachvollziehbarer Vorteil gegenüber anderen Ausdrucken sein, bei denen der Kontakt erst auf der Website wieder online herausgesucht werden muss.