Zugänglichkeiten fixer-, fluider oder elastischer Layout

Welches CSS-Layout eignet sich am besten für Zugängliche Websites? Alle haben ihre Besonderheiten und ihre Vor- und Nachteile. Welches Layout ist also zugänglicher? Welches Layout ist einfacher in der Handhabung und bei welchem Layout könnte es zu unerwarteten Problemen kommen?

Alle drei Layoutrahmen sind gleich gut zu gebrauchen, wenn bei der Verwendung auf Usability und Zugänglichkeit geachtet wird. Layoutrahmen sind wichtiger Teil in der Präsentation der Website. Welche Vorgehensweise bei der Wahl eines passenden Layoutrahmen die effektivste und auch angenehmste Designlösung hervorbringt, sollte bereits bei den Screenentwürfen berücksichtigt werden. Dies gilt gerade dann zu bedenken, wenn es um barrierefreie Webangebote geht.

Unabhängig vom Layout beruht Zugänglichkeit unter anderem auf Semantik und dem korrekten Gebrauch der HTML-Elemente.

Die Möglichkeit Layouts skalierbar anzulegen ist eine schöne Sache. Bei der gestalterischen Arbeit kann das aber auch zu massiven Problemen führen. Seiten, die wenig textlichen Inhalt haben, können bei einer Auflösung von 800 x 600 Pixel ein homogenes und stimmiges Bild geben. Wird die gleiche Seite aber auf einen Bildschirm mit einer Auflösung von 1280 x 1024 dargestellt. Kann es passieren, dass der Inhalt in die Breite fließt und am oberen Rand klebt. Das sorgsam entwickelte Screendesign geht verloren.

Layoutrahmen und die BITV

Für alle die Barrierefreiheit anstreben gibt die Bedingung 3.4 der BITV eindeutig Auskunft, wie mit Maßangaben umzugehen ist.

Maßangaben variabel (Prio. 1)

»Es sind relative anstelle von absoluten Einheiten in den Attributwerten der verwendeten Markup-Sprache und den Stylesheet-Property-Werten zu verwenden.«

Wie immer gibt es auch Ausnahmen und hier sollte man auch kreativ damit umgehen. Größenangaben für Gestaltungselemente wie Ränder, Linien etc. können weiterhin in Pixel angeben werden. Im Style Sheet für die Druckausgabe ist es jedoch sinnvoller, die Angaben für Dimensionierung und Platzierung in cm oder mm zu setzen und die Angaben für Schriftgrade in typografischen Punkten (pt).

Im Folgenden werde ich einige Vor- und Nachteile des fixen, fluiden und elastischen Design erläutern.

Fixe Layouts

Das fixe Layout basiert auf einer festen Breite die unabhängig von der jeweiligen Benutzereinstellungen ist. Eine festgelegte Breite von 780 Pixel wird auch auf kleinen Ausgabegeräten mit einer Auflösung von 800x600 vollständig angezeigt, ohne seitlich scrollen zu müssen. Ist die Entscheidung für ein fixes Layout gefallen, sollte gerade in Bezug auf Barrierefreiheit oder Accessibility die Maximale Breite von 780 Pixel gewählt werden, dies ist die optimale Wahl für „kleine Auflösungen“ und einer guten Lesbarkeit.

Vorteile einer festgelegten Breite

Der Inhaltsbereich einer Seite wird vollständig angezeigt, und man kann auf min-width und max-width verzichten. Zumal diese Angaben bisher nur von standardkonformen Browsern unterstützt werden.
Designs mit einer fixen Breite sind leichter zu Designen als mit einer flexiblen Breite. Manche Design-Entwürfe lassen sich auch nur mit einer festen Breite realisieren oder die Realisierung ist deutlich einfacher.
Feste Designs bieten dem Designer die Möglichkeit, die Darstellung genaue zu steuern. Seitenbereiche bleiben in ihrer Anordnung konstistent.
Grafiken sind leichter zu integieren, weil man genau weiss welche Seitenbreite sie ausfüllen.

Nachteile einer festgelegten Breite

Wird die Schrift vergrößert, kann unter ungünstigen Layoutvorgaben die Lesbarkeit Verlohren gehen.
Die Layoutbreite passt sich nicht der relativen Schriftgröße an. Unter umständen kann der Text aus dem Layout herauslaufen, bzw. „das Design sprengen“. Oder Texte fließen ineinander und überlagern sich. Das Problem sich überlangender Schriften tritt nur dann auf, wenn der Text sehr stark vergrößert wird oder Div Container werden an einer Stelle fest positioniert und auf eine bestimmte Höhe festgelegt.

  
#textaufmacher {
position: absolute;
top: 120px;
left: 56px;
height: 200px;
}

