Ich habe in letzter Zeit viel über Bildschirmauflösung nachgedacht und wie die Verwendung von Websites mit variabler Breite der beste Weg ist, um die Bildschirmauflösungen aller Besucher zu berücksichtigen. Die Alternative, Websites mit fester Breite, müssen eine Wahl treffen. Sie können für 800 Pixel Breite optimieren, den kleinsten gemeinsamen Nenner, und auf die Nutzung mehrerer hundert Pixel Breite für Benutzer mit größeren Bildschirmen verzichten. Oder Sie können für 1024 Pixel optimieren und Ihren 800-Pixel-Besuchern einfach eine horizontale Scrollleiste aufzwingen. Alles, was breiter als 1024 Pixel ist, ist meiner Meinung nach zu viel für Websites mit fester Breite.
Ich denke, das **bestmögliche Szenario** ist, eine Website mit variabler Breite zu erstellen, die für jeden geeignet ist. Hier ist, was meiner Meinung nach das "perfekte" Layout mit variabler Breite wäre.
- Funktioniert in allen wichtigen Browsern
- Schrumpft auf 780 Pixel
Dies berücksichtigt Benutzer mit einer Auflösung von 800x600, ohne horizontale Scrollbalken! - Wächst auf 1260 Pixel
Dies berücksichtigt Benutzer mit einer Auflösung von 1280x768 und allem dazwischen. - Dies berücksichtigt 90 %+ aller Internetnutzer. Sie könnten dieses Layout leicht größer machen, aber bedenken Sie, wie sich die Zeilenlänge auf die Lesbarkeit auswirkt. Niemand möchte eine Textzeile von 1980 Pixel Länge lesen.
- Seitenleisten sind von "gleicher Höhe" wie der Hauptinhalt
- Der Seiteninhalt wird für Benutzer mit noch höheren Auflösungen zentriert.
Ich habe mich an die Arbeit gemacht und wissen Sie was, ich glaube, ich habe es geschafft =)
Ich bin ziemlich nervös, es "perfekt" zu nennen, denn ich bin sicher, dass einige Genies da draußen Löcher hineinstechen und mich wegen einiger Dinge zur Rede stellen werden. Das ist in Ordnung, ich hoffe, das passiert, denn ich bin bereit, sicherzustellen, dass es auf dem neuesten Stand und so gut wie möglich ist. Ich habe es in Firefox, Safari, Opera und Internet Explorer 6 getestet und es funktioniert in all diesen, also werde ich nur die Daumen drücken und das posten. Wie immer, können Sie es gerne herunterladen und damit machen, was Sie wollen. Links sind immer großartig.
Ich mag es!
und werde es wahrscheinlich in naher Zukunft sogar benutzen..
Das einzige Problem, das ich beim Betrachten sehe, ist, dass die linke Seitenleiste zuerst aufgeführt ist. Wenn dies als Menü oder für andere Dinge (Blog-Infos, Werbung usw.) enthalten wäre, würde ich wahrscheinlich vorschlagen, die Inhalts-Div zuerst für Screenreader, Leute, die CSS nicht verwenden usw. zu platzieren.
Es funktioniert auch in IE7 einwandfrei.
(Übrigens, haben Sie das Design Ihrer Website überarbeitet?)
Das ist ein ausgezeichneter Punkt, die Seitenleiste sollte tatsächlich zuletzt im HTML aufgeführt werden. Da es sich nur um zwei Hauptabschnitte handelt und beide links/rechts-floated sind, wäre das Umstellen einfach und würde wahrscheinlich nichts beeinträchtigen.
Ja, ich habe ein paar Dinge verschoben. Ich dachte, die doppelte Seitenleiste sei einfach zu viel, also habe ich ein paar Sachen in die Fußzeile verschoben. Kategorien, Archive und meine Mini-Biografie finden Sie jetzt dort.
Ich denke, es wäre viel besser, wenn es auf 775 Pixel schrumpft, da (zumindest bei mir) 780 Pixel Mini-Scrollbalken in Firefox 2.0.0.7 ohne angepasste Symbolleisten usw. verursacht.
Immer wenn ich für 800x600 entwerfe, mache ich meine Websites 775 Pixel breit.
Ausgezeichnet!
Sie sollten eine kurze Beschreibung schreiben, wie es funktioniert und wo die min-width/max-width/expression() CSS funktionieren und nicht funktionieren...
Um ehrlich zu sein, ist dies ein sehr minimalistisches Design, das in jeder Situation fließend gehalten werden kann, was in Ordnung ist, es sei denn, Sie möchten ansprechendere Designs. Ich habe in der Vergangenheit dasselbe gemacht, aber wenn Sie mehr Blöcke einbringen, tendiert die Fluidität dazu, abzufallen und es wird immer komplexer, sie im fließenden Zustand zu halten.
Deshalb würde ich darauf bestehen, anstatt fließend zu bleiben, auf eine bestimmte Auflösung festgelegt zu sein. Ich möchte die Auflösung 1024x768 bedienen und mein Layout festlegen, da ich weiß, dass die Mehrheit der Technik-Leute diese haben wird und sie jetzt zum Standard wird.
Es macht mir nichts aus, dass es bei höheren Auflösungen nicht fließend ist, da das Fließendmachen ohnehin seine Schönheit zerstören würde, wenn Blöcke bei höheren Auflösungen erweitert werden.
Hallo Chris (und die anderen Befürworter von ~800 Pixel Mindestbreite), ich möchte nur darauf hinweisen, dass viele Benutzer Seitenleisten in ihrem Browser verwenden (und nicht aufgeben wollen), sie haben auch das Recht, nicht gezwungen zu werden, horizontal zu scrollen, daher muss die Mindestbreite (wenn sie jemals festgelegt werden sollte) viel weniger als 800 Pixel betragen. Einverstanden?
@flash: Das ist ein Teil der Schönheit dieses Beispiels, ändern Sie einfach zwei einfache Zahlen in der CSS und es schrumpft sofort auf 775. 780 war nur eine zufällige Wahl, die ich traf, da ich dachte, 20 Pixel würden ausreichen, um die vertikale Scrollleiste auszugleichen, aber ich werde von nun an 775 verwenden, danke für den Hinweis.
@Wesley Tanaka: Gute Idee, ich denke, ich werde bald mehr zu diesem Thema schreiben. Die kurze Antwort ist, min-width max-width funktioniert in den meisten "guten" Browsern und der expression-Kram ist das, was IE 6 und darunter zum Laufen bringt.
@nitinpal: Ich verstehe, was Sie meinen. Wie Sie auf dieser Website sehen können, habe ich mich entschieden, eine Website mit fester Breite beizubehalten, die für 1024 Pixel Breite optimiert ist (der Hauptinhalt ist tatsächlich nur 980 Pixel, um die vertikale Scrollleiste usw. auszugleichen). Es stimmt, das Design ist ziemlich minimalistisch, aber ich denke, Sie könnten trotzdem ansprechende Designs mit dieser Vorlage erstellen. Haben Sie ein spezifisches Beispiel für etwas, das Sie dem Layout hinzufügen möchten, das seine Fluidität beeinträchtigen würde?
@Jerry: Das ist so etwas wie das, was flash oben erwähnt hat. Dieses Layout ist in dieser Hinsicht sehr flexibel. Wenn Sie es z. B. bis auf 500 Pixel Breite schrumpfen lassen möchten, können Sie dies sehr einfach tun, indem Sie einfach ein paar Zahlen in der CSS ändern.
Wunderschön!
Tolle Arbeit, danke Chris.
Ich finde es besser, den gesamten Stil in Ihrer CSS-Datei zu belassen und keine Inline-Stile zu verwenden, das macht den Quellcode größer und ist hässlich.
Beste Grüße
Hallo, gutes Beispiel und ich stimme CodeAssembly zu.
@CodeAssembly & Volkan: Ja, ich stimme zu, CSS gehört in seine eigene Datei, wenn auch nur aus ästhetischen Gründen. Dieses Beispiel verwendet keine Inline-Stile... Meinten Sie nur "im Allgemeinen"?
@Chris
CodeAssembly bezog sich auf die Inline-Stile, die Sie zum Löschen Ihrer gefloateten Elemente haben. Ich bin sicher, eine globale Clear-Klasse wird den Trick tun.
http://www.positioniseverything.net/easyclearing.html
Fühlen Sie sich frei, zu meckern, aber ich denke, die Verwendung des einfachen Inline-Style-Float-Clearing ist überlegen. Ich würde lieber **ein wenig** zusätzlichen Markup hinzufügen, um meine CSS nicht mit (zählen Sie sie) **vier** Hacks zu vermischen, um die gleiche Lösung zu erzielen.
Hallo Chris,
Ich bezog mich auf das berühmte 3-Spalten-Theme in WordPress namens "Garland". Können Sie ein solches 3-Spalten-Theme fließend gestalten, da ich 3-Spalten-Themes am schwierigsten fließend zu halten finde.
Tolle Arbeit. Beim Entwerfen einer Website denke ich nicht nur an den Desktop, sondern auch an mobile Geräte. Wenn Sie Ihr Beispiel-Fluid-Layout auf einem iPhone betrachten, erhalten Sie beispielsweise in jedem Modus horizontale Scrollbalken.
Glauben Sie, dass die Änderung der Mindestbreite auf die der meisten mobilen Bildschirme die horizontalen Scrollbalken beseitigen wird?
Danke
@nitinpai: Ich glaube, es ist möglich, eine weitere Spalte hineinzubekommen, ohne die Fluidität zu beeinträchtigen. Ich konnte eine rechts gefloatete Spalte in das Hauptlayout einfügen, die Sie hier ansehen können. Ich habe es nur schnell gemacht, daher ist die rechte Spalte nicht gleich hoch, aber Sie könnten es schaffen und ihr wahrscheinlich sogar einen Hintergrund mit einer Art "Sliding Doors"-Technik geben.
@planner: Sie könnten die Mindestbreite absolut ändern, um das Design schrumpfen zu lassen. Im Fall dieses Layouts ist das Hintergrundbild der linken Seitenleiste ein Bild, das in diesem Fall von fast 200 Pixeln Breite eine feste Breite hat. Das ist zu groß für mobile Geräte, daher müsste das geändert werden. Und natürlich müsste das Bild, das ich im Header verwendet habe, durch textfreundlichere Alternativen ersetzt werden.
Hallo,
Guter Artikel, wir scheinen an einem Wendepunkt zu sein, an dem wir Websites für 1024-Pixel-Auflösungen statt für 800 Pixel entwerfen... obwohl wir möchten, dass unsere Websites so zugänglich wie möglich sind, aber auch ihr Bestes geben (zu viel verschwendeter Platz bei ~775 Pixeln meiner Meinung nach). Ein fließender Ansatz wie das obige Beispiel ist wahrscheinlich der beste Weg, dieses Problem zu überwinden.
Ich habe einige gut gestaltete (nicht limitierte) fließende Websites gesehen, die auf meinem Monitor (1600x1200 Display) hässlich aussehen, daher denke ich, dass eine Website, die auf 775 Pixel schrumpft und auf ~999 Pixel erweitert, die beste Option für uns wäre. Ein großartiges Beispiel, das ich kürzlich gesehen habe, ist die neue John Lewis-Website, http://www.johnlewis.com
Danke
@Tom: Wow, die John Lewis-Website, die Sie verlinkt haben, ist ein erstklassiges Beispiel für variable Breite. Dort gibt es ein paar "Sliding Doors"-Aktionen. Mir gefällt sehr gut, wie die meisten Elemente sogar einen gesunden Abstand und Polsterung behalten, um sie sehr lesbar zu halten. Der einzige Nachteil ist das Menü, es wird etwas eng, wenn Sie das Browserfenster verkleinern. Alles in allem aber eine ziemlich erstaunliche Arbeit.
Sehr schön, ich liebe die Einfachheit des Ganzen. Was genau müsste ich ändern, damit ich die Sidebar-Div unter die Hauptinhalts-Div im HTML setzen kann?
@Dank: Danke! Ich konnte die Dinge ein wenig verändern, um diese Seitenleisten-Div unter die Hauptinhalts-Div zu bekommen und auch eine rechte Seitenleiste hinzuzufügen. Sie können sich das Beispiel hier ansehen.
Es gibt einige Vorbehalte bei der Verwendung von Expressions, einer davon ist, dass die Expressions mehrmals ausgewertet werden, selbst das Bewegen der Maus kann sie auslösen, daher können sie eine Website leicht verlangsamen. Yahoo Developer rät von CSS Expressions ab, ebenso wie andere. Ich bleibe bei einer reinen JS-Lösung für min/max-Breite.
JavaScript ist wahrscheinlich ein effektiverer Weg, dies zu handhaben, aber was ist mit Besuchern, die mit deaktiviertem JavaScript surfen? Fällt es schön auf eine feste Breite zurück?
Ich persönlich stimme der Verwendung einer JavaScript-Methode nicht zu, soweit ich JavaScript kenne, wird es nur die Dateigröße/Upload-Größe vergrößern, während eine min- und max-CSS-Codezeile sehr minimal sein wird.
Nur IE<=6 versteht keine min- und max-Werte, daher ist es besser, Ihre Expression in ein nur für IE bestimmtes Stylesheet zu packen, das mit bedingten Kommentaren geliefert wird, sodass nur die Personen, die Leistungseinbußen erleiden, diejenigen sind, die ältere Browser verwenden.
Was max-width betrifft, ist es besser, ems als Wert zu verwenden, damit das Layout proportional vergrößert werden kann, wenn Benutzer die Textgröße in ihren Browsern ändern.
Haben Sie auch ein 3-Spalten-Layout für dieses Design, wie groß sollte die Seitenleiste idealerweise sein?
danke
http://itdiscover.com
@John: Guter Punkt, das wäre eine gute Möglichkeit, IE 6 zu isolieren. Ich hoffe, bald ein Tutorial über die Verwendung von ems für die Seitenbreite zu schreiben. Ich sehe, dass Ihre Website sie sehr effektiv nutzt, gute Arbeit!
@Web Dev Tools: Vor einiger Zeit hatte jemand eine ähnliche Anfrage, eine weitere Spalte hinzuzufügen. Ich konnte eine Pseudo-Seitenleiste auf der rechten Seite einfügen (Beispiel hier). Ich habe keine gute Arbeit geleistet, um sie gut aussehen zu lassen, aber es ist sicherlich möglich. Ich denke, ich werde ein weiteres Tutorial über die Verwendung von "Sliding Doors" schreiben, um eine 3-Spalten-Breite mit gleich hohen Spalten effektiver zu gestalten.
Hallo Chris, danke für deinen unterstützenden Artikel. Ich bin wirklich ein Fan von dir. Könntest du bitte einen Artikel darüber posten, wie man CSS XHTML-Layouts sorgfältig handhabt? Ich meine, mit allem wie Breite, Float, ul li usw.
Danke trotzdem.
Ich würde vorschlagen, min-width für Firefox-Benutzer auf 775 Pixel zu ändern.
Danke für diese Demonstration. Ich habe versucht, ein fließendes Layout zu erstellen – und das hat viele meiner Fragen beantwortet. Ich mache mich daran, es auszuprobieren!
Ich habe das ausprobiert – es scheint auf meinem Computer gut zu funktionieren, aber ein Kunde mit einem Breitbildschirm sagt, dass der Hintergrund nicht die volle Bildschirmbreite ausdehnt und aus irgendeinem Grund das Bild nicht nach rechts floatet. Alles sieht auf meinem Monitor gut aus. Können Sie sehen, wie es auf Ihrem (wahrscheinlich haben Sie ein Breitbildschirm) aussieht?
http://www.premiumwebsites.net/samples/sports/index.html
Temporärer Link
Danke
Dotty
@Dorothy: Ich habe mir die meisten wichtigen guten Browser und auch IE 6 angesehen. IE 6 hat einige seiner üblichen Macken wie eine ungewöhnlich große Schriftgröße und etwas Seltsames im Menü, aber der Hintergrund sieht gut aus. Vielleicht meinen sie, dass der "graue" Hintergrund nicht vollflächig gestreckt wird?
Super Informationen, Kumpel. Ich habe meine Websites WordPress vollständig fließend gestaltet. Sie dehnt sich entsprechend dem Bildschirm-Layout aus.
Ich werde das bald verwenden, um meine fließenden WordPress-Themes zu codieren!!!
Mit freundlichen Grüßen,
Samir.
Tolle Arbeit!
Ich verwende dieses Grundlayout in einem aktuellen Projekt und habe ein Problem bemerkt, wenn die Seitenleiste länger ist als der Hauptinhalt. Der Hintergrund bedeckt ihn nicht.
Haben Sie gute Lösungen? Alles, was mir einfiel, war, die Spalten in eine andere Div zu verpacken, die klebt.
@Matt: Wenn Sie das Hintergrundbild von #main-content auf #page-wrap anwenden, wird die Seitenleiste so groß wie nötig gedehnt. Das wird dazu führen, dass sie im Header und Footer in meinem speziellen Layout durchscheint, aber das liegt nur am Haupt-Padding, das umgangen werden kann und möglicherweise gar nicht für Ihr Layout gilt.
Großartige Arbeit.
Wir kämpfen mit einer Verfeinerung. Wissen Sie, wie man den expandierenden Leerraum zwischen der linken Leiste und dem Hauptinhaltsbereich verhindert, wenn das Fenster horizontal wächst?
Entschuldigung, ich hätte auch erwähnen sollen, dass die linke Seitenleiste eine feste Breite behalten muss, um die Sache zu erschweren.
Schönes Layout. Aber ...
Die Beispielseite besteht die HTML- und CSS-Validatoren von w3.org nicht.
Kann das behoben werden, ohne die Funktionalität des Layouts zu beeinträchtigen?
@Bert: Entschuldigung für diese Validierungsfehler. Ich habe das Beispiel und den Download korrigiert.
Chris, danke für die schnelle Antwort. Das HTML wird jetzt validiert. Allerdings meldet die CSS-Validierung der Live-Beispielseite immer noch zwei Fehler im Zusammenhang mit der Zeile mit der CSS-Expression. Kann das behoben werden?
Nein, das kann es nicht... das ist es, was IE 6 und ältere Versionen min-width und max-width respektieren lässt. Sie können es jedoch in ein bedingtes Stylesheet einfügen, das die Hauptseite die CSS-Validierung bestehen lässt, wenn das wirklich wichtig ist.
Das hatte ich vermutet, aber da ich ein CSS-Neuling bin, dachte ich, ich frage. Danke für die Erklärung und die Umgehungslösung.
Eine weitere Frage zur Suchmaschinenoptimierung. Ich habe irgendwo gelesen, dass man eine bessere Indexierung durch die Suchmaschine erzielt, wenn sich der Hauptinhalts-Div am Anfang des Markups befindet (vor dem Header und der Haupt- und Sekundärnavigation). Wie schwierig wäre es, Ihr Layout zu ändern, um diesem Muster zu folgen?
bert, ich weiß nicht, ob ich zu spät bin, ich habe diesen Beitrag gerade erst gesehen
senden Sie einfach die Expression über bedingte Kommentare und alles wird gut
pab
wow, entschuldigen Sie die Rechtschreibung, ich hatte noch keinen Morgenkaffee ...
=)
@nitinpai: Nur als Randnotiz: "Garland" ist das Drupal Theme, das nach WP portiert wurde.
Hallo,
Ich verwende die folgende Expression
width:expression(document.body.clientWidth < 782? “780px” : document.body.clientWidth > 1262? “1260px” : “auto”);
für meine Website.
Das funktioniert gut in Firefox, aber in IE6 gibt es ActiveX-Warnungen. Wenn ich die ActiveX-Option in IE6 erlaube und versuche, meinen Browser zu verkleinern, beginnt mein Browserfenster einzufrieren und ich muss die IE-Browseraufgabe über meinen Task-Manager beenden.
Gibt es einen Weg, diese Situation zu umgehen?
rick
@Richard: Ist das genau die Codezeile, die Sie verwenden? Ich weiß, wenn die beiden Zahlen gleich sind (z. B. beide 780, nicht 782 und 780), dann friert es Ihren Browser DEFINITIV ein. In Ihrem Fall bin ich mir nicht sicher. Stürzt die Beispielseite auch Ihren Browser ab?
Hallo,
Danke für die Antwort. Nein, die Beispielseite stürzt in IE6 nicht ab. In meinem Design, wenn ich das Fenster auf diese Marke von 780/782 verkleinere, beginnt das Fenster einzufrieren (z. B. in IE6). Grundsätzlich habe ich eine Website, die ich mit einer Kombination aus Tabellen und CSS und Div-Code entworfen habe, aber das Design ist fest/statisch und wenn ich es in einer Auflösung von 800x600 betrachte, ist es "Scroll"-Stadt. Ich möchte mein Website-Design "fließend" machen, und ich habe sehr schnell herausgefunden, dass ich nicht zwei Herren dienen konnte, nämlich ein Tabellen-Design und ein CSS/Div-Design, besonders wenn es um "Prozentwerte", die Float-Konzepte und die damit verbundenen Probleme von "Wrapping" geht. Daher schaue ich nach tabellosen Designs, und Ihr Beispiel scheint in das zu passen, wonach ich suche. :)
Hier ist mein grundlegendes Design-Layout
Hier in meiner .css-Datei habe ich das für meinen Container
Rick
Chris,
Hallo, ich denke, ich habe mein Problem gelöst, gerade geändert
width:expression(document.body.clientWidth < 782? “780px†: document.body.clientWidth > 1262? “1260px†: “auto†);
zu diesem
width:expression(document.body.clientWidth < 782px? “780px†: document.body.clientWidth > 1262px? “1260px†: “auto†);
Als Nachfrage: Ich habe einige Kommentare auf dieser Seite gelesen, einige Kommentare schlugen vor, dass die "Schriftgröße" von Pixeln (px) auf em geändert werden sollte. Würden Sie das vorschlagen?
Wenn ja, wissen Sie aus dem Stegreif, wie viele Pixel einem Em entsprechen (ungefähr)?
Rick
Schöne Demo. Ich stimme Ihnen zu, wenn es darum geht, eine variable Breite für unterschiedliche Bildschirmauflösungen zu haben. Ich habe versucht, die Seitenleiste im HTML nach dem Inhalt zu verschieben, aber es scheint nicht so zu funktionieren. Ich weiß nicht, ob es dafür eine Lösung gibt.
Sehr schön, es gefällt mir. Ich habe viel von css.tricks.com gelernt.
css.tricks.com ist das, was ich suche: Tipps, Fähigkeiten, professionell,...
Danke Chris.
Ich komme aus Kambodscha.
Wunderbares und funktionierendes Beispiel für das fließende Layout. Danke..
Ich würde vorschlagen, min-width für Firefox-Benutzer auf 775 Pixel zu ändern.
Gute Arbeit! Ich habe eine Website bewundert und endlich erkannt, dass sie eine einzigartige Methode für ihren fließenden Stil hat. Gehen Sie zu http://www.HuffingtonPost.com und beachten Sie, wie sich die Spalten beim Landen anpassen. Das habe ich noch nirgends gesehen. ICH WILL ES!
Hallo Sir,
Wie kann ich Schriftarten und Bilder an die Seitengröße anpassen, wenn sich die Seitenbreite verkleinert?
Die einfachste Antwort, Anto, sind Media Queries (unter Verwendung von 'min-width' und 'max-width'). Hier auf css-tricks gibt es viele Artikel dazu. Ich hoffe, das hilft.
Ed, da stimme ich vollkommen zu, die Seite sollte auch horizontal flüssig sein. Ich hoffe, Sie können das beheben, Chris :-)
Chris, ich weiß, dass das ein älterer Beitrag ist. Ich liebe das Layout, habe aber eine Frage, wenn Sie (oder jemand anderes) sie klären könnten.
Körper {overflow-x: hidden;
}
verursacht, dass der Inhalt auf der rechten Seite bei kleineren Auflösungen abgeschnitten wird. Wie nützt Ihnen das im Design und aus welchem Grund ist es für das responsive Design so eingestellt?
Danke