Lohnt es sich, flüssige Websites mehr zu erstellen? [geschlossen]


218

Ich mache gerade eine Website und versuche zu entscheiden, ob ich sie flüssig machen soll oder nicht. Websites mit fester Breite sind viel einfacher zu erstellen und auch viel einfacher, sie konsistent erscheinen zu lassen.

Um ehrlich zu sein, schaue ich mir persönlich lieber flüssige Websites an, die sich über die gesamte Breite meines Monitors erstrecken. Meine Frage kommt von der Tatsache, dass Sie in den meisten modernen Browsern die Kontrolle behalten und mit dem Mausrad scrollen können, um die Größe jeder Website zu ändern.

Lohnt es sich also, eine flüssige Website zu erstellen?


1
if (a == 1) {+ a} else {'nawp'}
Sphvn

Antworten:


52

Es hängt von Ihrem Publikum und Ihren Inhalten ab.

Das Folgende sind Websites, die ich respektiere und die ich als Beispiel für die Nachahmung betrachte.

Flüssigkeitsbeispiele:

Amazonas

Wikipedia


Statische Beispiele:

Apfel

Ebay

MSN

Paketüberfluss

MSDN


Einige mischen es durch!

CNN

Ich glaube, ich bevorzuge die meiste Zeit statische Aufladung. Es ist einfacher, es in mehr Browsern gut aussehen zu lassen. Es ist auch leichter zu lesen.


17
Wie verwechselt CNN es?
Alix Axel

43

Eine Website flüssig zu machen, aber ein Attribut für die minimale / maximale Breite hinzuzufügen, scheint für mich das Beste aus beiden Welten zu sein. Sie unterstützen die Fluidität, begrenzen sie jedoch auf eine bestimmte Breite (z. B. 800px und 1200px).

Es liegt an Ihnen - hier sind einige Dinge zu beachten:

  1. Text ist schwer zu lesen, wenn die Zeilen sehr lang sind.
  2. Ihr Publikum hat möglicherweise größere oder kleinere Auflösungen als normal, und die Auswahl einer „falschen“ statischen Breite wird es stören.
  3. Die Aufrechterhaltung einer Flüssigkeitsstelle kann, muss aber nicht viel schwieriger sein als das statische Gegenstück.

Irgendwelche Kommentare zur Browserkompatibilität dafür?
HaveAGuess


Danke, ich versuche es mit dem reaktiven Gitter von
getskeleton

37

Absolut. Es ist eine große Unannehmlichkeit für Leute mit riesigen Monitoren, die Größe der Seite ändern zu müssen. Bei einigen Layouts kann es auch etwas zwielichtig sein. Kleine Unannehmlichkeiten, egal wie trivial sie auch sein mögen, können die Meinung der Menschen zu Ihrer Website beeinflussen.

Außerdem haben Netbooks ungerade Auflösungen, die das Entwerfen von Websites erschweren. Zum Beispiel schreibe ich dies bei 1024x600.

Heutzutage ist es auch nicht besonders schwierig (in modernen Browsern), insbesondere mit min-und max-heightin CSS und den neuen Verläufen usw. in CSS3, sodass die Bildskalierung in naher Zukunft kein so großes Problem darstellen wird.

Als Antwort auf den folgenden Kommentar denke ich, dass die Vorteile in diesem speziellen Fall die Nachteile überwiegen - IE6 ist überall ein Problem. Wir müssen uns nur darum kümmern.


24
"Es ist heutzutage auch nicht besonders schwer", möchte ich mich unterscheiden. IE6 ist immer noch sehr real. Das Schreiben eines flüssigen Layouts, das in diesem kleinen Format funktioniert, ist eine schwierige Herausforderung. Versuchen Sie, nach "CSS Holy Grail" zu suchen. Grrr.
Spender

4
Ich denke, wie alle Webentwickler ignoriere ich IE6 die meiste Zeit. Wird nicht los, aber es macht mich glücklicher :). (Ich weiß, dass ich dem Kommentar aus dem
Lucas Jones

91
STOPPEN SIE DIE UNTERSTÜTZUNG IE6
Jason

21
Ja, in der Utopie würden wir alle aufhören, IE6 zu unterstützen, aber normalerweise sagt das Geld etwas anderes aus.
Spender

13
Laut w3schools.com/browsers/browsers_stats.asp verwenden 13% des Webs IE6, 15% IE7. Das ist ein guter Grund, IE6 zu unterstützen. Eine einfache idealogische Abneigung reicht nicht aus, um IE6 zu entleeren. Entschuldigung Jason.
Paul Nathan

16

Sie müssen feststellen, dass die meisten Computerbenutzer nicht einmal wissen, wie man den Browser vergrößert! Die meisten Benutzer sind so weit vom Verständnis der Computer entfernt, die wir haben. Wir müssen uns immer an diese Tatsache erinnern.


2
OK, das heißt also was? Für welche Seite argumentieren Sie?
Mark

1
Das bedeutet, dass ich für flüssige Websites argumentiere, da wir nicht davon ausgehen können, dass Benutzer wissen, wie sie die Größe selbst ändern können.
Alex Baranosky

Müssen Sie die Größe des Browsers nicht ändern, um festzustellen, dass eine Website flüssig ist? Wie konnte jemand nicht wissen, wie man die Größe eines Fensters ändert?
mk12

1
Ja, ich wollte zoomen :) Ich selbst habe meinen Browser vor 1 Minute zum ersten Mal in meinem Leben vergrößert.
Alex Baranosky

Nun, dann sind Sie derjenige, der nicht weiß, wie man Computer benutzt
bevacqua

9

Textbasierte Apps: Nein . Tabellenbasierte Apps: Ja .

Vorteile von flüssigen Layouts

  1. Menschen mit großen Monitoren können ihre Bildschirmfläche nutzen.
  2. Einfacher für Benutzer mit großen Monitoren, wenn Sie viele Informationen auf Ihrer Seite haben.

Nachteile von Flüssigkeitslayouts:

  1. Eine Textspalte mit flüssiger Breite ist schwer zu lesen, wenn sie zu breit ist. Es gibt einen guten Grund für die Verwendung von Spalten in Zeitungen: Es erleichtert das Springen zur nächsten Zeile erheblich.
  2. (Etwas) schwer zu implementieren, aufgrund der Einschränkungen in CSS.

Wenn Sie tabellarische Daten anzeigen (iTunes, DB Manager, ...), ist die Flüssigkeitsbreite gut. Wenn Sie Text (Artikel, Wiki-Seiten, ...) anzeigen, ist die Flüssigkeitsbreite schlecht.


und Wikipedia ist in einem großen Browser schwer zu lesen, da die Lücken zwischen den Sätzen mit zunehmender Länge der Zeile nicht skaliert werden. Es fällt mir sehr schwer, mein Auge hin und her zu scannen, da es keine "Rinne" gibt, der ich folgen kann, während ich mein Auge hin und her bewege.
Ape-inago

8

Aus der Sicht meines iPhones ist das Layout mit fester Breite bei der Verwendung von Codeblöcken problematisch. Die Bildlaufleiste für breite Codeblöcke wird nicht angezeigt, sodass ich die rechte Seite des Blocks nicht lesen kann.

Ansonsten ist es meiner Meinung nach ganz einfach, welche Art von Website Sie entwerfen und wie sie auf Bildschirmen und Fenstern unterschiedlicher Größe aussieht. Wie bereits erwähnt, besteht die Möglichkeit, eine maximale Breite festzulegen. Dies gilt jedoch auch für Codeblöcke und iPhones. Ich habe beides entworfen und bevorzuge keines gegenüber dem anderen.

Es macht zwar Spaß zu beobachten, wie sich die Boxen bewegen, während ich mit der Browsergröße mit einem fließenden Layout spiele, aber ich kann mich leicht amüsieren.


6

Das Wichtigste ist, dominante Anwendungsfälle Ihrer Website oder Anwendung zu berücksichtigen. Erwarten Sie, dass die Benutzer es ausschließlich auf Mobilgeräten verwenden? Handys, Netbooks, Desktops?

Schauen Sie sich "Responsive Web Design" von Ethan Marcotte an: http://www.alistapart.com/articles/responsive-web-design/

