it-swarm-eu.dev

Ist es für Websites besser, ein Layout mit variabler Breite oder ein Layout mit fester Breite zu haben?

Aufgrund unterschiedlicher Bildschirmauflösungen kann die Benutzererfahrung beim Surfen auf einer Website unterschiedlich sein. Ist es besser, die Website mit einer festen Breite zu gestalten? (und wenn ja, sollte es unterschiedliche statische Breiten für Standardauflösungen geben?) Oder sollte eine Website immer in variabler Breite angelegt sein?

32
txwikinger

Ich glaube nicht, dass es hier eine einfache Antwort gibt, denn letztendlich hängt es davon ab, was Sie bauen und für wen Sie es bauen. Sowohl Stellen mit fester Breite als auch Stellen mit variabler Breite haben ihre Vor- und Nachteile.

Eine Sache, auf die ich hier hinweisen sollte, ich werde nicht über mobile Erlebnisse für feste/flüssige Sites sprechen, da mobile Sites am besten geeignet sind, wenn das Design für mobile Geräte spezifisch ist und nicht ein Port einer Desktop-Site auf eine mobile Plattform.

Feste Breite - Vorteile

Eine Site mit fester Breite ist eine konsistentere Erfahrung und schneller zu entwickeln als eine Site mit variabler Breite. Außerdem kann der Designer mehr Kontrolle über die Präsentation haben, da Sie harte Werte für Breiten, Linienlängen, Typografiegrößen usw. festlegen können. Dies ist letztendlich auch einfacher zu pflegen als eine Site mit variabler Breite.

Feste Breite - Nachteile

Auf der anderen Seite beginnen Designs mit fester Breite zu scheitern, wenn Kantenfälle angezeigt werden. Im Moment ist es sehr üblich, dass Benutzer Websites für einen Monitor mit einer Auflösung von 1024 Pixel entwerfen, aber es gibt immer noch Benutzer mit Maschinen mit niedrigerer Auflösung. Im Moment arbeite ich an einer Anwendung, die mit einem 960px-Raster entworfen wurde. Ich habe mir heute die Analyse angesehen und festgestellt, dass 3% der Benutzer auf 800 x 600 Monitoren und insgesamt etwa 5% bei Auflösungen unter 1024 x 768 waren. Diese Benutzer haben wahrscheinlich eine ziemlich schlechte Erfahrung, da die Site eine feste Breite hat .

Flüssigkeitsbreite - Vorteile

Durch die Flüssigkeitsbreite kann das Design basierend auf den Einstellungen des Benutzers erweitert werden. Das Design passt sich ihnen an, was gut ist. Auf diese Weise kann die Site einen proportionalen negativen Raum beibehalten, sodass sich die Site nie zu überladen oder zu offen anfühlt (es sei denn, sie wurde speziell auf diese Weise entworfen).

Flüssigkeitsbreite - Nachteile

Leider sind Konstruktionen mit flüssiger Breite auch für Edge-Fälle nicht undurchlässig. Wenn die Breite zu dünn oder zu breit wird, können schlimme Dinge passieren, insbesondere bei Text. Zu kurze oder zu lange Zeilenlängen sind im Wesentlichen nicht lesbar. Darüber hinaus sind viele Arten von Medien, wie Bilder oder Flash-Objekte, in Designs mit flüssiger Breite schwer zu skalieren. IE erfordert Javascript, um die Größe der Bilder zu ändern, andernfalls werden sie pixelig.

Sich anpassendes Webdesign

