Browserbreite vs. CSS-Breitenangaben in px, em, Prozent

Wie breit lege ich das Design meiner Homepage an? 1000 Pixel? 800 Pixel? Oder besser eine relative Angabe in em oder Prozent?

Wer seine Website auf eine bestimmte Breite in Pixel (px) festlegt, sollte sich darüber im Klaren sein, dass Benutzer mit kleinen Anzeigegeräten oder kleinen Browserfenstern ab einer gewissen Homepage-Breite quer scrollen müssen. Für welche Breitenangabe in px das jeweils der Fall ist, kann man an den folgen Balken ablesen (CSS muss zur korrekten Darstellung eingeschaltet sein):

Eine Alternative ist die Breitenangabe in der relativen Einheit em. Hier verändert sich die Breite aller Elemente, wenn man im Browser den Schriftgrad verkleinert oder vergrößert. Jeder Nutzer kann die Homepage-Breite also mittels des Schriftgrads anpassen (was bei px nicht möglich ist). Nur macht der «normale» Internet-Nutzer meist keinen Gebrauch von dieser Funktion, weil sie eventuell zu umständlich oder schlicht nicht bekannt ist. Die Breitenangabe in em wird dann insofern problematisch, dass im Zweifelsfall jeder Nutzer eine andere Browsereinstellung hat und die Startkonfiguration bei jedem Nutzer in einer unterschiedlichen Breite erscheint. Eine Breitenangabe in em könnte im Layout insbesondere problematisch in Zusammenhang mit Bilddateien werden (auf die man aber sowieso besser weitgehend verzichten sollte).

Puristen schwören hingegen auf Breitenangaben in Prozent (%), weil sich die Homepage-Breite dabei automatisch der Fernstergröße anpasst. Das Hauptproblem dabei: eine Angabe in % verursacht bei breiten Browserfenstern ätzend lange Textzeilen. Das Springen von Zeile zu Zeile wird dadurch erschwert und somit auch der Lesefluss. Gelöst werden kann das Problem in CSS durch die Angabe max-width, die mittlerweile jeder aktuelle Browser kennt und mit der man Fließtext-Elementen eine maximale Breite zuweisen kann.

Dieser Absatz ist ein Beispiel für Fließtext ohne die CSS-Angabe max-width bei einer Breitenangabe des Textfeldes von annähernd 100%. Wenn Du gerade in ein breites Browserfenster schaust, liest Du eine ellenlange Zeile, und beim Lesen wird das Umspringen in die nächste Zeile erschwert. Solch lange Zeilen sind eine Zumutung für jeden Leser. Deswegen waren CSS-Breitenangaben in % lange Zeit problematisch. Inzwischen ist dieses Problem so gut wie beseitigt: alle aktuellen Browser akzeptieren die CSS-Angabe max-width, die bei den drei Absätzen zuvor verwendet wurde.

Browserbreite vs. Breitenangaben in px, em, Prozent