Skip to content

Flexible oder pixelgenaue Layouts : Ursachen und Gründe

Ich habe heute in der Linkliste auf zwei Beiträge zu flexiblen Layouts hingewiesen.

onli kommentierte daraufhin recht ausführlich. Beim Schreiben meiner Antwort fiel mir auf, dass es ein bisschen lang wird, deshalb jetzt als eigenen Artikel. onli schrieb:

"Ich bin über die Diskussionen über flexible Layouts immer wieder überrascht. Denn eigentlich führt die Diskussion am Thema vorbei. Das eigentliche Problem dürfte sein, dass CSS in derzeitiger Form ungeeignet ist für das, was ein dynamisches Layout erfordert. Man kann viele Dinge einfach nicht zuverlässig erreichen, die nötig wären: Elementen eine dynamische Größe zuordnen, aber mehreren Elementen immer die gleiche. Nachbarbeziehungen, die über ein float hinausgehen usw usf. Sicher, ich bin kein Profi, aber es scheint mir so, als sei die Ursache der Diskussion dergestalt, dass einige notwendige Layoutanforderungen mit dynamischen Layouts nicht oder nur schwer umsetzbar sind. Die Antwort sind dann aber nicht pixelgenaue Layouts, sondern Verbesserungen am Handwerkszeug. Ich werde mir bei Gelegenheit die verlinkten Videos anschauen, vielleicht beinhalten diese ja Konzepte, die meine obige Argumentation ad absurdum führt, weil damit dann alles so umsetzbar ist wie ich es mir vorstelle. "

Ich habe ja schon mal recht ausführlich über flexible Layouts geschrieben, ein paar Bildbeispiele wie sich flexible Layouts auswirken habe ich anlässlich eines Wechsels des Hintergrunds mal beschrieben. Meines Erachtens sind flexible Layouts nicht schwierig, wenn man von vorne herein flexibel denkt. Das Hauptproblem ist, dass ein Design auf Papier in fester Größe entworfen wird und dann eben häufig auch nicht mehr so einfach flexibel umgesetzt werden kann. Design bedeutet häufig, es ist ein Entwurf eines Designers, der gestern einen Flyer in A5 entwarf, morgen ein Plakat in A0 und deshalb heute beim Entwurf einer Webseite in 1024*768 denkt.

Solche Entwürfe können sehr schwierig umzusetzen sein und sind oft auch nicht flexibel lösbar. Für mich ist jedoch die Grundlage des Webs, dass ich eben nicht weiß, welches System, welche Auflösung mein Nutzer gerade verwendet, dass ich nicht weiß, ob er Schriftgrößen ändert und und und. Ich versuche deshalb Layouts von vorne herein so zu erstellen, dass es nicht wichtig ist,welche Voraussetzungen gegeben sind. Leider ist die Tendenz jedoch nach wie vor, das Optimieren auf eine Auflösung und nicht das Erstellen eines anpassungsfähigen Layouts.

Yaml von Dirk Jesse auf das sich die Videos beziehen ist ein Framework, was den Webautoren schon vieles abnimmt. Enthalten sind in Yaml bereits Definitionen um Browserfehler zu umgehen. Es gibt z.B. auch WordPress-Yaml-Themes, die sich recht einfach anpassen lassen, weil vieles eben bereits berücksichtigt wurde. Der Nachteil ist offensichtlich, ein Framework muss alles berücksichtigen und ist deshalb schon ein dickeres Ding. Ich selbst nutze natürlich auch Vorlagen und fange nicht bei jedem Layout bei 0 an, aber ich nutze kein Framework. Für meine eigen Layouts kenne ich mittlerweile den größten Teil der möglichen Probleme und ihre Lösung. Im Gegensatz zu fast allen Designern entwerfe ich Layouts nicht auf Papier, auch nicht in einem Bildbearbeitungsprogramm, sondern wirklich live auf einer Testseite. Ich sehe so viel schneller, welche Idee problematisch werden könnte und überlege mir Alternativen, noch bevor das erste Layout fertig ist.

