15.10.04Die optimale Breite einer Website

Das ist eine der am meisten diskutierten Fragen und eigentlich kaum für alle Typen von Seiten zu beantworten. Nachdem ich die Breite meines Weblogs heute geändert habe, stellte sich auch mir mal wieder diese Frage. Es ist mehr oder weniger eine Glaubensfrage. Da gibt es zum einen diejenigen, denen es wichtig ist, dass ihre Inhalte pixelgenau dargestellt werden und somit in den meisten Fällen auf eine feste Seitenbreite bestehen (müssen). Anderen wie z.B. mir, ist es nicht ganz so wichtig auf das Pixel genau zu positionieren, trotzdem ist denen eine feste Seitenbreite wichtig (Warum das aus meiner Sicht so ist, werde ich noch erläutern). Im Zusammenhang mit Barrierefreiheit wird gefordert, dass Websites sich dem sichtbaren Bereich des Browserfensters anpassen. D.h. es wird mit relativen Breitenangaben gearbeitet, die Seiten füllen den gesamten sichtbaren Bereich aus.

Es ist, wie auch die Praxis mal wieder am besten beweist, nicht möglich, für alle Arten von Onlineangeboten die optimale Seitenbreite vorzugeben/vorzuschreiben/empfehlen. Zu diesem Schluss kommt auch Günter Dehne bei Usability Now. In seinem Artikel, erläutert er Vor- und Nachteile fixer, variabler oder Kombinationen beider Layouts.

Auf the “Daily Flight” wird eines der größten Probleme flexibler/liquider Layouts geschildert. Bei relativ wenig Text wirkt das ganze so etwas lächerlich, betrachtet man sich die Seite dann auf 19 oder 21″ Monitoren. Ästhetisch geht dabei doch einiges verloren - auch wenn es sich nicht um eine Seite mit designerischen Anspruch handelt. Viel schwerwiegender dürfte aber die schlechte Lesbarkeit schier endlos langer Zeilen sein. Der Besucher, wird es da nicht sehr lange aushalten. Die Zeilenlänge ist in diesem Zusammenhang entscheidend. Ob fix oder liquide sollte man nach diesem Artikel die Zeilenbreite auf 480-500px bzw. 30-35em begrenzen.

Russ Weakley von Maxdesign lieferte im Mai 2003 eine mögliche Lösung für das Problem der optimalen Zeilenlänge.

Wobei es sich hier mehr um ein Problem speziell liquider Layouts handelt. Denn ein fixes Layout ist in der Breite eh begrenzt. Es gibt natürlich eine Fülle weiterer Artikel zu diesem Thema im Netz. Bisher aber konnte keiner die Lösung dafür liefern.

Mit etwa der oben vorgeschlagenen Zeilenlänge, bei angemessen großer Schrift, dürfte man ganz gut liegen. Für liquide Designs gibt es die Möglichkeit, eine maximale Breite vorzugeben. Doch hier gilt es vorsichtig zu sein, denn nicht alle Browser verstehen max-width. Svend Tofte zeigt, wie man es zumindest dem Internet Explorer beibringt.

Die optimale Seitenbreite scheint es trotz aller Lösungsvorschläge und Argumentationen (bisher) nicht zu geben.

Weitere Infos mit Statistiken gibt es bei Perun.

Bookmarks

Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • del.icio.us
  • DotNetKicks
  • Furl
  • MisterWong
  • NewsVine
  • Spurl
  • Technorati

6 Antworten

  1. Robin am Okt 16, 2005 | Reply

    > Svend Tofte zeigt, wie man es zumindest dem Internet Explorer beibringt.

    Das ist schön formuliert in Anbetracht dessen, daß einzig der IE ja das Problem ist. :o)

  2. Engelbert am Okt 17, 2005 | Reply

    760px finde ich für Bildschirme bis 1024px Breite in Ordnung. Wie es ausschaut, wenn jemand einen breiteren Bildschirm hat, kann ich aus eigener Erfahrung leider (noch) nicht nachvollziehen.

    Einmal habe ich die Gelegenheit gehabt bei einem Bekannten eine meiner Homepages auf einem 21″ Bildschirm zu sehen. Ich war überrascht, wie sich die Seite auf der Größe des Bildschirms verloren hat, obwohl sie 786px breit war.

    Nicht nur deswegen versuche ich immer einen Mittelweg: Wenn ich ein Design erstelle, entwerfe ich i.d.R. ein 3spaltiges flexibles Design, wobei die Seite bis 800px korrekt dargestellt wird. In allen breiteren Browserauflösungen wachsen die Spaltenbreiten prozentual mit.

    Dadurch kann zwar die Zeilenlänge irgendwann bei 1400px+ wieder ein Problem werden (sic.), damit kann ich jedoch leben.

    Mein neues Projekt hat ich einen Header, der eine Stadtansicht darstellt. Solch eine Fotographie kann man im Gegensatz zu einer Hintergrundfarbe oder einen Farbverlauf aber nicht beliebig strecken.

    Ich habe deshalb zu einem Trick gegriffen und das Bild so breit gemacht, dass es eigentlich erst mit 21″-Bildschirmen ganz zu sehen wäre. In kleineren Browserbreiten wird jeweils nur ein Teil des Bildes angezeigt, der Rest rutscht aus der Ansicht heraus, aber da das Bild als Hintergrundbild eingebunden wurde, merkt man das nicht. Es ist auch für den Stadtansichteffekt völlig unerheblich, da die markantesten Sehenswürdigkeiten selbst bei 800px-Breite noch zu sehen sind.

  3. ff-webdesignerde am Nov 9, 2006 | Reply

    Ich bin nach wie vor ab und zu reiner Tabellenwebdesigner. Von den liquiden CSS-layouts halte ich nichts mehr, seitdem ich manche Foren auf nem 24” Widescreen anschaue….endloszeilen…

    Übrigens: sehr guter Artikel über die wirklich zur Verfügung stehende Bildschirmbreite:

    http://aktuell.de.selfhtml.org/weblog/aufloesung-viewport

  4. Urselvierzig am Mai 18, 2009 | Reply

    Hab nen Link gefunden zu nem guten Tischdeckenshop, da gibt’s etliches an Damast-Tischdecken usw., hab noch weitere gefunden, die folgen dann in kuerze wenn jemand interesse hat. 

    http://textilecke.de

     

  5. Harryvanhirschundso am Mai 19, 2009 | Reply

    Hab endlich nen tollen Käfig für meine Papageien gefunden, da gibt sogar noch die Kinoleinwand, falls die kleinen mal was zu bestaunen haben, is echt witzig aber doch irgendwie cool!:-) 

    http://www.exclusiv-home.de/

     

  6. Lena am Jul 3, 2011 | Reply

    Da frage ich mich beim Überfliegen ja schon, ob man doof ist. Dankeschön für Ihre Einsichten

Mitreden? Dann schreibe einen Kommentar!

* = Pfichtfelder

Markup Webdesign Blog

Markup ist das Blog von Björn Seibert. Mehr
Impressum | Kontakt

Feed abonnieren