Mein letzter Beitrag Die Schlacht um den richtigen Weg hat ja einigen Wirbel hier und in anderen /Blogs verursacht. Die Diskussion war gezeichnet von persönlichen Meinungen, Fakten waren eher weniger vertreten. Um das Ganze besser beurteilen zu können, möchte ich hier einen konkreten Praxisfall präsentieren.
Ich habe eine Projektvorlage von YAML.de geladen und so ähnlich wie möglich mit GridEasy nachgebaut. Das Ergebnis sind zwei Webseiten, die fast identisch aussehen, deren Funktion sich aber in einigen wesentlichen Punkten unterscheidet. Die mit YAML gebaute Webseite könnt Ihr Euch hier ansehen, die mit GridEasy gebaute hier.
Auf den ersten Blick sehen sich die Seiten zum Verwechseln ähnlich, auf den zweiten Blick gibt es aber wesentliche Unterschiede. Hier zum Vergleich erst einmal ein paar nackte Zahlen:
| GridEasy | YAML | |
|---|---|---|
| Größe des Frameworks | 13 Dateien | 38 Dateien |
| Umfang des Frameworks | 11.400 Bytes | 240.027 Bytes |
| Ganze Webseite Ordner | 2 Ordner | 20 Ordner |
| Ganze Webseite Dateien | 17 Dateien | 57 Dateien |
| Ganze Webseite Bytes | 22.981 Bytes | 507.041 Bytes |
| Anzahl geladener Dateien | 5 Dateien | 8 Dateien |
| Größe der geladenen Dateien | 9.059 Bytes | 23.631 Bytes |
| Anzahl der DIV-Container | 8 DIVs | 15 DIVs |
Ich habe zwecks besserer Vergleichbarkeit in den Original-Projekt-Dateien von YAML die ausführlichen Kommentare gelöscht. Da sich viele dieser Kommentare auf Seitenelemente bezogen, die bei GridEasy gar nicht benötigt werden, ist der Vergleich so meines Erachtens fairer.
Wie gesagt, die Webseiten sind, unabhängig von benutzten Framework, optisch nahezu identisch, die minimalen Unterschiede fallen nur auf, wenn man beide Seiten nebeneinander betrachtet.
Kommen wir zum dem, was die beiden Seiten tatsächlich unterscheidet und der YAML-Lösung angeblich den entscheidenden Vorsprung geben soll. Die Lösung mit GridEasy ist ein sogenanntes statisches Seiten-Layout. Das heißt, dass die Gesamtbreite der Seite ebenso wie die Breite der Spalten fest definiert sind. Wenn ich im Browser die Schriftart vergrößere, so verändert sich die Spaltenbreite nicht. Die Lösung mit YAML ist ein sogenanntes flexibles Seiten-Layout. Das heißt, dass sich sowohl die Breite der gesamten Seite, als auch die Spaltenbreite an die Schriftgröße und das Browserfenster anpassen.
Theoretisch ist das flexible Layout natürlich eine gute Idee. Betrachtet man die YAML-Webseite im Firefox 2, dann stimmt das auch so, wie es YAML verspricht. Wenn man die Schrift vergrößert (z. Bsp. durch drücken Strg +), dann verbreitern sich alle Seitenelemente bis zu einer voreingestellten Maximalbreite oder bis das Browserfenster gefüllt ist. Dann wird nur noch die Schrift größer, die Spalten und die gesamte Seite wachsen nicht mehr.
Leider gilt das aber nur für den Firefox der Generation 2. Im aktuellen Internet-Explorer 7.0, im aktuellen Opera-Browser 9.27 und auch im Firefox 3, der in Kürze die Version 2 ablösen wird, funktioniert das leider gar nicht so wie versprochen. In allen diesen Browsern verbreitern sich die Spaltenbreiten und die Gesamtbreite der Webseite nahezu grenzenlos, was bei einer Browserfensterbreite von 1024 Pixeln schon bei einer Schriftvergrößerung von 30% bis 50% zur horizontalen Scrollleisten führt. Das heißt, um die Seite zu lesen muss man nicht nur vertikal, sondern auch noch horizontal scrollen (siehe Screenshots unten).
Und nicht nur, dass die Seiten „überlaufen“, auch die Verbreiterung der Spalten ist, wie man in den Screenshots sehr schön sehen kann, in jedem Browser anders und keinesfalls analog zur Schriftgröße. Wer Mathematik bisher für eine exakte Wissenschaft hielt, wird durch die Browserhersteller eines Besseren belehrt.
Fassen wir zusammen: Die viel gepriesenen Vorteile des flexiblen Layouts sind bei Licht und am realen Beispiel betrachtet gar nicht existent. Anpassung an das Browser-Fenster? Fehlanzeige. Die Zeilenlänge bleibt beim Zoomen gleich? Auch nur ein Traum. Betrachtet man das ganze auf einem wirklich kleinen Bildschirm, zum Beispiel einem Handy, dann wird es noch schlimmer. Da ist dann nicht mal mehr eine einzelne Spalte in kompletter Breite sichtbar, es sei den der Provider zoomt die Seite vor der Übertragung an das Handy selbstständig herunter (was einige Provider für Internet über Handy tun) oder aber das Handy hat einen intelligenten Browser eingebaut, der das erledigt. In den beiden Fällen brauche ich dann aber auch kein flexibles Layout, weil ja nicht das Layout die Darstellungsgröße steuert.
Was bleibt? Dass YAML eigentlich eine sehr gute Idee verfolgt. Aber leider, ohne Rückendeckung durch die Browserhersteller. Und damit wird die gute Idee leider weitestgehend wertlos. Die Vorteile sind akademisch, das heißt, sie sind nur in der Theorie vorhanden, im realen Leben mit einem realen Browser betrachtet leider meistens nicht.
Dafür muss ich dann aber 8 statt 5 Dateien vom Server laden, um die gleiche Darstellung der Webseite zu erzielen, mit 23.631 Bytes Umfang statt 9.059 Bytes. Und ich muss im (X)HTML 15 DIVs bemühen, die Seite zusammen zu halten statt derer 8. Nah danke. Das sieht für mich nicht nach der Zukunft des Webdesigns aus. Und Dirks Titel „Flexible Layouts vs. Fixe Layouts – 5:0“ erlaube ich mir auch mal anzuzweifeln.
