WordPress & Webwork

Optimale Breite einer Seite

optimale Breite Sehr oft stellen sich Leute die sich Webdesigner (bzw. Webworker bzw. Webentwickler) nennen diese Frage. Und diese ist nicht einfach zu beantworten. Die Idealste Lösung ist, daß der Inhalt in jeder Auflösung ohne horizontalen Scrollbalken erscheint und das der Text leserlich ist. Tja, hier fangen die Probleme an und schon können wir einen Schuldigen nennen: Internet Explorer. Aber dazu später.

Grundsätzlich gibt es drei grobe Richtungen beim Aufbau einer Website in Bezug auf Bildschirmuflösung:

  • Feste bzw. fixe Breite
  • Variable Breite (Liquid Design)
  • Mischung aus beiden Formen (fixe Navigation, Inhalt variabel)

Doch bevor wir zu den einzelnen Formen gelangen, schauen wir uns kurz die Statistik von Webhits.de an:

  • 1024 x 768 – 60.9%
  • 1280 x 1024 – 20.7%
  • 800 x 600 – 7.3%
  • 1152 x 864 – 5.6%
  • 1600 x 1200 – 2.2%
  • andere – 3.3%

Beim letzten Beobachten dieser Statistik war 640×480 noch mit 0.1% aufgeführt. Ich weiss, daß solche Statistiken immer mit Vorsicht zu genießen sind denn z. B. in meinen Statistiken taucht 800×600 mit ca. 12% auf und 640×480 kann man im wahren Sinne des Wortes an einer Hand abzählen (auf allen meinen Websites). Aber eins wird gezeigt, es gibt noch relativ viele User die 800er Auflösung nutzen und die meisten sind mit der 1024er Auflösung unterwegs.

Und das wird sich nicht so schnell ändern. Denn die ganzen 17″ Röhrenmonitore und 15″ Flachbildschirme sind für die 1024er Auflösung optimiert bzw. können maximal diese (ordentlich) anzeigen und auch die meisten neuen Notebooks fahren mit einer max. Auflösung von 1024×768.

Feste Breite

Die Sache hierbei ist klar, dieses Weblog ist ein Beispiel dafür. Die ganze Präsenz hat eine feste breite von 753px und ist zentriert. Somit entsteht bei der kleinsten signifikanten Auflösung (800×600) kein horizontaler Scrollbalken. Man hat eine gewisse "Zuverlässigkeit" beim Layouten und der eigentliche Inhalt hat eine effektive Breite von ca. 520px. Somit bleibt die Zeilenlänge leserlich und man kann auch größere Screenshots einbauen.

Der Nachteil erscheint bei sehr hohen Auflösungen. Es gibt zu viel Freiraum. Jedoch kann man durch das zentrieren des Inhaltes dies etwas abschwächen. Die andere Schwäche ist bei Auflösungen unterhalb von 800×600, dort bildest sich ein horizontaler Balken.

Variable Breite

Ein Beispiel dafür ist das Wiki zu diesem Blog. Die ganze Präsenz hat eine variable Breite bzw. der Inhalt passt sich automatisch dem Browserfenster an.

Der Nachteil liegt auf der Hand, bei etwas größeren Auflösungen wird der Text schwer lesbar, da die Textzeilen zu lang sind. Empfohlen wird eine Zeilenlänge von etwa 11-12 Wörtern. Diesen Nachteil kann man bis zu gewissen Grad abschwächen in dem man der ganzen Präsenz und dem eigentlichen Inhalt einen relativen Abstand (z. B. padding in Prozenten) gibt.

Der andere Nachteil ist das Layouten. Das "klassische" Layout (z. B. Logo als Bild im oberen Bereich) ist hier nicht einfach möglich. So gesehen muss man bei den Layouts mit variablen Breite eine ganz andere Herangehensweise bzw. Philosophie anwenden. Denn manche Leute sind mit einer Auflösung von 1600 und mehr unterwegs und ein "klassiches" Logo zu basteln das bei einer Breite von 800-1600px immer noch gut ausschaut ist äußerst schwierig.

Mischform

Die meisten Mischformen haben z. B. Navigationen mit einer festen Breite und der Inhalt hat eine anpassungsfähige Breite. Als so ein Besipiel könnte meine Herr der Ringe-Website dienen.

Man würde jetzt evtl. meinen das diese Form evtl. die Vorteile der beiden oberen Formen vereinigt. Naja, so ist es aber nicht ganz. Der eigentliche Inhalt verteilt sich über die gesamte restlichen Breite. Es ist zwar nicht so extrem wie bei dem zweiten Beispiel, jedoch wird der Text bei sehr hohen Auflösungen trotzdem unleserlich. Und bei der Erstellung des Logobereiches (welches sich an die Breite anpasst) habe ich einige Stunden lang geschwitzt.

Das zweite Problem besteht auch bei hohen Auflösungen, denn der Inhalt geht in die Breite und dadurch wird auch gleichzeitig die Höhe niedriger und dies kann u. U. unschön aussehen wenn sich der Footer unter die Navigation schiebt. Aber das ist ein Phänomen das bei CSS-Layouts in Verbindung mit absolut positionierter Navigation auftritt.

Internet Explorer ist Schuld

"… und daher hängt ihn, hängt ihn höher". Ok, ok, dies war jetzt keine sonderlich konstruktive Aussage 😈 aber im Endeffekt stimmt das schon. CSS bietet die Möglichkeit eine minimale und maximale Breite zu bestimmen, aber, jepp, richtig geraten der IE kann damit nicht viel anfangen. Es gibt zwar eine Möglichkeit mittels Javascript auch dem IE maximale Breite beizubiegen.

Allerdings halte ich persönlich nicht viel davon. Auch ohne Javascript ist das Layouten schwer genug wenn man alle gängigen Browser bedienen will. Da muss ich nicht noch zusätzlich ein weiteren Unsicherheitsfaktor antun.

Fazit

Ich hoffe mal du erwartest jetzt keinen Fazit von mir :razz:. Welche der drei groben Richtungen man wählt, bleibt jedem selbst überlassen.

Ich persönlich bevorzuge feste Breiten. Damit kann ich die Layouts die meinen Geschmack ansprechen eher umsetzen. Zudem bleibt der Text immer in leserlicher Breite. So gesehen überwiegen meiner bescheidener Meinung nach die Vorteile wenn man feste Layouts einsetzt.

Wenn sich irgendwann mal die Lage (die Hoffnung stirbt zuletzt) ändern sollte und auch der Internet Explorer die CSS-Angaben zur minimalen und maximalen Breite unterstützt, dann würde auch ich ein Layout mit variablen Breite bevorzugen.

Links

