Fachbeitrag
Layoutwünsche – Der Besucher entscheidet

Eines für alle!

Der große Vorteil eines zentralen Stylesheets für alle HTML-Dokumente ist, dass wenn eine Farbe, Schrift oder ein Hintergrund ausgewechselt werden soll, dies durch eine kleine Änderung in der CSS-Datei möglich ist. Darüberhinaus spart man auch Server-Kosten, da eine externe CSS-Datei die HTML-Dateien nicht unnötig mit Style-Angaben aufbläst und oftmals im Cache des Internetbesuchers gespeichert wird.

Ein weiterer Vorteil ist die Möglichkeit, dieses Stylesheet gegen ein anderes auszutauschen, und damit das eigene Design entweder komplett zu verändern, oder zum Beispiel nur die Schrift zu vergrößern. Hervorragend demonstriert wird diese Funktion beim amerikanischen Wired-Magazin. Dieses überlässt seinen Lesern die Wahl der Schriftgröße, und die Seite skaliert sich je nach Wunsch. Diese Funktion ist in der oberen rechten Ecke untergebracht, und ein Klick auf einen der unterschiedlich großen Buchstaben verändert das Design. Der Wunsch nach der bevorzugten Schriftgröße wird hierbei in einem Cookie gespeichert und wirkt sich auf alle besuchten Wired-Seiten aus.

Container-Arbeit

Am besten funktioniert die Zusammenarbeit eines Stylesheetswitchers, wenn der Inhalt (HTML) vom Layout (CSS) strikt getrennt wird und der Webprogrammierer auf das zukunftsweisende XHTML-Format setzt.

Weiterhin sollte die XHTML-Seite mit <div>-Containern in ihre Hauptbereiche wie Kopfzeile, linke Spalte, rechte Spalte, mittlere Spalte als auch Fusszeile unterteilt werden. Innerhalb dieser Hauptcontainer können natürlich weitere Untercontainer für Navigation, Suche, Rubriken, News etc. eingerichtet werden. Sämtliche Inhaltsboxen sollten mit einer eigenen »id« versehen werden, die im Dokument lediglich einmal(!) verwendet wird.

Dadurch erhält Ihr XHTML-Dokument eine Struktur, die es erleichtert, Boxen mittels Stylesheetvorgaben zu verschieben (relativ und absolut zum restlichen Design), zu vergrößern oder mit dem Befehl »display: none« ganz verschwinden zu lassen – dazu später mehr.

Außerdem sollten Sie, wenn möglich, die Standardtags <h1> bis <h6>, <p>, <strong>, <blockquote> etc. für die Textauszeichnung nutzen. Das hat neben der logischen Übersicht außerdem den ungemeinen Vorteil, dass Suchmaschinen wie Google ihre Seite »verstehen« können. Da vor allem die Überschriften-Tags <h1> bis <h6> in der Regel eine Gewichtung im Inhalt vorgeben, sortiert eine Suchmaschine den Inhalt zwischen diesen Tags nach ihrer Wichtigkeit. Weiterhin sichern Sie sich dadurch, dass auch ältere Browser die Seite gemäß ihrem logischen Inhalt wiedergeben.

Beispiel-Aufbau

Unser einfaches tabellenloses Layout (siehe auch Internet-Intern-CD!) besteht aus drei Spalten: links, Mitte und rechts. Während wir den Styleswitcher in der rechten Spalte unterbringen, kann die linke Spalte der Navigation dienen. Die mittlere Spalte benutzen wir für den Inhalt, sprich Texte und Bilder werden in diesem Container angezeigt.

Listing 1: Unsere HTML-Datei mit den <div>-Containern

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>PHP STYLESHEET SWITCHER</title>
<link rel="stylesheet" type="text/css" media="screen" title="User Defined Style" href="<?php echo (!$sitestyle)?'normal':$sitestyle ?>.css" />
</head>
<body>
<div id="links">
<h3>Links</h3>
</div>
<div id="rechts">
<div id="styleswitcher">
<h3>Styleswitcher</h3>
<form action="http://www.phlow.de/switch/switcher.php" method="post">
<select name="set">
<option value="klein">klein</option>
<option value="normal" selected="selected">Normal</option>
<option value="gross">GROSS</option>
</select>
<input type="submit" value="Go" />
</form>
</div>
</div>
<div id="mitte">
<div id="inhalt">
Inhalt: Texte und Bilder
</div>
</div>
</body>
</html>

Listing 2: Aufbau des tabellenlosen CSS-Layouts

html, body {
    margin: 10px 0 0 0;
    padding: 0;
    background-color: #fff;
    font-family: Verdana, Arial, Sans-Serif;
    color: #000;
    font-size: 12px;
}

#links {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0px;
    width: 220px;
    background-color: #FFCC33;
    border: 1px solid #000;
}

#mitte {
    margin: 0px 230px 0px 230px;
    padding: 0;
    border: 1px solid #000;
    background-color: #CCCC99;
}

#rechts {
    margin: 0px;
    padding: 0px;
    position: absolute;
    right: 0px;
    width: 220px;
    background-color: #0099FF;
    border: 1px solid #000;
}

#inhalt {
    margin: 10px;
}

Stilvielfalt – Eine Frage des Geschmacks

Ob der Besucher nur die Möglichkeit bekommt, die Schriftart zu vergrößern, oder ein Lieblingslayout unter mehreren aussuchen darf, bleibt ihrer Kreativität und Zeit überlassen. Die Möglichkeiten sind hier fast unerschöpflich.

Integration des PHP-Schalters

