Weblog

Auf A List Apart findet man seit gestern einen weiteren, äußerst interessanten Artikel bezüglich 3-spaltiger CSS-Layouts. Die Neigung zu wohlklingenden Titeln ist ja nichts neues, und so begibt man sich diesmal in Sachen CSS-Layout auf der Suche nach dem Heiligen Gral.

Ergebnis: Eine Kombination aus floats, negativen Margins für die Platzierung der Spalten und dem Kniff aus dem “One True Layout” für die gleichlangen Spalten. Ob den Jungs damit wirklich der große Wurf gelungen ist, lässt sich aus meiner Sicht noch nicht sagen denn ich lese mal wieder “... in all modern browsers”. Alex Robinson hingegen erwähnt für sein “One True Layout” einige Browserprobleme, die an einer Anwendungsmöglichkeit auf breiter Basis bisher zumindest zweifeln lassen. Der ALA-Artikel schweigt sich in dieser Hinsicht aus.

In meinem kleinen dunklen Arbeitszimmer habe ich bereits vor einiger Zeit den Lösungsvorschlag für die gleichlangen Spalten aus dem “One True Layout” in YAML eingebaut. Bisher war ich aber mit der erreichten Browserkompatibilität noch nicht zufrieden, daher habe ich auf eine Veröffentlichung verzichtet. So ich in den nächsten Tagen & Wochen Lust und Zeit finde, werde ich das gleiche mit dem ALA-Ansatz nochmal probieren. Zwar ist hierbei der Aufwand für das Vertauschen der Spalten etwas höher aber er bewegt sich in einem überschaubaren Rahmen. Wenn sich damit die wenigen noch verbliebenen Problemchen lösen ließen, wären wir alle einen großen Schritt weiter. Eine abschließende Einschätzung wird daher bis dahin warten müssen.

Liebe Webdesign-Agenturen,

YAML wurde bewußt unter einer Creative Commons Attribution 2.0 Germany License veröffentlicht. Sie ermöglicht jedermann die kostenfreie Nutzung des Frameworks für eigene Projekte. Die einzige Bedingung: Namensnennung des Autors (vorzugsweise durch einen Link).

Selbstverständlich besteht die Möglichkeit, YAML auch ohne diese sichtbare Rückverlinkung für eigene kommerzielle Projekte zu verwenden. Eine offizielle Anfrage bei mir per Email ist dafür der einfachste und direkte Weg. Der PayPal Spenden-Link ist ebenfalls in Sichtweite des Download-Buttons und wird als freundliche Geste verstanden.

Diese Argumentation (Teil 1, 2 & 3), die heute in den Kommentaren meines Weblogs aufgetaucht ist, finde ich allerdings unverschämt — und es ist definitiv der falsche Weg.

Heute ist Bescherung denn die neue YAML Version 2.0 ist soeben fertig geworden und steht seit wenigen Minuten online. In der neuen Version wurden sowohl die Quelltexte als auch das Tutorial vollständig überabeitet. Herausgekommen ist mit 192kB ein deutlich schwereres Download-Paket, welches vor allem im Tutorial-Teil hoffentlich viele Fragen beantwortet, die bisher offen geblieben waren. Weiterhin wurde allem ein attraktiveres und übersichtlicheres Äußeres verpasst.

In technischer Hinsicht wurde die Quelltexte bereinigt, eine Lösung für min- und max-width eingebaut und vor allem endlich brauchbare Druck-Stylesheets hinzugefügt. 

Die Arbeit an der neuen Version hat einen Großteil der Freizeit der letzten Wochen verschlungen. Ich denke aber, es hat sich gelohnt. Denn aus den ehemals zusammen gequetschten wenigen Erläuterungen ist eine umfangreiche Beschreibung aller wichtigen Bestandteile des Layouts geworden. An dieser Stelle auch nochmals Dank an Jens Grochtdreis, Tomas Caspers und Ulrich van Stipriaan für die Unterstützung.

Derzeit regt sich einiges in Sachen flexibler Layouts. Erst vor wenigen Tagen erschien im Adventskalender der Webkrauts ein lesenswerter Artikel zu einem flexiblen 3-Spalten-Layout auf Basis von floats. Ich freue mich daher auf die Kommentare und Diskussionen der Bloggergemeinde.

UPDATE V2.0.1 [23.12.05]: Der Kommentar von Michael Finger zeigte ein kleines Barriere-Problem im Tutorial. Die vier Seiten des Tutorials mit doppelspaltigem Inhalt wurden in Textbrowsern und -readern in der falschen Reihenfolge vorgelesen, da diese sich an der Reihenfolge der DIVs im Quelltext orientieren.

Und daher habe ich einfach mal getan, dessen Möglichkeit ich zuvor schon einmal angedeutet hatte. Ich habe die Inhaltsspalten in die richtige Reihenfolge gebracht. Mehr zum “wie” steht im Changelog. Dank der Flexibilität von YAML bedeutete dies gerade einmal 4 Minuten Arbeit, ein paar Browsertest zur Sicherheit und das Schnüren eines neuen Download-Paketes.

Arne Kamola schreibt in seinem Weblog recht ausführlich seine Meinung zum YAML-Template und sieht drei große Schwächen, die es sich meiner Meinung nach lohnt, zu diskutieren.

Das Template ist aus meiner Sicht eine reine DIV-Suppe. Jedes Seiten-Struktur-Element ist mindestens zwei mal geschachtelt. Der Hauptinhalt ist von insgesammt vier(!) DIVs umschlossen. Dieses Verfahren mag zwar logischer und etwas besser sein als verschachtelte Tabellen, aber diese Art von Markup kommt dem von verschachtelten Tabellen verdammt nahe.

Das ist zunächst korrekt, die gesamte Seite ist von zwei DIVs umschlossen, ebenso die Inhalte der einzelnen Spalten. Der Grund dafür ist die Art und Weise mit der ich dem fehlerhaften Box-Modell des Internet Explorers begegne.

Soeben habe ich eine überarbeitete Fassung meines Layout-Tutorials “Yet Another Multicolum Layout” online bereitgestellt. Die neue Version 1.1 entält folgende Änderungen:

• Einheitliche Basis: base.css
  Die ehemalige Clearfix & Overflow-Variante des base-Stylesheets bildet ab sofort die alleinige Basis des Layouts. Die Version hat sich als robuster in Verbindung mit der Darstellung im Internet Explorer erwiesen.
• Impressum-Link
  Es wurde eine Impressumsseite hinzugefügt. Der Link geht also nicht mehr ins Leere.
• Browserkompatibilität
  Opera 6+ zeigt das Layout nun ebenfalls korrekt an. (Änderung CSS-Eigenschaften für Impressum-Link)
• Variation 3 - Fixes Layout mit YAML
  #page_margins Container für die einfachere Erstellung von Layouts mit fixen Breiten hinzugefügt. Als “Variation 3” werden die Anpassungen für ein fixes Layout demonstriert.
• Menu
  Styles wurden angepasst, sodass die schwarze Trennlinie der Reiternavigation auch angezeigt wird wenn kein Menupunkt aktiv geschalten ist (z.B. beim Impressum).
• Erste Schritte
  Für die ersten eigenen Versuche mit YAML wurde dem Paket die Datei example.html hinzugefügt. 

Des weiteren habe ich für Fragen rund um die Anwendung/Modifikation des Templates ein Forum eröffnet. Hier sollen in Zukunft Fragen und Anworten gesammelt werden, sowie Ideen für weitere Verbesserungen zusammengetragen werden.