Liquid Design: eines für alle.
Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/1043668271.shtml
Bevor Sie mit dem Lesen dieses Artikels beginnen, machen Sie sich frei von der alten Vorstellung, dass absolute Browserkompatibilität unmöglich ist. Atmen Sie nun dreimal tief durch. Jetzt sind Sie bereit, in die Welt des "Liquid Design" einzusteigen.
Ein Design für alle Browser
"Liquid" soll nicht etwa heißen, dass das ganze etwas mit Flüssigkeiten zu tun hat - keine Sorge, Ihr Monitor bleibt trocken. Es geht darum, dass sich das Design dem gerade verwendeten Browser anpasst, eben so, wie sich Flüssigkeit automatisch ihrem Behältnis anpasst.
Pixelgenaue Kontrolle unmöglich
Doch halt - wir müssen Sie von einer weiteren alten Vorstellung befreien. Machen Sie sich frei vom Gedanken, die Darstellung Ihrer Site auf den Pixel genau kontrollieren zu müssen. Liquid Design heißt, dass es darum geht, die Site für alle Browser benutzbar zu machen. Einen Design-Award werden Sie dafür nicht bekommen - aber dafür den Dank Ihrer Benutzer.
Kompromiss aus Design und Ästhetik
Selbstverständlich schließen sich Liquid Design und Ästhetik nicht aus. Oft wird es sogar das Beste sein, einen vernünftigen Kompromiss zu finden. Das könnte sein, dass Sie eine Darstellungsbreite von mindestens 300 Pixeln voraussetzen - einige PDA-Benutzer werden Ihre Site dann halt nicht ansehen können. Was Sie wie voraussetzen, liegt bei Ihnen - überlegen Sie, wer Ihnen wichtig ist.
Der Nutzen von Liquid Design
Sätze wie "Ein Design für alle Browser" sind für Webdesigner nicht allzu überzeugend. Die meisten benutzen ja ohnehin einen PC mit dem Internet Explorer, wieso also für andere Browser optimieren?
Diese Argumentation jedoch lässt einen wesentlichen Punkt außer Acht: jeder Internet Explorer kann unterschiedlich konfiguriert sein. Vielleicht hat der Benutzer z.B., weil seine Augen schlecht sind, die Standard-Schriftgröße hochgesetzt. Natürlich können Sie das mit absoluten Schriftgrößen-Angaben unterbinden, aber wird sich dieser Surfer dann nicht bevormundet vorkommen? Und eine Site, die man kaum lesen kann, macht nicht viel Spaß.
Liquid Design kommt auch mit solchen Situationen klar - um Sie zu überzeugen, hier eine kleine Liste mit Eventualitäten, die herkömmlichem Design ziemlich zu schaffen machen können:
- IE, aber Schriftgrößen erhöht
- IE, aber kein Vollbildmodus
- IE, aber "Bilder laden" abgeschaltet
- IE, aber JavaScript/aktive Inhalte deaktiviert
- Anderer grafischer Browser wie Netscape, Mozilla, Opera...
- Benutzer ist behindert und benutzt speziellen Browser
- Surfer verwendet Text-Browser
- PDA / WebTV wird verwendet
Und Liquid Design löst alle diese Probleme?
Nein. Liquid Design versucht das zwar, löst aber auch nicht alle Probleme. Wer z.B. das flüssige Design auch auf Netscape 4.x-Browsern darstellbar machen will, bekommt mit Text-Browsern Probleme. Wieder einmal liegt es an Ihnen, die nötigen Entscheidungen zu treffen.
Aber: Liquid Design ist gut - auch durchaus im moralischen Sinne. Sie machen das Internet damit zu einem besseren Platz, der auch von Behinderten besser genutzt werden kann.
Im Folgenden erklären wir Ihnen daher die Techniken und erläutern, was mit welchem Browser harmoniert und was Probleme macht.
Zwei Ansätze
Um in der Praxis Liquid Design anzuwenden, gibt es zwei Alternativen: CSS und Tabellen.
Tabellen..
.. sind die ältere Technologie. Die meisten grafischen Browser verarbeiten sie ohne größere Probleme. Jedoch: wenn Sie ein kompliziertes Layout umsetzen, bekommen Sie Probleme mit Text-Browsern wie Lynx und wohl auch mit einigen PDA-Browsern. Lynx z.B. zeigt Tabellen von oben nach unten bzw. links nach rechts an. Es kommt dann also darauf an, die eigentlichen Inhalte und die Navigation möglichst weit "oben" zu platzieren.
CSS..
.. werden im Zusammenspiel mit Layern verwendet. Moderne Browser zeigen sie problemlos an. Ältere grafische Browser, insbesondere der Netscape Navigator 4.x, haben damit jedoch größere bis unlösbare Probleme. Text-Browser haben mit richtig designten Layern - die wichtigen Teile in der HTML-Datei nach oben stellen - keine Probleme. Ähnliches dürfte für PDA- und Handy-Browser gelten, die Layer ignorieren sollten.
Entscheidungszwang
Doch welchen der beiden Ansätze sollte man bevorzugen? Wenn man gutes Design machen will, sind CSS auch in Bezug auf "Accessibility" (Benutzbarkeit für Behinderte) zu bevorzugen. Wer dagegen viel Wert auf NN 4.x-Besucher legt, sollte Tabellen verwenden.
Umsetzung mit CSS
Die Umsetzung mit CSS ist simpel. Folgendes Beispiel zeigt ein dreispaltiges Layout mit einem darüber liegenden Extra-Bereich, z.B. für Banner oder die Überschrift:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Liquides Layout</title>
<style type="text/css">
#navi {
position: absolute;
top: 140px; /* Abstand nach oben */
left: 0;
width: 150px;
margin: 5px;
padding: 10px;
}
#rechts {
position: absolute;
top: 140px;
right: 0;
width: 200px;
}
#main {
position: absolute;
top: 140px;
padding-left: 220px;
padding-right: 220px;
}
</style>
</head>
<body>
<h1>Dreispaltiges Standard-Layout</h1>
<div id="main">
Haupt-Text
<div id="rechts">
<p>
Zur freien Verwendung
</p>
</div>
<div id="navi">
Navigation
</div>
</body>
</html>
Zur Erklärung: wir definieren drei Layer. Der am weitesten oben stehende ist der Haupttext-Layer, damit Text-Browser die wichtigen Inhalte zuoberst anzeigen.
Dann spezifizieren wir die Layer mit CSS: der linke und der rechte bekommen eine feste Breite und einen Abstand vom oberen, linken oder rechten Rand zugewiesen.
Der mittlere, der die Inhalte beherbergen soll, bekommt dagegen keine feste Breiten-Definition - er darf sich einfach ausdehnen, entsprechend der Breite seiner Inhalte. Wir verwenden aber die padding-Attribute, um zu verhindern, dass er die beiden anderen Layer überdeckt.
Wenn Sie Anregungen suchen, wie sich dieses Modell weiter ausgestalten lässt, sehen Sie sich doch einmal diese Seite an - dort haben wir ein wenig mit Farben, Schriften und Rahmen herumexperimentiert.
Probleme mit diesem Modell
"Aber wirklich 'liquid' ist dieses Modell nicht", werden Kritiker bemängeln. Sie haben Recht. Für den rechten und linken Rand sind jeweils feste Größen vorgegeben. Das macht aus Sicht des Designers Sinn: so ist wenigstens eine Minimalbreite für das Navigationsmenü definiert. Wenn Sie damit ein Problem haben, sollten Sie wahrscheinlich die Tabellen-Lösung einsetzen.
Mehr Informationen
In unserem CSS-Tutorial finden Sie weitere Informationen zu Stylesheets im Allgemeinen. Wir haben auch einen separaten Artikel zum Thema Rahmen-Effekte veröffentlicht.
Umsetzung mit Tabellen
Der Ansatz mit Tabellen funktioniert folgendermaßen: man definiert eine Tabelle, deren Breite auf 100% gesetzt wird. Die Tabelle hat drei Spalten. Die mittlere Spalte bekommt die Breite * zugewiesen, dadurch wird sie so groß wie möglich. Die linke und rechte Spalten-Breite können Sie entweder auf einen festen Wert setzen oder mit Prozentangaben ebenfalls "flüssig" machen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Liquides Layout</title>
<style type="text/css">
body {
background: white;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>Dreispaltiges Standard-Layout</h1>
<table width="100%" border="0" cellspacing="15" cellpadding="10">
<tr>
<td width="200" valign="top">
Navigation
</td>
<td width="*" valign="top">
<p>
Text
</p>
</td>
<td width="200" valign="top">
<p>
Sonstiges
</p>
</td>
</tr>
</table>
</body>
</html>
Diese Variante ist kompatibler zum NN 4.x, nicht aber unbedingt zu Text- und PDA-Browsern. Natürlich lässt sich auch ein solches Design mit einfachen Handgriffen etwas aufpeppen, z.B. indem man die Hintergrundfarbe und Text-Ausrichtung einzelner Zellen etwas verändert. Ein Beispiel dazu sehen Sie hier.
Weitere Grundsätze
Um Ihr Design möglichst anpassbar zu machen, sollten auch Schriftgrößen nicht absolut angegeben werden. Hierzu eignen sich CSS-Angaben wie small und large. Wenn Sie eine genauere Abstufung wünschen, können Sie die Einheit em verwenden: 1em ist die voreingestellte Standard-Schriftgröße des Benutzers, 1.5em ist 50% größer etc.
Beispiel:
<span style="font-size: 0.75em">irgendein Text</span>
Fazit
Liquid Design ist die Zukunft - spätestens dann, wenn ein nennenswerter Anteil der Surfer über mobile Surfstationen wie PDAs online geht. Und wie Sie sehen, ist die flüssige Gestaltung weder besonders schwer noch besonders inkompatibel - vorausgesetzt, Sie sind bereit, Kompromisse zu machen!
