Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Gastautor 12. Juni 2008

Flexible Layouts – die Herausforderung der Zukunft

Kein Beitragsbild

Ein Gastbeitrag von Dirk Jesse, Erfinder von YAML, was im letzten Abschnitt deutlich wird. Der Beitrag wurde von Vitaly Friedman bearbeitet und erscheint demnächst in englischer Sprache im Smashing Magazine.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Die aktuelle Browsergeneration mit Firefox 3, Opera 9 und dem Internet Explorer 7 kommt mit einem Feature daher, welches auf den ersten Blick die Arbeit für Webdesigner in der Zukunft um ein Vielfaches einfacher machen könnte – dem Seitenzoom. Anstelle der Möglichkeit, die Schriftgrößen einer Webseite nachträglich zu vergrößern, skaliert die neue Technik das gerenderte Layout samt Bildern und Hintergrundgrafiken proportional. Dadurch wird jedes pixelbasierte Layout „skalierbar“, Inhalte brechen nicht mehr aus ihre Boxen aus, Inhalte überlagern sich nicht plötzlich, nur aufgrund des eingestellten Zoom-Faktors – reale Vorteile der neuen Technik.

Anzeige

Doch ist die neue Zoomtechnik wirklich so vorteilhaft, dass wir keine flexiblen Layouts mehr benötigen? In Blogs in aller Welt stellen sich Webentwickler wieder häufiger die „ewige“ Frage des Webdesigns und beantworten sie mit „Ja“. Die Entwicklung eines fixen Layouts geht dem Webdesigner leichter von der Hand, sie erlauben pixelgenaue Postionierung (der Traum vieler Grafiker) und der Anwender kann sich das Layout jederzeit auf seine Wunschgröße zoomen.

Ich denke nicht, dass dieser Weg zu besseren und zugänglicheren Webseiten führt und möchte deshalb in Erinnerung rufen, warum flexible Layouts heute und in der Zukunft mehr den je eine Daseinsberechtigung haben.

Wo der Seitenzoom nicht weiterhilft …

Der entscheidende Unterschied zwischen fixen Layouts (px-basiert) und flexiblen Layouts (%-basiert) ist, dass Sie sich im Rahmen der vom Designer festgelegten Grenzen automatisch der Breite des Browserfensers anpassen und sich dadurch ohne Zutun des Anwenders perfekt an unterschiedliche Fensterbreiten und Ausgabemedien anpassen können. Fixe Layouts können dies nicht. Der Seitenzoom ermöglicht dem Anwender lediglich, die vom Browser gerenderte Webseite nachträglich in Eigeninitiative seinen Bedürfnissen anzupassen. Und bedenken Sie auch, selbst heute noch hat der IE6 eine Verbreitung von ca. 40%, womit fast jeder zweite Anwender nicht einmal diese Möglichkeit hat.

In der nahen Zukunft müssen wir laut w3schools.com mit höheren Auflösungen als Standard rechnen.

Noch problematischer ist das Vertrauen in den Seitenzoom und die Selbstständigkeit der Anwender aus Sicht der Barrierefreiheit, denn es transportiert unterschwellig die Botschaft: Lieber Anwender, Dein Browser kann mein fixes Layout doch zoomen – also hilf Dir selbst! Mit diesem Argument verleitet sehr schnell, den bequemen Weg zu gehen auf Kosten der Zugänglichkeit. Denn 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. Und bedenken Sie: Um ein fixes Layout mit einer Breite von 960 Pixeln auf 150% zu zoomen und es weiterhin ohne horizontale Scrollbalken geniessen zu können, bauchen Sie eine Auflösung von 1440px und einen Browser im Fullscreenmodus. Soll sich das Web wirklich in diese Richtung entwickeln?

Flexible Layouts sind zu aufwändig und durch dem Seitenzoom wird eh jedes fixe Layout skalierbar.

Richtig, es wird skalierbar – aber eben nicht flexibel. Also warum muss der Browser etwas korrigieren, was wir bei der Layouterstellung selbst in der Hand haben?

Flexible Layouts sind unkontrollierbar? Von wegen!

Wann immer jemand gegen flexible Layouts argumentiert, kommt folgende These zu Beginn jeder Diskussion:

Bei flexiblen Layouts läuft der Text beim Aufziehen des Browserfensters unkontrolliert in die Breite, was ihn letztlich unansehnlich und schwer lesbar macht.

Dieser Umstand ist sicherlich unschön anzusehen (s. Bild unten), doch Schuld daran ist der Ersteller des Layouts, nicht die flexible Breite. Denn für attraktives flexibles Webdesign hat der CSS-Gott die Eigenschaften min-width und max-width erschaffen. Und schon hören wir die Zwischenrufe, dass der IE6 diese Eigenschaften doch nicht unterstütze. Na und? Der IE6 hat auch Eigenarten wie hasLayout und ein fehlerhaftes Float-Modell. Hält das irgend jemanden davon ab, Layouts für diesen Browser zu erstellen? Zur Simulation von max-width gibt es zahlreiches Workarounds (JS Expressions), für min-width sogar einige reine CSS-Lösungen. Halt, Stop! JavaScript könne deaktiviert sein! Auch das stimmt, jedoch wird ein flexibles Layout ohne max-width nicht automatisch unbenutzbar, es wird im schlimmsten Fall etwas breiter – Progressive Enhancement ist doch wirklich was feines, also setzt es doch auch ein.

So gestalten Sie die Breitenangaben eines flexiblen Layouts optimal:

  • Layoutbreite: Verwenden Sie width:auto oder eine beliebigen Prozent-Wert, damit sich das Layout automatisch der verfügbaren Breite des Browserfensters anpasst.
  • Minimale Breite: Verwenden Sie einen Wert in der Einheit Pixel (z.B.: 760px). Auf diese Untergrenze sollten Sie alle pixelbasierten Inhalte abstimmen, sodass sie auch bei minimaler Layoutbreite noch fehlerfrei positioniert werden können.
  • Maximale Breite: Verwenden Sie hierfür einen Wert in der Einheit EM (z.B. 90em). Dadurch haben Sie den Textfluss immer unter Kontrolle, d.h. Absätze werden nicht übermäßig breit. Gleichzeitig skaliert der Maximalwert mit der Schriftgröße.

Und bedenken Sie auch, wir haben als Webdesigner nicht wirklich die Kontrolle über das Layout. Über die Darstellung entscheidet maßgeblich der Anwender durch Browserwahl, Schriftgrößeneinstellungen (gern auch direkt über das 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 Internet.

Die heilige Photoshop-Vorlage …

Das wohl häufigste Argument für den Einsatz fixer Layouts sind die Photoshop-Vorlagen der Grafiker und der Wunsch des Auftraggebers nach pixelgenauer Umsetzung. Da sei kein Spielraum für Diskussionen oder Abweichungen von der Vorlage. Dieses Argument wiegt wirtschaftlich gelegentlich schwer, doch es ist mit Sicherheit nicht immer im Sinne der Anwender.

Das Layout soll ja nach der Fertigstellung nicht nur einen schönen Screenshot im eigenen Portfolio abgeben sondern dem Anwender einen möglichst attraktiven und gleichzeitig ungehinderten Zugang zu den Informationen der Seite bieten. Werfen Sie einen Blick in eine der zahllosen CSS-Galerien testen Sie die verlinkten Layouts. Nur allzu oft verblasst die Attraktivität pixelbasierter Designs im Angesicht der Funktion zur Schriftskalierung im Browsers. Texte werden abgeschnitten oder brechen aus dem Layoutraster aus, dass lediglich durch opulente Hintergrundgrafiken vorgegaukelt wird. Nicht in jedem Fall lässt sich eine Designvorlage in ein flexibles Layout umwandeln aber in vielen Fällen ist es den Versuch oder zumindest eine Überlegung wert. Transparenzen, kleinformatige Muster, geschickt als Hintergrundgrafiken verwendete Farb- und Graustufenverläufe können in Zusammenarbeit mit einem guten Grafiker zu exzellenten Ergebnissen führen.

In den meisten Fällen entwerfen wir Webseiten nicht, um ein Design zu präsentieren, sondern mithilfe des Designs sollen Inhalte bestmöglich präsentiert werden. Grafisch anspruchsvolle flexible Layouts verlangen sicherlich ein höheres Maß an Planung und Verständnis für die möglichen Schwierigkeiten bei Grafikern und Webdesignern. Aber diesen Aufwand kommt allen Anwendern zugute und macht das Design ein großes Stück medienunabhängiger.

Handy-Browser – Denn sie wissen nicht, was sie tun

Nun ja, über das Thema Mobiles Internet und die damit verbundenen größeren und kleineren Probleme lässt sich sicher endlos philosophieren. Noch vor einem Jahr hatte mein damaliges Handy zwar Internet-Zugriff, war zum browsen jedoch kaum zu gebrauchen. Dank meines iPhones hat sich dies mittlerweile gravierend geändert. Noch vor nicht allzu langer Zeit war das CSS Mobile Profile mit dem Medientyp @media handheld der erhoffte Heilsbringer, doch bis heute unterstützt kaum ein Handy diesen Standard. Und mal ehrlich: wir wollen auch gar keine abgespeckte, und schlecht optimierte Online-Version sehen. In den letzten zwei Jahren haben Mobilbrowser (z.B.: Opera Mini oder Safari auf dem iPhone) stark aufgeholt und rendern mittlerweile ganz selbstverständlich das normale Screenlayout – weitgehend fehlerfrei, versteht sich. Mein iPhone, zum Beispiel, passt flexible Layouts automatisch optimal dem Hoch- oder Querformat an, während wir Seiten mit fixem Layout ein ums andere Mail aufzoomen müssen, damit sie den Bildschirm voll ausfüllen. Und was für mobile Geräte gilt, gilt ebenso für Drucker: Nur komischerweise widerspricht hier in der Regel niemand, wenn man von den Vorteilen der Flexibilität bei der Druckausgabe redet – obwohl es sich für den Browser nur um ein weiteres Ausgabemedium mit etwas anderen technischen Daten darstellt. Woran das wohl liegt? Durch flexibles Design kann bei der Druckausgabe das Blattformat (Portrait / Landscape) optimal ausgenutzt werden.

Der Verzicht auf ein fixes zugunsten eines flexiblen Layouts verbessert also nicht nur die Zugänglichkeit am Desktop-PC sondern bewirkt ohne zusätzliche Handgriffe eine weitgehend medienunabhängig robuste und fehlerfreie Darstellung. Denn durch Vorgabe von flexibler Gestaltungsregeln (Relative Maßeinheiten, Mindestabstände, Ausrichtung usw.) anstatt fester Pixelvorgaben, kann der Browser beim Rendering auf die Wünsche des Nutzers bzw. auf die Eigenheiten des Ausgabemediums eingehen.

Die Zukunft, das unentdeckte Land

Wie eben angesprochen, das mobile Internet wird immer wichtiger werden. Fangen wir deshalb wieder an, Layouts für 640×480 oder 800×600 Pixel zu optimieren, oder? Die Bildschirmauflösungen wachsen rasant, die Preise für hochauflösende LCDs fallen weiter. Parallel dazu steigt eben der physikalische Auflösung der Geräte auch die Punktdichte (dpi) 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.

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. Wir brauchen relative Maßeinheiten im Webdesign, wenn wir diese Vielfalt im Griff bekommen wollen.

Ein Lösungsansatz … YAML

YAML („Yet Another Multicolumn Layout“) ist ein (X)HTML/CSS Framework, das speziell für die Anfordungen flexibler Layouts entwickelt wurde. YAML wurde erstmals im Oktober 2005 veröffentlicht, damals noch ausschließlich in deutscher Sprache. Seit Juni 2007 steht das Framework in der Version 3 mit einer Dokumentation in Englisch und Deutsch zur Verfügung. Die meisten CSS-Frameworks wie etwa Blueprint CSS oder YUI Grids stellen dem Anwender ein System aus CSS-Klassen zur Verfügung, mit denen er auf einfachem Wege Grid-basierte Layouts erstellen und nach seinen Vorstellungen optisch gestalten kann. Dabei erstellt der Anwender sein Layout, indem er eine HTML-Struktur entwirft und die CSS-Klassen des Frameworks den Containern zuordnet, vom CSS Raster hält er sich hingegen fern.

YAML geht einen anderen Weg. Das Framework unterstützt sowohl die Erstellung spaltenbasierter Layouts als auch die Erstellung eines Grids – jeweils mit dem Focus auf flexible Layouts. Für spaltenbasierte Layouts stellt es eine Quelltextstruktur mit 3 Spalten, Header und Footer zur Verfügung, die vom Anwender durch Löschen nicht benötigter HTML-Elemente an seine Wünsche angepasst werden kann. Die eigentliche Gestaltung, die Anordnung der Spalten (Stichwort: any ordered columns) erfolgt ausschließlich per CSS. Klarer Vorteil für den Designer ist die Gestaltungsfreiheit und freie Wahl der Maßeinheiten. Auf der Grundlage der HTML-Struktur fängt YAML den Großteil der bekannten IE-Bugs präventiv ab, und erleichert damit die Layouterstellung und das Bugfixing für eine Vielzahl möglicher Layoutvariationen.

Einen Überblick über die grundsätzlichen Positionierungsmöglichkeiten liefern die mitgelieferten Layoutbeispiele. Weiterhin stellt YAML ein Set an flexiblen, verschachtelbaren Grid-Bausteinen zur Verfügung, mit denen die Raumaufteilung innerhalb der Spalten weiter untergliedert werden kann oder mit dessen Hilfe komplexe flexible Grid-Layouts erstellt werden können. Als Beispiel können Sie sich die Demo-Seite von Blueprint CSS anschauen, die von von Dirk Jesse mithilfe der flexiblen Grid-Elementen von YAML nachgebaut wurde: überzeugen Sie sich selbst. Die Skalierung funktioniert selbst im IE 5.5, samt min-width und max-width. Neben der Layoutgestaltung liefert YAML Stylesheets für das Drucklayout, sowie Bausteine zur Erstellung flexibler horizontaler und vertikaler Navigationen.

YAML erfordert aufgrund seiner Funktionsvielfalt und der Komplexität flexibler Layouts zwangsläufig eine gewisse Einarbeitungszeit. Das Konzept hinter YAML wird jedoch in der Online- und PDF-Dokumentation ausführlich erläutert, um den Anwender mit den zahlreichen Features und Freiheiten, sowie deren effektivem Einsatz vertraut zu machen. Für die praktische Anwendung des Frameworks und schnelle Ergebnisse steht zusätzlich mit dem YAML-Builder ein praktisches visuelles Werkzeug bereit, mit dem Anwender die Quelltextstruktur und grundlegende CSS-Einstellungen in einer komfortablen Drag & Drop-Oberfläche entwerfen können. Der YAML-Builder generiert auf Knopfdruck den HTML- und CSS-Code Layouts, einschließlich der JS-Expressions für die Simulation von min-width und max-width (ebenfalls für beliebige Maßeinheiten).

46 Kommentare

  1. Man kann z.B. in „Artisteer“ unter „Layout“ die Seitenbreite fix oder „fluid“ einstellen, allerdings sind die Ergebnisse nicht perfekt.

    Man muss zum einen die Breite in Prozent angeben, und dann die minimale und maximale Breite.

    Ich testete es mit 100%, min. 648 und max. 972, und exportierte zum WordPress-Theme.
    Das wären 720 bis 1080 minus 10%.
    Das Menü soll nicht bis an den Rand reichen.
    Evtl. habe ich da auch was falsch verstanden.
    Auf 1024×768 sind zwar alle Menüelemente zu sehen, aber der Menübalken geht bis an den Rand.
    Und der Webseitentitel ist links und Rechts aus dem Bild.
    Und das, obwohl es 1024 Breite ist.

    Wenn man allerdings das Browserfenster mit der Maus in der Breite verkleinert, dann schaltet er irgendwann auf eine alternative Ansicht um.
    Die zwei Wörter des Titel stehen dann untereinander, und die Menüelemente sind über einen zentralen Button zu öffnen.
    Das kann man für die kleineren Auflösungen noch akzeptieren, besser als fehlerhafte Darstellung.
    Allerdings passiert das auch wenn man auf einem Samsung-Windows-Tablet hochkant dreht, und die Native Auflösung ist 1366×768. Also über dem Minimum.

    Gibt es aktuell DIE empfehlenswerten Werte für Prozent, Minimum und Maximum?

    Die Alternative ist die fixe Breite.
    Z.B. 720, bzw. 648 (-10%), damit der Menübalken nicht bis zu den Seiten geht. Unter 648 Breite haben die Nutzer dann halt mobil Pech gehabt.
    Ja, der Webseitentitel soll noch etwas über Anfang und Ende des Menübalken ragen.
    Allerdings wird es dann auch eng mit der Anzahl der Menüs.
    Man muss für die Elemente auch noch das „Horizontale Padding“ (Abstand zwischen den Menüpunkten) wählen.
    Wenn man bis zum Maximum geht (eine Stufe bevor der letzte Menüpunkt in eine neue zweite Zeile rutscht), ist das Problem dass wenn man z.B. per „qtranslate x“ eine Übersetzung der Menüpunkte vornimmt, nur ein Buchstabe mehr (z.B. Medien statt Media) dafür sorgt, dass nun dort die Darstellung auf zwei Zeilen verteilt wird.
    Mit dem Webseitentitel über den Menüpunkten, so dass sie nicht mehr anklickbar sind…
    Also nicht nur ein optischen Problem (aber schon das sieht übel aus).

    Wenn die Browser heute skalieren können, dann sollte das auch automatisch geschehen, statt eine Webseite zu verunstalten.
    Man könnte ja in die Knopfleiste des Browser einen dann blinkenden Knopf mit einem kurzen „Baloon-Hinweis“ einbauen, dass der Nutzer es dann deaktivieren kann. Diese Deaktivierung wird dann im Browser für diese Seite bei der Bildschirmauflösung gespeichert.

  2. Lustig!

    solange es um bauernseiten wie doctor web geht
    is es doch egal ob fix oder flex.

    würden die programieren und die hersteller sich zusammen setzen-gäbe
    es diese steinzeitbrowser gar nicht mher-und eine comon universal sprache
    würde die absolute freiheit der gestaltung erlauben.
    einschalten-gucken-aus.
    99% der intenetseiten sind auf 2 designs zurück zu führen-und gerade die
    css-ler qatschen den ganzen tag- geht doch..
    und in 3 oder 4 jahren war alles nur noch app-keine sau wird mehr
    web oder so… vorgestern. echt vorgestern.

  3. Toller Ansatz, vielen Dank!

  4. Interessante Diskussion…aber auch mir ist nicht bekannt, dasBilder vernünftig skaliert werden können…somit ist ein komplett flexibles Layout recht schwierig

  5. Ist zwar arg spät, aber ich habe es heute erst entdeckt während meiner Suche nach Artikel über Layouts in em.

    Als Erstes sorry für die Rechtschreib- und Grammtikfehler, aber ich bin Niederländer.

    Ich muss erstens sagen, dass der Artikel mich sehr interessiert hat, aber dass es auch wirklich die Verherrlichung von YAML ist. Fast religiös…

    Ich bin kein Freund von pixelgenaue Layouts und die habe ich so ungefähr vor 4 Jahren langsa,m aber stetig den Rücken gekehrt.

    Bis Dato habe ich meine Webseiten in % erstellt, was zur Folge hat dass meine Freunde (die sich nun wirklich alle mit der Handhabung eines Computers auskennen) mir sagten dass es tierisch nervt, wenn sich dann Texte in die „Ewigkeit“ ziehen.

    Ich denke wirklich dass man eine gewisse Breite des Designs ruhig festlegen darf, damit User die mit 1024×768 durch das Internet hoppeln, die Seite komplett ohne Scrollbalken am unteren Fensterbrowser sehen. Die Leute, die dann unbedingt mit 1600 Bildschirmauflösung mit maximale Fenstergrösse Surfen müseen, haben dann echt Pech gehabt.

    Auch mit ein min-width & max-width lege ich „Grenzen“ fest und „bevormunde“ den User. Aber wenn ein Verlag in bestimmtes Buch in eine extrem kleine Schriftgrösse druckt, kann der geschätzte Leser auch nicht irgendwo auf dem Buchrücken ein Knöpfchen drücken und die nach seinen bedürfnisse anpassen.

    Was die Barrierefreiheit anbelangt, finde ich langsam dass es zur hysterie wird. Man benimmt sich mittlerweile dermassen bemutternd, als ob jeder mit ein Handycap leicht debil wäre.

    Falsch! Derjenige kann nicht sehen (oder sieht anders als die meisten Menschen) oder er kann seine Motorik nicht kontrollieren. Das macht ihm aber nicht geistig minderbemittelt! Und ich bekomme das Gefühl, dass Viele sagen „Ach der arme kleine Blinde/Spastiker. Er kann nicht mitmachen. Na dann sind wir doch nett und lassen ihm auch spielen.“

    Das kenne ich von meinem Ex-Freund der als Verkäufer gearbeitet hat und der sich immer aufregte, wenn die Begleitperson sagte was der Mann im Rollstuhl für eine Hose will, ohne dass der Mann im Rollstuhl zu Wort kam. Danns agte mein Ex „Wollen Sie die Hose, oder der Herr? Dann kann ich mich ja mit ihm unterhalten. Er kann zwar nicht laufen, aber sehr wohl reden, oder?“

    Mittlerweile glaube ich, dass viele Webdesigner nur zeigen wollen „Schau her! Ich kann barrierefreie Webseiten basteln! Bin ich kein Crack? bewubdert mich“, anstatt wirklich den Anspruch zu haben, es eine Gruppe von Internetuser zu erleichtern Informationen zu erhalten. So wie vor ein paar Jahren jeder unbedingt ein Flash-Intro haben musste, nur um zu zeigen dass er ein bisschen Flash gesehen hat.

    Menschen mit einer körperlichen Behinderung sind genau so blöde oder genau so intelligent wie jeder andere Internetbesucher. Mit dem Unterschied, dass diese Leute meistens spezielle technische Vorrichtungen haben die das Surfen im Internet für Ihre körperliche(!) Einschränkungen komfortabler machen.

    Ich wage sogar zu behaupten, dass diese User ein Tick pfiffiger unterwegs sind als der Otto Normalsurfer, weil sie wissen wie eingeschränkt sie sind und Erfahrung damit haben.

    Überdies ist es völlig egal ob eine Seite pixelgenau oder fluid gestaltet wurde, denn es kommt auf die Sturkturierung das (X)HTML Dokuments an, weil die User die wirklich Blind sind und ein Screenreader verwenden, sowieso keinen Schimmer haben, wie die Seite aussieht… Und wenn alles in dem Dokument ordentlich gegliedert und eine logische Reihenfolge hat und die richtige Tags (H1, Q, abbr, ect.pp) eingestzt wurden und man bei Links einen Title, bei Bilder einen alt mitgibt und irgendwo oben skip-links einbaut, ist alles wunderbar.

    Man kann es ansonsten wirklich übertreiben mit der Rücksichtnahme und wenn man wirklich nur noch darauf achtet, leidet der Besucher ohne Behinderung weil man in seine Gestaltung sehr eingeschränkt ist.

    Was „normale“ User angeht, habe ich keine Illusionen. Der durchnitts User denkt dass Windows ein Browser ist („Welchen browser nutzen Sie?“ „Windows“ *heul*) und nicht Wenigen geben bei Google die komplette URL ein um auf eine Seite zu gelangen.

    Es gibt erschreckend viele Menschen die nicht mal copy-and-paste kennen und die „komische Knöpfchen“ im Browser haben sie zwar gesehen, aber „da gehe ich nie ran, man weiss ja nicht was man alles kaputtmachen kann“. Viele User haben regelrecht Angst vor dem PC und denken bei jeden Tastendruck oder Buttonklick, dass sie etwas „kaputt machen“ können.

    Eine andere Sache ist die der Browser selbst. Wenn es nach einigen Webdesigner ginge, würden wir noch für Netscape 4.7 und IE3 Seiten basteln.

    Dann nehmen wir doch mal die beispiele WII und was es sonst nich an Spielie-Dingsies gibt. Dort bekommt man haargenau vorgeschrieben, welchen TEUREN Software man gefälligst zu kaufen hat, damit man das TEURE Spiel auch spielen kann. Es wird ÜBERHAUPT keine Rücksicht genommen und der Kunde bekommt „Friss‘ oder stirb!“ gesagt.

    Genauso mit Fernsehenr, DVD- oder Blu-Ray-Player. Entweder packst Du die bedienung, oder du hast Pech gehabt.

    Aber wir müssen jeden Trottel gefallen und jeden User, der sich zwar den feinsten Laptop kauft, aber sich nicht damit befasst, es so einfach wie möglich machen. Dan soll er sich auch den neuetsen Browser runterladen, die GRATIS ist. Man kann ja Firefox anpreisen auf seine Webseite und sogar die Vorzüge in einem Artikel kundtun.

    Ich bin dafür, dass man ein default.css macht und parallel (je nachdem wie de Farben des default Design sind) ein Design mit grossen Kontrast, die man mittels ein Styleswitcher aktivieren kann (Ich weiss, das geht über JS und funzt nicht wenn das deaktiviert ist, und IE Nutzer sind dann arm dran. Aber man einfach nicht ALLEN Herren dienen!). Darüberhinaus mache ich gerne ein Print.css die nur die Hauptbeiträge zeigt. Diesen wandle ich dann nochmal um, sodass auf die „zweite“ Version die Navigation zu sehen ist (als einfache Textlinks ganz oben am Dokument). Die ermöglicht dann Besucher die Texte ohne Bilder (ausser die in den Beiträge) zu lesen und durch die beiträge der Website zu surfen.

    Ansonsten teste ich meine Seiten in Lynx, den IBM-Screenreader und lasse mittels kleine Porgramme die Farben testen für User die Blau-, Rot-, Grün- oder Farbblind sind oder die grauen Star haben (Colour Contrast Analyzer. Nettes Tool!). Und natürlich das Web Developer Tool, Firebird und Fangs für Firefox.

    Was vielleicht nicht schlecht wäre, wäre ein Browser Tutorial mit ein paar Screenshots und die Anleitung wie man IE und Co bedient. Da könnte man dann auch die Features der Seite erklären. Damit die User nicht dumm sterben ;-)

    Meiner Meinung nach hat man dann alles gemacht was im Machbaren ist. Schliesslich kann man noch 10.000 andere Aspekte berücksichtigen und jedes einzelne Feature muss man dann in 9 browsern testen (wenigstens mache ich das so) und ist dann drei jahre an einem Projekt am ackern.

    So, nun werde ich mich mal wieder um das kümmern was ich gerade suche ;-)

    Rob

  6. Halte die Grundmessage zwar für richtig,
    finde aber auch einige Aussagen durchaus fragwürdig.

    Auf der einen Seite sollen wir den IE 6 ignorieren, weil er max-width und min-width nicht unterstützt, aber doch bitte flexible layouts unterstützen, weil 60% IE 6 nutzen und demnach noch nicht die überarbeitete Zoomfunktion nutzen können. Wiederspruch!

    Nächstes Problem, wir sollen die max-width in em angeben. Hier spalten sich die Geister, auf 456bereastreet.com (eigentlich sehr angesehen) wurde vor kurzer Zeit gesagt, man solle die max-width in % angeben, weil em bei der Vergrößerung der Schriftgröße (wir errinnern uns, Problem der 60%) das Layout über die Seite hinaus wächst. Hier ist es zwar als max-width angegeben, aber was hilft das, wenn wir damit die maximal grenze ins unermessliche wachsen lassen. Ergo die Zeilen werden unglaublich lang.

    Letztes Problem, es wird zwar abgestritten, aber flexible Layouts haben immer einen sehr eigenen Charakter. Gewisse Elemente lassen sich einfach nicht flexibel umsetzen. Ebenso haben gefixte oder em-Layouts einen speziellen Charakter. Wenn ich eine Website haben will, die dem flexiblen Charakter widerspricht, dann muss ich ein gefixtes nehmen. Ich bin hier also anderer Meinung als der Autor, nicht jede Art von Design lässt sich flexibel umsetzen.

    Noch ein Zusatz, die mobilen Browser werden zunehmend besser, ebenso wie die „normalen“ Browser selber. Ich bezweile das ein paar bekehrte Webdesigner den Mainstream schneller ändern, als die Programmiere die Interpretation der Browser.

    Zum Abschluss möchte ich erwähnen, dass der Autor mit Barrierefreiheit in den Kampf zieht. Sozusagen die Trumpfkarte eines jeden Autors, niemand darf widersprechen, denn es geht um die armen Minderbemittelten. Ganz im Ernst, ich habe noch nie einen solch schlechten Platz gesehen um Barrierefreiheit als Argument zu verwenden. Mag sein, dass einigen Leute damit geholfen wird, aber im Ernst, dadurch dass man die Verantwortung des Zooms dem Nutzer entzieht, entzieht man dem erfahreneren Nutzer auch die Kontrolle. Ein Browser der lediglich die Schriftgröße ändert und nicht wirklich zoomt, kann ein 100% Layout nicht kleiner machen. Ich denke man sollte den Leuten eher beibringen, die ihnen gegeben Werkzeuge richtig zu nutzen, als sie weiterhin „dumm“ zu lassen und Ihnen Verantwortung aber auch Kontrolle zu entziehen! Das ist das Prinzip, welches Windows bzw. Microsoft seit seinen Anfängen verfolgt und mal im Ernst… wer von den Menschen die es beurteilen können mag Windows??? (Verständlich erklärt?! :P)

  7. Leider kann ich als Webdesigner nicht immer alles so gestalten, wie ich es gerne möchte. Die meisten große Firmen haben ihr Corporated Design. D.h., sie wollen oft pixelgenaue Seiten erstellt haben. Schrift, Farbe, Ausrichtung, Hintergrund, Linkfarbe usw. sind determiniert, sie müssen den gedruckten Vorlage so nahe kommen, wie möglich. Wenn dann noch viele Bilder reinkommen erübrigt sich die flexible Aufteilung meist sowieso.

    Außerdem nervt mich auch manchmal, wie flic schreibt, dass Seiten wie Spiegel, Sueddeutsche, Zeit, Focus usw. sich nur auf die Bildschirmmitte konzentrieren. Heutzutage benutzen über 90% der User eine Auflösung von mindestens 1024×768. Da sollten die nicht so viel Platz „verschenken“.

    Clauso

  8. Scheinenja viele Webdesigner hier ihre Kommentare zu hinterlassen. Ich gebe mal meine Meinung als Surfer ab.

    Ich benutze einen 20″-Bildschirm mit 1600x1200er Auflösung. Alles im Vollbild-Modus, da mich einzelne Fenster nur ablenken (habs probiert, geht einfach nicht).

    Mit den Voraussetzungen hat man gute Chancen auf einem Großteil der Seiten von Leere angestarrt zu werden. Bei kleinen Blogs und anderen Seiten, wo nur kurze Texte stehen ist das ok.

    Wenn ich aber auf einer Nachrichtenseite eine längeren Artikel lese nervt es einfach nur. Alle Großen (Spiegel, Sueddeutsche, Zeit, Focus, …) sind extrem schmal (meist 800px) und auch noch links angeordnet. Der eigentliche Text ist durch Werbung/Navigation nochmal schmaler, zieht sich dafür aber ewig lang nach unten. Da könnte der Textbereich auf einem breiten Bildschirm schon etwas größer sein. Muss ja nicht die ganze Breite ausfüllen. Alternativ könnte man ja auch ein Layout entwickeln wo, wie in der gedruckten Zeitung, der Artikel in Spalten aufgeteilt ist. Je nach Größe des Bildschirms stehen dann halt 1,2 oder 3 Spalten ein und desselben Textes nebeneinander.

    Allgemein gefällt mir der flexible Ansatz mit Mindest- und Maximalbreite sehr gut. Sicher nichts für graphisch ausgefallene Seiten, aber etwas wo der Text und Inhalt im Vordergrund steht.

  9. Ich würe jedem geplagten Umsetzer empfehlen, die beschränkten Möglichkeiten der CSS background property richtig auszuloten, und seimem Pixelgestalter die Konfliktherde beim Wachsen und Schrumpfen zu kommunizieren – für jedes GUI-Element. Zum abschreckenden Beispiel zerschossener Layouts käme dann der Satz: „Guck mal, so könnte dein Pixelwunder aussehen, wenn .. weil ..“

    Wer sich ausgiebig den CSS ems, %en, und floats aussetzt, findet nach etlichen Mühen die potentiell elastischen Stellen im Layout – differenziert, professionell halt.

    Professionell ist auch das Bewusstsein, dass die visuelle Wirkung gar nicht da wäre, wenn sie den Weg durch einige Programmroutinen, die bewerten, klassifizieren, indizieren, filtern, etc. nicht überstanden hätte. Ein paar Gedanken zur Semantik des Markups, der auch in andern Klamotten das Liedchen wiederauffind- und -erkennbar wiedergeben kann, sind sicher nicht verschwendet.

  10. schön wäre auch, wenn das flexible umsetzen von layout auch perfekt funktionieren würde
    doch leider ist das aufgrund der browser nicht möglich
    ich habe schon aufwendige seiten flexibel angefangen, bin aber an vielen stellen gescheitert

    lag es an rundungsfehlern von firefox, das layouts beim vergrößern dann irgendwann doch zerbrochen sind
    oder steife google werbung, die immer gleich groß blieb…

    und am ende interessiert es doch kein schwein, ob es ein flexibles layout ist
    bzw. bezahlen tut den aufwand kein schwein

    der grundgedanke ist aber an sich schon richtig
    (so wie für opfer von naturkatastrophen spenden auch)

  11. Nutze schon seit einiger Zeit YAML und bin sehr zufrieden damit! Die Entwicklung läuft reibungsloser und schneller ab. Kann ich jedem nur empfehlen.
    LG

  12. Der Ansatz ist ja richtig, hatte mir beim Css Design für Typo3, auch schon meine Gedanken dazu gemacht. Die Möglichkeiten stellen aber noch kein wirklich befriedigendes Ergebnis dar. Zufällig gerade gesehen, dass in der Zeitschrift „PhP Journal“ auch ein schöner Beitrag zum Thema drin ist-sponsored by Yaml ;) . Naja trotzdem, über flexible Layouts sollte man sich im Auge behalten.

  13. Ups…. So einen ausführlichen Beitrag habe ich hier noch nie entdeckt und dafür Respekt, auch wenn dieser von Dritten stammt.

    Das Thema ist wirklich sehr interessant. Dies ist in meinen Augen auch an der Anzahl und der Qualität der Kommentare sichtbar.

    Ich selbst nutze schon längere Zeit flexible Layouts und habe wahrscheinlich eher Probleme mit fixen ;)

    Ralph

  14. @Sarah
    Neben dem von Jochen bereits erwähnten Blitzblank-Theme gibt es weitere WordPress-Umsetzungen mit YAML bei Michael Preuß. Er hat einerseits ein Tutorial zur Integration von YAML in WordPress verfasst und vor wenigen Wochen auch ein sehr vielseitig konfigurierbares Theme mit dem Namen „YAML Green Theme“ veröffentlicht. Beides ist sicher einen näheren Blick wert.

    Und auch für andere CMS-Systeme (Typo3, Drupal, Joomla ect.) haben sich engagierte Entwickler gefunden, die ihrerseits einsatzfertige YAML-Implementationen entwickelt haben und der Community bereitstellen.

    Gruß
    Dirk

  15. @sarah

    Ja es gibt Umsetzungen für YAML und WordPress, darüber habe ich hier schon mal geschrieben: http://www.drweb.de/weblog/weblog/?p=907

    Beachte aber den Kommentar, das dort angesprochene Theme „blitzblank“ gibt es mitlerweile in der Version 2

  16. Auch nicht die eierlegende …, aber ein interessanter Ansatz für flexibles Layout bei unterschiedlichen Bildschirmgrößen, wie er bei Gerrit van Aaken zu finden ist: http://praegnanz.de

    Einfach mal mit dem Browserfenster spielen, Schriften skalieren und am Fensterrand ziehen. Geht in dem Fall ganz ohne JS.

  17. Finde die Argumente stellenweise zu „Akademisch“. Gerade das „ewige Vollbild“ setze ich beim browsen mit hoher Auflösung bewußt nicht ein. Und dann am Ende plötzlich dieser Text über yaml. Da erscheint mir der ganze Beitrag doch eher wie Werbung! Außerdem: die Layoutbeispiele von yaml verwenden beworbene Technik überhaupt nicht!

  18. Dieser Gastbeitrag von Dirk Jesse sorgt für kontroverse Kommentare. Zu Recht! In den Köpfen vieler Webseitenersteller ist bis heute nicht angekommen, dass flexible Layouts die Besucher von Webseiten weniger bevormunden und sich mit flexiblen Layouts auch barriereärmere Webseiten realisieren lassen.

    Damit die Lesbarkeit nicht zu sehr leidet, kann man min-width und max-width sowie entsprechende Workarounds für den alten IE 5 bis 6 einsetzen.

    Fotos und Grafiken wie Icons kann man ebenfalls skalierbar machen, auch wenn die skalierte Darstellungsqualität natürlich nicht an die Originalauflösung kommt.

    Die von Jens in den Kommentaren 7. und 8. genannte Lösung Multidesign funktioniert leider nur bei eingeschaltetem JavaScript und ist für mich deshalb keine echte Alternative.

    Letztendlich kann man nur hoffen, dass möglichst bald CSS 3 kommt und in den Browsern umgesetzt wird. Damit sollte dann das Erstellen und Pflegen von flexiblen Layouts deutlich einfacher werden.

  19. Von jemandem, der mit einem iPhone telephoniert, lass‘ ich mir nichts über Layout erzählen…

  20. Auf der volgenden Homepage kann man sich einige CSS Beispiele von Liquid Design ansehen.
    Da sind ein paar ganz nette Webseiten dabei…

    http://www.cssliquid.com/

  21. Fritz Weisshart: Fuer solche Faelle gibt es ja schliesslich noch die CSS media types. Oder bastelst Du Dein Screen-CSS so, dass es auch auf A4 noch gut aussieht?

  22. nette diskussion ;)

    mal ehrlich, über diese Geschichten machen sich doch nur wir Webler Gedanken. Barrierefreiheit und Handy-Surfen hin oder her – 95% der Nutzer realisiert die Möglichkeiten doch nicht und würde den Unterschied zwischen Fix und Flex nicht mal merken.

    Es handelt sich hier eher um Spielereien. Barrierefreiheit ist für fixe Seiten genauso umsetzbar wie eine Abfrage ob die Seite über ein Handy oder anderes mobile Medium abgefragt wird und ein entsprechendes CSS greifen soll.

    so, dieser Kommentar darf zerissen werden :)

  23. @bvgdfg: hast recht, hätte eher „ausreichend“ schreiben sollen. Zumindest skaliert er richtig, wenn min-height den Wert „auto“ bekommt.

  24. „überlasse ich dem Browser die Skalierung“ …

    Ich kenne keine Browser-Engine, die Bilder wirklich gut hoch- oder runter-sampled, hab ich da was verpasst :D ?

  25. Auf einer Internetseite werden doch meist Texte gelsen und Bilder angeschaut. Das flexible Layout hebt alle Errungenschaften der Typografie auf. Wäre es für die Zukunft nicht wichtiger, wenn Brwoser Zeilen besser umbrechen könnten? Wo liegt die Schwierigkeit, bedingte Trennstriche verarbeiten zu können wie jedes Textverarbeitungsprogramm? Das eigentliche Hinternis sehe ich aber de Bildern. Nicht jeder will nunmal das Einheits-Blog-CSS-Design. Ein großes Fotos auf der Seite bringt jedes flexible Layout zu Fall.
    Ich will auf das große Foto nicht verzichten. Wo wäre es angebrachter als auf einem 1440px-TFT-Display?
    Ich bin gegen CSS. Funktionierte das Internet mit PDF oder etwas Ähnlichem, könnten Webseiten intuitiver und attraktiver erstellt und vom Betrachter stufenlos skaliert werden.

  26. @DerKritiker: Auch mal in den Quellcode geschaut?

    1. OK, die Anpassung selbst funktioniert nur mit JS, was spricht dagegen? Es wird immerhin ein Standard-CSS geladen (im Beispiel das für die 800er Auflösung) und das Design ist somit unabhängig von JS!

    2. kaum jemand wird aller paar Sekunden seine Fenstergröße ändern. Darum brauch er auch nie auf Reload/Refresh klicken! Das muss man höchstens, um im Test zu sehen wie es wirkt. Und dafür habe ich ja die entsprechenden Links drin.

    Wie schon andere sagten: Es wird NIE die perfekte Lösung geben. Meine hat einen entscheidenden Vorteil: ICH behalte die Kontrolle über das Design! Eine Sache, die von den meisten Auftraggebern und Grafikern gewollt wird.

    PS: Lieber DerKritiker, Kritik ist immer Willkommen, mit Ausdrücken wie „seriös“ wäre ich aber ein wenig vorsichtiger…

    wegen Bildskalierung: Ich nehme für die kleineren Auflösungen folgende CSS-Anweisung: „#content img“ weise ich mit max-width eine maximale Breite zu und mit max-height: auto; überlasse ich dem Browser die Skalierung. Und das funktioniert!

  27. Ich bin ganz klar PRO FIX!
    Warum? Ich bin Designer und möchte das meine Seite so aussehen wie sie aussehen sollen und nicht auf einem 24″ ins unermessliche verbreitert werden.

    Wenn flexibel so super wäre warum wird es dann nicht häufiger eingesetzt? 90% der Seite die ich kenne nutzen einfach ein festes Layout. Meistens sind es nur Foren die auf % Layouts setzen.

    naja…

  28. @Jens:
    Also ich muss zugegeben ich bin prinzipiell kein Freund von JavaScript, aber wenn dann Stylesheets damit geladen werden hört es bei mir auf!!!
    Damit erreiche ich vielleicht, dass ich für eine Vielzahl (alle werde ich nie erreichen) an Auflösungen die StyleSheets anpasse, habe damit aber das nächste Problem – JavaScript. Mit dieser Lösung verlagere ich das Problem höchstens. Wo der Sinn besteht, wenn ich erst Refreshen muss um ein verkleinertes Fenster auch korrekt dargestellt zu bekommen erschließt sich mir auch nicht.
    JavaScript (fürs CSS) halte ich für einen seriösen Webdesigner genauso für Pfusch wie eine komplette Website aus Flash zu bauen! Aber die JS-Wiedergeburt in Verbindung mit dem Web2.0-Schmarrn werde ich wohl nie nachvollziehen. Sicherlich an einigen Stellen notwendig, aber für jeden noch so kleinen Mist sowas einzusetzen kann ich absolut nicht nachvollziehen…

  29. wenn man sich wenigstens etwas mühe gibt bekommt man gute, in gänze skalierbare websites hin. siehe unsere: http://spiekermannpartners.com/

    :)

    dazu: pixelgenaues design — warum sollte man so etwas unbedingt wollen? so fast alles andere an einem webprojekt ist wichtiger als dieses merkmal.

  30. @Tim:
    Flexibles oder statisches Layout?

    Ich versuche innerhalb dieses Artikels aber keines von beiden zu bevorzugen, sondern die Dinge objektiv zu betrachten.

    Gruß
    Professor Web

  31. Apropos unlesbar – bestes Beispiel ist Dr. Web selbst. So sind die Artikel auf einem Breitbildschirm richtig schick in die Breite gezogen und damit richtig schlecht lesbar. Die Kommentare hingegen sind ok und lesen sich ganz gut. Ich halte den browserbasierten Zoom für einen ganz pragmatischen Ansatz, denn hier entscheidet wirklich der Nutzer und nicht der Designer.

  32. @Tim

    In dem Artikel geht es keineswegs darum, fixe Layouts zu verteufeln. Es ist klar, dass im Alltag der Kunde meist sehr genaue Vorstellungen und Wünsche hat. Der Artikel richtet (siehe 2. Absatz) sich allein gegen die pauschale Aussage, aufgrund des Seitenzooms seine flexible Layouts nicht mehr erforderlich.

    Betrachte die Argumentation im Artikel als einen Blick aus der Sicht der Seitennutzer. Auftraggeber, Grafiker und Webdesigner sind genau 3 Personen. Zwischen diesen drei Parteien ist ein Konsens bezüglich Aufwand, Kosten, gestalterischem Anspruch noch vergleichsweise einfach zu erzielen.

    Die späteren Nutzer sind in diesem Entscheidungsprozess nicht direkt einbezogen, sie leben mit den Entscheidungen der drei Parteien. Daher sollen die hier gestellten Fragen zum Nachdenken anregen, denn die Nutzer – über deren Zusammensetzung und persönliche Vorlieben man als Entwickler nur sehr wenig weiß – sind mitentscheidend für den Erfolg.

    Auch wenn es sich der Artikel Konkreten um fixes oder flexibles Layout dreht, geht es im Allgemeinen darum, die Belange der Webseitennutzer in solche Entscheidungsprozesse mehr einzubeziehen. Daher ist es auch keine Kritik an Webdesignern, die aufgrund der Kundenwünsche fixe Layouts erstellen. Vielleicht ließt hier ja auch der eine oder andere zukünftige Auftraggeber mit und wird dadurch aufgeschlossener gegenüber einer fachlichen Beratung durch den Webdesigner, bevor die Umsetzung vetraglich fixiert wird.

  33. „Kann mir jemand ein überzeugendes Argument FÜR pixelbasiertes Layout nennen“

    Ja wenn das Kunde das wünscht und das passiert öfters als hier manche denken…

  34. Hallo,

    interessant, dass diese Diskussion anscheinend nie ein Ende findet.
    Da ich (auch geschäftlich) immer häufiger mein Handheld benutze, wünsche ich mir einfach Seiten, die auch auf dem PDA vernünftig benutzbar sind.
    Und damit ist pixelbasiertes Layout einfach out.

    Ach ja: Kann mir jemand ein überzeugendes Argument FÜR pixelbasiertes Layout nennen – außer Unfähigkeit oder Faulheit des Seitenerstellers?

    Schönen Gruß
    FW

  35. Solange flexible Layouts immer noch an einigen Stellen kranken (Bildskalierung wurde genannt, flexibler Spaltenumbruch waere etwas, das mir jetzt noch einfallen wuerde), sind sie nun mal einfach nicht ueberall verwendbar. Und ganz ehrlich: Wer sich auf seinem tollen neuen 24″-Monitor eine Webseite im Vollbildmodus anguckt, dem ist doch nun wirklich nicht mehr zu helfen.
    Hohe Aufloesungen haben fuer mich nur den Vorteil, dass man endlich mal mehrere Applikationen im Auge behalten kann, ohne auf einen zweiten Monitor zurueckgreifen zu muessen.

  36. Solange ich keine vernünftige Möglichkeit sehe, Grafiken mit der Website „mitwachsen“ bzw. „mitschrumpfen“ zu lassen, sind flexible Layouts IMHO nur sehr begrenzt einsetzbar.

    Ansonsten strotzt der Artikel vor alten Vorurteilen, berücksichtigt Entwicklungen in SaaS-Richtung nicht und wird in keiner Weise einem komplexen Thema wie Interface-Design gerecht. Sry, nochmal von vorn bitte !

  37. Eigentlich eine müßige Diskussion. Je mehr Flexibilität ich dem Nutzer biete, desto besser – so zumindest meine Meinung.

    Ob die Lösung dann letztendlich in Frameworks wie YAML zu finden ist, steht auf einem ganz anderen Blatt. Ich finde YAML fast ein wenig zu kompliziert, zu verschachtelt und zu wenig strict. Aber so ist es halt, wenn man sich eigentlich mit dem Code und der Logik anderer Programmierer herumschlagen muß: man löst nicht das Problem, sondern arbeitet sich erstmal in gedankliche Strukturen ein, die auch in der weniger nutzerfreundlich redaktionierten Anleitung schwer nachvollziehbar gemacht werden. Aber das ist ein anderes Problem.

    Flexibilität verleiht einem Layout größtmögliche Freiheit, das stimmt. Aber ich kann auch so manchen Kunden verstehen, der sein Produkt in einem ganz bestimmten, festgefügten Rahmen präsentiert wissen möchte. Wer einen größeren Bildschirm hat, der hat dann halt mehr schön gestalteten Hintergrund. Ob das sinnvoll ist, ist für den Designer oder Programmierer unwesentlich, denn es ist manchmal einfach der Kundenwunsch.

    Nur von einem sollten wir uns langsam mal verabschieden: den Nutzer für ein faules, dummes Wesen zu halten. Wenn das Browserfenster kleiner ist, als der fixe Inhalt, dann kann jeder und macht auch jeder das Browserfenster größer, sofern ihn der Inhalt interessiert. Hinter der Bemerkung „wird automatisch an die aktuelle Fenstergröße angepaßt“ steckt leider auch viel Abfälligkeit. Damit kommen wir nämlich zum Hauptproblem der Internetseiten: Wenn der Content stimmt, dann macht der Nutzer alles dafür, um diesen zu sehen zu bekommen, egal ob fix oder nicht. Das Layout ist nur eine Krücke und kein Heligtum.

  38. Ups, der Link ist weg. Also hier noch einmal ohne Tag: http://www.piske.de/portfolio/multidesign.php

  39. Amiga oder Atari? PC oder Mac? Windows oder Linux? flexibel oder fixes Layout?…

    Klasse, sind wir wieder mal beim Thema. ;-)

    Und wie auch bei diesem Thema streiten sich die Geister. Vielleicht darf ich erwähnen, dass ich eine ganz andere Lösung für dieses Problem gefunden habe, und wie mir meine Erfahrungen damit zeigen, den Designer UND Programmierer glücklich machen! Vielleicht will sich der Autor und der geneigte Leser ja auch das mal anschauen und diese Lösung in die Diskussion mit einbeziehen?

    LG,
    Jens

  40. Ich stimme Cortex zu. Der Artikel stellt fixe Layouts in ein sehr schlechtes Licht und geht keineswegs auf die Vorteile dieser Layouts ein.

    Für mich scheint der Artikel eine kleine Werbemaßnahme für das eigene Framework zu sein.

    Ich finde es gut kritisch den fixen Layouts entgegen zu stehen, aber nicht so vernichtend wie in diesem Beitrag.

    Gruß
    ProfessorWeb

  41. dies könnte ein guter beitrag sein über ein thema, das uns immer wieder beschäftigen wird in einem online-magazin, in dem FACHLICHE beiträge leider immer seltener werden.

    statt dessen ist die darstellung:

    1. einseitig

    fixes layout = böse
    flexibles layout = gut

    2. polemisch

    bsp. a)
    was will uns der author sagen, wenn er die zugänglichkeit einer website mit shopping im klamottenladen vergleicht?

    bsp. b)
    welcher zusammenhang existiert zwischen fixen layouts und photoshop; warum ist die ps-vorlage heilig?

    3. subjektiv

    gott sei dank gibt es eine lösung für das problem, das uns alle bewusst oder unterbewusst quält. es heisst YAML, wobei ich immer dachte, der begriff wäre seit ewigkeiten mit „Yet Another Markup Language“ belegt.

    http://de.wikipedia.org/wiki/YAML

    nichts für ungut – ein paar newbies werden für den einblick in das unbekannte land des besseren webdesigns dankbar sein.

    cx

  42. Solange sich Bilder nicht verlustfrei mit skalieren lassen, sind auch flexible Layouts nicht das Nonplusultra. Fazit: die eierlegende Wollmilchsau gibt es nicht. Auch mit flexiblen Layouts habe ich Zugänglichkeitsprobleme (wie mit allen anderen Varianten) und ich werde diese mit nichts vollständig lösen können.
    Angenommen ich bin stark fehlsichtig und schaue mir Vivabit mit einer Extremauflösung von 640×480 an und vergrößere dazu noch die Schrift, dann ist es egal, welche Layoutvariante ich eingebaut habe. Als Anwender muss ich damit leben, extrem zu scrollen. Es liegt in der Flexibilität des Mediums Bildschirm, dass wie nie die finale Lösung für alle finden werden.
    Diese Faktoren lassen sich technisch nicht unter einen Hut bekommen:
    * Auflösung
    * Browserfenstergröße
    * individuelle System-Schriftgröße
    * typografisch sinnvolle Zeilenlänge
    * kein horizontales Scrollen
    Ich lasse mich gern vom Gegenteil überzeugen. Die Lösung dürfte dann bei der BIENE 2008 ein Doppelgold bekommen.
    Nichtsdestotrotz: YAML ist ein gutes Werkzeug für diejenigen, die schnell zum Ergebnis kommen wollen und/oder nicht erfahren genug sind. Fraglos ist das Framework überfrachtet, um auch wirklich alle Eventualitäten erfüllen und abfangen zu können. Allein dass die meisten Templates transitional sind zeigt, dass es offensichtlich Probleme gibt, strict-Varianten sauber zu implementieren. Hier ist einfach viel Hand(nach)arbeit erforderlich.

  43. déjà vu

    2008

    „Bei flexiblen Layouts läuft der Text beim Aufziehen des Browserfensters unkontrolliert in die Breite, was ihn letztlich unansehnlich und schwer lesbar macht.“

    2005

    „A common argument against fluid layouts is that lines can become so long that readability is decreased. “
    von http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/

    Die Debatte um das Thema ist schon recht alt und mittlerweile habe ich die ganz persönliche Meinung das die Diskussion an der Realität vorbei geht, meine Gründe :

    Handys bzw. Handheld devices sind für „normale“ Webseiten ein Horror, man ist ständig nur am suchen und zoomen, das Problem löst ein flexibles oder auch adaptives Layout(float the boat..) nur sehr unzureichend. Das liegt meiner Meinung nach daran, dass Informationen für kleine Bildschirme ganz anders aufgearbeitet werden müss(t)en.

    Typographie, ja klar eine Internetseite ist kein Buch, aber solange die Adaptionsmöglichkeiten der Browser bzw. die CSS Spec. (obwohl 3.0 hier einiges bringen wird) nicht ausreichen um (lange) Texte in allen Lebenslagen tatsächlich „lesbar“ zu halten und gleichzeitig die Intentionen der Designer zu berücksichtigen, sind „flexible“ (Akkordeon-Effekt passt bald besser) Layouts nur eine Krücke.

    Wohlgemerkt das Thema Schriftgröße mit „em“ ist damit nicht gemerkt, ich beziehe mich nur auf das Layout.

    Zu guter Letzt wird in naher Zukunft wohl nicht mehr der Designer das Aussehen der allermeisten Seiten bestimmen, sondern der „Benutzer“ der mittels XML Möglichkeiten Informationen abruft und selbst (bwz. der Feedreader oder ähnliches) das Aussehen festlegt.

    noch ein Zitat von 456bereastreet was wohl „pro“ flexible Layout gedacht war, aber eigentlich dagegen spricht

    „I just don’t get why some people are so hell-bent on letting their browser window fill the entire screen.“

    „Would you still push it if you had a 30”Apple Cinema Display with a resolution of 2560 by 1600 pixels?“

  44. Ein wirklich interessantes Thema. Da ich gerade erst über die HTML-Ebene auf die CSS-Ebene „wachse“, ist dieser Ansatz für mich ein völlig neuer – aber sehr attraktiver.

    Könnten Sie mir kurz sagen, ob es (grundsätzlich/für mich) möglich ist, diese Layouts irgendwie mit WordPress zu verbinden?

    Herzlichen Dank

  45. Zum Glück entwickle ich bereits seit 1.5 Jahren ausschliesslich flexible Layouts! :-)

Schreibe einen Kommentar zu clauso Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.