Analyse der Vor- und Nachteile von festen, fließenden und flexiblen Webseiten-Layouts

Es gibt eine Frage, die Webdesigner schon lange beschäftigt: Sollten wir ein festes , fließendes, flexibles oder hybrides Layout verwenden? Sie haben jeweils ihre eigenen Vor- und Nachteile. Die endgültige Entscheidung hängt von der Benutzerfreundlichkeit der Website ab und es ist möglicherweise nicht einfach, das Ziel mit nur einem Layout zu erreichen. Wenn es so verwirrend ist, gibt es einen Trick, um die richtige Entscheidung zu treffen ? Indem Sie verschiedene Aspekte berücksichtigen und die Zielergebnisse entsprechend festlegen, können auch Sie ein erfolgreiches Layoutdesign erstellen, das das Beste aus allen Welten vereint.

In diesem Artikel werden die Vor- und Nachteile der einzelnen Layoutoptionen erläutert. Tatsächlich kann mit jeder Lösung ein erfolgreiches Website-Layout erzielt werden, solange Sie die Benutzerfreundlichkeit im Auge behalten.

Warum darüber streiten? Webdesign orientiert sich an der Messlatte der Benutzerfreundlichkeit und aufgrund der Verschiedenheit der Website-Benutzer ist es schon schwierig, eine Website zu gestalten, die für unterschiedliche Benutzer ausreichend benutzbar ist.

Beim Entwurf einer Website für ein breites Benutzerspektrum müssen Designer die folgenden potenziellen Unterschiede zwischen den Besuchern berücksichtigen:

• Bildschirmauflösung
• Welchen Browser verwenden Sie?
• Ist das Browserfenster maximiert?
• Ob zusätzliche Browserkomponenten aktiviert werden sollen, die Speicherplatz beanspruchen (z. B. Verlauf, Lesezeichen, Google-Symbolleiste usw.)
• Auch die Betriebssystem- und Hardwarebedingungen

Da es keine Standardgröße für Webseiten gibt, müssen Webdesigner bei ihrer Arbeit unzählige Probleme lösen.

1. Unterschiede zwischen festem Layout und fließendem Layout

Obwohl die meisten Designer und Entwickler über ein grundlegendes Verständnis von festen und fließenden Weblayouts verfügen, wollen wir die Konzepte kurz klären.

Festes Seitenlayout

Festes Webseitenlayout bedeutet, dass der Inhalt der Website in einen Container mit fester Breite eingebettet ist und die Blöcke im Container feste Prozent- oder Pixelbreitenwerte haben. Der wichtigste Punkt ist, dass der Container nicht bewegt werden kann. Besucher sehen Inhalte mit einer festen Breite, unabhängig von der Bildschirmauflösung.

Das obige Diagramm zeigt, wie ein Webseiten -Layout mit fester Breite allgemein implementiert wird. Die inneren Komponenten sind auf feste Breiten von 520, 200 bzw. 200 Pixel eingestellt. Eine Breite von 960 Pixeln hat sich im modernen Webdesign zum Standard entwickelt, da die meisten Benutzer über eine Bildschirmauflösung von 1024 x 768 und mehr verfügen.

Fließendes Weblayout

Ein flüssiges Weblayout , auch als flüssiges Weblayout bezeichnet, wird erreicht, indem die meisten Komponenten (einschließlich des Hauptcontainers) auf prozentuale Breiten eingestellt und an die Bildschirmauflösung des Benutzers angepasst werden.

Das Bild oben zeigt ein fließendes Web- Layout . Obwohl die meisten Designer bestimmten Elementen in einem fließenden Layout feste Breiten zuweisen (z. B. Rändern und Polsterungen), werden für das gesamte Layout im Allgemeinen prozentuale Breiten verwendet und die tatsächliche Breite automatisch an den Benutzer angepasst.

2. Webdesign mit festem Layout

Viele Designer bevorzugen feste Layouts, weil sie diese für sicherer halten: Was der Designer sieht, ist das, was der Benutzer sieht . Allerdings sind die Vor- und Nachteile ebenso besorgniserregend wie die Flussanordnung.

profitieren

• Layouts mit fester Breite sind einfacher zu entwerfen und anzupassen.
• Die Anzeigebreite ist in allen Browsern gleich und es gibt weniger potenzielle Konflikte bei Inhalten mit fester Breite wie Bildern, Formularen und Videos.
• Es ist nicht erforderlich, min-width (Mindestbreite) und max-width (Maximalbreite) festzulegen, da diese beiden Eigenschaften nicht von allen Browsern unterstützt werden.
• Auch wenn eine Webseite für eine Bildschirmauflösung von mindestens 800 x 600 Pixeln ausgelegt ist, ist der Inhalt auch auf Monitoren mit höherer Auflösung noch gut lesbar.

Nachteile

• Layouts mit fester Breite können bei Benutzern mit hochauflösenden Bildschirmen große Leerräume auf der Seite erzeugen und so die „heiligen Proportionen“, die „ Drittelregel “, die Gesamtausgewogenheit und andere Designprinzipien zerstören.
• Auf kleinen Bildschirmen können horizontale Bildlaufleisten erscheinen, die das Benutzererlebnis beeinträchtigen.
• Nahtlose Texturkacheln, Muster und andere fortlaufende Bilder müssen für große Auflösungen optimiert werden.
• Feste Breiten sind im Allgemeinen weniger brauchbar.

Beispiel für einen Entwurf mit festem Layout

Die Designer der folgenden fünf Webseiten nutzen alle die Eigenschaften von Webseiten mit festem Layout voll aus. Diese Websites kombinieren alle viele Designelemente und verwenden feste Layouts , um eine perfekte Szene zu erstellen . Mithilfe der festen Breite können Designer zusätzliche Designelemente rund um den Site-Inhalt besser steuern und so die Breite des Inhalts und der Navigation genauer anpassen.

Achten Sie besonders darauf, wie Designer fortlaufende Bilder für Breitbildschirme gestalten (versuchen Sie, die Bildschirmauflösung zu erhöhen).

3. Vermeiden Sie die Nachteile eines festen Layouts

Wenn Sie sich für ein festes Layout entschieden haben, müssen Sie die folgenden Tipps kennen. Sie helfen Ihnen, die negativen Auswirkungen fester Layouts zu mildern und erfolgreiche Designs zu erstellen.

Hinweis zur Übersetzung: Der folgende Absatz scheint geschrieben worden zu sein, um die Wortanzahl zu erhöhen und Tantiemen zu verdienen. Klicken Sie hier, um diesen Absatz zu überspringen .

Schauen wir uns zunächst die Statistiken an

Die meisten Designer gehen heute davon aus, dass die meisten Internetbenutzer eine Auflösung von 1024 x 768 oder höher verwenden. Eine von W3Schools veröffentlichte Umfrage zeigt, dass dies nicht der Fall ist (bitte beachten Sie, dass den Daten von W3Schools nicht vollständig vertraut werden kann, wie später noch ausführlich erläutert wird):

Wie Sie sehen, erfüllt die Größe 640 x 480 in dieser Tabelle nicht einmal die Anforderungen. Daten von W3Schools zeigen, dass diese Lösung von den Benutzern offenbar völlig aufgegeben wurde. Tatsächlich gibt es Benutzer, die diese Auflösung verwenden, aber die Anzahl der Benutzer ist zu gering, sodass die Designer sie völlig ignorieren und einige passendere Designs mit besserer Benutzerfreundlichkeit für höhere Auflösungen erstellen.

Selbst Benutzer, die diese Auflösung verwenden, können sie möglicherweise nur auf kleinen, leicht tragbaren Computern verwenden und es handelt sich nicht um die von ihnen üblicherweise verwendete Hauptbildschirmauflösung.

Allerdings sind die hier aufgeführten Statistiken möglicherweise nicht so genau wie allgemein erwartet. Da die Besucher von W3Schools größtenteils einer bestimmten Gruppe angehören (Designer und Webentwickler), können die Ergebnisse im Vergleich zur Allgemeinheit etwas verzerrt sein. Andere Umfragen haben jedoch ähnliche Ergebnisse gezeigt. Einer im Jahr 2009 von unabhängigen Unternehmen durchgeführten Umfrage zufolge liegt der Anteil der Nutzer einer Auflösung von 800 x 600 bei weniger als 10 %. (Anmerkung: Laut den Statistiken der Benhuoer-Website liegt diese Zahl unter 2%)

Hier ist ein interessantes Diagramm von SohTanaka.com , wo die Kompatibilität einiger großer Websites mit unterschiedlichen Bildschirmauflösungen untersucht wurde:

Alle an der Umfrage beteiligten Websites haben letztendlich eine beeindruckende Transformation durchlaufen. Sogar die größten Internetunternehmen haben festgestellt, dass ihre primäre Zielgruppe Benutzer mit größeren Bildschirmauflösungen sind.

Für weitere Informationen zur Bildschirmauflösung können Sie auch die folgenden Ressourcen zu Rate ziehen:

• W3Counter
• TheCounter.com Globale Statistiken
• OneStat.com

960px oder 760px?

Zusammenfassend lässt sich sagen, dass die meisten Designer entweder 960 oder 760 als Gesamtpixelbreite wählen. Ersteres ist besser für Bildschirme mit einer Auflösung von 1024 × 768 oder höher geeignet und kann ein wenig Leerraum lassen. Letzteres ist die optimale Anzeigebreite bei einer Auflösung von 800 x 600. Wenn Sie diese Breite einstellen, können Sie diese 10 % vermeiden und es sieht auch auf größeren Bildschirmen gut aus.

Zentrieren Sie das Layout immer als Ganzes

Wenn Sie ein Design mit fester Breite verwenden möchten, achten Sie darauf, den Hauptcontainer zu zentrieren, um die Balance zu wahren (normalerweise reicht die Verwendung von margin: 0 auto; aus). Andernfalls wird Ihr Inhalt bei Breitbildbenutzern in eine Ecke gequetscht, was hässlich aussieht.

4. Fließendes Seitenlayout

Designer haben viele Gründe, keine fließenden Layouts zu verwenden, doch die Leute erkennen oft nicht die Vorteile fließender Layouts. Hier sind die Vor- und Nachteile, die Sie bei der Verwendung eines fließenden Layouts berücksichtigen sollten:

profitieren

• Das fließende Webseiten -Layout hat eine stärkere Affinität, da es sich an die Situation des Kunden anpassen kann.
• Die Menge an zusätzlichem Leerraum ist in allen Browsern und bei allen Bildschirmauflösungen ähnlich, was das Ganze optisch ansprechender macht.
• Bei richtiger Gestaltung können fließende Layouts horizontale Bildlaufleisten auf kleinen Bildschirmen vermeiden.

Nachteile

• Designer haben weniger Kontrolle über die Darstellung ihrer Designs auf dem Client und da sie mit Bildschirmen bestimmter Größe arbeiten, ist es für sie auch schwieriger, potenzielle Probleme zu erkennen.
• Bilder, Videos und andere Inhalte mit einer festen Breite müssen auf unterschiedliche Breiten eingestellt werden, um unterschiedlichen Bildschirmauflösungen gerecht zu werden.
• Bei besonders großen Anzeigebildschirmen führt unzureichender Inhalt zu übermäßig viel Leerraum und zerstört so die Ästhetik.

Beispiele für fließende Layouts

Die folgenden beiden Beispiele verwenden prozentuale Breiten zur Anpassung an unterschiedliche Bildschirmauflösungen. Das erste Beispiel passt die Breite des Inhaltsblocks an, während das zweite Beispiel die Größe der Leerzeichen anpasst.

5. Entwerfen Sie ein geeignetes mobiles Weblayout

Obwohl fließende Layouts gewisse Probleme mit sich bringen können, lassen sie sich mit ein paar Tricks lösen.

Einfaches Design

Je weniger Muster und komplexe Techniken auf ein fließendes Web- Layout angewendet werden, desto einfacher ist es zu erstellen und zu pflegen. Gleichzeitig kann es sich einfacher an unterschiedliche Bildschirmauflösungen anpassen. Mit verfeinertem Code und Design können Kompatibilitätsprobleme besser vermieden, erkannt und gelöst werden.

Nehmen Sie beispielsweise das Smashing Magazine , sie verwenden ein fließendes Layout. Das Design ist sehr einfach, nur die schwarze und orange Navigationsleiste oben ist erweitert und die Breite der einzelnen Inhaltsbereiche ändert sich je nach Situation. CSS wird verwendet, um mit allen möglichen Situationen kompatibel zu sein und eine Fehlausrichtung der Seitenleiste und des internen Inhalts zu verhindern.

Minimale Breite (min-width) und maximale Breite (max-width)

Diese beiden CSS- Eigenschaften, min-width und max-width, können verwendet werden, um eine feste Breite für Benutzer mit großen oder kleinen Bildschirmen festzulegen. Wenn der Bildschirm zu klein ist, wird der Inhaltsblock auf eine bestimmte Breite fixiert und am unteren Bildschirmrand wird eine horizontale Bildlaufleiste angezeigt. Wenn der Bildschirm zu groß ist, wird der Inhalt ebenfalls auf die maximale Breite fixiert, um eine zu große Ausdehnung und damit eine Beeinträchtigung der Lesbarkeit des Textes zu vermeiden. Weitere Einzelheiten finden Sie unter:

• W3Schools Seite zur CSS-Max-Width-Eigenschaft ,
• W3Schools-Seite zur CSS-Mindestbreiteeigenschaft .

Leider unterstützen die meisten Versionen von Internet Explorer diese beiden Eigenschaften nicht. Dieses Problem kann durch die Verwendung eines IE-spezifischen Ausdrucks gelöst werden: Maximale und minimale Höhe und Breite im Internet Explorer (auch: Chinesische Referenz ).

6. Flexibles Design

Beim Entwerfen eines Webseiten -Layouts gibt es tatsächlich eine dritte Option. Einige Designer bevorzugen die Verwendung eines sogenannten „elastischen Layouts“ , das die Eigenschaften der beiden Hauptlayouttypen kombiniert . Der entscheidende Punkt ist, zur Definition der Elementbreite die Einheit em zu verwenden. Das folgende Zitat erklärt, was em ist und wie es funktioniert:

„Ein ‚Pixel‘ auf einem Computerbildschirm ist ein nicht skalierbarer Punkt, wohingegen ein Em eine Breiteneinheit im Verhältnis zur Schriftgröße ist. Es ändert sich mit der Schriftgröße und spiegelt die Einstellung des Benutzers für die Schriftgröße wider.“
-Patrick Griffiths, Eine Liste auseinander

Obwohl ein flexibles Design viele Vorteile zu bieten scheint, weist es wie die beiden vorherigen Layouts auch Vor- und Nachteile auf.

profitieren

• Bei richtiger Verwendung kann dieses Layout -Design eine sehr benutzerfreundliche Oberfläche erstellen. Der beabsichtigte Effekt besteht darin, dass alles je nach Benutzerwunsch größer oder kleiner werden kann.
• Das flexible Layout eignet sich besser für Designer, denen die Entscheidung zwischen fließenden und festen Layouts schwerfällt, da das flexible Layout die Vorteile beider Layouts bietet.

Nachteile

• Obwohl der erste „Vorteil“ richtig ist, birgt das flexible Layout immer noch viele Minen für die Benutzerfreundlichkeit. Damit das Layout für alle Benutzer funktioniert, sind viel Einfallsreichtum und ständige Tests erforderlich.
• Dieses Layout ist wesentlich schwieriger zu implementieren als die beiden vorherigen, und der geringe Benutzerfreundlichkeitsgewinn ist den Aufwand möglicherweise nicht wert.
• Aufgrund der besonderen Natur dieses Layouts können für einige flexible Layoutdesigns zusätzliche Stylesheets und spezielle Anpassungen für IE6 erforderlich sein.

Beispiel für flexibles Layout

Elastisches Layout und flüssiges Layout sehen auf den ersten Blick sehr ähnlich aus, weshalb sie häufig verwechselt werden. Der grundlegende Unterschied besteht darin, dass die Längen- und Breiteneinheiten des elastischen Layouts em sind, während das flüssige Layout Prozentsätze verwendet und die Größe des elastischen Layouts sich hauptsächlich entsprechend der Schriftgröße ändert. Diese Art von Design passt sich der Schriftgröße im Browser des Benutzers an.

7. Welches Layout ist für Sie besser geeignet?

Das von Ihnen gewählte Layout sollte von der Art Ihrer Website abhängen . Wägen Sie die oben genannten Vor- und Nachteile ab und finden Sie die richtige Lösung für Ihre Website-Anforderungen

Für eine Portfolio-Website wäre beispielsweise ein Layout mit fester Breite möglicherweise am besten geeignet. Auf diese Weise können Sie etwas designorientierteres gestalten. Sie haben nicht nur mehr Kontrolle über die einzelnen Elemente Ihres Entwurfs, auch die grafische Darstellung Ihrer Arbeit wird wesentlich einfacher zu handhaben. Für viele Designer (einschließlich derjenigen, die an Nicht-Portfolio-Sites arbeiten) sind feste Layouts ein guter Freund, mit dem sich leicht arbeiten lässt und der den Leuten ein Gefühl der Sicherheit vermittelt.

Designer, die 100 % Kompatibilität anstreben, sollten etwas Zeit in ein flüssiges Layout investieren. Die größte Herausforderung besteht nicht in den übermäßigen weißen Flächen, die auf dem breiten Bildschirm auftreten können, sondern in der Anzeigewirkung auf dem kleinen Bildschirm. Bei einer Website mit einer großen Anzahl von Benutzern kann ein kleiner Prozentsatz der Benutzerbasis in absoluten Zahlen recht bedeutsam sein. Auch ohne dies zu berücksichtigen, sollten große Websites ein einfaches und leistungsfähiges Design haben, was durch die Verwendung flüssiger Layouts effizient erreicht werden kann.

Sie können sich immer noch nicht entscheiden? Keine Angst, es stehen auch flexible bzw. teilflexible Layoutgestaltungen zur Verfügung. Bei richtiger Verwendung kann das flexible Layout die Vorteile der beiden Hauptlayouts vollständig integrieren. Kluge Designer wissen, wie sie die Prinzipien des flexiblen Designs zu ihrem Vorteil nutzen können, indem sie em-Einheiten für Schrift- und Containergrößen verwenden und dann Prozentsätze und Pixelbreiten mischen, um andere Layout-Elemente festzulegen.

Was andere Designer sagen

Heidi Cools Antwort auf Fixed vs. Liquid vs. Elastic Layout

Der Kommentar dieses Designers bezieht sich auf die Zusammenarbeit mit anderen an einem Layout , die möglicherweise nicht viel über Webdesign wissen:

„Ich habe lange darüber nachgedacht. Letztendlich haben wir uns für ein festes Layout auf case.edu entschieden, weil:

1. Fließende Layouts sind komplexer und wir stellen Designs auf Grundlage von Vorlagen für Benutzer mit unterschiedlichen Kenntnissen bereit, deren Arbeit ein flüssiges Layout leicht zerstören könnte (Vorlagen sind lediglich normale HTML-Dateien, keine Dreamweaver-Vorlagen).
2. Wir möchten nicht, dass Site-Betreuer zu breite Seiten erstellen – Seiten mit langen Textzeilen, die äußerst schwer zu lesen sind.
3. Wir möchten die Anzahl der Lücken für diejenigen begrenzen, die immer alle Lücken ausfüllen möchten. Wenn sie einen großen Monitor verwenden, füllen sie schnell die Seite aus und ignorieren die schlechte Anzeige auf einem kleinen Bildschirm.

Wie Sie alle sehen, besteht das Hauptproblem immer noch darin, dass unsere Website von Personen mit unterschiedlichen Qualifikationsniveaus gepflegt, erstellt, ergänzt und gelöscht wird. Wenn ich alleine an einer Website arbeiten würde, würde ich beim Schreiben des Codes wahrscheinlich eher Entscheidungen auf Grundlage von Zielen, Inhalten usw. treffen. ”

madrs Antwort auf „Wo sind all die flexiblen Designs geblieben?“

Er weist auf zwei weitere Vorteile von Layouts mit fester Breite hin:

„ Banner und Anzeigen werden normalerweise mit Bildern und Flash implementiert , was die Erstellung elastischer oder flexibler Layouts erschwert. Ich habe anderthalb Jahre in der Zeitungsbranche gearbeitet, und Anzeigen sind wirklich schwierig zu handhaben. Dasselbe gilt für Artikelbilder. Wenn Sie ein elastisches Layout verwenden, kann der Lesebereich im Verhältnis zum oberen Bild zu groß werden.

Alle Browser außer Safari 3 und darunter (Safari 4 kommt bald [笨工儿:已来了…]), Firefox 2 und darunter und IE6 und darunter (der bald aussortiert wird…) unterstützen das Zoomen der gesamten Seite statt nur der Schriftart . Diese Situation macht das Entwerfen flexibler, elastischer Layouts noch weniger praktikabel und die meisten Benutzer werden Ihre guten Absichten nicht einmal bemerken. ”

Antwort von jphilapy auf „Wo sind all die flexiblen Designs geblieben?“

Es gibt zwei Gründe, warum es sich lohnt, fließende Layouts zu unterstützen:

„Eine flüssige Site kann sich an viele Auflösungen anpassen. Sie müssen die Bildschirmgrößen Ihrer Benutzer nicht untersuchen und diskutieren. Und die Statistiken zur Bildschirmauflösung sind ein Mysterium; fast niemand nutzt einen Browser im Vollbildmodus und es gibt viele Symbolleisten, Seitenleisten, Widgets usw., was unzählige Bildschirmbedingungen schafft.

Auch Mobiltelefone (wie das iPhone), Spielekonsolen usw. werden nach und nach zu einem wichtigen Mitglied der Webbrowser-Familie. Diese Geräte verfügen im Allgemeinen über eine kleine Bildschirmauflösung und können von einer flexiblen Web- Layout -Gestaltung profitieren.

Calrions Antwort auf „Über Layouts mit variabler und fester Breite“

Erklärt explizit die Verwendung eines flexiblen Layouts :

„Ich denke, ein „flexibles“ Layout ist die beste Option. Etwas fließend , aber mit einer festen Breite, um sicherzustellen, dass die Textzeilen nicht zu lang werden.

Ich bin ein Windows-Benutzer und maximiere normalerweise das Fenster.

Der Grund, warum ich es maximieren möchte, ist, dass ich mich besser auf die Anwendung konzentrieren kann, die ich verwende. Wissen Sie, ich habe immer eine Menge Zeug auf meinem Schreibtisch. Darüber hinaus bietet die Maximierung meines Browsers (Firefox) den meisten Platz für Benutzeroberflächenelemente, insbesondere die Lesezeichen-Symbolleiste und den Registerkartenbereich.

Wenn es um die Benutzerfreundlichkeit geht, sind flüssige Layouts für erfahrene Benutzer wahrscheinlich am besten geeignet . Weil sie die Größe des Browserfensters aktiv steuern. Für weniger erfahrene Benutzer ist ein flexibles Layout möglicherweise am besten geeignet, da es automatisch verhindert, dass es zu breit wird.

Georgs Antwort auf Über Layouts mit variabler und fester Breite

Warum ein Mix der drei Layouts die besten Ergebnisse liefert:

„ Ich bevorzuge einen fließenden Hauptbereich und feste Seitenleisten, die vielleicht ein bisschen elastisch sind . Außerdem stelle ich für den Textbereich immer eine maximale Breite von 600 Pixeln ein.

Stellen Sie die gesamte Seitenbreite mit Min./Max. auf einen Wert zwischen 600 und 1200 Pixel ein und zentrieren Sie sie.

Führen Sie gründliche Tests auf Bildschirmen mit einer Breite von 600 bis 2400 durch und überlassen Sie die Entscheidung für andere Breiten dem Benutzer. Die Textzeilen sind nie zu breit (600 ist die maximale Breite) und die Seite wird bei Komprimierung nie vorzeitig falsch ausgerichtet.

Die meisten Rückmeldungen, die ich erhielt, bestanden darin, dass die Benutzer kaum bemerkten, dass sie durch irgendetwas verwirrt waren . Die Webseite ist leicht zu lesen. Erklären Sie, dass mein Ansatz einen sinnvollen Kompromiss darstellt.

Ihre Station macht auf mich einen guten Eindruck und ich denke, dass es sich um einen brauchbaren Kompromiss handelt. Der Text ist für meine alternden Augen zu klein, daher zoome ich in Opera auf einem 1280-Breitbildbildschirm auf 120 % hinein. Es wird nie ein Problem geben. ”