Großartiger Artikel, der die Verwendung wirklich flüssiger Layouts mithilfe von Medienabfragen demonstriert. Manchmal müssen Sie ein separates Front-End für verschiedene Benutzeragenten erstellen, aber manchmal sind Medienabfragen das perfekte Tool, um mehrere Auflösungen für verschiedene Benutzeragenten bereitzustellen.


5

Es hängt davon ab, was Sie versuchen zu tun. Schauen Sie sich SO an. Es hat eine feste Breite und ist großartig. In der Tat, wenn es flüssig wäre, wäre es ein bisschen wie eine PITA. Einige Websites sehen mit flüssigen Layouts besser aus, aber ich persönlich würde mit fix gehen, es sei denn, Sie haben einen guten Grund, flüssig zu werden.


1
Es würde immer zu meinem Browser passen, anstatt mich in der Größe ändern zu lassen. Wie wäre das eine PITA? Es gibt Fälle, in denen komplexe grafische Layouts mit flüssigem Layout schwer zu realisieren sind, aber das gilt sicherlich nicht für das weitgehend spartanische Design von SO.
Bobince

2
Es wäre eine PITA, da sich alle Antworten über die Seite erstrecken würden. Ich bin froh, dass der Text ungefähr 500 Pixel umfasst. Deshalb haben Bücher normalerweise das Breitenverhältnis, das sie haben, weil die Augen der Menschen nach einem bestimmten Punkt, der sich seitlich bewegt, müde werden ...
Jason

Das ist keine PITA. So will ich es. Wenn Sie sehr lange Zeilen begrenzen möchten, legen Sie die maximale Breite in em fest, aber 500 Pixel in einer typischen Schriftgröße sind nicht lang. Die wenigen tatsächlichen Forschungsergebnisse stützen nicht die herkömmlichen druckbasierten Zeilenlängen für das Lesen auf dem Bildschirm.
Bobince

3
Ich würde es vorziehen, wenn SO selbst flüssig wäre.
Nosredna

4

Viele gute Punkte in den Kommentaren, aber aus Ihrer Frage geht hervor, dass Sie flüssige Designs wirklich mögen und eines erstellen möchten. Probieren Sie es aus, es ist Ihre Website, es muss nicht wie jede andere Website im Web sein.

Seien Sie sich nur der Vor- und Nachteile jeder Lösung bewusst.


3

Bis zu einem gewissen Punkt - ja.

Es gibt eine bestimmte Breite, in der das Lesen von Text nervt, wenn er zu breit ist. Einfach zu testen, wenn Sie einen großen Monitor haben. Nehmen Sie einfach den Notizblock und fügen Sie Text ohne Zeilenumbrüche ein.

Bei kleineren Größen kann es jedoch eine gute Idee sein, flüssig zu sein. Handy-Browser sind immer mehr in der Lage, "normale" Websites einwandfrei anzuzeigen, sind jedoch manchmal in der Breite eingeschränkt und profitieren daher davon, wenn Ihre Website auf etwas kleinerem Raum Platz findet.

Persönlich mag ich es auch, den Browser auf meinem Monitor zu behalten, aber nur auf der Hälfte der Breite des Monitors (24 "). Websites, die sich gut darauf skalieren lassen, sind sehr gut.

Ich denke, es ist meistens ein Benutzer-Convenience-Fall. Nicht alle Websites werden davon profitieren, flüssig zu sein, aber ich denke, Websites mit viel Textinhalt sind diejenigen, die am meisten davon profitieren, zumindest wenn sie bis zu einer maximalen Breite (z. B. 800 Pixel oder was auch immer) flüssig sind.


Einverstanden. Ich neige dazu, alle meine Websites im Bereich von 800 bis 1200 Pixel zu erstellen. Wenn man 1600 Pixel auf einer Seite betrachtet, reicht der Inhalt oft nicht aus, um sich zu verbreiten, und er sieht nur leer aus.
womp

2

Ja. Das Zoomen von Seiten ist großartig, wird jedoch hauptsächlich verwendet, um Text zu vergrößern und nicht um das Ansichtsfenster mit Text zu füllen. Wenn der Textkörper bereits zu breit ist, wird er durch Verkleinern normalerweise nicht lesbar.

Sie benötigen ein flüssiges Layout, wenn Sie den Text an das Ansichtsfenster anpassen möchten, unabhängig davon, ob er gezoomt ist oder nicht.

Der Punkt, dass „lange Zeilen schwer zu lesen sind“, wird oft von Designern überbewertet, die versuchen, Designs mit fester Breite zu rechtfertigen (*), aber in Wirklichkeit scheint er auf dem Bildschirm nicht ganz so stark zu sein wie auf Papier. Natürlich ist es wichtig, eine gute Leit- / Zeilenhöhe einzustellen, und die maximale Breite kann verwendet werden, um die schlimmsten Überschüsse langer Zeilen zu verhindern. (Stellen Sie es in font-relativen em-Einheiten ein.) In IE6 erhalten Sie keine maximale Breite, aber das ist nicht die Katastrophe, die es einmal war. (Sie können es mit ein wenig JavaScript beheben, wenn Sie sich wirklich für diese Typen interessieren. Ich nicht.)

(*, die für hochgrafische Layouts in der Tat weniger Arbeit bedeuten. Für ein einfacheres Layout wie StackOverflow gibt es jedoch keinen Grund, nicht flüssig zu werden. Tsk @SO, wie!)


2

Vorwort: Kein professioneller Webkünstler.

Ich habe festgestellt, dass es viel zu viele fummelige Dinge gibt, um die Dinge bei Handy- und Über-Widescreen-Größen zum Laufen zu bringen, insbesondere bei etwas von einigermaßen interessanter Komplexität.

Normalerweise entwerfe ich in gewisser Weise eine Site mit fester Breite. normalerweise begrenzt auf [600,1200].

Ich finde auch, dass sehr breite Inhaltsspalten mühsam zu lesen sind. Ich scheine mich zu erinnern, dass es einige Untersuchungen gibt, die eine optimale Anzahl von Wörtern pro Spaltenzeile vorschlagen.


2

Sie können es so machen.

# Machen Sie das Hauptlayout flüssig und wenden Sie die maximale Breite an: 1140px ' darauf an und Sie es.

Auf diese Weise wird es auf größeren Bildschirmen keine langen Textzeilen und auf kleineren Bildschirmen keine ordnungsgemäße Abwicklung der Webseite geben (ausgenommen 800x *** und niedrigere).

Ich habe diese Methode in meinen neuen Projekten implementiert und sie funktioniert wie ein Zauber.

atb .. :)


1

Ich denke, die Entscheidungsflüssigkeit sollte auch auf dem Inhalt der Website basieren :

  1. Verwenden Sie für Websites mit großen Mengen an einfachen Informationen (wie Nachrichtenportale) besser das flüssige Layout.

  2. Web-Services sehen besser aus und funktionieren in festen Dimensionen, sodass Sie immer wissen, wo sich Schnittstellenelemente an ihren Positionen befinden und sich nicht ständig bewegen.


1

Ja, flüssige Websites sind es wert, erstellt zu werden
Wie Sie sagten, sieht es gut und vernünftig aus, wenn Sie in der Entwurfsphase richtig planen.

Ihr Zweifel an den Auswirkungen von Strg + Bildlaufleiste ist keine große Sache. Diese Funktion dient in erster Linie der Barrierefreiheit, um die Lesbarkeit von Text durch Erhöhen der Größe zu verbessern.

Wenn Sie jedoch alle Ihre Größen in Pixel (px) angeben, wird dies nicht passieren. Die richtige Anpassung erfolgt nur, wenn Sie "em" verwenden, um die Größe anzugeben. Sie haben also die Möglichkeit, es ein- und auszuschalten


0

Ich bin ein großer Fan von Fixed bei <800px ... es ist einfacher, schmalere Spalten zu lesen, und es wird überall funktionieren. Das heißt, wenn Sie versuchen, eine Website zu erstellen, die Hypertext enthält ... Websites, die Anwendungs-Frontends darstellen, ist meiner Meinung nach eine weitere Dose Würmer vollständig ...


0

Fluid Design - wirklich flüssig - ist schwer. Sehr schwer. Es ist nicht nur eine Frage der Seitenbreite - skalieren Ihre Schriftarten und skaliert alles mit ihnen? Im Idealfall:

  • Größen sollten emeher in als definiert werdenpx
  • ... und das gilt für Elementgrößen, nicht nur für Schriftarten!
  • Bei einer Änderung der Schriftgröße oder der Zoomstufe sollten die Seitenelemente relativ zueinander dieselbe Größe haben

Unser Hauptprodukt ist flüssig und aus meiner Sicht als Designer ein Schmerz, insbesondere weil es viele benutzergenerierte Inhalte enthält.

Zum einen Bilder - auf einer Site mit fester Breite können Sie ein Bild haben, das die Hälfte der Breite ausfüllt und gut aussieht. An einem fließenden Ort ist es genauso wahrscheinlich, dass dieses Bild in einem Meer von Leerzeichen verloren geht und ziemlich einsam aussieht.

Das Leben sollte einmal einfacher sein border-radiusund andere CSS3-Eigenschaften kommen mehr ins Spiel, aber leider sind Regierungsmitarbeiter unser Kernpublikum, die alle immer noch IE F @! * ING 6!


Um die Frage zu beantworten: "Lohnt es sich?" Ja , wenn du es richtig machst.

Hier ist ein Szenario: Wählen Sie eine Site mit fester Breite: Ihr Chef zeigt sie einem Kunden auf seinem brandneuen 1920 x 1600-Laptop an und beschwert sich dann bei Ihnen darüber, "wie alles auf dem Bildschirm dieses Typen klein aussieht!"


0

Ich finde es schön, auf dem Bildschirm eines Benutzers gut skalieren zu können, anstatt die Benutzer zum Schwenken und Zoomen zu bringen. In einer Zeit, in der Benutzer von einer Vielzahl von Geräten im Internet surfen, von Smartphones bis hin zu ultra-mobilen PCs, von denen jeder seine eigene, möglicherweise nicht standardmäßige Auflösung hat, ist es meiner Meinung nach wichtig, die Benutzererfahrung auf einem hohen Niveau zu halten, wenn Ihre Website wird auf solchen Bildschirmen angezeigt. In Bezug auf die Textlänge könnte sie durch ein bestimmtes Verhältnis begrenzt sein, sodass sie gut in das Layout passt. Ich denke, es gibt auch Frameworks, die beim flüssigen Schreiben einer Site und bei der Codierbarkeit helfen können.


0

Ich werde gegen die Mehrheit gehen und NEIN sagen. Begründung: Fließende Websites wie Wikipedia sind aufgrund ihrer langen Zeilenlänge ein Albtraum, den man auf großen Bildschirmen lesen kann (obwohl ihre Zitate das Lesen im besten Fall erschweren).

Das Problem tritt tatsächlich auf, weil es keinen Mechanismus gibt, um die Größe von Text in Bezug auf die Bildschirmauflösung zu ändern. Wenn Sie Text bei größeren Auflösungen automatisch vergrößern könnten, könnten Sie näher an den ungeraden 80 Zeichen pro Zeile bleiben, die allgemein als die beste Lesbarkeit angesehen werden.

Es gibt auch das Problem von Bildern und anderen Elementen mit fester Größe. Sie können große Bilder haben und sie bei Bedarf vom Browser verkleinern lassen. Dann treten jedoch andere Probleme auf, z. B. viel längere Downloadzeiten und Probleme mit der Bildqualität in vielen Browsern.


Ich denke, Leute mit hochauflösenden Bildschirmen lernen, wie man den Standardzoom einstellt. Wenn Sie eine Site mit fester Breite erstellen, müssen Sie sie möglicherweise in ein oder zwei Jahren neu gestalten
HaveAGuess,

0

Ich bin ein Fan von Websites, die eine feste maximale Breite zwischen 800 und 1000 Pixel haben, aber auch verkleinert werden können, damit ich den Inhalt lesen kann, ohne von einer Seite zur anderen zu scrollen und auch nicht herauszuzoomen, da der Text häufig zu groß wird klein zu lesen und es tut meinen Augen weh. Das ist normalerweise der Wunsch, den ich anstrebe, weil ich Websites erstellen möchte, auf die ich stolz sein kann.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.