Sascha Postner macht Jagd auf Kommunikation, Webstandards und Public Relations

In dieser siebten Ausgabe unseres kleinen Webdesign-Podcasts soll es um Layouttypen gehen, die grundsätzliche Techniken der Bildschirmdarstellung und -anpassung beschreiben.
Wer vor der Auswahl unterschiedlicher Designs steht oder sich überlegt wie er beim Erstellen eines Layouts anfangen soll, wird vielleicht schon mal über die drei Techniken gestolpert sein. Wir sprechen von “fixierten” oder “statischen“, “fluiden” und “elastischen” Layouts.

Eine Entscheidung für eine dieser Formen muss man an irgendeiner Stelle des Designprozesses treffen und sie bringen alle ihre Vor- und Nachteile mit sich. Da die meisten Webdesigner und Kunden sich (vermutlich) unbewusst mit einem statischen Layout konfrontiert sehen, soll es auch hier als erstes erläutert werden.

Statische Layouts

Ein statisches Layout zeichnet sich dadurch aus, dass es letztlich bei unterschiedlichen Bildschirmauflösungen doch immer gleich groß aussieht. Dies wird erreicht, indem man Größenangaben mit festen Pixelzahlen angibt. Beispielsweise sagt man, die Navigation links solle immer 120 Pixel groß sein. Auf diese Art und Weise ist es dem Designer möglich genau zu wissen, wieviel Platz ihm auf unterschiedlichen Bildschirmen zur Verfügung steht. Sollte der Bildschirm mehr Platz zulassen, so wird dieser in der Regel mit farbigen Hintergrundbildern, Farbverläufen oder ähnlichem ausgefüllt.

Zusammengefasst:
Toll zum designen aber unflexibel und nicht wirklich zugänglich.

Ein gutes Beispiel für eine solche Seite ist unser Blue Moped Blog. Hier bleibt der zentrierte Teil mit allem Content immer gleich groß, egal wie weit Fenster aufgezogen sind und wie groß die Bildschirmauflösung ist. Wer sehen will, wie sich das Layout “verändert”, kann einfach das Fenster verkleinern und sehen wie der blaue Bereich links und rechts jeweils kleiner wird, bis er ganz verschwindet.

Vorteile dieser Methode ist sicherlich die große Kontrolle des Designers über die Darstellung. Man weiß genau wie die Proportionen gehalten sind und stellt sicher, dass jeder User die Seite relativ gleich angezeigt bekommt.
Dummerweise ist diese Sache unter Zugänglichkeitsaspekten sehr unpraktisch. Die browserinterne Funktion zum Skalieren von Text sorgt bei diesen statischen Ansätzen schnell zu einer Zerstörung der Optik. Mal abgesehen davon, dass einige Browser (z.B. der Internet Explorer, der immerhin hoch über 80% allen Traffics ausmacht) Schrift mit Größenangaben in Pixel gar nicht erst skalieren kann, wird in anderen Browsern schnell der Text so groß, dass er die Optik der Seite zerreißt.

Beispielseiten:
Spiegel
Blue Moped Blog

Fluide Layouts

Fluide Layouts passen sich im Gegensatz zu statischen Layouts der Größe des Browserfensters und somit auch der Bildschirmauflösung an. Der Webdesigner muss dafür mit relativen Größen und Prozentzahlen arbeiten. Meistens nutzen Webseiten mit diesem Layouttypen die volle Breite des Fensters aus.

Zusammengefasst:
Sehr flexibel und nutzt viel Fläche, aber schlecht vorhersehbar.

Jeder kennt diese Art des Designs von Seiten wie zum Beispiel Amazon.de. Egal wie groß das Fenster ist, die Seite füllt immer die volle Breite. Auch dieser Typ bringt seine Vorteile und Nachteile mit sich. So ist es natürlich super, dass man immer die optimale Platzausbeute nutzen kann. Dummerweise sorgt dieser Zustand auch dafür, dass man nie genau weiß wie das Design nun aussieht. Ein nicht wiederholendes Hintergrundbild kann so schnell mal zu kurz sein.

Darüber hinaus kann Text schnell zu breit werden. Wer kann schon auf einem Breitbildschirm eine Textzeile lesen, ohne die Zeile aus den Augen zu verlieren? Einige Probleme kann man durch einen Mischmasch an fixen Größen und Prozentangaben umgehen, doch gehört schon eine größere Portion Vorplanung dazu um ein solches Layout ordentlich umzusetzen.
Dafür ist es durchaus zugänglicher (wenn richtig umgesetzt) und bietet mehr Platz für skalierbare Texte etc.
Beispielseiten:
Amazon.de
Netvibes

Elastische Layouts

