Probleme mit Responsive Design

Beim Design von Webseiten unterscheidet man zwischen

  • Ice Design: Alle Bereiche der Seite sind in ihrer Breite pixelgenau festgelegt. Damit bleibt das Layout des Designers bei jeder Browsergröße erhalten.
    Nachteil: Ist mein Browserfenster kleiner als die Vorgabe des Designers, liegt ein Teil des Dokuments außerhalb des Bildschirms und es erscheinen hässliche horizontale Scrollbalken. Beispiel: Webreview CSS Compatibility Chart und alle Seiten "optimiert für eine Bildschirmauflösung von 1024 * 768". Oder das Design ist schmaler als das Browserfenster, dann bleibt rechts ein leerer (weißer) Raum. Beispiele: W3Schools und Spiegel.
  • Liquid Design, die hohe Kunst des Webdesigns: Die Breite der Bereiche passt sich dynamisch dem Browserfenster und der Schriftformatierung an, die zur Verfügung stehende Fenstergröße wird optimal ausgenutzt.
    Nachteil: Bei hoher Bildschirmauslösung und ein Browserfenster im Vollbild-Modus werden Textzeilen sehr lang und damit schwer lesbar. Beispiele: die W3C-Dokumente und Jakob Nielsen's Alertbox.

Kein Designer weiß, wie sein Werk auf dem Bildschirm eines Besuchers aussehen wird. Statistiken wie die von WebHits sagen zwar, dass die Mehrzahl der User einen Bildschirm mit 1024*768 Pixeln besitzen, zunehmend mehr haben eine noch größere Auflösung und nur eine Minderheit benutzt noch einen 800*600er-Bildschirm. Also kann man die Breite von 1024 Pixeln doch ausnutzen, die etwa 90% der Besucher zur Verfügung haben, oder? Falsch, denn die meisten von ihnen werden ihren Browser nicht im Vollbild einsetzen, schon um jederzeit Zugriff auf den Desktop zu haben. Und niemand verändert sein Browserfenster gerne nur wegen einem rücksichtslosen Webdesigner.

Die Zeilenbreite von Fließtext muß ein richtiges Verhältnis von Schriftgröße und Zeilenabstand aufweisen. Nur wenn alle drei Faktoren optimal aufeinander abgestimmt sind, ist eine gute Lesbarkeit gegeben. Als Faustregel hat sich eine Textbreite von 60 - 80 Buchstaben pro Zeile bewährt. Breitere oder schmalere Textzeilen behindern die Lesefreundlichkeit. Wer dieses selber ausprobieren möchte, unter Berücksichtigung von Schriftart und Schriftgröße, kann dieses interaktiv auf meiner Testseite zur Zeilenbreite machen.

Wie kann man eine optimale Zeilenlänge mit Liquid Design erreichen? Hier beginnt die hohe Kunst des Webdesigns. Mehrspaltige Seiten sind dabei flexibler als Einspalter. Während mir bei Glish die prozentuale Aufteilung der Bereiche bei kleinerer Fensterbreite noch nicht optimal erscheint, haben beispielsweise A List Apart und KommKonzept das Problem besser gelöst.

Um das grundlegende Problem der Zeilenläge beim Liquid Design zu lösen, wurden in CSS2 die Attribute max-width und min-width eingeführt. Während Firefox und Opera diese seit langem unterstützen, verweigerte sich der Marktführer Internet Explorer hier bis zur letzten Version 6. Da der IE 7 sich langsam aber sicher durchsetzt, sollte man diese Methoden zur besseren Lesbarkeit von Texten ruhig öfters benutzen als es bis jetzt der Fall ist. Die Leser im Web werden es danken.