Langsam aber sicher, kommt die alte, aber immer noch aktuelle Diskussion auf, die da heißt: “Für welche Auflösung soll ich »optimieren« und welche Breite soll mein Layout haben?“. Unter anderem im SelfHTML-Weblog, bei Heiko und bei Gerrit.
Die Leute aus dem Print-Bereich haben es da vergleichsweise einfach, egal aus welchen Winkel man einen Din A5-Flyer liest. An den Maßen des Flyers ändert sich nix. Und egal ob man eine Brille, Lupe oder ohne Hilfsmittel liest, aus Garamond wird nicht Verdana.
Web ist anders, Web ist anders …
Im Webbereich ist es alles etwas anders. Man hat zu wenige und vor allem relativ unzuverlässige statistische Daten und im Vergleich zum Print-Bereich ist der Webbereich noch sehr jung. So das gewisse Standards nocht nicht existieren bzw. noch nicht angewendet werden und wegen der “Jugend” fehlen auch gewisse Untersuchungen, die wir aus den klassischen Medien kennen.
Wie dem auch sei, als Webworker muss man dicke Nerven haben, sich Gedanken machen und bereit sein Kompromisse zu schliessen. Als Webworker hat man schon dadurch zu kämpfen, dass es diverse Systeme und noch mehr Einstellungsmöglichkeiten in den jeweiligen Systemen gibt.
Schon die alleine können einen in die Verzweiflung treiben, aber anscheinend ist das manchen Leuten nicht genug, die versuchen mit der gleichen HTML- und CSS-Datei alle Auflösungen und Geräte gleichermaßen gut anzusprechen. Dadurch entstehen eierlegende-wollmilch-Layouts mit superduper-Zoom und pipapo.
Jetzt bitte nicht missverstehen, ich will mich über keinen Lustig machen, hinter den meisten Layout-Demos steht viel anstrenegnde Arbeit dahinter und diese Demos und Ansätze bringen uns dazu nachzudenken. Aber ich bin mir nicht so sicher ob das alles der richtige Weg ist. Sehr oft wird gegen feste und für fluide Layouts argumentiert in dem man darauf hinweist, dass auch Nutzer mit mobilen Geräten auf eine Seite kommen könnten, genau wie Nutzer mit 22″+ Monitoren.
Flexible Layouts sind gut, feste aber auch
Aber jetzt mal im Ernst. Wie hoch ist die Anzahl der Leute die mobile Geräte zum surfen nutzen? Ich rede hier nicht davon, dass Leute mit Smartphones E-Mails lesen und diverse News-Ticker konsumieren, sondern wieviele Leute stinknormale Websites und Weblogs mit mobilen Geräten besuchen und dort auch evtl. kommentieren? Und wieviele Nutzer surfen durch die gegend mit TFT-Monitoren, die mehr als 20″ haben?
Wo wir gerade bei mobilen Geräten sind. Es ist nicht einfach getan, dass man ein elastisches Layout bereit hält und schon ist der Nutzer des mobilen Gerätes zu frieden. Weit gefehlt. Gewisse Inhalte, die für diesen Nutzer irrelevant sind sollten ausgeblendet werden (große Bilder, Seitenleiste) und da hier Traffic – Menge der übertragenen Daten – im wahren Sinn des Wortes bares Geld kostet sollte dieser Auftritt schlank sein und sich auf das wesentliche konzentrieren. Hinzukommt das viele der mobilen Geräte nicht den kompletten Sprachschatz von (X)HTML verstehen (Stichwort: XHTML Basic).
<link rel="stylesheet" type="text/css" media="screen, projection" href="format.css" /> dann ist es nur für Monitore und für Beamer relevant. media="handheld" ist relevant für mobile Gerräte.Weitere Infos: Media Types.
Also wird es schon darauf hinauslaufen, dass man die mobile Website auslagert (Beispiele: Bloglines mobile, Google mobile etc.) um eine Website zu bieten, die auf einem Mini-Display wirklich ordentlich bedienbar ist.
Also nicht das wir uns missverstehen. Persönlich habe ich nix gegen ein flexibles Layout an sich, wirklich nicht. Aber das Argument, flexible Layouts sind den festen Layouts im signifikannten Vorteil wegen den mobilen Geräten … dieses Argument greift nicht wirklich.
Womit ich aber ein Problem habe, sind die zu langen Textzeilen bei diversen flexiblen Layouts. Ich persönlich habe auf meinem Schlepptop aka Notebook eine Bildschirmauflösung von 1280×800. Und ich surfe immer mit maximiertem Fenster und einige Websites biten mir dann den Inhalt der sich auf einer Breite von 800 bis teilweise über 1000 Pixel ausbreitet. Das ist zu viel des Guten.
Meine Augen müssen beim Lesen wandern, dass ist ungemütlich und anstrengend. Daher muss ich bei manchen Websites, die Schriftgröße und die Breite des Fensters verkleinern um ordentlich lesen zu können.
Mittlerweile habe ich festgestellt das meinem Leseverhalten eine ca. Breite von 470-550 Pixel und eine Schriftgröße von etwa 13 Pixel (Verdana, Arial) am meisten entgegen kommt. Größere Breiten und größere Schriften (15+px) empfinde ich nicht als leserlicher. Eher im Gegenteil.
Also nochmal zu festen vs. flexiblen Layouts, wobei ich so keinen Kampf sehe, beide haben ihre Daseinsberechtigungen, beide haben ihre Vor- und Nachteile … und zu guter letzt entscheidet der Kunde und je nach Fall der Grafik-Designer der die grafischen Vorlage liefert.
In erster Linie entwickelt der “Feld- und Wiesen-Webdesigner” Websites für Monitor und erst in zweiter oder dritter Linie für andere Ausgabegeräte … kann sein das sich das in 5-7 Jahren ändert, aber bleiben wir fürs erste bei heute, morgen und diesem Jahr. Also spricht fürs erste nichts dagegen ein Layot mit max. Breite von 760px zu entwerfen. Bei einem klassischen Zweispalter würde der Inhalt hierbei seine 480-530 px bekommen. Genug um ordentlich große Bilder zu unterbringen und eine leserliche Zeilenlänge zu bekommen. Die restliche Breite würde die Seitenleiste bekommen und mit etwa 200-250px kann man auch hier ordentlich viel Inhalt unterbringen. Und das ganze würde überhaupt nicht gequätscht ausschauen.
So ein Konzept eignet sich für kleine und mittelgroße Websites. Das “klein” und “mittelgroß” beziehe ich nicht nur auf die eigentliche Menge des Inhaltes sondern auch auf Menge versch. Kategorien bzw. Themen. Mit diesem Konzept nimmt man Rücksicht auf die kleinste signifikannte Breite von 800px.
Jetzt würde der eine oder andere sagen: “jahaha, aber was ist mit mobilen Geräten?”. Nix ist mit diesen Geräten, die bekommen denn entweder garkein oder ein rudimänteres CSS und dann später bei entsprechender Nachfrage einen richtigen Auftritt.
“Jahaha, aber was ist mit den großen Monitoren?”. Was soll mit großen Monitoren sein? “Ja, da ist dann viel Platz über”. Ja und, wo ist das Problem? Muss denn immer die komplette Fläche vollgeklatscht sein? Und eines wunderrt mich dann doch immer, ein signifikanter Teil der Kritiker, die behaupten das sehr viele Leute bei großen Monitoren das Browser-Fenster nicht maximieren sondern seitlich Platz für diverse Anwendungen reservieren, behauptet wiederum bei großen Monitoren und festen Layouts würde seitlich viel Platz über bleiben.
Was den nun? Entweder es bleibt viel Platz über oder es wird bei großen Monitoren von vielen Nutzern der Browser-Fenster nicht maximiert. Beides gleichzeitig geht nicht :-).
Zuerst Inhalt, dann Layout
Ein sehr wichtiger Aspekt bei der Auswahl des Layouts und der Layout-Philosophie ist der Inhalt. Habe ich viel Inhalt, viele Autoren und streben nach einer großen Community, dann bietet sich z.B. ein dreispalter mit elastischen Elementen und viel dynamik.
Habe ich dagegen vor z.B. eine Webvisitenkarte mit max. 5-7 Unterseiten, je einem Bild und je 7-10 Sätze Text umzusetzen, dann wäre es ziemlich komisch würde ich hierbei einen dreispalter aufsetzen und eine völlig elastische Breite des Inhaltes zulassen. Wie schaut das dann auf einem 19″ Monitor aus?
Ob man im Endeffekt jetzt eher zu einem festen, flexiblen oder einen Misch-Layout greift hängt von vielen Faktoren ab: der Menge und Qualität des Inhaltes, vom Kunden, vom Zielpublikum, der Arbeits-Philophie des Webworkers etc. In meinen Augen haben auch die festen Layouts durchaus ihre Daseinsberechtigung und sind in manchen Fällen eher im Vorteil. Wogegen ich etwas habe ist dogmatische Sichtweise auf diese Fragestellung, die bringt uns nicht weiter, weil sie die Fronten verhärtet. Und der Web-Bereich ist jung, so das meiner Meinung nach keiner sagen kann, dass er die Weisheit gepachtet hat.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
Ich sehe das mit der Breite auc so. Mittlerweile ist bei meinen Layouts bei max. 1000px Breite Schluss, meistens jedoch schon bei weniger. Ein Browserfenster auf einem großen Monitor kann man kleiner machen, auf einem kleinen Monitor aber nicht größer. Zudem, finde ich, trägt es nicht zur Lesbarkeit bei, auf großen Monitoren flexible Layouts einzusetzen.
Scheint heute in vielen Blog ein Thementag zu sein. Ich habe schon einige Artikel zum Thema in den letzten Stunden gelesen. Aber im Gegensatz dazu kann ich hier nur sagen: vollste Zustimmung. Überlange Zeilen sind einfach nicht lesbar. Weder im Printbereich noch online.
Festes Layout erzeugt einige Widersprüche, die man nicht abtun kann. 480 Pixel o.ä. für den Inhalt sehen bei großen Auflösungen potenziell schlecht aus. Selbst wenn das Browserfenster nicht maximiert ist und gerade mal keine riesigen Ränder bleiben, nimmt der Text nicht soviel Raum ein, wie er zugunsten der Lesbarkeit könnte.
Das Argument der mobilen Endgeräte ist aus meiner Sicht kraftlos, die Vielfalt auf dem Desktop erzeugt bereits genügend Probleme. Jedenfalls hat mir noch niemand erklärt, wie welche Elektrokleingeräte gewisse Layouts umsetzen (Opera Mobile und Opera Mini mal ausgenommen). Zudem wird @media handheld meines Wissens nicht hinreichend unterstützt, sodass sowieso Sonderlösungen nötig sind.
[…] Perun has written a nice text about which layout you should use in the www: it’s a really good text, I think. So – if you plan to design a new page – the most important rule is: First content, than layout […]
Die Frage nach der Flexibilität kann man auf viele Arten stellen und beantworten. Eine gute Lösung scheint mir aber die von Kai Laborenz und Kollegen für http://www.greenpeace-berlin.de zu sein. Hier ist die Breite scheinbar fix und auf ein lesefreundliches Maß beschränkt, aber sie ändert sich, wenn man die Schrift per Browser vergrößert, denn die Breite der wichtigen Elemente ist in em angegeben.
@ susanna:
Und was passiert mit einem User der 800×600 hat aber gerne größere Schrift? Er bekommt einen Balken und Inhalt muss erscrollt werden. Eine sehr schlechte Lösung.
Du hast doch erst vor ein paar Tagen über em zur Festlegung der Schriftgröße geschrieben. Warum beziehst Du das das hier als Lösung so wenig ein?
Ich kann ein Layout für eine x-beliebige Auflösung ausrichten und die Schriftgröße mit em festlegen. Eine Skalierung des Layouts – so es wirklich in der Breite flexiblel ist – bringt dann auch keine Verlängerung der Textzeilen mit sich. Eine weitere Möglichkeit ist, das Layout mittels max-width auf em-Basis skalieren zu lassen. Auch hierdurch hat man wieder eine gute Kontrolle über die sich einstellende Layoutbreite.
Die Fixierung auf eine feste Breite bringt doch sonst auch das Problem mit, dass bei größerer oder kleinerer Schrifteinstellung das Layout eben nicht mitskaliert und sich so die Textformatierung ändert. Ein fixes 800er Layout, welches mit kleinen Schriftarten arbeitet wird mit größeren Schriftarten auch nicht gerade lesbarer.
Gruß Dirk
Wenn der Benutzer die Einstellung zur Schriftvergrößerung kennt und auch benutzt, dann ist wohl davon auszugehen, dass der Benutzer die negativen Auswirkungen kennt.
Ich persönlich finde es besser, wenn das Layout erhalten bleibt und ich dafür evtl. ein wenig scrollen muss. Ansonsten wird ja meist das Layout komplett zerschossen, was auch nicht wirklich beim Lesen hilft.
Und jetzt zum eigentlichen Thema:
Die Lesbarkeit der Texte ist natürlich sehr wichtig und lange Zeilen / zu kleine Schrift sind als Probleme durchaus bekannt (zumindest sollte man das meinen). Ich hasse es auch immer, wenn sich die betreffende Spalte im gesamten Fenster breit macht.
Die Breite des Layouts bestimmt sich also durch den gesamten Inhalt… wobei ich aber im Prinzip nur die Entscheidung zwischen zwei Auflösungen sehe: 800px und 1024px Breite (ja… Scrollbalken werden berücksichtigt).
Dabei ist (für mich) auch nur die Annahme von maximierten Browserfenstern relevant, weil ansonsten der Mehraufwand für alle anderen Möglichkeiten wohl zu groß würde.
Gegen ein völlig elastisches, d.h. den Bildschirm ausfüllendes Layout, spricht meines Erachtens – wie von Perun schon angesprochen – die schlechtere Lesbarkeit von Text. Je länger eine Textzeile läuft, desto schlechter kann sie das menschliche Auge erfassen. Ich selbst hatte jahrelang eine größere Seite elastisch gestaltet, konnte sie aber zum Schluss im wahrsten Sinne des Wortes “nicht mehr sehen”.
Ein weiteres Manko elastischer Seiten sind die Einschränkungen bei der Gestaltung. Wer z.B. gerne mit Grafiken oder Fotos arbeitet, die die Contentspalte in der Breite ausfüllen, muss beim elastischen Layout ganz schöne Klimmzüge machen. Das Problem tritt allgemein bei gestalteten Content-Elementen auf, deren Breite sich ändert. Ich fühle mich dadurch gestalterisch recht eingeschränkt. Wenn ich dann noch z.B. Google Rectangles platziere oder andere Werbung platziere, kann die Sache schnell kompliziert werden.
Ein vollkommen elastisches Layout benutze ich nur noch in Foren. Ansonsten bleibe ich lieber bei der festen Seitenbreite.
Nachdem ich schon länger fleissig mitlese, möchte ich mich eines Kommentars nicht enthalten:
Ich bevorzuge eine Layoutform, wie sie beispielsweise das Theme “Blix” für WordPress bereitstellt.
Dabei gibt es einerseits eine Mindestbreite, andererseits kann man das Fenster größer zoomen und der Inhalt zentriert.
Dabei bleibt genug Raum, um den Seiteninhalt zu skalieren. Die Bereiche passen sich automatisch daran an. So bleibt die Lesbarkeit gewährleistet.
Beispiel
Ich finde diesen Ansatz recht simpel, vor allem jedoch sehr praxisgerecht.
Einen “Nebenvorteil” hat das flexible Layout (Skalierbar mit Schriftgröße), der hier noch nicht angesprochen wurde:
Es ist ein guter Kompromiss zwischen dem Wunsch des Grafikers nach exaktem Layout und den Anforderungen der Barrierefreiheit (und den generellen Eigenarten des Web).
Letztlich geht es bei den Bemühungen um Barrierefreiheit ja auch nicht darum, eingeschränkten Nutzern die optimale Darstellung um jeden Preis zu bieten. Sondern um einen sinvollen Kompromiss zwischen unterschiedlichen Anforderungen unter der Berücksichtigung von Mindeststandards.
Das Greenpeace-Layout vergrößert sich mit der Schriftgröße bis zum Seitenrahmen – so lange bleibt das Layout erhalten. Wenn weiter vergrößert wird, rutschen die einzelnen Spalten untereinander. Bei 800 Pixeln Breite lässt sich die Schrift im FF noch dreimal vergrößern, bis horizontales Scrollen nicht mehr vermeidbar ist.
Ich hab mich auch noch nicht ganz festgelegt ob ich jetzt feste oder flexible Layouts nehme, wahrscheinlich bleib ich aber je nach dem bei beiden. Die Langen Zeilen und dadurch nur drei Zeiligen Absätze finde ich auch absolut schrecklich, vorallem wenn das ganze dann noch mit einem Bild auf einer Seite des Textes kombiniert wird.
Auf meiner Seite haben geradeeinmal(?) 7% der Benutzer eine Auflösung von 800*600 und da stellt sich für mich schon immer die Frage soll ich jetzt für sie auch mit designen oder scrollen sie sich die Seite schon zurecht? Bis jetzt geh ich immer noch auf Sie ein, aber ob das in Zukunft auch noch so bleibt muss ich erst noch entscheiden…
@Kai,
die em-Lösung habe ich indirekt in einem anderen Beitrag angerissen.
Das Problem ist das mich diese sog. Zoom-Layouts noch nicht 100% überzeugt haben. Denn bei so einer Lösung versucht man etwas nachzumachen, was von den Browser erwartet werden sollte. Opera kann es schon, für FF gibt es Plugin und IE 7 wird es auch können. Und die Browser-Lösungen sind deswegen besser, da sie die Bilder und Grafiken ordentlich vergrößern bzw. verkleinern können und weil sie in der Regel nicht so das Layout zerschießen wie die selbstgemachte Lösungen.
Im Endeffekt, ist die Zoom-Layout-Lösung weder Fisch noch Flesich. Ich habe nicht mehr Platz zur Verfügung, wie bei “klassischen” flexiblen Layouts, da bei steigender Fläche auch die Schriftgröße wächst und ich habe nicht die “Sicherheit” wie wenn ich mit festen Pixel-Breiten arbeiten würde.
Daher bin ich gegenüber dieser Lösung zwar nicht gänzlich abgeneigt, aber noch nicht überzeugt.
Ganz witzig. 😀 Ich experimentiere gerade mit Weblogs herum und muss in Sachen Layout auch schon wieder Entscheidungen treffen.
Zwischendurch fand ich die dynamischen Breiten mal sehr attraktiv, bin nun aber auch der Meinung, dass Monitore immer größer werden und mobile Systeme ohnehin individuelle Programmierungen erfordern. Also zurück zur fixen Breite?
Habe mir eben mal das Beispiel von Thomas angesehen. Hmmm… Ich finde es schon wichtig, dass vor allem die Schriftgröße skalierbar bleibt, damit möglichst jeder den eigentlichen Content lesen kann. Firefox schreckt ja auch vor der Vergrößerung auf Pixel-Basis nicht zurück. Dann kann man die Schriftgrößenänderung eigentlich auch gleich standardisieren, oder nicht?
Nicht so wichtig finde ich, dass das Layout in allen Auflösungen überzeugt. Ist die Standard-Schriftgröße groß genug gewählt, wird es ja wohl nicht all zu viele Leute geben, die mit der Schriftgröße spielen. Wenn das Layout nicht sitzt ist`s zwar ärgerlich – aber die Lesbarkeit geht vor.
Nachtrag: Ich finde, hier im Blog wurde das Problem sehr gut gelöst.
Ich finde horizontales Scrollen ist vollkommen überbewertet. Natürlich ist es sehr nervig einen Text zu lesen und dabei horizontal scrollen zu müssen, aber soweit kommt es im Normalfall nicht (sollte es nicht kommen).
Nehmen wir z.B. diese Seite hier, selbst bei einer 640er-Auflösung kann man die Artikel problemlos lesen. Nur um die Navigation zu erreichen, muss man halt mal horizontal scrollen, damit sollte jeder leben können.
durch die immer größer werdenden Monitore ist bei flexiblen Layouts das Lesen der langen Zeilen noch anstrengender als es auf Monitoren eh schon ist.
Andererseits finde ich kommt es immer auf die Layoutvorgabe und die Zielgruppe an, ob sich das eine oder andere besser eignet. Manche Layoutvorgaben lassen sich flexibel einfach nicht vernünftig umsetzen.
Hallo Leute!
Meiner Meinung nach hat Kommentar 13. von Perun den Nagel auf den Kopf getroffen! Das Problem ob “em”(flexible) oder “px”(fixe) programmierung des Webauftrittes verwendet wird hängt absolut vom CONTENT ab.
Zum Beispiel:
Wenn ein Klient die Website "zoomt" (Mit der jeweiligen Browser Zoom-Technik), dann ist es sehr von vorteil Bildern(img) oder Objekten(object) keinen "px"(fixen) Wert zu vergeben zugunsten des Layouts. Da zum Beispiel im FireFox der Text grösser wird, aber die Bilder sich nicht der Designaenderung anpassen. Sichtbar wird dies hier: greenpeace-berlin.deBrowser:Content-Zoom(Layout-Zoom) eingesetzt in Opera und IE7.
Beim Layout-Zoom wird der gesamte Inhalt der Website tatsaechlich gezoomt, dh. es gibt eine einheitliche vergroesserung und damit bessere Kompatibilität bei allen Anzeigen(Displays: Monitor,Beamer,Handy).
Dafuer muss der User aber manuell die groesse im Browser einstellen.
Fuer Handy oder andere medien-typen empfehle ich auch seperate Style-Sheets um inhalte zu verbergen etc. Leider sind diese Modernen Browser nicht bei 100% der Klientel in Gebrauch.
Um dieses Problem zu loesen erfordert es die Benutzung von Ajax auf der Website, jedoch kann dies zu einer nicht-validierung seitens w3c.org kommen, zudem wird die Barrierefreiheit eingeschraenkt. Also nicht zu empehlen.
Browser:Content-Font-Zoom(Font-Zoom) eingesetzt in IE4-6,FF, und allen anderen Browsern. Diese art von Browser-Zoom ist leider die meist vebreiteteste. Ich finde die Vergroesserung der Typografie(Font-Zoom) sollte auf der Website selbst erfolgen: landtag.nrw.de
Meiner Meinung nach ist die Verwendung von “em” für Layer und Layout im Grunde falsch, da diese für Typografie gedacht wurden.
Ihr messt einen Meter ja auch nicht in Schuhgrössen:lol:!
Also, Flexibles Layout Nein! Aber, Dynamisches Layout Ja!
Um eine kleine immerwiederkehrende Frage zu klaeren:
Auch wenn es komisch klingt, das Layout ist des Inhalts könig! Das bedeutet der Inhalt sollte sich dem Layout des entrechenden Medien-Typen anpassen.
Anders herum: Ein Haus waechst ja auch nicht wenn der Besucher groesser ist, oder:idea:?
@Tobi:
Ich finde, horizontales Scrollen wird unterbewertet. Wäre es nicht schön, man hätte ein in der Höhe dynamisches, mehrspaltiges Layout, bei dem man mit dem Scrollrad horizontal scrollen kann?
Klasse Artikel, der mir sehr gefällt.
In meiner Joomla Sektion auf meiner Homepage habe ich auch so etwas ähnliches geschrieben.
Ich nutze da ein flexibles Layout um einfach “mehr” unterzubringen, da thematisch meine Seite recht breit gefächert ist.
In Blogs finde ich eine fixe breite besser, da der Text fortlaufend ist. Quasi Buchform.
Schmalere Seiten finde ich auch einfacher zu lesen