zur Startseite vom TP

Eine schöne Webseite ist für Viele schon ein zufriedenstellendes, fertiges Werk. Oft wird dabei aber vergessen, dass die Seiten nicht unbedingt nur am Bildschirm überzeugen sollten. Wer sich, wie ich, gerne mal einen längeren Text ausdruckt, um ihn "offline" bei einer gemütlichen Zigarette oder einer Tasse Kaffe auf dem Sofa zu lesen, schaut bei vielen Webseiten mit dem Ofenrohr ins Gebirge. Abgeschnittene Absätze, irrsinnig viele tonerkostende Grafiken, mitgedruckte Menüs, farbige Hintergründe und vieles mehr ist oft das Resultat eines Drucks.

Mit diesem Report möchte ich ein paar Tipps geben, wie du deine Seiten sowohl für Bildschirm, als auch für Druckmedien optimieren kannst.

1Fatal Error No 1: Tabellenlayout

Die Unart, das Layout seiner Webseite mit Tabellen zu gestalten ist leider weit verbreitet. Der gravierende Nachteil dabei ist, dass meist die Breite der Tabellenspalten und die Größe der ganzen Tabellen fix angegeben sind. Was in einer 800 Pixel breiten Tabelle auf dem Bildschirm noch passabel dargestellt wird, sieht gedruckt schon wieder ganz anders aus. Der Text wird am rechten Rand des Blatts einfach abgeschnitten, da der bedruckbare Bereich auf einer Din A 4 Seite unter Abzug von 2 cm Seitenrand nur noch 17 cm beträgt, - 800 Pixel aber leider meist mehr entsprechen.

Alternative zu Tabellen mit festen Breiten sind

1. Relative Breitenangaben der Tabellenspalten
2. Ersetzen der Tabellen durch echte Layout Elemente

Alternative 1:

Relative Breitenangaben lassen sich in HTML und CSS in Prozent ausdrücken. Hast du beispielsweise in deinem Layout drei Spalten verwendet ( links Menü, mittig Text, rechts Marginalspalte ) würde sich vielleicht die Aufteilung 20% 60% 20% anbieten. Allerdings sei bei dieser "Lösung" angemerkt, dass sie erstens nicht im Sinne der Verwendung von Tabellen in HTML ist und zweitens sehr fehleranfällig. Die Aufteilung in oben genannte Prozentwerte wird nur dann zu einer druckbaren Seite, wenn die Tabelle das äußerste HTML Element ist. Die Tabelle darf dabei nicht von einem anderen HTML Element umschlossen sein (wie z.B. einer anderen Tabelle, einem Blockelement wie <divglt; etc.), welches wieder durch eine eigene Breitenangabe begrenzt ist.

Alternative 2:

Ersetzen der Tabellen durch echte Layoutelemente! Meine Lieblingsalternative. Tabellen sind nicht dazu gedacht, als Layout Element zu dienen. Dafür wurden in HTML die Blockelemente erfunden. Klassischerweise verwendet der Webdesigner den <div> - Tag zur Positionierung seiner Elemente. Dieses HTML Blockelement markiert einen "Allgemeinen Bereich". Das bedeutet, dieses Element ist noch nicht durch irgendwelche Vorbelegungen des Layouts belastet wie andere Blockelemente ( applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th).

Es steht dem Designer also frei, diesem Element einige visuelle Eigenschaften zu verleihen. Optimaler Weise per CSS. Die Vorteile, die uns eine Formatierung via CSS bietet, zeige ich dir in folgendem Abschnitt.

2CSS - Screen / Print Darstellung

Per CSS lassen sich wunderbar Screen- und Printlayout von HTML Seiten verschieden definieren. Folgende Möglichkeiten bieten sich dir:

Seitenlayout bestimmen

@page beschreibt die Ausmaße des Printmediums. Somit lassen sich für das Printmedium (wir gehen mal der Einfachheit halber von einer Din A 4 Seite aus) Layout, Ränder Schnitt- und Passmarken und vieles mehr definieren.

Im Code sieht diese Definition ungefähr so aus:

<style type="text/css">
   @page { size:landscape; }
</style>

Für mehr Informationen über die Definition des Drucklayouts per @page möchte ich dich an die SelfHTML von Stefan Münz verweisen. Es würde keinen Sinn machen, in diesem Report alles redundant zu erklären - Stefan kann das wesentlich besser.

3Verschiedene Medientypen

"Schön, dass ich die Seitenränder und dergleichen mit CSS formatieren kann", wird sich der ein oder andere nun denken. Aber da geht noch viel mehr:

Je nach Medium können nämlich verschiedene Stylesheets verwendet werden und das möchte ich dir ganz besonders an Herz legen.

Wie du sicher weißt, kannst du ein Stylesheet auf zwei Weisen anwenden: Entweder du setzt dein Stylesheet in jeder deiner HTML Dateien in den <head> und definierst es dort, oder du verweist im <head> auf ein externes Stylesheet (würde ich dir faulheitshalber empfehlen).  Egal für welche Möglichkeit du dich entscheidest, immer beginnt die Stylesheet Definition wie folgt:

<head>
 <!--Diverse Angaben im Kopf-->
 <style type="text/css" ... 

Ein wesentliches Attribut von <style> ist media! Egal ob du deine Stylesheets in einer separaten CSS Datei definierst, oder direkt im <style> Container, dieses Attribut bietet dir die Möglichkeit für Bildschirm und Drucker verschiedene Style Definitionen zu verwenden.

Warum verschiedene Styledefinitionen? Nun, macht es Sinn, dem Benutzer auf die ausgedruckte Seite möglichst viele Links farbig hervorzuheben? Wohl eher nicht, das Daraufklicken würde ihm ziemlich schwer fallen. Zudem können irrelevante Elemente, wie zum Beispiel die Site - Navigation, einfach ausgeblendet werden und verbrauchen somit keinen wertvollen Platz auf der gedruckten Seite.

4Ein Beispiel:

Wir haben eine ganz simple Seite mit Menü- und Inhaltsbereich. Der Quelltext könnte ungefähr so aussehen:

<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <div class="Menu">
      <a href="index.htm>Home</a>
      <a href="eineSeite.htm>Eine Seite</a>
      <a href="eineAndere.htm>Eine andere</a>
    </div>
    <div class="Inhalt">
      <h1>Eine &Uuml;berschrift</h1>
      <p>Ein Text</p>
    </div>
  </body>
 </html> 

.Menu {
   font-family: Arial, MS Sans Serif, Verdana;
   font-size: 12px;
   color: #0000FF;
}
   .Inhalt {
   font-family: Arial, MS Sans Serif, Verdana;
   font-size: 14px;
   color: #999999;
} 

<html>
 <head>
 <title>Meine Seite</title>
 <style type="text/css" media="screen,projection">
   .Menu {
   font-family: Arial, MS Sans Serif, Verdana;
   font-size: 12px;
   color: #0000FF;
   }
   .Inhalt {
   font-family: Arial, MS Sans Serif, Verdana;
   font-size: 14px;
   color: #999999;
   }
 </style>
 <style type="text/css" media="print">
   /*Der allgemeine Bereich Menü wird versteckt*/
   .Menu {
   visibility: hidden;
   display: none;
   }
   /*Die Schriftfarbe wird auf schwarz gesetzt*/
   .Inhalt {
   font-family: Arial, MS Sans Serif, Verdana;
   font-size: 14px;
   color: black;
   }
 </style>
 </head>
 <body>
 <div class="Menu">
   <a href="index.htm>Home</a>
   <a href="eineSeite.htm>Eine Seite</a>
   <a href="eineAndere.htm>Eine andere</a>
 </div>
 <div class="Inhalt">
   <h1>Eine &Uuml;berschrift</h1>
   <p>Ein Text</p>
 </div>
 </body>
</html> 

So erhalten wir, relativ einfach, für jedes Medium seinen eigenen Style, ohne alle Seiten doppelt und dreifach abtippen zu müssen.

Meine Empfehlung ist diese Alternative!

5Twins - ungleiche Seitenpaare

Last (and least!) besteht noch die Möglichkeit, für Druck oder Bildschirmanzeige den selben Inhalt in zwei HTML Seiten zu packen und auf der Bildschirmvariante einen Link auf die Druckversion zu anzubieten.

Nachteile:

Zusätzliche Arbeit mit jeder neuen Seite (jeweils eine Kopie für den Druck).
Ärger bei Änderungen (Änderungen müssen auf beiden Seiten nachgezogen werden -> mögliche Fehlerquelle). Besucher übersieht möglicherweise den Link zur druckoptimierten Seite und druckt doch die Bildschirm - Variante.

Der eine Vorteil liegt auf der Hand: Druckerfreundliche Seiten sind verfügbar. Eine solche Vorgehensweise lohnt sich allenfalls bei dynamisch generierten Seiten ( durch mySQL und PHP oder XML in Verbindung mit diversen XSLT Prozessoren), wobei Inhalt und Formatierung erst on demand zusammengefügt werden und menschlichen keinen Aufwand darstellen.

6Fazit

Druckerfreundliche Seiten zu gestalten ist mittels CSS und etwas Wissen um die Eigenheiten von Printmedien nicht besonders aufwändig. Die zusätzliche Arbeit rundet eine gelungene Internetpräsentz noch ab, so dass ihr Inhalt sich voll und in jeder Form entfalten kann. So etwas wünsche ich mir im Netz viel öfter anzutreffen - du auch? Dann mach mit!