Elastisches Design

Bei der Überarbeitung der red@ktiv-Webseite wurde nicht nur Wert auf eine inhaltliche Neuausrichtung gelegt. Ziel des Redesigns war u.a. auch die universelle Zugänglichkeit (Accessibilty) für alle Browser und alternative Ausgabegeräte. Die technische Umsetzung mit Cascading Style Sheets (CSS) ist dabei die erste Wahl. Und wenn schon CSS dann gleich richtig.

Was kann an Webdesign elastisch sein?

Gemeint ist, das eine Seite unabhängig von der Fenstergröße oder der Bildschirmauflösung für den Betrachter benutzbar bleibt. Inspiriert durch die Artikel Sliding Doors of CSS und Elastic Design entstand für die red@ktiv-Seite ein entsprechendes Layout.

Zunächst gilt es das Font-Size Problem zu lösen. Während Mac und Linux Browser i.d.R. eine Auflösung von 72 dpi (dot per inch = Pixel pro Zoll) nutzen, sind Windows Browser i.d.R. auf 96 dpi eingestellt. Wie immer, so auch hier: keine Regel ohne Ausnahme. Aber egal wie ihr Browser eingestellt ist: Bei Schriftgrößen, die über die Einheit »Punkt« definiert werden, kommt es zum Problem, das eine mittlere Schriftgröße auf 72 dpi für den 96 dpi-Browser zu groß erscheint und umgekehrt eine mittlere Schriftgröße für 96 dpi bei 72 dpi-Browsern zu Augenpulver wird. Ein erster Ansatz »Pixel« (px) als Einheit zu wählen (10 px sind und bleiben 10 px, egal wieviele davon auf einem Zoll untergebracht werden, die Schriften erscheinen also überall gleich groß) stellt sich schnell als unbrauchbar heraus, weil damit die Skalierung der Schrift durch den Benutzer unterbunden wird. Genau diese Bevormundung steht dem Anspruch einer »universellen Zugänglichkeit« aber im Weg. Man denke nur an Menschen mit eingeschränkter Sehfähigkeit, die auf die Vergrößerung der Schrift angewiesen sind. Abhilfe schafft die Verwendung der Einheit »em«. »em« steht dabei für »Elementeinheit«. 1 em entspricht dabei 100 % der im Browser voreingestellten Standardschriftgröße. Diese kann der Benutzer global in den Voreinstellungen seines Browsers anpassen; oder auch je Fenster individuell über entsprechende Vergrößerungs-/Verkleinerungs-Tasten oder -Menüeinträge in seinem Browser. Damit ist ein erster Schritt zum »elastischem Design« getan.

Der zweite wesentliche und konsequente Schritt besteht nun darin, die Einheit »em« auf weitere Seitenelemente zu übertragen. Arbeitet man CSS nach dem Box-Modell ab, besteht eine Seite letztlich immer aus neben-, über- und ineinander gestapelten Rechtecken (Boxes). Diese Boxes wiederum sind durch einige Attribute beschrieben – z.B. die Beschaffenheit des Hintergrunds (Farbe, eingebundenes Bild, das ggf. wiederholt wird), Beschaffenheit des Rahmens (Dicke, Farbe, Strichelung), der Abstand des enthaltenen Textes zum äußeren Rahmen (padding) und der Randabstand der Box zu benachbarten Elementen (margin). Wendet man nun auf alle Größenangaben die eine solche Box beschreiben wiederum die Einheit »em« an, so werden auch diese Elemente anhand der Browservorgaben skaliert.

Als dritter – schon etwas anspruchsvollerer – Schritt kommt noch die Anwendung der Einheit »em« auf Bilder dazu. Anstatt der üblichen Höhen- und Breitenangaben in Pixeln (px) erfolgt auch hier die Angabe in »em«. Dabei ist darauf zu achten, das durch die Verwendung das Seitenverhältnis des Bildes gewahrt bleibt. Letztlich eine einfache Dreisatzrechnung um die vorhandene Pixelgröße in em zu übertragen. Idealerweise sollten daher Bilder verarbeitet werden, die über ein fixes Seitenverhältnis verfügen (4:3 oder 16:9 oder quadratisch). Damit können CSS-Klassen auf das jeweilige Verhältnis in Hoch- und Querformat beschränkt werden. Desweiteren müssen die Bilder in einer etwas höheren Qualitätsstufe als ansonsten üblich vorliegen, da diese ja vergrößert werden können und dann immer noch scharf sein sollten. Wahlweise kann dies über eine niedrigere Kompressionsrate bei .jpgs oder über ein größeres Format (mehr Pixel) erfolgen. Die Möglichkeiten muß man abhängig vom Motiv durchprobieren, ein Patentrezept für einen Kompromiß aus bestmöglicher Darstellungsqualität und kleiner Dateigröße (für schnelle Ladezeiten) gibt es leider nicht.

Im Ergebnis ergibt sich dann eine Webseite, die komplett »mitwächst« wenn die Darstellung vergrößert oder verkleinert wird. Die Proportionen innerhalb der Seite von Textgrößen zueinander, Bild zu Text und Gestaltungsmerkmale des Layouts bleiben – unabhängig von der eingestellten Darstellungsgröße – weitestgehend erhalten. Weitestgehend deshalb, weil »ems« mit »nur« einer Stelle hinter dem Komma zuverlässig anzugeben sind. Durch Rundungsfehler beim Skalieren können dann einzelne geringere Abweichungen entstehen.

Wird das CSS komplett abgeschaltet (z.B. durch alternative Darstellungsgeräte, wie Screenreader, Brailledisplays oder auch durch reine Textbrowser) bleibt der Inhalt komplett zugänglich. Durch eine durchdachte Struktur z.B. bei der Anordnung von Links zur Navigation innerhalb der Seite wird zudem auch bei nicht vorhandenem CSS eine gute Nutzbarkeit (Usability) sichergestellt.