Einige Leute haben Beispiele gezeigt, aber diese Technik noch nicht namentlich erwähnt. Ethan Marcotte hat kürzlich den Begriff geprägt, um Fluid-Layouts zu beschreiben, die sich je nach Bildschirmauflösung eines Benutzers vollständig ändern können (siehe Details hier ). Dies ist eine Mischung aus fester Breite und Flüssigkeitsbreite. Sie können Minima und Maxima festlegen, damit die Medien- oder Zeilenlängen nicht außer Kontrolle geraten, und das Design kann an die Einstellungen des Benutzers angepasst werden. Natürlich hat diese Technik auch ihre eigenen Vor- und Nachteile. Obwohl ein Layout speziell für die Einstellungen eines Benutzers ausgewählt wurde, ist diese Art von Website schwer zu entwickeln. Nicht alle Browser unterstützen die dafür erforderlichen Medienabfragen. Außerdem entwickeln Sie im Wesentlichen mehrere Layouts, wodurch sich die Zeit für die Erstellung und Wartung verlängert.

Ich glaube, es ist unmöglich, einfach eine Decke "Immer das benutzen" oder "Niemals das benutzen" auszulegen. Ich würde sagen, dass Sie immer Ihre Bedürfnisse bewerten sollten, bevor Sie eine Entscheidung treffen. Ich bin in den meisten Fällen der Meinung, dass ein Layout mit fester Breite Ihren Zwecken dient, dass jedoch ein flüssiges oder ansprechendes Layout eine viel bessere Benutzererfahrung bieten kann, nur auf Kosten zusätzlicher Schwierigkeiten.

17
RussellUresti

Das Problem bei der Verwendung von 100% variabler Breite besteht darin, dass sie für Benutzer mit den kleinsten und größten Bildschirmen nicht gut angezeigt wird. Ich werde im Allgemeinen meinen Hauptinhaltsabschnitt für die Norm entwerfen, indem ich eine minimale/maximale Breite einstelle, und dann werde ich den wichtigen (festen) Inhalt zentrieren. Sie können dann Designelemente mit variabler Breite verwenden (da diese nicht so wichtig sind), die gedehnt/verkleinert werden, um den Bildschirm auszufüllen.

Auf diese Weise werden die wichtigen Informationen (hoffentlich) immer korrekt angezeigt, während sie in vielen Auflösungen gut aussehen.

24
LoganGoesPlaces

Ich bin kein Webdesigner, aber ich denke, Sie sollten idealerweise ein flüssiges Layout erstellen. Das heißt, ein Layout, das sich automatisch (und dynamisch) entsprechend der aktuellen Breite ändert. Auf diese Weise werden schmale Geräte wie Telefone sowie die verschiedenen Anzeigebreiten gut unterstützt.

Der Blog-Beitrag Endlich ein flüssiges Hicksdesign erklärt und demonstriert die Technik. Es verfügt über 3 Colum-, 2 Colum- und 1 Colum-Layouts, die entsprechend der Breite des Browserfensters ausgewählt werden.

7
whybird

Text ist schwer zu lesen, wenn die Zeilenlänge zu lang wird. Für Websites mit variabler Breite muss daher für Textbereiche mindestens eine maximale Breite vorhanden sein, um die Lesbarkeit zu gewährleisten.

Es ist viel schwieriger, eine Site mit variabler Breite gut aussehen zu lassen.

6
Mongus Pong

Kommt darauf an, woran ich arbeite, aber ich neige immer noch dazu, mich zu Standorten mit fester Breite zu neigen. Der Grund dafür ist, dass Sie die Benutzeroberfläche besser steuern und über alle Bildschirmgrößen hinweg konsistent halten können. Viele Standorte mit Flüssigkeitsbreite sehen auf größeren/kleineren Monitoren schrecklich aus (je nachdem, wofür sie entwickelt wurden).

Allgemeine Regel für mich:

  • Wenn die Benutzerfreundlichkeit der Website weitgehend von der Benutzeroberfläche abhängt und/oder der Inhalt hauptsächlich aus Text besteht: feste Breite
  • Wenn die Site nur über eine minimale Benutzeroberfläche verfügt, der Inhalt jedoch weitgehend visuell ist (z. B. Fotoseiten oder eine Karten-App), greife ich zu Flüssigkeit.

Hier ist eine großartige Aufschlüsselung einiger Vor- und Nachteile: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- für dich /

2
Ryan

Wann immer ich kann, versuche ich, die spezifische Höhe und Breite eines Objekts nicht in px, sondern in % Festzulegen.

1
megubyte

Ich würde vorschlagen, die variable Breite zu berücksichtigen oder ein alternatives Layout für breitere Bildschirme bereitzustellen.

Wenn Sie sich für eine feste Breite entscheiden - stellen Sie bitte sicher, dass es keine winzige ist! Ich habe einige Websites mit einer Breite von 500 oder 600 Pixel gesehen, die das Lesen der Website wie das Scannen der Gelben Seiten machen.

Ich bin schon lange ein Fan des Ansatzes von The Man In Blue, alternative Layouts basierend auf der verfügbaren Breite bereitzustellen: siehe Live-Demo hier

1
scunliffe

Möglicherweise möchten Sie das Layout Ihrer Website in Querformat Ausrichtung gestalten. Es werden immer mehr Breitbildmonitore mit großen Auflösungen von 1920 x 1080 verwendet (dies ist die häufigste). Haben Sie jemals versucht, ein Browserfenster zu maximieren, in dem ein Porträt mit festem Layout angezeigt wird? Es ist wie ein halbes bis zwei Drittel des Bildschirms, der mit Ihrer Hintergrundfarbe/Ihrem Hintergrundbild gefüllt ist.

Es ist schön, dass Sie mit Windows 7 die Größe eines Fensters schnell auf die Hälfte des Bildschirms ändern und zur Seite kleben können: WindowsKey + Left/Right

1
Mircea Chirea

Eine variable Breite ist wahrscheinlich der richtige Weg, da bei einer festen Breite einige Leute denken, dass Ihre Website für ihren Monitor zu klein ist, und einige Leute denken, dass sie für ihren Monitor zu groß ist.

0
David

Dies hängt vom Inhalt der Website ab. Wenn es viel Text enthält, ist eine variable Breite sinnvoller, da sich der Text ausbreiten kann und die Benutzer ihn effizienter lesen können. Wenn es sich eher um eine Marketing-Website handelt, bei der das Erscheinungsbild wichtiger ist, wählen Sie eine feste Breite, da es viel schwieriger ist, eine Website mit fester Breite großartig aussehen zu lassen.

0
Kai Chan

Alle Annahmen, die Sie beim Entwerfen eines Layouts mit fester Größe treffen, sind für einige Ihrer Benutzer falsch. Die einzige Möglichkeit, allen eine zufriedenstellende Erfahrung zu bieten, ist die Verwendung eines flexiblen, reaktionsschnellen Designs.

Zwei Probleme (versuchen, Doppelarbeit zu vermeiden):

  • Sie können nicht davon ausgehen, dass der Browser im Vollbildmodus angezeigt wird. Analysen, die die Bildschirmauflösung melden, erzählen nur einen Teil der Geschichte.

  • Sie können nicht davon ausgehen, dass Benutzer dieselben Schriftgrößen verwenden wie Sie. Zeilen, die zu breit sind, um in Ihrer Schriftgröße gelesen zu werden, sind möglicherweise nicht zu breit, um von jemandem gelesen zu werden, der die Schriftgröße um einige Stufen erhöhen musste. Umgekehrt kann die Spalte, für die Sie basierend auf Ihren Schriftarteinstellungen eine feste Breite festlegen, bedeuten, dass der Benutzer fünf Wörter pro Zeile oder etwas sieht.

Um für alle Benutzer nutzbar zu sein, muss Ihr Webdesign nur den Speicherplatz verwenden, den der Browser Ihnen bietet. Vertrauen Sie darauf, dass der Benutzer seinen Browser so dimensioniert hat, dass er seine eigene Erfahrung optimiert. Sie sollten dann innerhalb dieser Grenzen arbeiten. Dieser Ansatz funktioniert auf 30 "-Monitoren und 7" -Tablets (und sogar auf Telefonen, wenn Sie keine mobilspezifische Version erstellt haben).

0
Monica Cellio