Browserzoom ::: fixe und flexible Layouts ::: neue Trends im Webdesign?
17. Juli 2008 ute
Insbesondere seit Firefox 3 veröffentlicht wurde, gibt es wieder Diskussionen ob nicht jetzt endlich 
fixe Layouts das Maß aller Dinge sind. Der Firefox arbeitet in der Standardeinstellung nun auch mit Seiten- statt mit Textzoom. Selbst IE7 hat sowas ähnliches wie einen Seitenzoom, leider ist der so kaputt, dass er bei weitem nicht bei allen Layouts benutzbar ist. Unterschieden werden grundsätzlich:
- fixe Layouts: Breitenangaben werden fest in px (Pixeln) angegeben, diese lassen sich zumindest im noch immer gebräuchlichen IE6 nicht verändern
- flexible Layouts sind entweder:
- elastische Layouts: alle Angabe zur Breite gibts in em (ein Maß welches sich auf die Schriftgröße bezieht)
- fluide Layouts: die Breite der Seite und von etwaigen Spalten definiert man in % (Prozentangaben gewährleisten ein unterschiedliches Verhältnis bei verschiedenen Auflösungen)
Erübrigen sich nun flexible Layouts? Für Browser mit Seitenzoom wird sich bei entsprechendem Zoom, bezogen auf die Gesamtverhältnisse des Layouts, kein Unterschied zwischen fixen und fluiden Layouts mehr erkennen lassen. Ist jetzt also alles gut, das Photoshopbild des Grafikdesigners wird einfach umgesetzt und mehr ist nicht mehr zu tun?
Es gibt verschiedene Meinungen zum Thema fixe und flexible Layouts, einen guten Überblick über die Diskussion bietet Ansgar Hein in seinem Artikel bei den Webkrauts, er verlinkt einige andere Artikel und auch in den Kommentaren wurde noch fleißig diskutiert. Immer wieder gibt es die Meinung, dass flexible Layouts grundsätzlich aufwändiger seien als fixe Layouts. Daher könnten Profis, die diesen Aufwand vom Kunden zahlen lassen, nur selten flexible Layouts umsetzen.
Mehraufwand für flexible Layouts?
Ich meine, es hängt vom Layout und dem Kundenwunsch ab, ob es überhaupt Mehraufwand ist. Je nachdem wie genau die Vorstellungen von Kunden bereits vor den ersten Layoutvorschlägen sind, ist es durchaus möglich auch flexible Layouts ohne zusätzlichen Aufwand anzubieten. Häufig lassen sich durchaus Layoutvorschläge bereits so erstellen, dass sie flexibel sind. Wie sich ein flexibles Layout mit unterschiedlichen Einstellungen auswirkt, habe ich mit Screenshots vor kurzem in einem Artikel beschrieben.
Klar, es Layouts, die sich gar nicht flexibel umsetzen lassen und es gibt einige Layouts, die sich nur mit großem Mehraufwand flexibel umsetzen lassen. In manchen Fällen bestehen Kunden auf fixen Layouts, insbesondere dann, wenn sie bereits mit einem grafischen Entwurf kommen. Kunden, die ihr Layout weitgehend selbst entwerfen, entwerfen auf Papier. Meist kommen sie nicht aus dem Web und wissen nicht einmal, dass es auch flexible Layouts gibt. Wer mit einem Entwurf kommt, der sich nicht sinnvoll flexibel umsetzen lässt, der bekommt dann auch ein fixes Layout.
Vor- und Nachteile von fixen und flexiblen Layouts
Firefox auf 1920 lässt viel Platz
Bei Kunden, die noch keine Designidee haben, erlebe ich es jedoch selten, dass sie ein flexibles Layout im Vorgespräch ablehnen, wenn ich ihnen zeige, welche Vorteile das bietet. Klar, wenn ich ein flexibles Layout umsetze dann nutze ich max-width, um die Textbreite zu beschränken. Im Artikel zu verschiedenen Vorlieben bezüglich Browser und der gesamten Arbeitsumgebung, sowie zum Firefox 3 und seinen Einstellungen, habe ich auch beschrieben, warum ich auch bei einer Auflösung von 1920*1200 das Browserfenster in voller Größe nutze.
Für mich sollte ein Layout in so vielen Fällen wie möglich für den Besucher angenehm funktionieren. Meines Erachtens ist genau das, der Vorteil des Webs, dass jeder selbst entscheiden kann, womit er/sie unterwegs ist. Inklusive der gewählten, voreingestellten Schriftgröße, die ich in meinem Standardbrowser (z.Z. Firefox 3) auf einen Mindestwert einstelle.
Ich mag Seiten, die sowohl in 800*600 keine Scrollleisten haben, als auch in 1920*1200 noch nach einer Seite aussehen. Aus meiner Sicht sieht ein Layout, das auf siebenhundertirgendwas angelegt ist, bei einer Auflösung ab 1280 schon nicht mehr wie eine Seite aus. Bei noch höheren Auflösungen erinnern mich manche Layouts an ein bisschen Fliegendreck an irgendeiner Stelle. Manche Webdesigner geben dem Hintergrund noch eine optische Struktur, dann fällt es nicht mehr ganz so auf, dass im Grunde nur ein sechstel meines Monitors genutzt wird (berechnet anhand der Gesamtzahl Pixel bei 1920*1200 bezogen auf so Minilayouts mit 780*500). Deshalb stören mich feste Pixellayouts, weil sie aus meiner Sicht nur in einem sehr kleinen Bereich von Auflösungen richtig gut aussehen.
W3C-Logo gezoomt
W3c-Logo im Original
Hinzu kommt, dass die Zoomfunktion nur die halbe Wahrheit ist. Denn falls ich ein Layout so anlegen möchte, dass es zunächst auf 1024 festgezurrt wird, später aber auch mittels Zoom auf 1920 gut aussehen soll, so müssten alle Bilder in einer passenden Qualität vorliegen, mit der sie gezoomt noch wie Bilder aussehen. Beispielsweise, das normalerweise sehr schick aussehende W3C-Logo, sieht gezoomt hässlich pixelig aus. Manche Bilder kommen noch ganz gut raus, wenn sie gezoomt werden, jedoch viele Fotos sehen einfach grässlich aus. Dagegen sieht man deutlich, dass auch mehrere Zoomstufen im Firefox dem Text nicht schaden, denn der wird in passender Größe neu erzeugt.
Würde ich auch mit ein, zwei Zoomstufen noch qualitativ gute Bilder wollen, dann geht das natürlich, denn ich kann ja Bilder dementsprechend groß anlegen. Allerdings lassen sie sich dann nicht mehr so stark komprimieren, damit verlängert sich die Ladezeit. Daraus folgt, ich muss mich entscheiden welche Nutzer mir wichtiger sind:
- tolle Bilder auf 1920 für die DSL-Nutzer sind kein Problem
- eine Ladezeit bis “Weihnachten” für alle Nutzer ohne DSL, auch wenn sie noch so kleine Auflösungen nutzen, bei denen sie Bilder dieser Größe gar nicht brauchen
Unterm Strich
Dank Zoom sind Pixellayouts variabler als bisher, wenn ich sie jedoch nutze, habe ich das nächste Problem, weil ich wieder optimieren müsste. Für mich ist der Ansatz des Optimierens auf – welche Auflösung auch immer -nach wie vor falsch, denn genau das nimmt den größten Vorteil, den Webseiten bieten – die Skalierbarkeit – wieder weg.
Dieses Blog lässt sich bei meiner Auflösung 5-mal vergrößern, ohne dass ein Scrollbalken erscheint. Bei Standardeinstellungen erscheint jedoch auch bei 800*600 ebenfalls kein Scrollbalken. Mir gefällt diese Vielfalt an möglichen Voraussetzungen und Einstellungen. Mir persönlich ist es bei Blogs, die einen vollständigen Feed bieten, nicht so wichtig, welche Varianten das Blog bietet, da ich dann ja die Möglichkeit habe, textbasiert mit meiner Lieblingsschrift, in der von mir bevorzugten Schriftgröße zu lesen.
Trotzdem meine ich, es ist unsinnig, wenn Webseiten auf bestimmte Voraussetzungen optimiert werden, denn es gibt einfach nicht _die_ passende Auflösung, Schriftgröße, Zoomstufe oder was auch immer. Diese Optimierungsideen führen dazu, dass es spätestens für mobile Endgeräte wieder eine andere Lösung geben muss.
Mehr Links zum Thema gibts auch im Artikel Plädoyer für flexible Seitenlayouts von Dieter Welzel, unter anderem zum Artikel von Peter Müller das Web ist nicht aus Papier. Ich find’s schade, dass die Zoomfunktionen der Browser für manche Webautoren ein Argument sind, jetzt erst recht auf fixe Layouts zu setzen.
Ich bleibe bei meiner Ansicht, dass es unsinnig ist dem Kontrollzwang für jedes einzelne Pixel zu folgen, statt Websites zu erstellen, die vor allem so gemacht sind, dass die Besucher entscheiden können, wie sie die Seiten nutzen wollen. Für mich ist das der logischere Weg, passend zu allem was natürlich ist, z.B. hier bei uns in Konstanz der Bodensee, der je nach Jahreszeit und Wasserstand mal mehr und mal weniger Platz beansprucht
Aktualisiert am 13.10.08: Einen weiteren guten Artikel zu diesem Thema hat Gerrit von praegnanz.de veröffentlicht.
Ähnliche Beiträge
Wir erstellen Webseiten, Blogs, Webapplikationen und mehr...
Der Beitrag wurde am Donnerstag, den 17. Juli 2008 um 00:02 Uhr veröffentlicht und wurde unter css, web abgelegt.
Dir gefiel der Artikel? Dann abonniere doch den RSS Feed 
oder abonniere die Beiträge per E-Mail. Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen.
Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.
Aktualisierungshinweis mit Link hinzugefügt.
Zitieren
[...] Das kommt drauf an. Je nach Layout vergrößert sich mittels Textzoom ja tatsächlich ausschließlich der Text, eine, z.B. auf – 800 Pixel Breite beschränkte – Seite kann somit nicht breiter als eben diese 800 Pixel werden. Das heißt, selbst wenn auf dem Bildschirm genug Platz wäre, um mittels Textzoom vielfach zu vergrößern, so klappt es häufig nicht, weil der vergrößerte Text keinen Platz mehr hat. Siehe auch die Unterschiede zu festem und flexiblem Layout. [...]
[...] habe mich ja auch schon über Sinn und Unsinn von fixen, fluiden und elastischen Layouts ausgelassen. Allerdings nicht so ausführlich und gut bebildert, wie das Smashing-Magazine [...]