Diese jüngste Art des Designs besteht letztlich aus einer der beiden vorgenannten Arten. Meist ist es ein statisches Layout. Anstatt jedoch mit absoluten Größen zu arbeiten (wie px oder pt) wird hier für alle Größenangaben mit Prozent oder besser mit em gearbeitet. Diese Technik sorgt dafür, dass beim skalieren des Textes gleich das ganze Layout mitskaliert. Fast so als wenn man in Photoshop in ein Bild hineinzoomt. Dieses System ist das zugänglichste bzw. barrierefreiste der drei Layouts. Menschen mit Sehbehinderungen und auch jeder andere kann so ganz einfach das ganze Layout vergrößern oder auch verkleinern. Als Beispiel hier mal eine derzeitige Baustelle von uns ein abgeschlossenes Projekt von uns (*zwinker*).

Zusammengefasst:
Sehr aufwendig aber dafür super zugänglich und barrierefrei!

Diese Designart erfordert ziemlich viel Disziplin beim Erstellen des Quelltextes. Da sich die em-Größen immer auf das Mutterelement beziehen, sorgt schon eine kleine Änderung für schwerwiegende Anzeigeänderungen. Wenn es ordentlich umgesetzt ist fallen uns eigentlich keine Nachteile ein. Dummerweise ist Disziplin und Zeitaufwand nun mal immer auch mit Kosten verbunden. Aber dafür wird man mit einem wirklich guten Anteil von Barrierefreiheit belohnt. Natürlich darf man auch alles andere zu diesem Thema nicht vergessen !
Um die volle Stärke dieser Technik zu verstehen könnt Ihr auf der Beispielseite einfach mal die STRG-Taste gedrückt halten und Euer Mausrad schwingen. Alternativ geht auch im Browser den Menüpunkt “Ansicht” zu wählen und darin die Schriftgröße zu modifizieren. Wenn Ihr es zu weit getrieben habt, einfach STRG+0 drücken und alles ist wieder beim Alten. Zusätzlich findet Ihr auch ein wenig Javascriptcode unter dem Content, der ähnliche Funktionen erfüllt.
Beispielseiten:
Tagesschau.de
Fundamente
CSS-Tutorials (hat unseren Beitrag verlinkt und wird daher prompt als positives Beispiel vermerkt )

Jede Designart hat ihre Daseinsberechtigung und wir möchten keine als total unnütz verdammen. Vor allem auf Grund von Zielgruppe und Anwendungsfeld kann die ein oder andere Entscheidung besser geeignet sein – sie sollte aber auf alle Fälle bewusst und Zielgruppengerecht sein und nicht nur die Vorlieben des Designers widerspiegeln. Hört einfach mal in den Podcast rein um Euch noch ein paar mehr Anregungen zu holen.
Sorry, dass wir keine Skizzen bereitgestellt haben, aber irgendwie ist es schwierig gerade das fluide Layout zu visualisieren. Aber das Prinzip wird durch Beispielseiten vermutlich eh besser klar.

Glossar

Pixel

Ein Pixel ist das kleinste Element, das auf einem Bildschirm dargestellt werden kann. Es ist rechteckig (meistens quadratisch) und einfarbig. Bei einem hochaufgelöstem Monitor sind die kleinstmöglichen Pixel so klein, dass sie bei normalem Betrachtungabstand nicht mehr als einzelnes Element wargenommen werden. Alles, was auf dem Bildschirm dargestellt wird (z.B. Texte, Bilder, Videos), wird aus einer Vielzahl von Pixeln zusammengesetzt.

Bildschirmauflösung

Die Bildschirmauflösung ist die Anzahl der Pixel, die von dem Betriebssystem dargestellt werden kann. Sie ist abhängig von dem Monitor, der Grafikkarte und dem Betriebsystem und kann meistens noch vom Anwender beeinflußt werden. Da Monitore rechteckig sind, wird die Bildschirmauflösung durch die Anzahl der Pixel in der Horizontalen mal der Anzahl der Pixel in der Vertikalen angegeben (z.B. 800×600, 1024×768). Heute kann man von einer Auflösung von mindestens 1024×786 Pixeln ausgehen – das entspricht übrigens nur 0,8 Megapixel, für eine Digitalkamera also ein erbärmlicher Wert.

Relative Größenangaben

Hier kann man zwei unterschiedliche Typen festmachen: Der eine bezieht die relative Größe auf die Größe des Fensters (oder des Elternelements) und wird prozentual angegeben. Z.B. 50% der Fenstergröße. Der andere Typ bezieht sich auf die Größe der Schrift des Elternelements. Z.B. bedeutet die Angabe “30em” 30 mal die Höhe eines großen “M”s der aktuellen Schriftart und -größe. (etwas vereinfacht) oder die Angabe “30ex” 30 mal die Höhe eines kleinen “x” der aktuellen Schriftart und -größe.

Popularity: 23% [?]

Verwandte Artikel

• TW mit Sylvia Egger (0)
• Technikwürze zu Formularen in zwei Teilen (0)
• Technikwürze zu Druck-Stylesheets (0)
• Technikwürze mit Schwerpunkt Opera (0)
• Podcasts zum Joggen und Laufen (0)

Schlagworte: Podcast Dieser Beitrag wurde vor am Freitag, 11. August 2006 um 01:45 Uhr veröffentlicht und unter Podcast gespeichert. Sie können Kommentare zu diesem Eintrag über den RSS-2.0-Feed verfolgen. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.