Skip to content

Browserzoom ::: fixe und flexible Layouts ::: neue Trends im Webdesign?

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.
  • valides XHTML nach W3CW3C-Logo gezoomt
  • pixeliges Logo nach zoomenW3c-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.

Trackbacks

Zoom im Browser ::: Textzoom ::: Seitenzoom ::: Bilder » miradlo bloggt am :

"" vollständig lesen
[...] 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. [...]

Kurz und gut XVI : Linktipps  miradlo bloggt   am :

"" vollständig lesen
[...] 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 [...]

miradlo bloggt am : Flexible oder pixelgenaue Layouts : Ursachen und Gründe

"Flexible oder pixelgenaue Layouts : Ursachen und Gründe" vollständig lesen
Ich habe heute in der Linkliste auf zwei Beiträge zu flexiblen Layouts hingewiesen. Flexible Layouts haben ihre Vorzüge, trotz Seitenzoom der Browser Ein weiterer Artikel meint es wäre gut nicht über die flexiblen Layouts zu streiten, sondern s

Kommentare

ute am :

ute Aktualisierungshinweis mit Link hinzugefügt.

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck