ganzheitliche Layoutansätze

[Schuer]

Hallo,

in letzter Zeit gab's einige Ansätze, typische Layouts ganzheitlich umzusetzen und "Musterlösungen" zu bieten, die browser- und systemübergreifend funktionieren. (Die Absicht ist nicht neu, nur wurde sie bisher selten ausführlich dokumentiert.)

Hier eine Zusammenfassung der Artikel:

1. Dirk Jesse
     "Yet Another Multicolum Layout"
     http://www.highresolution.info/webdesign/yaml/

2. Thierry Koblentz
     "One clean HTML markup, many layouts..."
     http://www.tjkdesign.com/articles/liquid.asp

3. Mike Stenhouse
     "A CSS Framework"
     http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/

und frisch aus der Druckmaschine:

4. Position is everything
     "In search of the One True Layout"
     http://www.positioniseverything.net/articles/onetruelayout/
     (34 Din A4-Seiten in der Printversion)

(via Jens Grochtdreis und Chris Heilmann)

Viele Grüße!
_ds

[molily]

Hallo,

einige allgemeine, bewusst übertrieben skeptische und zugespitzte Bemerkungen (ich spiele etwas den advocatus diaboli):

in letzter Zeit gab's einige Ansätze, typische Layouts ganzheitlich umzusetzen und "Musterlösungen" zu bieten, die browser- und systemübergreifend funktionieren. (Die Absicht ist nicht neu, nur wurde sie bisher selten ausführlich dokumentiert.)

Hier eine Zusammenfassung der Artikel:

1. Dirk Jesse
     "Yet Another Multicolum Layout"
     http://www.highresolution.info/webdesign/yaml/

Da habe ich gestaunt. Ich kenne zwar die ganzen Teiltechniken, aber das zeigt mir, dass ich sehr aus dem Thema heraus bin. Zum anderen erschreckt es, weil es offenbar verdammt kompliziert ist, ein flexibles Rundum-Sorglos-Layout zusammenzustellen, was auf alle möglichen Inhalte reagieren kann. Tendenziell habe ich eine Abneigung gegen »Musterlösungen« bzw. das Übernehmen solcher Vorlagen. Denn wenn ich in die Stylesheets gucke, kann ich auf den ersten und zweiten Blick nicht zwischen Essenz und Hacks unterscheiden. Leider ist auch nicht jede Deklaration, die mehr Hack als Essenz sein könnte, kommentiert (z.B. position:relative und z-index).

Deshalb hat ein Cross-Browser-CSS-Layout für mich schon lange nichts mehr mit den gepriesenen Webstandards zu tun. Da tut sich ein Universum auf, was sich nur noch zu winzigen Teilen auf die Webstandards bezieht, zu einem riesigen Teil hingegen auf die Forschung über Browserfehler und deren Behebung durch Hacks. Standardkonformes CSS-Layout gibt es eigentlich gar nicht (im Sinne des ursprünglichen Credos des Web Standards Projects, Standards zu unterstützen, nicht kaputte Browser).

Dementsprechend schwinden leider einige Vorteile der »Webstandards«-Problematik. Werden die Ideale der Webstandards-Bewegung überhaupt eingelöst? Einfachheit und weniger Aufwand? - nein. Wartbarkeit - nein. Schlanker, lesbarer Code? - nein (das grässliche Durcheinander wird höchstens vom Markup ins Stylesheet verfrachtet). Zukunftsfähigkeit? - nein. Zuverlässigkeit und Interoperabilität? - m.M.n. nur scheinbar.

Eine Musterlösung ist ein Fertighaus, die Bewohner wollen den Hahn aufdrehen und warmes Wasser bekommen. Wie das alles funktioniert und gelöst ist, soll nur bedingt interessieren. Ich allerdings will verstehen, was in meinem Code abläuft. Einen Haufen Hacks einzubauen, deren Notwendigkeit ich nicht kenne und deren Wirkungen ich nicht abschätzen kann, macht mir Unbehagen. Trotz der Dokumentation bleiben einige Fragen offen (z.B. wofür ist das <hr> nötig, warum reicht das clear beim Footer nicht?) und ich müsste mich erst durch Massen an aufeinander aufbauender Literatur durcharbeiten, deren Resultat ein solches Layout ist.

Wie die Bastler von solchen Musterlösungen tatsächlich Vertrauen in die Stabilität eines solchen Flickwerks haben, ist mir rätselhaft. Je komplexer die Methoden werden, um ein Layout browserübergreifend zuverlässig zu machen, desto unüberschaubar werden meiner Einschätzung nach die tatsächlichen Resultate. Letztlich verständlich sind die Methoden nur absoluten CSS-Freaks, vor allem für Ein- und Umsteiger bleibt das Ganze trotz aller Dokumentation »rocket science«.

Ich weiß daher nicht, wem ich ein solches Layout tatsächlich bedenkenlos empfehlen kann. Für CSS-Fortgeschrittene, die schon erste Spaltenlayouts bauen, aber höchstens den Box-Model-Bug und ähnliche grundlegendsten Grundlagen berücksichtigen, erscheint mir das völlig unverständlich. Sie müssten erst einige riesige Menge Literatur nacharbeiten - und zwar nicht über Webstandards, sondern den Browser-Quirks.

Das heißt m.M.n., entweder versteht man die Musterlösung sofort komplett und kann die Zwecke und Folgen aller Hacks und Kniffe hinreichend abschätzen - oder man nutzt es als Musterlösung, ohne sich um die Funktionsweise Gedanken zu machen. Wieso also eine halbherzige Dokumentation, die auf viele letztlich nur so wirkt: »Sieh, wie verdammt kompliziert das alles ist. Hüte dich bloß davor, irgendetwas im Quellcode zu verändern, das ist hier ein riesiges fragiles Kartenhaus, das auf jahrelangen Forschungen im Bereich der Quantenphysik basiert«.

2. Thierry Koblentz
     "One clean HTML markup, many layouts..."
     http://www.tjkdesign.com/articles/liquid.asp

Da sind mir zwei Dinge aufgefallen:

»Liquid, fluid, elastic, flexible, jello« heißt für mich die Anpassungsfähigkeit eines Layouts an unterschiedliche Leseumgebungen. Sprich, kleine und große Viewports, kleine und große Schriften, anpassungsfähige Raumverteilung, abwärtskompatible Mehrspaltigkeit, unterschiedliche Farbdarstellung, Möglichkeiten der Umformatierung usw. Das trifft auf die dortigen Beispiellayouts nicht zu, mit »flexible« ist wohl etwas anderes gemeint. Finde ich ziemlich verwirrend.

Zum anderen sollen Hacks vermieden werden, es werden aber wie selbstverständlich zwei folgenreiche Hacks angewendet: overflow:hidden und display:inline-block. Weder der eine noch der andere sind unproblematisch. overflow:hidden kann Skalierbarkeit zerstören (ursprünglich auch durchaus kritisch diskutiert) und display:inline-block löst hasLayout aus, was unzählige Nebeneffekte hat, denn hasLayout ist eine Wissenschaft für sich.

Mathias

[Cyx23]

Hallo Mathias,

deinen Ausführungen stimme ich in vielen Punkten zu.

Abgesehen von meiner schon öfters geäusserten kritischen Bilanz von CSS-Layouts, besonders
dem zu geringen Nutzen gerade bei browserübergreifender Verlässlichkeit, sehe ich noch die
Notwendigkeit zur sehr detaillierten Dokumentation von Layoutvorlagen, ein Punkt den ich
vielleicht eher unterschätzt habe, der aber letztlich auch kaum umfassend realisierbar ist.

So gibt es oft schon sehr früh beim Vergleich Gecko vs. Opera Probleme und Entscheidungen
für bestimmte CSS-Varianten, und die Recherche welcher Browser womöglich Recht hätte oder
welcher unter komplexen Bedingungen auftretende Fehler nun ein Opera-Bug ist oder eine
Fehlinterpretation des Mozilla oder nur Auslegungssache...

Grüsse

Cyx23