Startseite > Blog > Ein Plädoyer für flexible Seitenlayouts!

Ein Plädoyer für flexible Seitenlayouts!

Aktuell wird im Web die Frage heiß diskutiert, ob fixe (statische, px-basierte) oder flexible (%-basierte) (Seiten-)Layouts besser sind.

Dieses Thema ist besonders stark emotional besetzt. Warum?
Ich glaube, weil hier unterschiedliche „Weltbilder“ aufeinander prallen. Bei den Seitenerstellern neigen Webgrafiker tendenziell eher zu einem fixen Layout, während Webdesigner, die besonderen Wert auf Zugänglichkeit und Barrierearmut legen, tendenziell eher flexible Layouts bevorzugen.

Dirk Jesse, der Erfinder des CSS-Frameworks YAML (= Yet Another Multicolunm Layout), hat die Diskussion mit seinem Blogbeitrag „Flexible Layouts vs. Fixe Layouts – 5:0“ sowie seinem gleichgelagerten Gastbeitrag bei Dr. Web mit dem Titel „Flexible Layouts – die Herausforderung der Zukunft“ angestoßen.
Die vielen Kommentare bei diesen beiden Beiträgen (aktuell im Block von Dirk Jesse 38 Anmerkungen und bei Dr. Web 27 Kommentare) und deren Inhalt sind meines Erachtens ein deutliches Zeichen für die kontroverse und emotional geführte Diskussion.

Das CSS-Framework YAML von Dirk Jesse unterstützt die Erstellung von Webseiten mit fixen, fluiden als auch flexiblen Layouts. YAML wurde für viele Content-Management-Systeme (CMS) wie Typo3, Joomla sowie Drupal und Blogs wie WordPress adaptiert. Auch flexible Grid-Layouts lassen sich mit YAML erstellen (siehe hierzu den Beitrag „Grid-Layouts – sinnvoll umsetzbar mit YAML?“ im Blog von Dirk Jesse und den Beitrag „Grid-Layouts – das neue Tabellenlayout?“ im Blog von Jens Grochtdreis). Damit hebt es sich das CSS-Framework YAML positiv von Blueprint ab, mit dem sich lediglich fixe Grid-Layouts bewerkstelligen lassen.

Über Kommentare zum Gastbeitrag bei Dr. Web mit dem Titel „Flexible Layouts – die Herausforderung der Zukunft“ bin ich auf den Artikel „Flexibles oder statisches Layout?“ bei ProfessorWeb gestoßen. Dort wird angeblich näher auf Vor- und Nachteile fixer und flexibler Layouts eingegangen. Da mich diese „Gegenüberstellung“ nicht überzeugte, möchte ich hier die Vor- und Nachteile der beiden Layoutansätze aus meiner Sicht kurz darstellen. Verbesserungs- und Ergänzungsanregungen nehme ich gerne entgegen.

Pros für fixe Layouts:

  • Für den Seitenersteller sind fixe Layouts regelmäßig leichter als flexible Layouts zu erstellen.
  • Standardmäßig haben Bilder im Web eine in Pixel (px) festgelegte fixe Größe. Das ist für den Seitenersteller einfacher als Bilder skalierbar zu machen, damit nicht nur der Text, sondern auch Bilder sich unterschiedlichen Schriftgraden anpassen und so die Größenrelationen zwischen Text und Bildern erhalten bleiben.
  • Seitenersteller, die Webseiten für Auftraggeber erstellen, werden in der Regel für ein flexibles Layout mehr Überzeugungsarbeit investieren müssen, denn fixe Layouts kennen Auftraggeber durch andere Medien wie Zeitungen, Zeitschriften, Flyer etc schon. Deshalb erwarten viele Auftraggeber eine pixelgenaue Umsetzung ihrer Vorstellungen.