Für den PHP-Schalter erstellen wir zuallererst ein neues PHP-Dokument mit dem Namen »switcher.php«, das den folgenden Code beinhaltet:

<?php
setcookie ('sitestyle', $set, time()+31536000, '/', 'ihre_website.de', '0');
header("Location: $HTTP_REFERER");
?>

Wenn die Datei angefordert wird, setzt sie einen Cookie mit dem detaillierten CSS-Wunsch des Besuchers. Das Cookie verfällt nach einem Jahr und schickt den Benutzer auf die vorangegangene Website zurück. Die einzige Änderung, die sie an dem Script vornehmen müssen, ist, dass sie die Variable »ihre_website.de« gegen ihre tatsächliche austauschen, sonst ist der Cookie nicht valide.

Um dem PHP-Script mitzuteilen, welches Stylesheet der Besucher serviert haben möchte, kann man herkömmliche Text- und Bilder-Links als auch Dropdown-Menüs verwenden. Dem Script muss nur der Name der CSS-Datei übergeben werden:

<a href="http://ihre_website.de/switcher.php?set=gross">Klicken Sie hier für größere Buchstaben!</a>

Natürlich sind die Möglichkeiten, die sich mit dem Austausch eines Stylesheets ergeben, riesig. Schauen Sie sich dazu einmal die Website www.csszengarden.com an. Alle Designs basieren auf nur einem HTML-Dokument. Dieses wird durch die unterschiedlichen Stylesheets komplett verändert.

Das Auslesen des Cookies

Damit der Styleswitcher auch für alle weiteren Seiten funktioniert, muss natürlich das Cookie ausgelesen werden. Dazu müssen sie in jedem Dokument im <head>-Bereich folgenden Code-Schnippsel einfügen:

<link rel="stylesheet" type="text/css" media="screen" title="Benutzer definiertes Stylesheet" href="<?php echo (!$sitestyle)?'normal':$sitestyle ?>.css" />

Auf den ersten Blick ist das die gewöhnliche Methode, mit welcher man per <link>-Tag die Stylesheets in ein HTML-Dokument einbindet. Der große Unterschied ist aber, dass anstelle der verlinkten CSS-Datei das kleine Erkennungsscript <?php echo(!$sitestyle)?'normal':$sitestyle ?> die Cookie-Informationen ausliest, um daraufhin das Lieblings-Stylesheet des Besuchers zu laden.

Sollte ihr Besucher Cookies abgeschaltet haben, lädt der Browser die voreingestellte Datei »normal.css«.

Die eigene Druckversion

In der Regel bieten größere Websites eigene Druckversionen einer Website an. Die werden entweder dynamisch erstellt oder als extra Webseite auf den Server gelegt. Bei beiden Methoden entsteht erneuter Traffic, da ein neues Dokument angefordert wird, und gegebenenfalls wird mehr Webspace für die Extra-HTML-Seite benötigt. Doch es geht auch anders und einfacher.

Eine CSS-Datei genügt, die mit dem HTML-Dokument verknüpft wird. Damit der Browser erfährt, dass es sich ausschließlich um ein Printstylesheet handelt und es nicht mit dem Stylesheet für das reguläre Layout verwechselt, muss lediglich ein Attribut gesetzt werden: media=»print«.

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

Sollte nun ihr Besucher eine Webseite ausdrucken, benutzt der moderne Browser das vordefinierte Stylesheet, das in unserem Fall »druckversion.css« heisst.

Wenn wir nun für unser dreispaltiges Layout eine geeignete Druckversion erstellen wollen, müssen wir uns zuerst fragen, worauf der Besucher bei einem Ausdruck wert legt und worauf nicht. Anschließend sollte der übriggebliebene Inhalt für einen Ausdruck noch einmal optimiert werden.

In unserem Fall wäre die linke und rechte Spalte vergeudete Druckertinte und sollte nicht mit ausgedruckt werden. Ein schlichtes »display: none;« verknüpft mit dem Spalten-Container blendet diesen aus:

#links {display: none}
#rechts {display: none}

Weiterhin sollte der Hintergrund ihres HTML-Dokuments als auch der Hintergrund der mittleren Spalte weiss sein sowie mögliche Rahmenlinien (»border: none«) verschwinden. Die Schrift sollte natürlich schwarz definiert sein, und ihr sollte im Body-Tag eine Mindestgröße gegeben werden. Verwenden Sie bei der Festlegung der Schriftgröße das Format »pt«. Dieses eignet sich am besten für Druckversionen. Das Body-Tag könnte dann z.B. so aussehen:

body {
    background: white;
    font-size: 12pt;
}

Printstylesheet und Switcher verknüpfen

Die wenigsten Surfer verstehen die Technik hinter einer Website. Auch versierte User können nur über den Quellcode herausfinden, ob eine HTML-Datei mit einem für Print optimierten Stylesheet verbunden ist. Hier kommt wieder unser Stylesheetswitcher zum Einsatz. Neben den normalen Layouts bieten sie beim Switcher auch die Druckversion an. Ein Problem entsteht jedoch durch die Verwendung unserer Druckversion. Klickt ein Benutzer auf den Link zum Druckstylesheet, wird in unserem Beispiel auch die rechte Spalte ausgeblendet. Dadurch verschwindet unser PHP-Switcher. Deswegen sollten Sie in jedem Dokument am Ende eines Artikels einen Link setzen, der die normale Einstellung wiederherstellt.

Soll dieser Link in der normalen Artikelversion nicht auftauchen, betten Sie ihn einfach in einen eigenen Container, den sie wiederum mit »display: none;« verschwinden lassen und nur in der Druckversion anzeigen.