Auf ganz kleinen Monitoren (640x480 Pixel) entsteht ein horizontaler Scrollbalken. Dieses Problem dürfte aber nur sehr selten auftreten. Auf sehr großen Bildschirmen (z. B. Breitbandbildschirmen) kann ein Layout mit einer Breite von 760 Pixel zu schmal wirken. Die Festlegung auf eine schmale Breite gibt wenig Spielraum für mehrspaltige Seiten.

Fluide Layouts

Fluide Layouts werden nicht mit einer festen Breite angelegt. Breitenangaben werden in Prozent angegeben und erlauben somit ein Höchstmaß an Flexibilität in der Anpassung. In den meisten Fällen kann die Seite so weit herunterskaliert werden das erst bei ungefähren Breite von 580 Pixel ein horizontaler Scrollbalken entsteht. Fluide Layouts passen sich der Bildschirmgröße an. Die Breitenangaben einzelner Designspalten werden in Prozent angegeben.

Elastic Layouts oder Elastic Design

Sämtliche Container und andere Elemente werden innerhalb eines Elastic-Designs in em angegeben. Größenangeben in em verhalten sich proportional zur Text- oder Schriftgröße relativ. Wird über die Browsereinstellung der Schriftgrad erhöht, erhöhen sich auch die Abschnitte, die in em angegeben werden.

Vorteile fluider und Elastic Layouts

Fluide Layouts passen sich der Auflösung des Ausgabemediums an.
Bei Websites mit viel textlichen Inhalt kann sich die Schrift optimal der Größe des Browserfensters anpassen.
Horizontales Scrollen wird vermieden

Probleme bei fluiden und Elastic Layouts

Viel textlicher Inhalt und der Wunsch genügend Raum zwischen den Textblöcken zu lassen kann zu Usability Problemen führen. Zu viel Inhalt kann unter umständen den Benutzer verwirren und die Website wird möglicherweise überfüllt wirken.
CSS bietet die Möglichkeit das Layout mit max-width auf eine maximale Breite zu begrenzen. Allerdings wird diese CSS-Eigenschaft nicht vom Internet Explorer 6 und älteren Versionen unterstützt.

Ein paar Ratschläge zu fluiden und Elastic Layouts

Unter umständen kann es zweckmäßig sein fluides und fixes Layout miteinander kombinieren. Allerdings lässt sich dieser Vorgehensweise
Werden fixe und fluide Layouts kombiniert, sollte darauf geachtet werden dass die Website bei einer Auflösung von 800 x 600 Pixel ohne horizontales Scrollen gebrauchbar bleibt.
Standardkonforme Browser bieten die Möglichkeit mit max-width das Seitenlayout auf eine maximale Breite zu beschränken.
Damit auch der Internet Explorer diese Eigenschaft umsetzen kann, gibt es die Möglichkeit einen kleinen Trick anzuwenden. Diese Lösung ist zwar nicht standardkonform, kann aber unter bestimmten Bedingungen sehr nützlich sein.

  
#container {
  width: expression(document.body.clientWidth > 1100? "1100px": "auto" );
}

Expression ist eine proprietäre Eigenschaft ausschließlich des Internet Explorer . Ist das Browserfenster größer als 1100 Pixel, wird dem #container die feste Breite von 1100 Pixel zugewiesen. Ist das Browserfenster kleiner, verhält es sich entsprechend unser relativen Angaben. Die Lösung über Expression kann auch beim Elastic-Design angewand werden.

Zusammenfassend

Welche Vorgehensweise beim Layout eignet sich für die Gestaltung von zugänglichen Websites am besten? Diese Frage kann aus meiner Sicht nicht eindeutig beantwortet werden. Jede Layout-Variante bietet Vor- und Nachteile. Wenn Sie eine zugängliche Website erstellen wollen oder müssen, sollte bereits in der Entwurfsphase berücksichtigt werden, mit welchem Layout der Entwurf umgesetzt werden kann. Wenn Entwürfe einmal vom Auftraggeber abgenommen worden sind, fällt es erfahrungsmäßig schwer, unter Hinweise auf Erfordernisse der Zugänglichkeit noch einmal Änderungen einzubringen.

Links

nach oben

Peter Rozek

Hauptmenü