Ist CSS ungeeignet für Layouts?

onli überlegt, ob CSS nicht einfach ungeeignet ist und sich das Handwerkszeug verbessern müsste. Nein, das glaube ich nicht. Das Hauptproblem bei CSS-Layouts ohne Tabellen und in modernem Design ist nicht das CSS. Die Realisierung für standardkonforme Browser wie Firefox, Opera, Safari usw. die ist nicht so schwierig. Es kommt selten vor, dass es spezielle Anpassungen braucht, um ein Layout für diese Browser wie gewünscht zu realisieren. Das eigentliche Problem sind die alten Versionen der Internet Explorer und leider in manchen Fällen sogar der aktuelle IE8.

Manches ist irgendwann bekannt und lässt sich recht schnell auch für die IEs anpassen. Aber immer mal wieder passiert es, dass wegen eines IE-Fehlers Stunden drauf gehen, um eine Lösung zu finden. Microsoft möchte, dass jeder ihrer Browser auch die Seiten korrekt darstellt, die für eine fehlerhafte Vorgängerversion optimiert wurden. Dabei entstehen immer wieder Probleme und noch hat jede IE-Version teils haarsträubende Fehler. Das kommt zwar auch bei anderen Browsern mal vor, nur falls Firefox 2.14 etwas falsch darstellt, dann ist es das heute beim Stand von Firefox 3 nicht so schlimm, denn nur wenige nutzen aktuell diese eine Version, wenn ein Layout trotzdem lesbar bleibt, käme kaum ein Webautor auf die Idee, wegen dieser einen Version etwas zu ändern. Beim IE hält eine Version "ewig" der immer noch stark verbreitete IE6 ist aus dem Jahr 2001, da gab es noch gar keinen Firefox...

Was ist die Lösung für dynamische Layouts?

Die eine ultimative Lösung gibt es nicht. Denn ein modernes Layout mit dem Anspruch das zu zeigen, was heute Stand der Technik ist, das passt zu modernen Browsern. Der IE6 kommt aus einer Zeit als ganz andere Designs entworfen wurden, für die Layouts seiner Zeit war er auch kein Traum, aber noch akzeptabel. Für heutige Layouts ist er einfach ungeeignet und das führt dazu, dass es sehr aufwändig wird, wenn ein besonderes, aktuelles Design umgesetzt werden soll. Meine Layouts, die nicht darauf aufbauen, dass sie pixelgenaue Linienführungen haben, lassen sich schon deshalb viel einfacher umsetzen. Außerdem habe ich nicht den Anspruch, dass ein Layout in jedem Browser absolut identisch aussieht.

Für mich genügt es, wenn alles lesbar ist und die Optik nicht völlig verschoben. Wenn der IE6 das "miradlo bloggt"-Bildle nicht genauso darstellt wie alle anderen, dann ist mir das egal, es ist nicht so hübsch, aber auch nicht kaputt, ich höre an dieser Stelle auf und bastele dann nicht noch Stunden weiter, um mit Tricks und Schlichen eine identische Optik zu bekommen. Wozu auch? Denn mein sich anpassendes Layout sieht je nach Auflösung sowieso immer ein bisschen anders aus. Für mich ist es wichtig, dass Besucher in etwa ein Design bekommen, was aktuell ist, dass alles lesbar und bedienbar ist und möglichst wenig Scrollbalken hat. Dieses Ziel lässt sich mit CSS und flexiblen Layouts recht gut erreichen.

Manches lässt sich nicht dynamisch und zuverlässig erreichen?

onli fragt sich, ob nicht einfach was fehlt um zuverlässig z.B. Elementen eine dynamische Größe zuzuordnen, aber mehreren Elementen dabei immer die gleiche. Auch das fällt für mich unter Browserprobleme. Es ist mit standardkonformen Browsern durchaus möglich solche Anforderungen zu erfüllen. Die Grenze dessen ist vor allem der IE6. Für mich kein Grund das nicht zu nutzen, denn ich mag die speziellen Stylesheets die per Conditional Comments z.B. nur genau dem IE6 sagen, was er zu tun hat. Damit bekommt der IE6 dann eben etwas was nicht so flexibel ist, aber für einen Browser der so alt ist, kann ich damit leben. Falsch finde ich etwas nicht zu nutzen, nur weil der IE6 es nicht kann. Ebenso überflüssig finde ich es Tage in eine Lösung für den IE6 zu investieren, nur um irgendwas auch da noch hinzubekommen. Allerdings halte ich auch nichts davon, "das Kind mit dem Bad auszuschütten" und dem IE6 einfach gar kein Layout und Warnhinweise zu geben. Die Nutzer eines IE6 nehmen ihn entweder, weil er ihnen am Arbeitsplatz vorgeschrieben wird oder weil sie nicht in der Lage oder bereit sind einen anderen Browser zu installieren. Insgesamt meine ich geht es um genau zwei Punkte:
  • Das Web ist nicht aus Papier, ein Layout sollte daher nicht für "welche Auflösung auch immer" optimiert werden
  • Eine Webseite muss nicht in jeder Umgebung identisch aussehen
Berücksichtigt man das, dann gibt es kein Problem mit flexiblen Layouts, so einfach ist das. ;)

Trackbacks

Keine Trackbacks

Kommentare

onli am :

onli Ok. Ich bin die Videos noch nciht durchgegangen, gebe dir aber in allen Punkten recht: der IE muss nicht voll berücksichtigt werden und ein Framework ist eigentlich nicht nötig, sollte nicht nötig sein, da overhead produzierend.

Nehmen wir ein drespaltiges Blog-Layout ud machen es vollkommen flexibel, beide Seitenleisten auf eine Seite. Dann würde ich so vorgehen: header, wrapper, darin sidebarcontainer, darin zwei sidebars, daneben content, darunter footer (außerhalb des wrappers). floate ich dann die linke Sidebar, wende auf die rechte die gleiche breite (45%) als margin-left an, sind die nebeneinander. Der Sidebarcontainer selbst 30% width, content 60% width, margin-left 35%. Dann füllen wir content mit Inhalt, der größer ist als die corige height. Wie schaffen wir es nun, dass die Sidebar sich flexbiel verlängert, immer so hoch wie der content? Das ist keine rhetorische Frage, daran bin ich gescheitert. Das Problem ist, dass 100% sich scheinbar nur auf die Bildschirmhöhe bezieht, nicht auf die neue Höhe des wrapper-Elements.

Ich bräuchte sowas wie "height: content.height;". Und besser als die margin-left und float-lösung wäre: #content {
neighbor-left: #SideBarContainer;
}

Beispielcode: http://www.onli-blogging.de/uploads/layout.html
Gruß

ute am :

ute Ok, eins nach dem anderen... ;)

Fein, dass wir uns mal grundsätzlich einig sind bezogen auf Framework und IE. :)

Ich nehme bei nahezu jedem Layout nochmal einen alles umschließenden Container, der header und wrapper usw. enthält...

Ansonsten ich arbeite nicht mit Prozentwerten, denn hier kann es passieren, dass Browser unterschiedlich interpretieren, man sollte wenn denn dann nicht auf 100% sondern auf 98% oder 99% gehen, um ein bisschen Spielraum zu haben. Trotzdem nicht hat für mich zwei Gründe:
ich denke damit wieder in recht exakten Werten
der IE ist da zuweilen ziemlich zickig


onli: Wie schaffen wir es nun, dass die Sidebar sich flexbiel verlängert, immer so hoch wie der content?


Gar nicht, das geht nicht, das ist nicht so gedacht. ;)

Die Werte insbesondere die Prozentwerte für die Höhe beziehen sich auf den Inhalt. 100% bedeutet nur alles anzuzeigen, es heißt nicht, wie man vermuten könnte, dass damit die Höhe danebenliegender Container genutzt wird.

