Feste Breite vs dynamische Breite

Mir ist aufgefallen, dass immer mehr Websites ein Layout mit fester Breite verwenden, bei dem beim Ändern der Größe des Browserfensters nur Bildlaufleisten angezeigt werden, während beim Ändern der Größe des Browsers die Komponenten der Seite zusammenlaufen .
Die StackExchange-Sites wie diese sind ein Beispiel für das feste Layout. GMail und iGoogle sind Beispiele für das flexible Layout. Was sind die Gründe, sich für eine Alternative zu einer anderen zu entscheiden?

Komplexere Designs können mit variablem Breitenlayout sehr schwierig zu realisieren sein. Ich stelle mir also vor, dass das eine Rolle spielt.

Hinzu kommt, dass es nicht angenehm ist, sehr breiten Text zu lesen. Die Spaltengröße auf StackExchange-Sites ist überschaubar und einfach zu lesen. Mit einem Layout mit variabler Breite können Sie den Haupttextkörper nicht nur über ihn hinweg erweitern, ohne dass er unleserlich wird. Sogar Google beschränkt die Breite seiner Suchergebnisse.

Wenn Sie eine Website mit begrenztem Speicherplatz haben (z. B. Google Text & Tabellen und Google Maps), sollten Sie natürlich ein Schema mit variabler Breite verwenden, um den gesamten verfügbaren Speicherplatz zu nutzen.

Das Beheben von Problemen mit ist für Entwickler komplexer Websites viel einfacher. Außerdem sind die meisten Sites mit fester Breite etwa 1000 Pixel breit. Der Grund ist, dass nur 1% der Browser 800x640 und 0% 640x480 verwenden. Sehen Sie sich hier die aktuellsten Statistiken an . Dies gilt jedoch nicht für mobile Geräte. Welches ist ein ganz anderes Ballspiel.

Der Wert des Layouts mit variabler Breite besteht darin, dass Benutzer die Website problemlos in einem Fenster verwenden können, das nicht maximiert ist.

Sie müssen sich Ihre Zielgruppe ansehen und basierend auf den Erfahrungen entscheiden, die Sie für wünschenswert halten, und ob variable Breite wichtiger ist als andere Funktionen, die Sie nicht entwickeln können, wenn Sie variable Breite benötigen.

Es gibt auch einen Kompromiss zwischen den beiden, bei dem Sie eine minimale und eine maximale Breite festlegen (mithilfe von CSS) und dann prozentuale Breiten verwenden, um den Rest zwischen den beiden Extremen fließen zu lassen. Beispielsweise möchten Sie möglicherweise, dass die linke Menüspalte nicht schmaler als 200px wird, sondern der Hauptinhalt fließt. Diese Technik ermöglicht es Ihrer Website, auf die Auflösung der Besucher zu skalieren, ohne auf extrem hohe oder extrem niedrige Auflösungen zu achten. Immerhin sollte HTML fließen - es ist eine Auszeichnungssprache und nicht dasselbe wie Print.

Dieser Ansatz eignet sich gut für relativ einfache Designs, z. B. Blogs oder solche, die viele Textinformationen enthalten. In der Tat verwende ich es auf meiner eigenen persönlichen Website . Immerhin haben jetzt viele Menschen Breitbild- oder hochauflösende Monitore - mein Arbeitsmonitor ist 1680px breit - warum sollten sie also viel Platz verlieren und horizontal scrollen müssen, nur weil sich ein Designer für eine feste Breite entschieden hat, die zu ihnen passt? Bildschirm? Bei gutem Design geht es letztendlich darum, dem Benutzer das bestmögliche Erlebnis zu bieten - es geht nicht nur darum, was auf dem Monitor des Designers "hübsch" aussieht.

Möglicherweise müssen Sie diese Wahl nicht treffen. A List Apart hat einen ausgezeichneten Artikel über Responsive Design . Die Hauptidee ist, dass Sie Medienabfragen verwenden können , um Änderungen im Browserfenster oder in der Ansichtsfenstergröße zu erfassen und CSS nach Bedarf neu zuzuweisen. Dort gibt es viel zu lesen. Lesen Sie den Artikel, um alle wichtigen Details zu erfahren. Aber für die lange und kurze davon (oder sollte es sein , die „breit und schmal“ davon?) Blick auf die vor und nach den Seiten ihres Beispiels. Die vorherige Seite wird bis zu einem gewissen Punkt gut skaliert, aber wenn Sie sie schmal genug machen, wird sie etwas klobig. Das nachher Die Seite wird ebenfalls skaliert, ändert aber auch das Layout, wenn Sie sie zu schmal machen, damit die Skalierung einwandfrei funktioniert.

Laut Jakob Nielsen ‚s 113 - Design - Richtlinien für Homepage Usability :

67 Verwenden Sie ein flüssiges Layout, damit sich die Größe der Startseite an unterschiedliche Bildschirmauflösungen anpasst.

Es ist auch eine der zehn am häufigsten verletzten Richtlinien für das Homepage-Design :

Das Kämpfen gegen eingefrorene Layouts scheint ein verlorener Kampf zu sein, aber es lohnt sich zu wiederholen: Verschiedene Benutzer haben unterschiedliche Monitorgrößen. Menschen mit großen Monitoren möchten in der Lage sein, die Größe ihres Browsers so zu ändern, dass mehrere Fenster gleichzeitig angezeigt werden. Sie können nicht davon ausgehen, dass die Fensterbreite aller 800 Pixel beträgt: Für einige Benutzer ist es zu viel und für andere zu wenig.

Was ist mit einer Verwechslung? Dies zeigt den # content-Abschnitt in einer festen Breite (70em) an, wenn genügend Platz vorhanden ist - andernfalls wird der Abschnitt auf 80% des Ansichtsfensters / Browserfensters verkleinert.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

Der Vorteil eines dynamischen Layouts besteht darin, dass es über alle Bildschirmgrößen hinweg funktioniert, einschließlich mobiler Geräte. Es ist jedoch schwieriger, die Dinge in all diesen Größen gut aussehen zu lassen. Die Frage ist: Werden Ihre Besucher mobile Geräte verwenden?