15 Reaktion(en)

  1. René

    ich stehe auch schon oft vor der Überlegung, ob ich feste oder variable Breite mache. Die maxwidth/minwidth finde ich an der Stelle sehr praktisch.

    Aber `gute´ Browser wie z.B. Opera bieten einen Ganzseitenzoom an, dreimal auf `+´ gedrückt, und deine Seite wird auf 1024er Auflösung fast ohne Rand angezeigt, lediglich die Bilder sehen etwas ungünstigt gestreckt aus.

  2. Björn

    Ja der IE. Was soll man noch sagen. Gates und Co.wird das natürlich mal wieder egal sein. Könnte er es, hätten wir die optimale Lösung. Toftes Lösung ist an sich gut. Nur JS bremst und mittlerweile haben etwa 2,5% der Benutzer JS deaktiviert.

    Ganz sicher ist man nachwievor nur mit fixer Breite. Leider.

  3. Boris

    Ich arbeite inzwischen meist mit festen Breiten, nur eine meiner Sites läuft über die gesamte Seite, aber mit margin-right. Bei den Bildschirmauflösungen wird oft unterschlagen, dass viele Leute (ich kenne einige) zwar z.B. einen 1280×1024-Desktop haben, mit dem Browser aber nicht im Vollbild surfen. Ich lasse mit dem Mozilla (ohne Sidebars verwendet) rechts bewusst immer ca. 250-300 Pixel Platz, mit dem Firefox (mit 'Sage' oder Bookmarks im Sidebar) dagegen nutze ich das Vollbild, habe aber trotzdem nur ebenfalls etwa den angegebenen Wert an Fensterbreite.

    In der Regel dimensioniere ich auch auf optimales 'Passen' in einem 800er Fenster, Freiräume bei größten Auflösungen finde ich nicht besonders störend, im Gegenteil:

    Ich mag es auch nicht, wenn zum Frühstück der komplette Tisch randvoll mit dem kompletten Kühlschrankinhalt bedeckt wird – ich sehe ganz gerne noch ein paar Eckchen Tischplatte… es gibt einfach kein wirklich gutes Argument für das randvolle Ausnutzen des gebotenen Bildschirm-Platzes.

  4. Perun

    @Boris,
    da gebe ich dir Recht. Nur weil man es rein theoretisch machen kann (die gesamte Breite auszunutzen), heisst es noch lange nicht das man es auch machen soll/muss.

  5. Reimer

    Ach, Javascript ist gar nicht so böse wie es scheint. Am einfachsten einen Wrapper nutzen. Mittels PHP oder Javascript kann man dann für den IE die Werte korrigieren.

  6. Kai Laborenz

    Was Du nicht erwähnt hast ist die Möglichkeit, Seiten Schriftflexibel anzulegen. Wenn alle Breitenangaben in em gemacht werden, passt sich das Layout der eingestellten Schriftgröße an. Damit hast Du ein eindeutiges Layout, welches auch für Leute mit großen und sehr großen Schrfiten noch gut aussieht.

  7. Jeena Paradies

    Zu erwähnen währe da noch der IE7 von Dean Edwards mit dem es ein leichtes ist das JS zu benutzen um dem IE auf die sprünge zu helfen.

    Ich habe das mit der Maximalbreite auf meiner seite so gelöst, dass wenn der nutzer einen IE hat und JS aus hat, er eine feste breite bekommt, und wenn er einen IE hat und JS an hat eine variable mit max-width versehene Breite bekommt. Somit hat mann wenigstens das Problem bei kleinen Auflösungen weg.

    Grüße aus Bamberg,
    Jeena

  8. Zuperfly

    Ich höre immer 800×600 .. was ist denn mit noch niedrigeren Auflösungen wie z.B. bei Handhelds? Will man mit seiner Website eine möglichst große Anzahl von Endgeräten (!, nicht Auflösungen!) bedienen, kommt man um "flüssiges" Design heute nicht mehr herum. "em" ist hier die Einheit der Wahl, das erfordert beim Erstellen zunächst ein wenig Umstellung, geht aber dann recht, ähem, flüssig vond er Hand und man ist erstaunt, wie fein die Seiten dann selbst "gezoomt" in Opera oder Firefox aussehen.

    Grüße an die Pixelschubser 😉

    Zuperfly

  9. Pingback: C-blog - Bock auf Blog

  10. Pingback: Daniels Tagesgeschehen » Seitenbreite: Fest oder doch variabel?

  11. Pingback: Daniels Tagesgeschehen

  12. Gunnar

    ich hab das jetzt zwar nicht ausprobiert, aber es müsste doch möglich sein, dem den inhalt und die navigation umfassenden container durch einen unsichtbaren hilfs-container mit fixer breite eine bestimmte mindestbreite bei sonst offener ausdehnung zu geben.

    gleich mal austesten.

  13. Gunnar

    ich hab’s jetzt ausprobiert – scheint nicht zu klappen. zwar war es möglich, den mozilla dazu zu bringen, bei einem dreispaltigen layout nicht die rechte unter die linke spalte zu schieben, indem ich die rechte spalte in ein rechts floatendes div mit fixer breite gesetzt habe, nur hat man dabei wieder das alte internet-explorer problem, dass das äußere div gleich die höhe des eingebundenen divs mitübernimmt… aber das thema hat mich jetzt gepackt.

    🙂

    das muss doch irgendwie hinzukriegen sein?!

  14. Pingback: Markup Weblog

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!