Warum das so ist?
float wurde erfunden um zu umfließen, sieht man hier im Blog meist bei Bildern, die ich vom Text umfließen lasse. Weil es umfließen ist, kann es nicht gleichzeitig fix sein.

Also geht es doch nicht?
Jein. Die Sidebar wird niemals wirklich 100% Höhe haben. Aber sie kann so aussehen als ob.

Genutzt wird ein umschließender Container, dieser hat immer die Höhe der längsten Spalte, diesem gibst ein Hintergrundbild in der passenden Breite deiner Spalten, damit sehen sie aus als wären sie gleich lang, sind es aber nicht. Genaueres hierzu:


Schau mal hier:
Zum Ausprobieren und Nachmachen: http://www.positioniseverything.net/threecolbglong.html

und da über Faux Columns, die heißen so, weil sie eben nur aussehen als ob...
http://www.alistapart.com/articles/fauxcolumns

Für die Hintergrunderklärungen:
http://www.alistapart.com/articles/holygrail

Beispiel zum heiligen Gral des dreispaltigen Layouts:
http://www.alistapart.com/d/holygrail/example_3.html

Deutschsprachig bei SelfHTML:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

Nochmal was zum Rumspielen:
http://www.cssplay.co.uk/layouts/3cols.html

Es geht also doch. Die gefloateten Layouts haben allerdings das Problem, dass weitere floats im Innern der Spalten zu ungeahnten Fehlern vor allem im IE führen können.

Ich ziehe daher stabilere Lösungen vor. Auf uteles Blog habe ich drei Spalten mit position:absolute realisiert, dann kann ich innen noch immer mit floats spielen, ohne Seiteneffekte oder aufwändiges testen.

##############

Ansonsten empfehle ich bei jeglichen Überlegungen zu Layouts mindestens zwei Hilfen:

Die Webdeveloper-Toolbar des Firefox, die erlaubt auf Seiten mit Layouts, die man mag sich ganz einfach mal das CSS dazu anzusehen.

Und spätestens beim selbst entwickeln den Firebug. Innerhalb des Firebug kann man auch mal was ausprobieren, sich ansehen und vieles wird klarer.

Melde dich, wenn ich mich unklar ausgedrückt habe, dich missverstanden habe, oder du sonst an irgendwas hängen bleibst...

onli am :

onli Ich werde mich nochmal dransetzen und teilweise die Links ausprobieren. Allerdings: Der fauxcolumns-Ansatz ist ungeeignet - Er mag funktionieren, aber benötigt ein pixelgenaues Bild als Grundlage. Damit kann man kein echt flexibles Layout erstellen. Auch die meisten der anderen Links beinhalten Pixelangaben, trotzdem funktionieren sie vielleicht, das herausheben aus dem eigenen Container ist kein blöder Gedanke. Nur absolut nicht intuitiv. Genau das meinte ich, hier scheint CSS Handwerkszeug zu fehlen.

>100% bedeutet nur alles anzuzeigen, es heißt nicht, wie man vermuten könnte, dass damit die Höhe danebenliegender Container genutzt wird.

Davon bin ich auch nicht ausgegangen. Aber davon, dass sich heigt auf die Höhe des Elternelementes bezieht. Ich kann und will dich nicht belehren, sorry wenn das so wirkt, aber mein Beispiellayout zeigt auch recht deutlich, dass die height-Angabe an sich so funktioniert (sonst wäre die gelbe umrandete rechte Sidebar nicht bis nach unten verlängert). Trotzdem geht das dann nicht mehr, wenn die Größe des Elementes sich durch die Größe der beinhaltenden Elemente verlängert.

ute am :

ute @onli
Sorry, für die fehlende Antwort.

Ich hatte direkt geantwortet. Mein eigener Kommentar landete, obwohl ich eingeloggt war im Spam, dort habe ich ihn rausgeholt und auf "Genehmigen" gesetzt, tja, wie ich jetzt sehe, hat das wohl nicht geklappt, das Ding ist weg... :(

Werde irgendwann heute nochmal schreiben, muss aber erst die Links wieder suchen...

ute am :

ute Sodele,

jetzt erstmal die Links zum Dreispaltenlayout in flexibler Version.

Erklärung:
http://ago.tanfa.co.uk/css/layouts/flexi_floats/index.html

Testbeispiel:

http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v2.html

Mit Bildern statt Farben:
http://4haus.de/test/dciwam/bunteseite.html

Wohl die beste Erklärung:
http://www.css-petals.net/post/reines_css_dreispalten_layout.html1

Mit folgendem Beispiel:

http://www.css-petals.net/templates/trinity/



onli: Der fauxcolumns-Ansatz ist ungeeignet - Er mag funktionieren, aber benötigt ein pixelgenaues Bild als Grundlage.


Jein, das Bild kann größer sein und so Flexibilität ermöglichen.





onli: das herausheben aus dem eigenen Container ist kein blöder Gedanke. Nur absolut nicht intuitiv. Genau das meinte ich, hier scheint CSS Handwerkszeug zu fehlen.


Hm, ich denke es ist nicht so einfach. Es gibt Gründe, warum es genauso ist, wie es jetzt realisiert ist. Das ist nicht einfach und auch nicht intuitiv, gar kein Zweifel.

Jedoch sehe ich auch das Problem es einfach und intuitiv zu lösen, denn die möglichen Wünsche die enthalten sein können sind schon vielfältig.





onli: Davon bin ich auch nicht ausgegangen. Aber davon, dass sich heigt auf die Höhe des Elternelementes bezieht.


Wieder nicht intuitiv, es geht um den Inhalt nicht um die optische Höhe. Der Hintergedanke ist wahrscheinlich, Scrollen zu vermeiden, also sind die 100% halt das was der Inhalt braucht.

Ich bin nicht die Heldin im Erklären der Theorien, könnte jedoch nochmal suchen gehen, grad zur Höhe da gabs eine Begründung...





onli: Ich kann und will dich nicht belehren, sorry wenn das so wirkt, aber mein Beispiellayout zeigt auch recht deutlich, dass die height-Angabe an sich so funktioniert (sonst wäre die gelbe umrandete rechte Sidebar nicht bis nach unten verlängert).


Es wirkt nicht belehrend auf mich.

Dein Beispiellayout funktioniert bei mir so:

Wenn ich die Fenstergröße verkleinere, dann geht der rote Kasten nicht mehr bis ans Ende. Der gelbe Kasten jedoch schon.

Damit sind wir bei dem umschließenden Container, deine beiden Sidebars sind in einem Container, dein Inhalt ist in einem anderen Container.

float umfließt und wird sich deshalb immer anzupassen versuchen.



onli: Trotzdem geht das dann nicht mehr, wenn die Größe des Elementes sich durch die Größe der beinhaltenden Elemente verlängert.




Sorry, das habe ich nicht kapiert. Bitte erkläre mir nochmal was du da meinst. Hab grad wenig Zeit, sonst würde ich es ausprobieren.

onli am :

onli onli: Trotzdem geht das dann nicht mehr, wenn die Größe des Elementes sich durch die Größe der beinhaltenden Elemente verlängert.
Sorry, das habe ich nicht kapiert. Bitte erkläre mir nochmal was du da meinst. Hab grad wenig Zeit, sonst würde ich es ausprobieren.

Also: Beim Beispiellayout ist die rechte Seitenleiste auf height:100%. Das funktioniert auch und bezieht sich nicht auf den Inhalt, weil in der Seitenleiste nichts drin ist. Wenn aber der Inhalt größer ist, als height: 100% ohne Inhalt es wäre, dann wird die Größe des Elterncontainers nicht angepasst, andere Elemente im gleichen Container bleiben bei der Höhe, die ohne Inhalt sich ergibt.

Ansonsten: http://www.css-petals.net/post/reines_css_dreispalten_layout.html1 scheint ziemlich perfekt zu sein.

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck