ganzheitliche Layoutansätze – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self ganzheitliche Layoutansätze Wed, 26 Oct 05 11:37:40 Z https://forum.selfhtml.org/self/2005/oct/26/ganzheitliche-layoutansaetze/890377#m890377 https://forum.selfhtml.org/self/2005/oct/26/ganzheitliche-layoutansaetze/890377#m890377 <p>Hallo,</p> <p>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.)</p> <p>Hier eine Zusammenfassung der Artikel:</p> <p>1. Dirk Jesse<br>      "Yet Another Multicolum Layout"<br>      <a href="http://www.highresolution.info/webdesign/yaml/" rel="nofollow noopener noreferrer">http://www.highresolution.info/webdesign/yaml/</a></p> <p>2. Thierry Koblentz<br>      "One clean HTML markup, many layouts..."<br>      <a href="http://www.tjkdesign.com/articles/liquid.asp" rel="nofollow noopener noreferrer">http://www.tjkdesign.com/articles/liquid.asp</a></p> <p>3. Mike Stenhouse<br>      "A CSS Framework"<br>      <a href="http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/" rel="nofollow noopener noreferrer">http://www.contentwithstyle.co.uk/Articles/17/a-css-framework/</a></p> <p>und frisch aus der Druckmaschine:</p> <p>4. Position is everything<br>      "In search of the One True Layout"<br>      <a href="http://www.positioniseverything.net/articles/onetruelayout/" rel="nofollow noopener noreferrer">http://www.positioniseverything.net/articles/onetruelayout/</a><br>      (34 Din A4-Seiten in der Printversion)</p> <p>(via <a href="http://www.grochtdreis.de/weblog/index.php?id=P872" rel="nofollow noopener noreferrer">Jens Grochtdreis</a> und <a href="http://www.wait-till-i.com/index.php?p=179" rel="nofollow noopener noreferrer">Chris Heilmann</a>)</p> <p>Viele Grüße!<br> _<a href="http://www.decaf.de" rel="nofollow noopener noreferrer">ds</a></p> <div class="signature">-- <br> <a href="http://www.einbecker.net/top5/2005/verhalten-im-coffee-house" rel="nofollow noopener noreferrer">»Das richtige Verhalten im Coffee House«</a> </div> ganzheitliche Layoutansätze Sat, 29 Oct 05 15:45:01 Z https://forum.selfhtml.org/self/2005/oct/26/ganzheitliche-layoutansaetze/890378#m890378 https://forum.selfhtml.org/self/2005/oct/26/ganzheitliche-layoutansaetze/890378#m890378 <p>Hallo,</p> <p>einige allgemeine, bewusst übertrieben skeptische und zugespitzte Bemerkungen (ich spiele etwas den advocatus diaboli):</p> <blockquote> <p>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.)</p> <p>Hier eine Zusammenfassung der Artikel:</p> <p>1. Dirk Jesse<br>      "Yet Another Multicolum Layout"<br>      <a href="http://www.highresolution.info/webdesign/yaml/" rel="nofollow noopener noreferrer">http://www.highresolution.info/webdesign/yaml/</a></p> </blockquote> <p>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).</p> <p>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).</p> <p>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.</p> <p>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.</p> <p>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«.</p> <p>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.</p> <p>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«.</p> <blockquote> <p>2. Thierry Koblentz<br>      "One clean HTML markup, many layouts..."<br>      <a href="http://www.tjkdesign.com/articles/liquid.asp" rel="nofollow noopener noreferrer">http://www.tjkdesign.com/articles/liquid.asp</a></p> </blockquote> <p>Da sind mir zwei Dinge aufgefallen:</p> <p>»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.</p> <p>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 (<a href="http://positioniseverything.net/explorer/expandingboxbug.html" rel="nofollow noopener noreferrer">ursprünglich auch durchaus kritisch diskutiert</a>) und display:inline-block löst <a href="http://www.satzansatz.de/cssd/onhavinglayout.html" rel="nofollow noopener noreferrer">hasLayout</a> aus, was unzählige Nebeneffekte hat, denn hasLayout ist eine Wissenschaft für sich.</p> <p>Mathias</p> ganzheitliche Layoutansätze Wed, 02 Nov 05 17:30:14 Z https://forum.selfhtml.org/self/2005/oct/26/ganzheitliche-layoutansaetze/890379#m890379 https://forum.selfhtml.org/self/2005/oct/26/ganzheitliche-layoutansaetze/890379#m890379 <p>Hallo Mathias,</p> <p>deinen Ausführungen stimme ich in vielen Punkten zu.</p> <p>Abgesehen von meiner schon öfters geäusserten kritischen Bilanz von CSS-Layouts, besonders<br> dem zu geringen Nutzen gerade bei browserübergreifender Verlässlichkeit, sehe ich noch die<br> Notwendigkeit zur sehr detaillierten Dokumentation von Layoutvorlagen, ein Punkt den ich<br> vielleicht eher unterschätzt habe, der aber letztlich auch kaum umfassend realisierbar ist.</p> <p>So gibt es oft schon sehr früh beim Vergleich Gecko vs. Opera Probleme und Entscheidungen<br> für bestimmte CSS-Varianten, und die Recherche welcher Browser womöglich Recht hätte oder<br> welcher unter komplexen Bedingungen auftretende Fehler nun ein Opera-Bug ist oder eine<br> Fehlinterpretation des Mozilla oder nur Auslegungssache...</p> <p>Grüsse</p> <p>Cyx23</p> <div class="signature">-- <br> <a href="http://www.lipfert-malik.de/schmuckwerke/goldschmiedekurse.html" rel="nofollow noopener noreferrer">Goldschmiedekurse Workshops Schmuckgestaltung Trauringe selber machen</a><br> <a href="http://www.lipfert-malik.de/webdesign/barrierefreies_webdesign.html" rel="nofollow noopener noreferrer">Barrierefreies Webdesign in Düsseldorf</a><br> <a href="http://www.lipfert-malik.de" rel="nofollow noopener noreferrer">Designleistungen</a><br> <a href="http://www.lipfert-malik.de/webdesign/tutorial/css.html" rel="nofollow noopener noreferrer">CSS für alle Browser</a> </div>