17. Mai 2008
In der letzten Zeit lese ich immer häufiger in verschiedenen Blogs vom nahenden Ende der flexible Layouts. Begründet wird diese Untergangsvision mit der Ankunft des Firefox 3, der als dritter großer Webbrowser (neben IE 7 und Opera 9) den Seitenzoom mitbringen wird. Der Nutzer kann sich somit jedes noch so fest in ein Pixelraster gemeißeltes Layout skalieren. Wenn der Nutzer sich also selbst kümmern kann, so können sich Webentwickler endgültig ohne Gewissensbisse auf die ach so einfachen und beliebten fixen Layouts beschränken.
Nun, ich sehe das etwas anders und werde versuchen, diese These anhand von fünf Punkten zu widerlegen.
#1 „Der Glaube an den heiligen Seitenzoom“ oder „Nutzer, hilf Dir selbst!“
Wie oben bereits angesprochen, werden mit dem Firefox 3, dem IE 7 und dem Opera 9 in Kürze drei wichtige Browser den Seitenzoom unterstützen. Die These: Damit würde jedes fixe Layout skalierbar und der Aufwand für flexible Layouts sei nicht mehr gerechtfertigt.
Falsch gedacht, denn zwischen fix und flexibel besteht auch weiterhin ein fundamentaler Unterschied. Ein flexibles Layout passt sich im Rahmen der CSS-Vorgaben in seiner Breite dem aktuellen Ausgabemedium an. Ein fixes Layout hingegen kann dies nicht. Der Seitenzoom ermöglicht es lediglich dem Nutzer, die Seite nachträglich selbst im Browser nach seinen Bedürfnissen zu vergrößern, ohne dass das Layout größeren Schaden nimmt. Das ist in der Tat eine technische Verbesserung der aktuellen Browsergeneration, jedoch kein Argument gegen flexible Layouts. Noch immer liegt der IE6 in den weltweiten Browserstatistiken bei ca. 40%, (und nochmal ca. 40% für den IE7) d.h. fast jeder zweite User surft ohne dieses Feature.
Noch störender an dieser Argumentation finde ich aber die unterschwellige Botschaft: Anwender, hilf Dir doch selbst. Vorbei ist es offenbar mit der Rücksicht auf die Zugänglichkeit. Das ist dann ungefähr so als gäbe es im Klamottenladen nur noch Hosen in Größe 32. Wem die nicht passen, der darf sich gern auf dem Wühltisch kostenlos Stoffkeile, Nadel und Faden mitnehmen und sich die Hose zuhause selber umnähen. Soll sich das Web wirklich in diese Richtung entwickeln?
Nur zur Erinnerung: Kein Webdesigner hat die Kontrolle über sein Layout. Über die Darstellung entscheidet einzig und allein der User durch Browserwahl, Schriftgrößeneinstellungen (gern auch mal übers Betriebssystem), alternative Nutzer-Stylesheets und so weiter. Ein fixes Layout lässt sich für den Rechner und Lieblingsbrowser des eigenen Chefs oder des Auftraggebers optimieren, aber eben nicht für die grenzenlose Vielfalt der Nutzeranforderungen im großen wilden Internet.
#2 Das Märchen vom flexiblen Problembär
Wenn es darum geht, gegen flexible Layouts zu argumentieren, stehen zwei Argumente immer ganz weit vorn. Fangen wir mit dem Ersten an:
Bei flexiblen Layouts läuft der Text beim Aufziehen des Browserfensters unkontrolliert in die Breite, was ihn letztlich schwer lesbar macht.
Falsch gedacht, denn genau dafür hat der liebe CSS-Gott die Eigenschaften min-width und max-width erfunden. Und schon höre ich die Zwischenrufe, dass der IE6 diese Eigenschaften doch nicht unterstütze. Na und? Der IE6 hat auch ein kaputtes Box- und Float-Modell. Hält das irgend jemanden davon ab, Layouts für diesen Browser zu erstellen? Auch für min-width und max-width gibt es sowohl per CSS als auch per JavaScript adäquate Workarounds.
Und gleich noch ein Zwischenruf: JavaScript könne man ja nicht vorausgesetzt werden. Auch das stimmt, jedoch wird das Layout ohne JavaScript nicht automatisch unbenutzbar, sondern ggf. nur leicht in der Darstellungsqualität eingeschränkt – aber auch nur dann, wenn der Nutzer gleichzeitig ein sehr breites Browserfenster verwendet. In jedem Fall skaliert das Layout weiterhin und ist in > 90% der Fälle uneingeschränkt nutzbar.
Wie macht man es also richtig: Die Breite wird bei flexiblen Layouts in Prozent angegeben, entweder über width:auto (entspricht dem maximal verfügbaren Breite) oder einem Wert kleiner 100%. Als Untergrenze (min-width) sollte man einen Wert in der Einheit Pixel (px) wählen. Auf diese Weise lassen sich Grafiken (i.d.R. pixelbasiert) einfach an die minimale Layoutbreite anpassen und das Layout kann nicht unkontrolliert zusammengestaucht werden. Als obere Grenze (max-width) eignet sich entweder der Wert 100%, wenn man horizontale Scrollbalken in jedem Fall verhindern will, oder aber (was ich persönlich empfehle) einen Wert in der Einheit EM (z.B. 100 em). Auf diese Weise kann die Laufweite von Fließtexten innerhalb des Layouts auf ein gut lesbares Maß begrenzt werden, gleichzeitig skaliert das Layout aber weiterhin bei Änderungen der Basisschriftgröße.
#3 Alle Macht ... ähm, dem Designer? Oder wie?
Während das erste Argument wenigstens noch einen technischen Hintergrund hat, ist das zweite nicht viel mehr als ein verbaler ausgetreckter Zeigefinger, mit dem man die Verantwortung auf einen anderen schiebt.
Der Designer wünscht sich eine pixelgenaue Umsetzung seines Layouts. Da ist kein Spielraum für Flexibilität in der Umsetzung in HTML und CSS.
Falsch gedacht, denn das Layout soll ja nach der Fertigstellung nicht nur einen schönen Screenshot im Portfolio des Designers abgeben sondern den Usern einen möglichst attraktiven und gleichzeitig ungehinderten Zugang zu den Informationen der Seite bieten (Klingelt’s? Thema: Barrierefreiheit). Designer erarbeiten das Layout üblicherweise in Photoshop, also auf einem digitalen Blatt Papier. Wir alle wissen aber, dass das Web so nicht funktioniert. Warum sollte man daher diese Entscheidung allein dem Grafiker überlassen? Steht denn irgendwo geschrieben, dass Navigationselemente schon beim einmaligen Vergrößern der Schriftgröße aus ihren Fake-Boxen (rechteckige Hintergrundgrafiken) herausfallen müssen?
Grafisch anspruchsvolle flexible Layouts verlangen auch von Grafikern ein gewisses Verständnis der Materie. Dass sich dieses Ziel nicht immer realisieren lässt ist mir klar, in vielen Fällen ist es jedoch durchaus möglich und sinnvoll. Üblicherweise arbeitet man hier mit halbtransparenten Übergängen, Farbverläufen oder kleinformatigen grafischen Mustern. Diese werden im Layout geschickt skalierbaren Elemente (oder sonstigen ungenutzten Flächen) zugeordnet und schon lassen sich sehr attraktive Entwürfe umsetzen.
#4 Handy-Browser – Denn sie wissen nicht, was sie tun
Nun ja, das taten sie in der Vergangenheit wirklich und meine letzten beiden ehemaligen Handys boten zwar Internet-Zugriff aber konnten kaum eine aktuelle Webseite fehlerfrei darstellen. Dann wäre noch die Möglichkeit alternativer Stylesheets, womit Desktopdarstellung und das Rendering auf mobilen Geräten eh unabhängig voneinander laufe. Aber diese Zeiten sind vorbei, deshalb schon wieder ...
Falsch gedacht, denn kaum ein Handy unterstützt den Medientyp @media handheld, mit dessen Hilfe man auf einfachem Wege alternative Stylesheets zur Verfügung stellen könnte. Erschwerend kommt hinzu, dass in den letzten zwei Jahren die Mobilbrowser stark aufgeholt haben (Opera Mini oder Safari auf dem iPhone) und mittlerweile ganz selbstverständlich das normale Screenlayout rendern – weitgehend fehlerfrei, versteht sich. Und selbst die Werbung verspricht mittlerweile das wahre Internet und keine kryptischen WAP-Seiten mehr. Mein iPhone, zum Beispiel, passt flexible Layouts automatisch optimal dem Hoch- oder Querformat an, während ich z.B. die Spiegel-Seite (fixes Layout) jedesmal von neuem erst einmal aufzoomen muss, damit sie wirklich den gesamten Bildschirm ausfüllt und Überschriften und Texte lesbar werden.
Und was für mobile Geräte gilt, gilt ebenso für Drucker: Nur komischerweise widerspricht mir hier in der Regel niemand, wenn ich von den Vorteilen der Flexibilität bei der Druckausgabe rede – obwohl es sich für den Browser nur um ein weiteres Ausgabemedium mit etwas anderen technischen Daten darstellt. Woran das wohl liegt?
Indem ich als Webdesigner ein flexibles Layout erstelle und somit vermeintlich die „Kontrolle verliere“, gewinne ich stattdessen in Wirklichkeit selbige hinzu. Denn durch Vorgabe von Rendering-Regeln (Mindestabstände, Ausrichtung usw.) anstatt fester Pixelvorgaben, kann der Browser beim Rendering auf die Wünsche des Nutzers eingehen, anstatt einen in Pixelsteine gemeißeltes Layout auszugeben, komme was das wolle.
#5 Die Zukunft, das unentdeckte Land
Das mobile Internet wird immer wichtiger werden. Fangen wir deshalb wieder an für 640x480 oder 800x600 Pixel zu optimieren – wer das meint, darf ruhig die Hand heben? Die Monitorauflösungen wachsen rasant. Ich entwickle Software und brauche Platz am Bildschirm. Mein Desktop-Monitor (27 Zoll) hat eine Auflösung von 1900x1200 Pixeln, mein Notebook (15 Zoll) steht dem mit 1680x1050 Pixeln kaum nach. Zwar liegen diese Werte derzeit noch etwas über dem Durchschnitt aber schon jetzt ist das keine Besonderheit mehr und die Preise für hochauflösende LCDs fallen weiter. Parallel dazu wächst nicht nur physikalische Auflösung der Geräte, auch die Punktdichte (dpi) steigt immer weiter, wodurch sich die absolute Größe eines Pixels zusätzlich verringert. Es ist daher nicht verwunderlich, dass pixelbasierte Größenangaben immer weniger aussagekräftig und zeitgemäß sind.
Oder wie wäre es mit SVG- oder Canvas-Grafiken? Gerade erst haben sich Opera und Safari ein Wettrennen um SVG-Unterstützung im ACID3-Test geliefert. Ich frage mich wozu das Internet vektorbasierte Grafikformate braucht, wenn fixe Layouts wirklich der Weisheit letzter Schluss sein sollen?
Die Schere zwischen niedrig- und hochauflösenden Ausgabemedien hat sich in den letzten 10 Jahren nicht geschlossen. Ganz im Gegenteil: Sie geht immer weiter auf. Allein schon dieser Fakt verdeutlicht, wie wichtig flexible Layoutansätze heute und in der Zukunft sein werden und wie wenig hier fixe Layouts in Zukunft noch ein Optimum für die Mehrheit der Nutzer sein werden.
Fazit
Ich denke, die eingangs genannte These ist kurzsichtig und mit Sicherheit nicht im Sinne eines besseren Webs. Und um den Fortbestand flexibler Layouts braucht man sich keine Sorgen machen.
Samstag, 17.05.08 (21:13 Uhr)
Hallo Dirk,
bzgl. des Einstehens für flexible Layouts sprichst du mir aus der Seele. Ich glaube, dass das Feature sehr wohl Auswirkungen haben wird, auf die Art wie wir Webseiten schreiben. Die Bedeutung von elastischen Layouts wird beispielsweise zurückgehen, die Art wie wir fluide Layouts Erstellen wird sich ändern, aber flexible Layouts werden eher interessanter, da das Zoom-Feature bestens mit flexiblen Seiten harmoniert (wenn neben dem scon lange wichtigem max-width auch min-width benutzt wird).
Ich möchte hier ein weiteres 6:0 liefern.
Auf Seiten-Zoom optimierte Layouts erfordern die Erstellung von fluiden Layouts:
IE8, FF3 und Opera (IE7 nicht!) haben einen relativ guten Seitenzoom integriert, welcher eben nicht nur platt wie eine Lupe vergrössert, sondern insbesondere Dimensionsangaben in % mitberücksichtigt.
Will man also seine Seite an das Zoom-Feature der nächsten Browser-Generation anpassen, wird man grds. folgendes wollen:
Das gesamte Layout soll sich nur soweit Vergrössern bis die Fensterbreite erreicht ist und danach nur noch der Inhalt (kein horizontales Scrollen, erreichbar mit max-width). Erst wenn dann der Inhalt bei sehr starker Vergrösserung das “Korsett” sprengen würde, soll das gesamte Layout doch weiter mitwachsen (kein kaputt gehen des Layouts, erreichbar mit min-width).
Um ein solches Verhalten bei Seitenzoom zu erreichen, bedarf es flexibel umgesetzter Layouts.
Grüsse
Alex
Samstag, 17.05.08 (21:15 Uhr)
Eine Alte Weisheit an aktuellen Masstäben nochmal belegt. Danke & Gib dem Affen Zucker ;)
Samstag, 17.05.08 (22:00 Uhr)
Obwohl ich für meine Kunden (Designagenturen) meist fixe Layouts erstellen muss, kann ich dir nur zustimmen: ich finde flexible Layouts auch erheblich besser. (Deshalb habe ich meine Homepage auch so gebaut, da spricht mir niemand rein :-)
Aber egal ob flexible oder starre Layouts: der Seitenzoom ist (für mich) eine überflüssige und letztlich unbrauchbare Erfindung. Um eine Seite mit viel Text bequem und zurückgelegt lesen zu können, zoome ich gerne auf 200%. Beim Seitenzoom würde eine starre Seite jetzt 2000 Pixel breit ... So viel haben nur wenig Bildschirme, das heisst, sogar bei einem megagroßen Bildschirm habe ich jetzt waagrechte Scrollbalken. Tolle Usability.
Ich behaupte mal einfach: Seitenzoom finden hauptsächlich die gut, die eh keinen Zoom brauchen.
Und: warum dann nicht einfach ein PDF statt einer HTML-Seite? Der Acrobat-Reader hat den Seitenzoom schon seit 15 Jahren. Hat doch einen Grund, warum niemand PDF-Dateien am Monitor lesen will, und warum Adobe seit ein paar Jahren zusätzlich zum Ganzseiten-Zoom einen Lesemodus anbietet, bei dem der Text sich an die Monitorgrenzen anpasst. Die einen besinnen sich und die anderen wiederholen alte Fehler.
Den Ansatz von http://praegnanz.de/ finde ich übrigens auch sehr schön: er verwendet max-width nicht, lässt aber die Seitenspalten nach unten rutschen. Sehr schön und gut benutzbar.
Samstag, 17.05.08 (22:53 Uhr)
Ist schon immer wieder toll, wie man mit einem Satz eine kleine Revolution auslösen kann. ;-)
Aber ich bin Pragmatiker, nicht Revolutionär. In meiner Auftragspraxis sieht es halt meist so aus, dass der Kunden ein fertiges Layout hat, und ich soll das nun in ein CMS- oder Blog-Template gießen. Da sind die Vorgaben ganz klar: “Mach was ich will, oder Du kriegst den Job nicht!” Kein Kunde bezahlt mich dafür, dass ich ihn über die Vorteile eines flexiblen Layouts belehre. Ganz im Gegenteil. Die beste Methode, den Kunden zu verlieren, ist es, ihm etwas verkaufen zu wollen, was seiner Idee widerspricht.
Ich streite ja gar nicht ab, dass (für manche Seiten, nicht für alle!) flexible Layouts ihre Vorteile haben, aber was nützt mir das Wissen, wenn ich es nicht verkaufen kann?
Und: hat schon mal jemand bemerkt, wie beschissen Bilder aussehen, wenn man sie im Browser zoomt? Man achte nur auf den Header dieses Blogs hier. Der Schriftzug “High Resolution” wird schon in der ersten Zoomstufe fast unleserlich. Soviel zum angeblich nicht vorhandenen flexiblen Problembären. ;-)
Samstag, 17.05.08 (23:29 Uhr)
@Lothar
Ich kann mit Pragmatismus gut umgehen und ich verstehe auch, dass man im Alltag auf die Wünsche der Kunden eingehen muss. Aber ich sehe schon einen Unterschied zwischen Belehren und Beraten. Und gegenüber einer objektiven Beratung sind nun wirklich die meisten Kunden durchaus aufgeschlossen.
Nun, man verkauft am besten, wovon man selbst überzeugt ist. Ich sehe auch kein Problem bei der Umsetzung fixer Layouts, das mache ich gelegentlich auch und habe dafür meine Gründe. Dennoch kann ich die von Dir angesprochenen großen Nachteile flexibler Layouts nicht erkennen und deshalb deine Begründung zur Verzichtsempfehlung nicht nachvollziehen. Jeder Auftraggeber würde sich doch freuen, wenn ggf. schon durch ein flexibles Layout einige Barrieren abgebaut werden und neue Kunden gewonnen werden können. Wie gesagt, man verkauft, wovon man überzeugt ist.
Es geht in meinem Artikel nicht um skalierbare Pixelgrafiken. Und es geht auch nicht um mein privates Blog, sondern um flexible Layouts. Wenn Du ein Beispiel möchtest, hier ist eines. Vielleicht kannst Du mir daran die zahlreichen Nachteile erklären?
Sonntag, 18.05.08 (01:30 Uhr)
Für mich ist ein Flexibles Layout noch immer die Königsdisziplin und es erfordert enorm viel Vorausdenken und Mitdenken. Gerade im Zeitalter von Handy und Co. ist es immer wichtiger.
Ich danke mal wieder für die Bestätigung und die Untermauerung mit klaren Fakten.
Sonntag, 18.05.08 (17:06 Uhr)
Mich beschäftigt das Thema auch schon sehr lange - wäre ja auch schlimm, wenn nicht. Die Gründe, die Du hier auf den Tisch bringst, sind logisch nachvollziehbar, allerdings stelle ich mal eine ketzerische Frage: Muss der Webdesigner immer alles regeln oder darf der Nutzer seine Vorstellungen der Website mit einbringen, sprich: Zoom-Stufe, Farbe, Schriftart, etc. einstellen?!? Ich frage mich ohnehin, wann Browser-Hersteller auf die Idee kommen, diese Einstellungen nicht in der Tiefe des Systems zu verstecken und sie nach vorne holen. Ganz in der Tradition von Mode: Irgendwann kommt einfach ein neuer Trend, eine neue Sau, die durch das globale Dorf getrieben wird. Hey - davon leben wir!
Für mich gibt es - derzeit - neben den genannten Gründen einen wesentlichen Aspekt, der gegen die ausschließliche Verwendung von fixen Layouts spricht: Kein Zoom ist wie der andere. Opera zoomt anders als IE8, Firefox 3 zoomt anders als Opera und der IE7 zeigt, wie man besser gar nicht zoomt. Bleibt noch der Safari, der zur Zeit nicht mitspielt und die vielen anderen Browser, die es da noch in der Wildnis gibt. Und was ist mit Adobe Flex, Mozilla Prism und Microsoft Silverlight und den daraus resultierenden Möglichkeiten, Online-Widgets für den Desktop zu erstellen, die dem Benutzer nicht mehr die gewohnte Browser-Oberfläche bieten?
Ich sehe es pragmatisch: Neue Technologien und neue Techniken eröffnen neue Möglichkeiten. Auch nach der Erfindung der Schusswaffe werden noch Menschen erstochen. ;-)
Sonntag, 18.05.08 (18:02 Uhr)
Hey Ansgar, wem stellst Du die Frage? Genau das sage ich doch auch oben. Weniger feste Vorgaben vom Webdesigner und mehr Freiheiten für den Nutzer.
Gruß
Dirk
Montag, 19.05.08 (08:24 Uhr)
Gut geschrieben, danke :-)
Gruß
Jürgen
Montag, 19.05.08 (10:59 Uhr)
Ganz klar ist Deine Aussage dahingehend nicht gewesen. Deine Argumente gingen für mich eher dahin, dass der Webdesigner diese Flexibilität quasi “einbauen” muss, sprich: Flexible Layouts. Das halte ich für genauso falsch, wie die gegenteilige Aussage. Daher auch mein Fazit. ;-)
Montag, 19.05.08 (14:05 Uhr)
Aus Useability-Gründen stimme ich den Ausführungen durchaus zu. Aus werbetechnischer Sicht gibt es aber zwei gravierende Dinge die gegen die Verwendung flexibler Layouts sprechen. Ich habe das ganze mal unter http://www.alinki.com/de/blog/archives/44 ausgeführt. Leider konnte cih kein Trackback setzen - daher das ganze als Kommentar.
Montag, 19.05.08 (14:44 Uhr)
Ich kann mich dem Artikel nur anschliessen. Als User sind flexible Layouts besser und wenn die Zeilenlänge nicht stimmt, mach ich halt das Browserfenster kleiner, ich nutz Windows, da geht das.
Montag, 19.05.08 (14:47 Uhr)
Hallo Tobias,
der überwiegende Anteil an Privat- und Unternehmenswebseiten ist sicher nicht in erster Linie darauf ausgerichtet, mit Online-Werbung den Lebensunterhalt zu sichern, sondern mit den auf der Webseite vorgestellten Produkten oder zur Auftrags-Aquise. In diesen Fällen zählen sicher eine gute Usability und Zugänglichkeit des Angebotes mehr als ein möglichst großer Weißraum, der mit Werbebannern zugepflastert werden kann.
Zudem hat die linksbündige oder zentrierte Ausrichtung einer Webseite nichts mit fixem oder flexiblem Layout zu tun. Auch in einem flexiblen Layout lassen sich mit Sicherheit Werbeelemente sinnvoll platzieren.
Montag, 19.05.08 (15:11 Uhr)
Hallo Dirk!
Ich redete bewusst von Webseiten über die Geld verdient werden soll, wobei ich Unternehmenswebseiten die Produkte präsentieren und verkaufen oder zur Auftragsakquise verwendet werden dazurechne. Für die meisten dieser Webseiten ist meiner Erfahrung nach eine fixe Breite die bei 1024x768 ohne horizontalen Scrollbalken dargestellt wird momentan die optimale Lösung mit der die höchsten Conversion- und Klickraten erreicht werden. Die einzige mir bekannte Ausnahme sind dabei eigentlich Shoppingseiten. Auf jeden Fall: Bei flexiblen Layouts nimmt beim Erstkontakt mit der Seite die Wahrnehmung der Inhalte von links nach rechts rapide ab. Je größer die Auflösung desto größer der Effekt. Du kannst ja gerne den Test machen - Dein Blog ist zwar sicher keine optimale Testumgebung sollte linksbündig ausgerichtet aber auch ca. 5% mehr PI’s bei Usern mit Erstkontakt bringen als jetzt.
Montag, 19.05.08 (15:35 Uhr)
Tobias,
es könnte genauso gut sein, dass sich der Aufwand für bessere Usability und Zugänglichkeit einer Seite in zufriedeneren und vorallem neuen Kunden niederschlägt und somit mittel- bis langfristig durchaus 5% geringere Werbeeinnahmen kompensiert, wenn nicht sogar steigende Einnahmen erzielt werden könnten. Hältst Du diese Möglichkeit denn für ausgeschlossen?
Investition in Zugänglichkeit ist durchaus lohnenswert, wie beispielswiese die Zahlen in dieser Präsentation von Martin Kliehm eindrucksvoll belegen können.
Montag, 19.05.08 (16:23 Uhr)
Dirk,
der Aufwand für eine bessere Zugänglichkeit lohnt sich immer, langfristige Effekte bei Webseiten halte ich aber für überbewertet sofern man nicht einen absoluten Brand in Form einer aktiven Community hat. Die Erfahrung bei einer größeren Zahl von eigenen Webseiten und Kundenseiten zeigt ganz klar mehr als 80% der Besucher sehen eine Webseite (keine Community) zum ersten mal und je nach Inhalt und Layout hat man dann zwischen 30-70% Absprungrate. Erfolgreiche Seiten schaffen es die Besucher erstmal auf der Seite zu halten und dann in irgendeiner Form zu konvertieren. Bei der Optimierung der Seite entscheide ich mich dabei dann ganz klar für 80% neue statt für die 20% wiederkehrenden Besucher. Bei einer Community wo ich 80% wiederkehrende User habe mache ich es natürlich anders herum.
Montag, 19.05.08 (16:47 Uhr)
Tobias,
wir können das abkürzen, denn deine Argumente haben für mich keinen erkennbaren Zusammenhang zur Entscheidung fixes oder flexibles Layout. Der wirtschaftliche Erfolg einer Webseite, Absprung- und Klickraten werden mit Sicherheit vielen anderen Faktoren beeinflusst. All diese Dinge als exklusive Nachteile flexibler Layouts verkaufen zu wollen, erscheint mir unglaubwürdig.
Montag, 19.05.08 (17:08 Uhr)
Wenn ich es nicht gemessen hätte würde ich es nicht behaupten. Wir haben für diverse Kunden unterschiedliche Seitenversionen auf Basis mehrerer tausend Seitenaufrufe miteinander verglichen und haben dabei immer jeweils eine Veränderungen gemessen um das Ergebnis überhaupt objektiv betrachten zu können. Die Tools (z. B. Google Website Optimiser) um selbst nachzumessen gibt es frei im Netz und ich glaube mit unglaubwürdig hat das nicht viel zu tun.
So, für mich ist hier nun Ende der Diskussion. Das Ganze war als konstruktive Ergänzung zu dem Blogpost gedacht und sollte auch ein Hinweis darauf sein, dass man die Sachen immer von mehreren Seiten sehen muss und manche Dinge auch lieber in Zahlen greift.
Dienstag, 20.05.08 (01:41 Uhr)
Nun lese ich den Artikel zum zweiten Mal - nun mit Kommentaren. Beim ersten Lesen bin ich überhaupt auf die Zoomsache gekommen, aber die Mehrheit der Benutzer dürften wohl die nächsten Jahre damit nicht wirklich “arbeiten”. Daher je nach Zielgruppe wohl 80% Aufwand für 20% Leser. Aber ich denke, Dir geht es auch etwas um die grundsätzliche Philosophie zur Qualität von Webseiten und Gedankengängen für eine Layoutentscheidung.
Wir designen gerade zwei Portale neu und eines davon ist deutlich werbefinanziert. Da ist flexibel zwar nett, öffnet aber eine Reihe neuer Baustellen. Für das zweite werde ich aber nochmals neu nachdenken (müssen).
Dienstag, 20.05.08 (09:27 Uhr)
@Robert
Genau so ist es. Auch die im Artikel angesprochenen Punkte sind nicht allein entscheidend für die Wahl des Layouts, sonden es gibt immer noch weitere, wie auch Tobias Argumentation zeigt. Daher ist es wichtig, sich immer wieder unvoreingenommen dieser Entscheidung zu stellen. Die Umsetzung flexibler Layouts verlangt etwas mehr Planung im Vorfeld, macht an vielen Stellen das Leben aber auch einfacher, weil es eben nicht überall pixelngenau sein muss und sie hat für die Besucher der Webseite in der Regel nur Vorteile.
Und auch innerhalb eines flexiblen Layouts sind problemlos Bereiche mit fixen Breiten umsetzbar. YAML ist speziell auf diese Anforderungen ausgerichtet und lässt dem Webdesigner auch innerhalb eines Layouts relativ frei mit verschiedensten Maßeinheiten (%, em, px) zu arbeiten.
Mir geht es darum, die Vorteile dieser Technik im Sinne der User zu nutzen, wo immer es möglich ist. Mit diesem Bewusstsein im Hinterkopf der Projektverantwortlichen bekommen wir geräte- und browserunabhängig bessere Webseiten. Der Verweis auf die Vorzüge einer neuen Zoomtechnik wird nur allzu schnell als willkommener Vorwand für das Gehen des “bequemeren” Weges verstanden und deshalb halte ich das als öffentliches Statement für denkbar schlecht.
Dienstag, 20.05.08 (10:45 Uhr)
@Dirk>
Ich habe jetzt noch mal eine ganze Weile mitgelesen und muss nun doch noch mal was zu diesem Thema sagen.
Eine Reihe von Kommentatoren hat hier durchaus berechtigte Einwände dagegen vor gebracht, dass ein flexibles Layout in jeder Situation die einzig wahre Lösung ist. Du wichst alle diese Argumente von Tisch und wiederholst gebetsmühlenartig Deine Argumente. Dieses Verhalten macht Deine Arbumente aber nicht wahrer und die der Leute, die Dir widersprechen, nicht unwahrer.
Fakt ist, das es Gründe für ein flexibles Layout gibt und welche, die dagegen sprechen. Und man im Einzelfall immer abwägen muss, was das kleinere Übel ist. Keine Lösung (fest, flexibel, liquid…) ist immer richtig. Für jede gibt es gute Gründe dafür und dagegen.
Das ist der Grund, warum ich mich nach kurzer Zeit aus allen Standardista-Organisationen (Web-Standards-Group, Webkrauts etc.) zurück gezogen habe. Es gibt im wahren Leben kein Verhalten, das immer und in jeder Situation passt. Wer sowas zu verkaufen versucht, hat immer Unrecht.
Du hast mit YAML ein wirklich tolles Werkzeug geschaffen. Aber es passt nicht immer. So wie man nicht jede technische Problemstellung mit einem Hammer bewältigen kann, so kann man nicht jede Website mit YAML bauen. Manchmal ist ein Schraubenschlüssel oder eine Zange einfach besser geeignet, um das Problem zu lösen.
Ich nehme diese Formular hier mal als Beispiel. Was nützt jemandem wie mir, der eine eingeschränkte Sehfähigkeit hat, die Möglichleit zu zoomen und ein flexibles Layout, wenn er dann an dem absolut behindernden Captcha scheitert (das natürlich nicht mitzoomt)? Und warum muss ich auf Deiner Seite überhaupt zoomen, warum machst Du die Schrift nicht gleich so groß, dass ich sie ohne Zoom lesen kann?
Du siehst, keine Lösung ist immer und in jeder Situation richtig. Mich behindert das Captcha jedenfalls deutlich mehr, als ein fixes Layout.
Dienstag, 20.05.08 (12:40 Uhr)
Hallo Lothar,
es tut mir leid, wenn Du das so siehst. Ich ignoriere andere Argumente nicht, ich setze mich mit ihnen auseinander. Deshalb sind auch mein Artikel und meine Kommentare hier so lang. Ich wäre schlecht vorbereitet für eine Diskussion, wenn ich auf die klassischen, immer wieder geäußerten Gegenargumente keine begründete Antwort hätte. Und in diesem Fall haben mich die Argumente von Tobias einfach nicht überzeugt. Weitere Argumente - mit denen ich nicht übereinstimme - kamen nicht.
Ich hatte auch Dich per Kommentar um Argumente zur Sache gebeten, leider kam jedoch gerade von Dir gar nichts. Auf Deine spitzfinden Anspielungen auf das Layout meines privaten Weblogs gehe ich jedenfalls nicht ein.
Dass flexible Layout die einzig akzeptable Lösung seinen, davon war nie die Rede. Aber ich erinnere Dich gern, was der Grund für meinen Artikel war. Hier ein Auszug aus Deinem Kommentar zu EasyGrids:
Es geht es um diese pauschale Sichtweise, mit der ich nicht einverstanden bin, denn darin lässt Du sehr deutlich keinerlei Spielraum für Alternativen. Und genau diese Sichtweise versuche ich mit Argumenten zu widerlegen.
Hier in den Kommentaren antwortest Du aber nicht mit Gegenargumenten, sondern schreibst plötzlich:
Ich frage mich, welche der beiden Statements ich Dir nun glauben soll? Wenn Du das so auf deiner Webseite geschrieben hättest, gäbe es meinen Artikel vielleicht gar nicht, denn hierin stimme ich mir Dir überein.
Gruß
Dirk
PS zum Thema Webkrauts: Ich habe gern Visionen, auch wenn Sie sich in der Praxis nicht immer 1:1 realiseren lassen. Das sehe ich aber nicht als Grund an, meine Visionen dem realen Alltagsgeschäft auszurichten. Stattdessen versuche ich lieber, mit Argumenten für den - nach meiner Ansicht besseren Ansatz - zu werben. Genau diese Einstellung vertreten die Webkrauts und deshalb fühle ich mich dort richtig aufgehoben.
Dienstag, 20.05.08 (13:40 Uhr)
Lieber Dirk,
ich finde nicht, dass sich meine beiden Aussagen widersprechen. Sie zeigen nur zwei verschiedene Aspekte des Lebens auf. Die erste zeigt den wahren Alltag der Web-Entwicklung, in der die Freiräume doch sehr beschränkt sind, die zweite setzt sich mit den theoretischen Möglichkeiten auseinander.
Ich kann nicht verstehen, dass Du meinst, die Wünsche meiner Auftraggeber währen kein Argument zur Sache. Für mich, der von dem Job lebt, ist das das wichtigste Argument überhaupt. Denn meine Kunden bezahlen mich für meine Arbeit nur, wenn Sie das bekommen, was sie bestellt haben. Und von den Standardistas habe ich bisher noch nie einen Auftrag oder gar Geld bekommen.
Deshalb richte ich mich bei meiner Arbeit nach den Wünschen meiner Kunden. Und nicht nach brotlosen Idealen, so schön sie auch sein mögen. Dass ist der Unterschied zwischen dem Vergnügen des Amateurs, der nicht davon leben muss, und dem Profi. Der Amateur kann sich Visionen leisten, die nicht honoriert werden. Der Profi muss Geld verdienen.
Und ich habe überhaupt nichts dagegen, dass Du nicht meiner Meinung bist. Aber ich habe sehr wohl was dagegen, wenn Du meine Meinung als falsch hinstellst. Anders als Deine ist nicht identisch mit falsch. Ich lasse Dir Deine Meinung, lass Du mir meine.
Gruß
Lothar
P.S.: Auch wenn Du es nicht hören magst, Dein Captcha ist trotzdem eine Behinderung für mich. Da gibt es bessere Lösungen gegen Spam.
Dienstag, 20.05.08 (14:57 Uhr)
Weil sie dann zu groß für mich wäre und ich den Text nicht mehr lesen könnte.
Dienstag, 20.05.08 (15:05 Uhr)
Man könnte das auch andersherum sehen: Der Profi weiß, warum er flexible Layouts einsetzt. Das Argument oben erinnert mich ein wenig an die Theorie “Mit einem Hammer kann man alles reparieren.” ... wir leben in einer Demokratie, da darf jeder tun, was er will. Meinetwegen auch Fenster mit nem Hammer reparieren.
Dienstag, 20.05.08 (15:28 Uhr)
Lieber Lothar,
Damit ist wohl alles gesagt.
Gruß
Dirk
Dienstag, 20.05.08 (17:15 Uhr)
Amateur und Profi
Mittwoch, 21.05.08 (16:53 Uhr)
Hallo Dirk,
Du streitest hier für flexibles, fluides, liquides oder wie auch immer genanntes Design, warum hat dann Deine Seite ein absolut pixelgenaues, fixes Layout? Denn das ist es in meinen Augen.
Du hast weiter nichts gemacht, als Browser, die keinen Seitenzoom beherrschen, wie z. B. Firefox, zu zwingen, sich bei Schriftvergrösserung zu verhalten wie der Opera. Die Seite wird gezoomt. Was ist daran flexibel? Da ist doch eine Seite mit fester Breite und relativ formatierter Schriftgrösse wesentlich flexibler, der Text fliesst, und die Seite wächst nach unten.
Mein IE6 reagiert überhaupt nicht, auch bei “Schriftgrad sehr gross” passiert gar nichts. Alles bleibt so, wie es ist, auch die sehr kleine Schrift. Was ist also mit den oben im Artikel erwähnten 40% IE6-Nutzern?
Ich bin überzeugt davon, dass weder die Auftraggeber noch die normalen Internet-Nutzer flexible Layouts wollen. Das wollen nur die Webdesigner. Der normale Mensch will, dass das Internet funktioniert, wie die Welt, die er kennt. Der normale Nutzer will nicht, dass die Seite sich plötzlich verschiebt und verändert, nur weil er die Schrift ein wenig grösser oder kleiner haben wollte. Die Seite soll so bleiben, wie sie ist, nur grösser werden, so als ob man ein Blatt Papier vom Schreibtisch nimmt und näher an die Augen heranführt.
Insofern hast Du es ja richtig gemacht mit Deiner Seite, nur flexibel oder fluid ist das nicht, sondern auf die Spitze getriebenes pixlelgenaues Layout oder Design. Leider funktionierts nicht im IE6.
Die Browserhersteller haben erkannt, was der normale Internet-Nutzer will, und steigen einer nach dem anderen auf Seitenzoom um. Manche bieten alternativ weiter eine Schriftvergrösserung an, beim IE7 ist diese aber in den Tiefen der Menüs versteckt und somit denen vorbehalten, die sich auskennen, während der Seitenzoom immer erreichbar ist (unten rechts)
Ich glaube, dass pixelgenaue Layouts die Zukunft sind, bald werden alle gängigen Browser einen vernünftigen Seitenzoom haben. Für kleine Bildschirme wird dann wichtig sein, dass die Überschriften sehr gross und aussagekräftig sind, so dass man sie auch lesen und deuten kann, wenn die Seite kleingezoomt ist, z. B. auf einem Handy oder PDA. Dann zoomt man einfach zu der interessanten Stelle hin, in der Zukunft wohl einfach per Touchscreen.
Design und Layout für Handys und PDAs wird dann wohl einfach heissen, dass die Spalten nicht zu breit sind, damit man nach dem heranzoomen auch auf kleinen Bildschirmen lesen kann, ohne horizontal zu scrollen.
Wir sollten immer daran denken, dass wir unsere Seiten und die unserer Kunden im Endeffekt für Leute machen, die vom Internet keine Ahnung haben und ganz einfach erwarten, dass das Internet genauso oder wenigstens ähnlich funktioniert wie die reale Welt, eben das vielzitierte Blatt Papier.
Mittwoch, 21.05.08 (18:39 Uhr)
Hallo Gerd,
Ich bin Bauingenieur von Beruf und entwerfe und berechne sehr große, teure Bauwerke. Trotzdem wohne ich nicht in einem Schloss sondern nur im 4. Stock einer Mietwohnung mitten in Dresden. Was sagt das jetzt wohl über meine Qualitäten als Bauingenieur aus?
Warum ein fixes Layout: Ganz einfach. Weil dieses mein privates Blog ist, das Layout bereits 3 Jahre existiert, ich damit kein Geld verdiene und es daher pflege wenn ich Zeit habe. Stattdessen widme ich meine Zeit lieber der Weiterentwicklung von YAML, um auch anderen Webentwicklern den Umgang mit flexiblen Layouts zu erleichern.
Eben, andere Nutzer haben unter Umständen ein Problem. Wie bei jedem anderen fixen Layout und px-basierten Schriftgrößen auch. Ein schönes Argument für flexible Layouts, findest Du nicht? Mein neues Bloglayout - welches seit einigen Wochen reift - wird denn auch ein Flexibles sein.
Ein wichtiger Satz. Dann überlege Dir mal, ob Menschen mit Sehschwächen, Farbblindheit, eingeschränktem Bewegungsaparat und/oder anderen Einschränkungen Ihre Umwelt in gleicher Weise wahrnehmen wie Du und ob für diese Menschen Deine Sicht der Dinge bezüglich pixelbasiertem Webdesign gleichermaßen das Optimum darstellt.
Vielleicht sagt Dir der Ausspruch “Design for our future selfs” etwas. Wir werden alle mal älter. Für welche Altersgruppe optimierst Du also dein pixelbasiertes Design - für die Jungen, die gut lesen können oder für die ältere Generation mit doppelter Schriftgröße? Welche der beiden Nutzergruppen darf das Internet als “ihre Welt” erleben und welche Gruppe muss sich durch permanentes Zoomen ständig “der Welt der anderen” anpassen?
Wieviele Vorteile bringt der Seitenzoom eines fixen Layouts, sagen wir es sei 960 Pixel breit, um Faktor 2 (wegen der Schriftgröße, meine Oma sieht relativ schlecht), wenn man dafür eine Monitorauflösung 1920px Breite und einen Browser im Fullscreen-Modus benötigt, um die Webseite auch weiterhin - wie in meiner jetzigen Welt üblich - ohne horizontale Scrollbalken geniessen zu können und den Inhalt auch vollständig überblicken zu können?
Ganz genau. Und deshalb würde ich erwarten, von einem Webdesign-Profi auch objektiv beraten zu werden. Denn nicht in jedem Fall stimmen die Wünsche des ggf. unwissenden Auftraggebers mit den Vorstellungen seiner Kunden darin überein, was eine gut gestaltete Webseite ist.
Mittwoch, 21.05.08 (19:39 Uhr)
Hallo Dirk,
war wohl ein Fehler von mir, Deinen Artikel an Deinem eigenen Blogdesign festzumachen. Da bewahrheitet sich mal wieder das alte Sprichwort, dass man die Qualität eines Schusters nicht an dessen eigenen Schuhen messen sollte ;-).
Nochmal zu Deinem Artikel: gerade der Disput mit Lother, der ja auch kein Unbekannter ist, zeigt, dass Deine Überschrift (5:0) wohl etwas überzogen ist. Das reizt natürlich einen Verfechter der fixen Breite wie mich zum Widerspruch.
Der Trend zum Seitenzoom ist da, da kommen wir nicht dran vorbei. Ich begrüsse ihn sogar. Und bei der heutigen Browservielfalt wird es immer einige geben, die, wie der IE7, den Seitenzoom wörtlich nehmen und flexible Vorgaben einfach ignorieren. Wir werden damit leben müssen, ob wir wollen oder nicht.
Ich bin übrigens fast fuffzig und ohne Brille ziemlich hilflos. Wenn ich also die Seiten für MICH optimiere, ist schon mal viel getan ;-). Wenn jemand meine Seiten so gross zoomt, dass sie den Bildschirm überragen, gilt das gleiche wie für Handys: Die Textspalten müssen so schmal sein, dass man sie ohne horizontales scrollen lesen kann. Der horizontale Scrollbalken stört doch nicht. Gleichzeitig muss die Textspalte gross genug sein, eine Vergrösserung auf 200% zu vertragen. Bei normaler Schriftgrösse (16px) ist 300-400px das (meiner Meinung nach) akzeptable Mass.
Es gibt ja auch interessante Ansätze, mehrere Spalten so anzuordnen, dass Sie bei Verkleinerung des Viewports nach unten abrutschen. Beim Widescreen habe ich mehrere Spalten nebeneinander, auf dem Handy alles untereinander.
Fakt ist, dass es immer ein Eiertanz sein wird, die Browser von vorgestern ebenso zu bedienen wie die Browser von übermorgen. Du sprichst von 40% IE6, die haben dann bei einem flexiblen Layout eben die ellenlangen Zeilen, weil der IE6 maxwidth nicht interpretiert. Wenn der IE6 mal tot ist, werden wir mit anderen Browsern zu kämpfen haben.
Für mich jedenfalls ist gerade die immer grösser werdende Bandbreite an horizontalen Bildschirmauflösungen ein Argument gegen ein flexibles Layout. Wenn ich nur mal 800-2000px nehme, also das mobile Internet vernachlässige, ist das schon kaum noch beherrschbar ohne minwidth und maxwidth.
Meine Einstellung zum mobilen Internet würde den Rahmen eines Kommentars nun endgültig sprengen, deshalb hier ein Link.
Also, vielleicht kannst Du ja mal über die Argumente von Lothar und mir nachdenken und das Spielergebnis anpassen, 2:3 oder 3:2, dann geb ich Ruh ;-)
Mittwoch, 21.05.08 (19:44 Uhr)
Lieber Gerd,
Du sprichst mir aus der Seele. Danke dafür.
Lieber Dirk,
nachdem Du Deine falschen Argumente hier immer weiter auftischst, muss ich einfach mal etwas kräftiger zulangen. Was Du schreibst, sind die typischen Argumente eines Idealisten, der sein Leben als Bauingenieur lebt, aber lieber Webdesigner geworden wäre. Aber wer glaubt, weil er Häuser bauen könne, hätte er auch das Internet verstanden, der irrt.
Gerd hat es genau auf den Punkt gebracht: Du möchtest den Benutzern des Internet etwas überstülpen, was sie gar nicht wollen und bedienen können. Der normale Nutzer weis nicht mal, das man mit seinem Browser die Schrift vergrößern kann, geschweigen denn die ganze Seite Zoomen.
Und, wer wie ich, eine eingeschränkte Sehfähigkeit hat, der hat längst vor Erfindung von Seitenzoom und YAML sein System so angepasst, dass er normale Webseiten problemlos lesen kann. Und genau denen nützt ein flexibles Layout gar nicht. Im Gegenteil. Der sieht auf seinem 19”-Schirm nämlich nur 800 oder gar 640 Bildpunkte in der horizontalen, und muss, dank der tollen minwidth und maxwidth-Angaben in YAML bei breiteren Spalten ständig horizontal scrollen. Danke dafür!
Ich sage Dir nicht, wie man ein Haus baut. Denn davon versteh ich zu wenig. Also erzähl Du mir nicht, wie ein Sehbehinderter das Web nutzt und ein Webdesigner Seiten bauen soll. Davon verstehst Du zu wenig.
Du möchtest den Leuten einen Rollstuhl verpassen, weil sie gehbehindert sind. Aber die Menschen wollen lieber mit Krücken, aber auf eigenen Beinen durch die Welt laufen. Weil sie wissen, dass es Treppen gibt, und da kommt man mit dem Rollstuhl nicht weiter. Mit Krücken aber schon.
P.S.: Dein Captcha ist immer noch eine totale Behinderung für Sehbehinderte und wahrscheinlich auch für Normalsichtige.
Mittwoch, 21.05.08 (20:14 Uhr)
Noch ein Nachtrag: Für Benutzerfreundlichkeit, Barrierefreiheit und Zugänglichkeit sollte man nicht ausschliesslich den Webdesigner verantwortlich machen. Bestimmte Behinderungen können auch durch spezielle Software ausgeglichen werden. Alles können wir auch nicht leisten.
Browser für Behinderte, wie z. B. Vorlese-Software für Sehbehinderte, müssen dann aber mit standardgerechten Seiten auch umgehen können. Soll heissen, dass wir durch standardgerechte Seiten die Voraussetzung schaffen, dass eine solche Software mit unseren Seiten zurecht kommt. Mehr aber auch nicht.
Der Opera ist ein gutes Beispiel, wie einige Probleme (wie z. B. Farbschwächen) durch gute Software ausgeglichen werden können. Die vielen Einstellungsmöglichkeiten im Rahmen von Benutzer- und Autorenmodus sind beispielhaft. Mit dem Opera kenn ich mir jede Seite flexibel machen, ohne gross in die Tiefen der Menüs und Einstellungen einzudringen.
Donnerstag, 22.05.08 (07:56 Uhr)
Das ganze nimmt langsam Formen an … reisst Euch mal bitte am Riehmen. Wir sind alle erwachsen. Das ist eine fachliche Diskussion, die sachlich geführt werden will. Solche Kommentare nutzen niemandem.
Donnerstag, 22.05.08 (14:57 Uhr)
Hallo Dirk,
ich denke, du bist im Hauptberuf Bauingenöhr, wieso kannst Du da eigentlich an einem ganz normalen Donnerstag tagsüber am Layout Deines privaten Blogs arbeiten ;-) ?
Es funktioniert jetzt wieder im IE, ich gehe also davon aus, dass Du was gemacht hast.
Ich hatte auch etwas Zeit und habe mich durch verschiedene Blogs zum Thema gelesen. Dabei ist mir aufgefallen, dass die Auffassungen, was eigentlich flexibles Layout ist, ziemlich auseinandergehen.
Für mich war flexsibles Layout bisher, wenn sich eine Seite ohne Zutun des Besuchers (mit den normalen Browsereinstellungen) an die jeweilige Bildschirmbreite anpasst. Manche Leute verstehen aber auch die Auszeichnung von divs und Bildern mittels em als flexibles Layout. Kann ich teilweise auch nachvollziehen, denn die Dimensionen der Seite verändern sich mit der Schriftvergrösserung, somit ist ein solches Layout (wie bei Deinem Blog) schon auch irgendwie flexibel.
Aber eigentlich wird damit, wie ich bereits geschrieben habe, nur ein Seitenzoom simuliert, für Browser, die ein solches Werkzeug von Haus aus nicht mitbringen.
Genau diese Designvariante wird natürlich überflüssig, wenn alle Browser einen Seitenzoom integriert haben.
Wahrscheinlich muss man nochmal unterscheiden zwischen flexiblem Layout und liquid/fluidem Layout, wobei der Begriff “flexibles Layout” weit gefasst ist und liquid/fluides Layout mit einschliesst.
Liquid Design wird natürlich ein Stilmittel bleiben, so dass sich bei einem Seitenzoom wie beim Opera die Abmessungen wie gehabt ohne Zutun des Besuchers an die jeweilige Bildschirmbreite anpassen. Aber ein Seitenzoom wie z. B. beim IE7 ignoriert einen solchen Ansatz, den vom FF kenne ich noch nicht.
Am Ende Deines Artikels fragst Du, ” ... wozu das Internet vektorbasierte Grafikformate braucht, wenn fixe Layouts wirklich der Weisheit letzter Schluss sein sollen?”
Nun, vectorbasierte Grafiken werden bei Seitenzoom gebraucht, da ja die Grafiken mit vergössert werden. Das ist ja der derzeitige Schwachpunkt beim Seitenzoom, die komprimierten jpg-Bilder werden dann schon mal unansehnlich, was man in der Originalgrösse nicht sieht.
Das hat also gar nichts zu tun mit flexiblem, liquid/fluidem oder fixem Layout. Das hat was zu tun mit dem aufkommenden Seitenzoom und den ständig wachsenden Bandbreiten bei der Datenübertragung, die Multimedia-Übertragungen möglich machen und auch die Einbindung von Bildern mit einem grösseren Datenumfang erlauben.
Fazit: Wenn man unter flexiblem Layout die Skalierung von Containern, Bildern usw. in em versteht, dann wird das mit dem aufkommenden Seitenzoom tatsächlich überflüssig, weil das dann die Browser von selbst erledigen. Liquid Design wird ein Stilmittel bleiben, das aber im IE nur solange funktioniert, wie der Seitenzoom nicht genutzt wird.
Montag, 26.05.08 (01:04 Uhr)
@ge
“Liquid Design wird ein Stilmittel bleiben, das aber im IE nur solange funktioniert, wie der Seitenzoom nicht genutzt wird.”
falsch, der ie-team hat das zoom feature mit ie8 an den zoom von opera und ff3 angepasst.
das bedeutet, dass liquid design-techniken gerade durch das zoom feature aufwind bekommen werden, denn nur liquid designs können garantieren, dass bei geringer zoom-stufe kein horizontales scrollen nötig ist.
Mittwoch, 28.05.08 (20:40 Uhr)
Angeregt durch die Diskussion habe ich mich erst heute näher mit dem Seitenzoom beschäftigt und im Opera 9.27 sowie im Firefox 3 ein bisschen damit rumgespielt.
Hier mein „Erfahrungsbericht“:
Notebook Windows XP Bildschirm 1024x768 und FF 3.0
Die Seite www.einfach-fuer-alle.de/tagung (flexibles YAML-Layout) kann ich fast dreimal vergrößern, ohne dass lästige horizontale Scrollbalken erscheinen
Bei der Seite http://creatordie.de/webinale (fixes YAML-Layout) erscheint bereits bei der ersten Vergrößerung ein horizontaler Scrollbalken
Windows Windows XP Bildschirm 1280x1024 und Opera 9.27
Die Seite www.einfach-fuer-alle.de/tagung kann ich bis 150% vergrößern, erst bei 180% erscheint ein horizontaler Scrollbalken, der aber eigentlich noch nicht stört.
Bei de Seite http://creatordie.de/webinale erscheint bereits bei 150% der horizontale Scrollbalken.
Wer braucht den Seitenzoom?
Alle Anwender, die auch bisher auf die herkömmliche Weise den Text vergrößert haben, weil ihnen auf fast allen Webseiten (mit fixem oder mit flexiblen Layout) die Schrift zu klein ist. Laut Opera-Knowledgebase gehört die Zoomfunktion zu den „spezial settings for disabled users“.
Mit der Zoomfunktion lassen sich Text und Grafiken vergrößern oder verkleinern. Passt beim Vergrößern der Seiteninhalt nicht mehr auf den Bildschirm, erscheint ein horizontaler Scrollbalken.
Der horizontale Scrollbalken lässt sich unterdrücken - im Opera mit der Einstellung „An Seite anpassen“ und im FF unter Ansicht/Zoom mit der Einstellung „Nur Text zoomen“ und dann sehen die Webseiten eigentlich so aus, wie man das bisher bei der herkömmlichen Vergrößerung des Schriftgrades gewohnt ist.
Als Anwender muss man sich zunächst an die Zoomfunktion gewöhnen.
Dieses Feature ist leicht zu bedienen und ist, wenn der Seitenzoom in den Browsern ordentlich funktioniert, für sehschwache/sehbehinderte User eine echte Hilfe.
Ich kann keinen Grund erkennen, warum der Seitenzoom angeblich flexible Layout überflüssig machen soll. Im Gegenteil – es ist genau so, wie das alexander in seinem Kommentar vom 26.05.08 geschrieben hat.
Ich muss noch was los werden:
@Lothar: Fix oder flexibel, darüber läss sich trefflich streiten, Dein letzter Kommentar war aber wirklich unsachlich und unfair.
Noch was zur Flexibilität von YAML: in den YAML-Layoutbeispielen überwiegen flexible Layouts, man kann mit YAML aber auch fixe Layouts und (flexible) Grid-Layouts erstellen. In der neuen Version 3.0.5 gibt es bei den Layoutbeispielen einen neuen Ordner 08: special_interest mit dem Dreispalter 3col_fullheight, da werden künftig sicher noch andere interessante Beispiele folgen - YAML ist also in verschiedener Hinsicht flexibel und zukunftsträchtig.
Sonntag, 01.06.08 (11:32 Uhr)
Und wenn ich min und max Width definiere?
Was passiert denn dann mit meiner Seite, habe ich dann grosse weisse (oder was immer der Hintergrund ist) Flächen zwischen meinen Bereichen?
Der Text bleibt mit maxWidth genauso wie bei einem Fixen Layout ja auch fix.
Und nur dadurch das sich die Grundstruktur der Seite flexibel verhält habe ich noch nichts gewonnen.
Hast du eine Beispielseite wo ein flexibles Layout (nein bitte keinen Blog sondern eine Firmenpräsenz, ein Portal usw.) deiner Meinung nach schön umgesetzt ist?
Und wenn schon flexibel sollte man von minWidth doch mal die Finger lassen, denn man weiss ja nie mit was für geringen Auflösungen der User so daherkommt, oder?
Sonntag, 01.06.08 (12:56 Uhr)
@ Mag ich nicht sagen
Es ist zwar schon ein bisschen peinlich, hier anonym bleiben zu wollen, aber ich will auch Dich nicht enttäuschen.
Eben nicht zwingend. Aber das hättest Du bei sorgfältigem Lesen des Artikels selbst herausfinden können. Denn max-width mit EM ist eine wunderbare Sache weil es die maximale Breite somit durch die Schriftgröße bestimmt wird und man immer einen optimalen Textfluss garantieren kann. Und selbst wenn die maximale Breite auf einen Pixelwert gesetzt wird, skaliert das Layout dennoch innerhalb eines gewissen Bereiches, was meist schon sehr viel ausmacht.
Sebstverständlich habe ich dafür Beispiele, darunter Firmenseiten, Portale, Online-Magazine usw.
Beispiele für elastische Layouts
————————————————————
http://postbank.de/
http://de.yahoo.com/
http://www.welt.de/
http://de.msn.com/
http://www.zdf.de/
sogar mit YAML
http://www.unternehmen.zdf.de/
Beispiele für flexible Layouts
——————————————————
http://www.thewatchmakerproject.com/
http://www.jek2k.com/
http://www.gnvpartners.com/web/
http://www.liberatutti.it/
http://www.yaml.de/
http://www.alphareturns.com/
http://www.smashingmagazine.com/
Drei ganz kleine Projekte, dennoch flexibel und gut gestaltet.
http://www.mng-rechtsanwaelte.de/
http://www.preetz-tourismus.de/
http://www.bs-zahnheilkunde.de/
Einige mit maximaler- und minimaler Breite, andere nicht. Jeder nach seinem Geschmack. Und alle diese Seiten skalieren auch mit der Schriftgröße (elastisch) oder automatisch (flexibel), wenn man mit keinem der Webbrowser daher kommt, die einen Seitenzoom anbieten. Sie skalieren auch, wenn jemand einfach nur “große Schriftarten” in seinem Betriebssystem aktiviert hat.
Warum sollte man keine Untergrenze definieren dürfen? Es geht vielmehr darum, eine sinnvolle Untergrenze zu wählen. Aber auch dafür habe ich zumindest ein Beispiel im Artikel gegeben.
Gruß
Dirk
Mittwoch, 10.09.08 (08:45 Uhr)
Wir haben uns beim Design unserer neuen Website (www.mse-it.de) bewusst für ein flexibles Layout entschieden. Da unsere Konkurrenz durchweg auf fixe Layouts setzt, ist dass bereits das erste Differenzierungskriterium.
Richtig spannend sind flexible CSS Layouts, weil durch das Floating einiges geht was man ansonsten nicht machen kann. Eine weitere Schwierigkeit ist, dass ein flexibles Layout nur wirkt, wenn der Text ordentlich getrennt werden kann. Bei unserer neuen Homepage haben wir deshalb einen Trenndienst implementiert, der den kompletten Content mit Trennungsinformationen versieht ( soft hyphen). Mit CSS3 wird vieles noch einfacher.
Sonntag, 09.11.08 (17:26 Uhr)
ich fand den Artikel sehr interessant und erhellend. Danke :)
Montag, 01.12.08 (14:55 Uhr)
danke, dirk, für diese klare haltung, was flexible layouts betrifft. eine haltung, die ich uneingeschränkt teile.
aber wenn die realisierung inklusive flexible pic-grössen (in %) bei statischen sites noch einigermassen einfach zu realisieren ist, wird’s ganz schlimm bei einem CMS, allen voran typo3.
ohne hier zu stark ins detail gehen zu wollen, sei hier nur so viel zur behandlung in typo3 vermerkt:
- bilder können nur mit fixer breite/höhe korrekt resp. ordentlich eingebunden werden, wenn sie alle ehren erhalten wollen (caption, links etc.pp.). damit zerschiessen sie allerdings jedes flexible layout.
- die alternative, bilder als integrierte text-elemente einzubinden, funktioniert zwar, diese müssen aber einzeln händisch mit der jeweils passenden css-klasse belegt werden. und geniessen selbstverständlich damit nicht dieselben funktionen wie die “ordentlichen” bilder.
eine diskussion um flexible layouts mit typo3-cracks hat ergeben, dass sie entweder gar nichts davon wissen oder wissen wollen.
und von der interpretation von bildern als eigentliche inhaltselemente halten sie schon gar nichts.
sonst wäre die option, einem bild eine CSS-class zu vergeben, schon längstens ins entsprechende backend-formular integriert worden.
wie es scheint, herrscht bei den typo3-cracks eine ideologie vor, die an die 90er jahre erinnert:
(und haben keinen eigenständigen inhaltlichen wert, der in jedem anständigen layout ja berücksichtigt werden müsste).
ärgerlich ist diese hinterwäldlerische haltung insbesondere darum, weil ich auch keinen einzigen hinweis gefunden habe, dass künftige versionen von typo3 mit diesem alten zopf aufzuräumen gedenken.
gruss
stephan
Dienstag, 11.08.09 (10:38 Uhr)
Ich habe hier soeben 5 Kommentare entfernt. Wer hier meint, mit Pseudo-Diskussionen zu einem über ein Jahr alten Beitrag SEO-Spam hinterlassen zu können, hat sich geschnitten.