Pros für flexible Layouts:

  • Mit einem flexiblen Seitenlayout lassen sich für die Nutzer gegenüber fixen Layouts zugänglichere und barriereärmere Webseiten realisieren. Insoweit sei hier auf das Kapitel „Das Web ist nicht aus Papier“ aus dem Buch „Little Boxes“ von Peter Müller sowie den Artikel „Webseiten sind keine Gemälde“ von Jens Grochtdreis bei den Webkrauts verwiesen.
  • Flexible Layouts sind gegenüber fixen Layouts zukunftsfester, da sie dem Nutzer für unterschiedliche Ausgabegeräte wie etwa Drucker, Handys und PDAs sowie unterschiedliche Bildschirmauflösungen das notwendige Instrumentarium zur Verfügung stellen. Auch wenn der Medientyp @media handheld leider von den meisten Handys und PDAs nicht unterstützt wird, so ist es doch mit flexiblen Layouts eher möglich, auch für diese Ausgabegeräte zugängliche und barrierearme Webseiten zu erstellen. Dieser Umstand gewinnt beständig an Bedeutung, da die Schere zwischen niedrig- und hochauflösenden Ausgabemedien immer weiter aufgeht.
  • Mit skalierbaren Bildern und einem flexiblen Layout bleiben für den Nutzer die Größenrelationen zwischen Text und Bildern auch bei einer Vergrößerung des Schriftgrades erhalten.

Zusammenfassend fällt auf, dass fixe Layouts Vorteile für den Seitenersteller haben, während bei flexiblen Layouts die Vorteile auf der Nutzerseite liegen. So gesehen ist die Entscheidung für flexible Layouts eine Entscheidung zugunsten des Nutzers.

Das CSS-Framework YAML ermöglicht es Seitenerstellern von beliebigen Spaltenlayouts fixe (px-basierte), fluide (em-basierte) und flexible (%-basierte) Layouts zu bauen. Damit die Lesbarkeit bei flexiblen Layouts nicht zu sehr leidet, kann man min-width und max-width sowie entsprechende Workarounds für den alten IE 5 bis 6 einsetzen.

Mein persönliches Fazit:
Letztendlich bleibt nur die Hoffnung, dass

  • immer mehr Seitenersteller den Nutzer in den Mittelpunkt ihrer Überlegungen stellen und
  • möglichst bald CSS 3 mit Ansätzen wie Rechnen innerhalb von CSS mit calc() und mit zwei Boxmodellen mittels box-sizing kommt und in den Browsern umgesetzt wird. Damit sollte dann das Erstellen und Pflegen von flexiblen Layouts deutlich einfacher werden.

8 Kommentare

  1. ProfessorWeb sagt:

    So gesehen ist die Entscheidung für flexible Layouts eine Entscheidung zugunsten des Nutzers.

    Ich denke, dass es gegenwärtig relativ egal ist, für welche Variante man sich entscheidet.

    Ich denke auch, dass dieser Diskussion zu viel Bedeutung geschenkt wird.

    Abschließende Grüße
    Professor Web
    🙂

  2. Dieter sagt:

    Ich denke, dass es gegenwärtig relativ egal ist, für welche Variante man sich entscheidet.

    Hier widerspreche ich aus folgendem Grund:

    Mit der Einstellung relativ egal wird das Web nicht zugänglicher und barriereärmer! Auch werden die meisten Webseiten dann weiterhin nicht so erstellt, dass der Benutzer im Zentrum der Überlegung steht. Vielmehr wird dann der bequeme Weg für den Webdesigner gegangen bzw. wird der Auftraggeber nicht hinreichend beraten, ganz nach dem Motto: Das haben wir schon immer so gemacht.

    Ein ähnlich gelagertes Problem besteht auch mit der Verwendung von Layouttabellen anstelle von CSS-Layouts.
    So verwendet die Joomla-Webseite von ProfessorWeb beispielsweise noch ein Tabellenlayout, obwohl es für Joomla inzwischen auch CSS-Layouts wie Joomla Beez gibt.
    Aber es soll ja in diesem Sommer einen Relaunch auf ProfessorWeb v2 geben. Wollen wir mal hoffen, dass dann die Benutzer mit einem CSS-Layout beglückt werden.

    Ich denke auch, dass dieser Diskussion zu viel Bedeutung geschenkt wird.

    Das sehe ich völlig anders! Diese Diskussion muss genauso wie CSS-Layout anstelle von Tabellenlayout geführt werden, damit das Web zugänglicher und barriereärmer wird. Das Dr. Web Magazin und das Dr. Web Blog auf Basis von WordPress machen vor, wie man eine optisch und inhaltlich ansprechende Website mit CSS-Layout und flexiblem Layout macht.

    Die ähnliche Namenswahl zu Dr. Web kann da auch zum Handicap werden.

    Grüße zurück
    Dieter

  3. Professor Web sagt:

    Die Tabellenstruktur in Joomla ist nicht abhängig vom Template, sondern vom Joomla-Kern selbst. Die Komponente „com_content“, welche ein fundamentaler Bestandteil ist, hat leider (sogar noch in der neuen 1.5er Version) Tabellen als Basis.

    Nichts destotrotz wird V2 ohne Tabellen kommen!

    Naja gut, ich muss zugeben die Sichtweise CSS vs. Tabellen und Flexibel vs. Fix, liegen schon nah bei einander.

    Was aber ein Unterschied ist, ist die Optik. Dr. Web und auch Dein Blog sind nicht unbedingt Paradebeispiele für einen optisch hochwertigen Blog. Klar kann man argumentieren, dass die Beiträge selbst im Vordergrund stehen, aber ich pers. sehe das so wie mit dem Essen: Das Auge isst mit, da kann es so toll schmecken wie es wolle 🙂

    Das soll nicht heißen, dass man mit flexiblen Layouts nichts schönes hinbekommt, man ist aber dennoch in gewisser Hinsicht eingeschränkt.

    Eine solche, optische Einschränkung gab es bei Tabelle vs. CSS nicht.

    Ich will mich aber nicht als unbelehrbar hinstellen, vielleicht wird V3 von meinem Blog auch flexibel werden 🙂

    Die Namensgebung strebt im Übrigen nicht an irgendwie Konkurrenz zu Dr. Web zu sein. Im Gegenteil.

    ProfessorWeb dient mir primär als Archiv mit dem Vorteil, dass andere auch etwas davon haben können.

    Gruß
    Armin
    Professor Web

  4. Dieter sagt:

    Nichts destotrotz wird V2 ohne Tabellen kommen!

    Na, das sind doch gute Nachrichten und schau ich mir gerne an, wenn es soweit ist. 🙂

    Dr. Web und auch Dein Blog sind nicht unbedingt Paradebeispiele für einen optisch hochwertigen Blog.

    Bezüglich meines Blogs liegst Du da richtig. Hier gestehe ich, dass ich bezüglich Grafikdesign Defizite habe, deren Abbau auf meiner ToDo-Liste steht. Allerdings sind da auch teilweise die Beschränkungen des Internet Explorers 5 bis 6 (z.B. kennt er kein position:fixed) sowie des bisherigen CSS 2.1-Standards und dessen Umsetzung in den Browsern Schuld. Erst mit CSS 3 sind beispielsweise „rounded corners“ und skalierbarer Hintergrundbilder direkt möglich. 🙁
    Ich sehe es nicht ein, lediglich für optische Spielereien meinen Quellcode aufzublähen. Ich folge da auch der Devise: Form follows function. 🙂

    Ich will mich aber nicht als unbelehrbar hinstellen, vielleicht wird V3 von meinem Blog auch flexibel werden 🙂

    🙂 Offensichtlich hat die Diskussion trotz oder gerade aufgrund meiner provokativen Art etwas gebracht. Ich habe die Erfahrung im XHTML-Forum gemacht, dass dortige provokative Kritik an Schwächen meiner Website mir geholfen hat, diese wahrzunehmen und zu verstehen (z.B. mit dem Stichwort „Monsternavigation“).

    Die Namensgebung strebt im Übrigen nicht an irgendwie Konkurrenz zu Dr. Web zu sein. Im Gegenteil.

    ProfessorWeb dient mir primär als Archiv mit dem Vorteil, dass andere auch etwas davon haben können.

    Dieser altruistische Ansatz ehrt Dich. Auch wenn die Namensgebung nicht im Zusammenhang mit Dr. Web steht, so wirkte es auf mich allein aufgrund der Namensgebung und der Inhalte so. Mit dem Hinweis darauf, dass die ähnliche Namensgebung ein Handicap sein kann, wollte und will ich lediglich auf die Risiken aufmerksam machen, die eine solche Namensgebung mit sich bringen kann.

    Gruß zurück und einen schönen Tag wünschend
    Dieter

  5. datenkind sagt:

    Hallo Dieter.

    Leider ist deine Seite tatsächlich kein Paradebeispiel für flexible Layouts. Dadurch, dass dein Inhaltscontainer sich unendlich verbreitern kann, erzeugt er elendig lange Textzeilen, die es schier unmöglich machen, gelesen zu werden.
    So muss ich als Nutzer das Fenster kleinziehen, damit ich etwas lesen kann, ohne drei Mal die Zeile zu verwechseln (überspitzt).
    hier stellt sich also die Frage, inwiefern ein felxibles Layout überhaupt noch benutzerfreundlich ist, wenn man ihm keine Höchstgrenzen gibt. In deinem Falle ist die Wahl keiner Grenze eine Entscheidung gegen den Nutzer.
    Ich muss das Fenster auf rund 850 px verkleinern, damit ich eine halbwegs angenehme Zeichenzahl von rund 80 (wobei das schon absolute Oberschmerzgrenze darstellt!) erhalte. Lass ich es in meiner „Standardgröße“ (als Mac-User geht man dazu über, dass Fullscreen Blödsinn ist), dann liege ich bei rund 160 Zeichen, also dem Doppelten. Nutzerfreundlich? Nee, ist defintiv was anderes.

    Ich würde also eher an diesem Punkt ansetzen, als groß grafisch aufzupolieren. Außerdem verbietet dir niemand, Rounded Corners zu nutzen. Mache ich auch, ausgelagert in einem separaten Stylesheet, was mir somit nicht mein Haupt-CSS invalide macht. Mehrwert für den Nutzer mit modernen Browser bieten ist nicht verboten.

  6. Dieter sagt:

    Hallo Christoph,

    Dadurch, dass dein Inhaltscontainer sich unendlich verbreitern kann, erzeugt er elendig lange Textzeilen, die es schier unmöglich machen, gelesen zu werden.

    Herzlichen Dank für Deinen Hinweis. Ich werde demnächst hier minwidth und maxwidth einsetzen. Dank dem YAML-Theme Blitzblank sollte das für dieses Blog kein Problem sein.

    Außerdem verbietet dir niemand, Rounded Corners zu nutzen.

    Das ist richtig, aber eine valide CSS-Lösung ohne zusätzliche Tricks mit in der Regel zusätzlichen DIVs und Grafiken kenne ich leider nicht. Das wird meines Wissens wohl erst mit CSS3 Standard.

    Mache ich auch, ausgelagert in einem separaten Stylesheet, was mir somit nicht mein Haupt-CSS invalide macht. Mehrwert für den Nutzer mit modernen Browser bieten ist nicht verboten.

    Diese Technik nennt sich progressives Enhancement und finde ich gut. Nicht völlig unproblematisch finde ich deren Einsatz, wenn man damit keine validen Stylesheets mehr erhält. Ups! Habe eben gerade erst festgestellt, dass ein PlugIn meines Blogs ebenfalls eine nicht valide CSS-Datei mit -moz verwendet. Werde deshalb das PlugIn deaktivieren oder die CSS-Datei abändern.
    So gesehen verbietet sich der Einsatz von -moz… und -webkit… und wäre es angezeigt auf CSS3 zu warten.
    Unproblematisch erscheint es mir dagegen, Browser wie den Netscape 4.x und Internet Explorer 4 mit @import von CSS-Dateien auszuschließen, die ihnen nur Probleme bereiten würden.

    Beste Grüße
    Dieter

  7. Elmar sagt:

    Hallo,
    bin auch ein Freund flexibler und flüssiger Layouts. Was spricht eigentlich dagegen JavaScript zur Begrenzung unendlich breiter oder flexibler Layouts zu verwenden? Und wenns nicht aktiviert ist, bekommt man halt eben eine Standardbreite verpasst.
    Kompromisse müssen doch immer wieder gemacht werden. Ein Bild unendlich zu vergrößern, nur daß das Verhältnis stimmt, ist ja auch nicht das gelbe vom Ei. Soviel ich weiß hat die bei manchen Webseiten eingeblendete Werbung auch nur eine feste Breite.
    Zum Glück können fixe und flexible/flüssige Layouts auch gemischt werden. Bin der Meinung das man je nach Anwendung, sich für das geeignetste Layout flexibel entscheiden sollte.
    Den Artikel finde ich sehr verständlich geschrieben.
    Grüße aus dem Saarland
    Elmar

  8. Dieter sagt:

    Hallo Elmar,

    gegen den generellen Einsatz von JavaScript zur Begrenzung unendlich breiter oder flexibler Layouts spricht meines Erachtens, dass die meisten Browser die CSS-Eigenschaft min-width und max-width kennen und richtig interpretieren, so dass man da nicht auf JavaScript ausweichen muss. Es geht dabei um Gestaltung und dafür ist CSS zuständig. JavaScript soll dagegen Dynamik erzeugen.

    Nur für den IE 5 bis 6 ist im Bedarfsfalle der Einsatz von JavaScript bzw. sog. IE Expressions erforderlich.

    Übrigens sind meine Webseiten bisher ein Mischung aus flexiblem und liquidem Layout. Die Seitenbreite ist flexibel, also in Prozent festgelegt, während ich die Breite der schmalen Spalte (= Sidebar) in em definiert habe (= liquid). Das habe ich gemacht, damit das Layout auch bei großen Schriftvergrößerungen gut erhalten und damit zugänglich bleibt.

    Freut mich, dass mein Artikel aus Deiner Sicht sehr verständlich geschrieben ist.

    Als nichtgewerblicher Webseitenersteller muss ich nicht die Problematik gewerblicher Webdesigner berücksichtigen, die oft (potentielle) Kunden haben, die ein fixes Layout wollen. Und da bekanntlich der Kunde König ist und flexible Layouts regelmäßig mehr Arbeit machen, glaube ich, dass sich flexible Layouts nur langsam durchsetzen werden.

    Grüße zurück aus Siegburg
    Dieter

1 Ping

  1. Browserzoom ::: fixe und flexible Layouts ::: neue Trends im Webdesign? » miradlo bloggt

Hinterlasse eine Antwort

Deine Mailadresse bleibt geheim. Pflichtfelder sind mit * gekennzeichnet.

Kommentare prüfe ich grundsätzlich vor einem Freischalten!
Ich bitte um Verständnis für diese Spamschutz-Maßnahme.

Webseite veröffentlicht am Montag, den 16. Juni 2008, um 03:13 Uhr,
zuletzt geändert am Freitag, den 3. Dezember 2010, um 15:19 Uhr.
Tags: , , ,


Statistik: 71 Seiten, 346 Blogartikel, 1.069 Schlagworte, 1.311 Kommentare.
© 2002 - 2016 | WordPress - Mein Layout basiert auf YAML und wird durch Xtreme One angetrieben. 
Diese Website setzt Cookies ein (Datenschutz). Wenn Du diese Website weiterhin besuchst, erklärst Du Dich mit deren Verwendung einverstanden.

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen