Flexible Darstellung

Webseiten sollten auf beliebigen Endgeräten so darstellbar sein, dass die Inhalte leserlich sind. Damit hochauflösende Bildschirme, kleine Displays mobiler Endgeräte sowie benutzerdefinierte Schriftgrößen berücksichtigt werden können, darf eine Textvergrößerung weder zu Überlagerungen noch zu abgeschnittenen Inhalten führen. Insbesondere soll die Schrift mindestens auf das zweifache der Ausgangsgröße im Browser vergrößert werden können. Bei einer Schriftvergrößerung sollte sich das Layout so anpassen, dass horizontales Scrollen vermieden wird.

Darstellung einer Seite dieses Webauftritts bei Seitenzoom 100% und 1360px Bildschirmbreite Flüssiges Layout: Seitenzoom auf 100%

Seitenzoom 125%

Darstellung bei Seitenzoom 125%: Layout wird größer und breiter Seitenzoom auf 125%

Seitenzoom 150%

Darstellung bei 150%: Texte im Inhalt brechen um Seitenzoom auf 150%

Seitenzoom 175%

Darstellung bei 175%: Text wird weiter zu einer schmalen Spalte zusammengeschoben Seitenzoom auf 175%

Seitenzoom 200%

Darstellung bei 200%: Text wird unterhalb der Navigation statt rechts neben der Navigation angezeigt. Seitenzoom auf 200%

Ein optimiertes Layout ist heute nicht mehr ein pixelgenaues Design sondern ein flexibel einsetzbares Design.

Über die Textvergrößerung hinaus gibt es weitere Anforderungen der Web Content Accessibility Guidelines (WCAG) 2.0 resp. Barrierefreien Informationstechnik-Verordnung – BITV 2.0, die die visuelle Präsentation betreffen. Es handelt sich um typografische Aspekte, die vor allem die Leserlichkeit betreffen.

Die folgende Liste fasst die Inhalte der Beiträge im Bereich "Flexible Darstellung" zusammen.

Die reine Schriftvergrößerung (2012): Anders als der Seitenzoom wirkt sich die Schriftvergrößerung nur auf die Bereiche einer Seite aus, die im CSS mit relativen Maßeinheiten bemaßt wurden. Das sollten in erster Linie Schriftgrößen sein, aber relative Einheiten können grundsätzlich überall dort verwendet werden, wo Längenmaße zulässig sind. In den WCAG 2.0 werden relative Schriftgrößen nicht verlangt, aber Best-Practice sind sie dennoch.
Minimale Schriftgrößen für das Web (2012): Die Einstellung einer Mindestschriftgröße kann in verschiedenen, aber nicht allen Browsern vorgenommen werden. Bei der Festlegung der Mindestschriftgröße handelt es sich um eine Einstellung, die eine Veränderung des Designs erzwingt und somit zu Textüberlagerungen oder abgeschnittenen Texten führen kann. Auch wenn man sich auf pixelgenauen Layouts und Seitenzoom für die Textvergrößerung verlässt, können Nutzereinstellungen dazu führen, dass eine Seite unleserlich wird. Wenn Webentwickler die Einstellungen zur Mindestschriftgröße berücksichtigen, verbessern sie die Zugänglichkeit und Nutzbarkeit ihrer Webseiten.
Gedanken zur Silbentrennung (2012): Die Silbentrennung auf Webseiten sollte mit Bedacht eingesetzt werden. Die Möglichkeit, die HTML-Entity  einzusetzen, weist erhebliche praktische Einschränkungen auf; diese Möglichkeit wird oft im Zusammenhang mit einem geschlossenen Zeilenfall diskutiert. Das Thema muss insbesondere vor dem Hintergrund des Lesens mit einem Screenreader betrachtet werden und eine barrierefreie Silbentrennung ist nur mit der CSS3-Eigenschaft hyphens erreichbar.