Webstandard & Webdesign - CSS, HTML

Ich muss zugeben oftmals bin ich auch Anhänger des zentrierten Layouts mit fixer Breite. Gerade mit den Zoom-Funktionen ist das denke ich auch keine schlechte Lösung.
Ein typografisch gutes elastisches Layout zu erstellen ist sehr schwer und ich kenne auch nur wenig gute. Aber der Mix könnte hier die beste Lösung sein, damit meine ich, zentriertes Layout mit elastischer Breite, ABER mit einer maximalen und minimalen Breite.
Beispielsweise sollte Textzeilen nicht zu lang oder zu kurz werden, sonst sind die Texte nicht mehr angenehm zu lesen.

Ich bin froh, dass es alle Browser gleich handhaben. Auch, wenn ich mich stets bemüht habe, alle Design-Umsetzungen mit der Schriftgröße skalierbar zu machen, gefällt mir die Zoom-Variante besser. Dass Bildschirme größer werden hat für mich den Vorteil, dass man mehr Fenster öffnen kann. Eine Website mit 1600 x 1200 zu öffnen, bei der der Text von links nach rechts (also ein Buch in einer Zeile) läuft, finde ich schrecklich. Besser sauber strukturiere ordentlich gestaltete fixe Layouts.

Ich mag zentrierte Layouts überhaupt nicht. Fixe breite ja, aber bitte nicht zentriert.
Dadurch habe ich überhaupt nichts gewonnen. Mal abgesehen davo dass die Seite (ohne aufwändige Abfragen) bei manchen Browsern "hüpft", jenachdem ob ein Scrollbalken vorhanden ist oder nicht.

Ich halte gar Nix von festen Layouts. Auch, wenn die heutigen Browser eine halbwegs funktionierende Zoom-Funktion haben, warum muss ich als Client ständig die Fehler der Webdesigner ausbügeln? Ein Webdesigner, der was gelernt hat und was kann, sollte ein dem Bildschirm angemessenes Design allemal besser hinkriegen als eine Zoom-Automatik.

Auch das Argument mit den langen Zeilen zieht nicht. Siehe: http://www.einfach-fuer-alle.de/blog/id/2477 und http://www.rorkvell.de/news/2009/Web-Saurier.html.de

Flexible Layouts sollten mit einem prozentualen Padding für das Wurzelelement ausgerüstet sein, um die Proportionen auf verschiedenen Bildschirmen in Etwa gleich zu halten. Dadurch wachsen die Zeilen schon mal nicht so schnell wie die Bildschirmbreite. Darüberhinaus bietet CSS die Möglichkeit des Mehrspaltenlayouts. Diese Möglichkeit sollte man nutzen, anstatt die Seiten künstlich zu begrenzen.

Der normale Ablauf bei der Erstellung einer Webseite für einen Kunden ist bei uns so, dass zunächst ein grafischer Entwurf als Bilddatei angefertigt wird. Dieser wird dann in einem oder zwei Schritten nach Kundenwunsch weiterentwickelt und schlussendlich abgenommen.

Der Kunde erwartet dann zurecht, dass die HTML-Umsetzung auf allen gängigen Browsern dem grafischen Entwurf entspricht bzw. diesem möglichst nahekommt.

Da ist für frei fließende Layouts kein Platz.

Ich begrüße sehr die neuen Zoommöglichkeiten der Browser, welche den px zu einem skalierbaren Element machen und em-Formatierungen wie "width:5.8613em" für Bilder endlich überflüssig machen.

Dass EfA da nachbessern könnte, ist mir klar :) EfA hat das CSS-basierte Mehrspaltenlayout auf die Linkliste beschränkt. Dabei bietet es sich speziell bei längeren Blogartikeln gerade für die Artikel an. Aber richtig angewandt funktioniert das recht gut.

Ich habe das in meinem Blog so gemacht, dass die Artikel möglicherweise mehrspaltig angezeigt werden. Auf einem normalen 4:3 Monitor wird wahrscheinlich nur eine Spalte dargestellt. Da ich die Standardschriftgröße (mit volle Absicht) nicht verändert habe, dürfte das Alles in Allem lesbare Zeilen ergeben. Auf meinem Widescreen stelle ich mir je nach Tagesform (ich habe eine beträchtliche Sehschwäche) eine Schriftgröße von 20 oder 22 Pixel ein. Bei 20px bekomme ich 2 Spalten. Bei 22px eine. Mein Bruder bekommt auf seinem 1980px breiten Notebook-Bildschirm drei Spalten. So bleibt das flexibel und lesbar und bietet auf jedem Monitor ein passabel nutzbares Bild. Diese Flexibilität habe ich dadurch erreicht, dass ich eben _nicht_ angegeben habe, wie viele Spalten ich will, sondern nur, wie breit diese Spalten sein sollen, und zwar in em. Damit ist die Spaltenbreite abhängig von der Schriftgröße, was bei jeder Schriftgröße eine in etwa gleich lange Zeile bedeutet. Ein paar Buchstaben mehr oder weniger sind dabei unschädlich.

Noch ungelöst ist allerdings die Darstellung sehr kurzer Artikel. Diese wären besser einspaltig, selbst, wenn dadurch die Zeilen lang werden. Momentan muss ich dazu den generellen Stil durch einen inline-Stil überschreiben. Aber einen Stil abhängig von der Größe des Inhalts des Containers gibt es ja leider nicht.

Trotzdem, mit sorgfältiger Überlegung kann man eine ganze Menge erreichen.

@Tobi

Pixelgenauigkeit nach Wunsch des Kunden und für Flexibilität kein Platz? Willkommen in der Zeitblase des Stillstands.

@webstandard-team
Mittelfristig ja, weil man erwarten darf, dass Leute, die den Zoom benötigen, zu Browsern greifen, die ihnen diese Funktionalität bieten und nicht beim ältestmöglichen verharren werden.

Es stellt sich für mich aber eher die Frage, warum hier nach reinen elastischen Layouts gefragt wird, die schon immer eine Relevanz nahe dem Nullpunkt hatten, schon allein aufgrund der lästigen Rechnerei, die zudem nicht einmal in allen Browsern vollständig sauber umsetzbar ist (Stichwort: Operas Prozentberechnung)?

Die Frage wäre in Bezug auf fluide/flexible Layouts (Bezeichnung nach Wunsch einsetzen) viel interessanter und in diesem Fall wäre die Antwort ganz klar Nein. Diese werden in keinem Fall obsolete. Und sogar Microsoft hat das bereits kapiert und spendiert dem IE8 eine deutlich verbesserte Zoomfunktion, die ähnlich des Opera und Firefox flexible Layouts adaptiv behandeln und dadurch horizontale Scrollbalken in flexiblen Layouts so lang wie möglich verhindert (trotz Grafikzoom).

@Dirk: Ich hoffe wir sprechen von der selben Bezeichnung, denn du schreibst "Die Frage wäre in Bezug auf fluide/flexible Layouts..." Fluid und flexible sind zwei verschiedene Layout-Typen

- Elastisches ( elastic oder flexible ) Layout ist skalierbar samt Bilder ( wenn entsprechend umgesetzt )

-fließendes ( fluid ) Layout bezieht sich auf die Größe des Viewports und den daraus resultierenden Veränderungen des Layouts in Sachen Breite

Elastic/fluid: So weit ich weiss, macht nicht die Skalierbarkeit von Bildern den Unterschied. Elastic bedeutet, dass sich die Komponenten der Webseite Änderungen der _Schriftgröße_ anpassen, während fluid bedeutet, dass sich die Komponenten der Webseite den Änderungen des Viewports anpassen.

Generell und etwas vereinfacht gesagt, sind elastische Layouts auf em basierend, und fluide Layouts auf Prozent basierend. Bilder lassen sich nach beiden Methoden skalieren.

Ansonsten stimme ich Dirk zu: Die Reinform (elastic oder fluid) ist eher selten sinnvoll. Meist ist eine Mischform (Kombination) sinnvoll.

Es kommt auf den Inhalt an. Bei einem Blog mit viel Text wird ein elastisches Design besser sein, weil ich mir als Besucher die Zeilenbreite einstellen kann, die ich haben will.

Problematisch wird flexibles Design dann, denn viele graphische Elemente reinspielen, etwa Bilder. Ein Bild kann ich nicht zusammenstauchen, das klemmt irgendwann. Geht der Content auseinander, habe ich Löcher - oder noch schlimmer (bei floatenden Bildern) kleine Textkrümel am Rand.
Hier bin ich SEHR dankbar, dass es gute Zoom-Funktionen gibt...

Man sieht nicht mehr welche Webseiten schrottig und welche exzellent sind.
Herr Kollege...
Meinereiner hat dafür Augen + Auswertungssoftware eingebaut.

„Herr Kollege…
Meinereiner hat dafür Augen + Auswertungssoftware eingebaut.“

Das war ja auch nicht auf „Experten“ oder mich gemünzt, sondern auf die Durchschnittssurfer, Herr Kollege. Diese sehen es dann nicht mehr, wenn es das Layout zerlegt. So werden qualitative Seiten dann wieder zu Luxus, den man nicht mehr bereit ist zu bezahlen. (Motto: „Sieht ja eh keiner.“)

@Jo gibts die nicht sogar schon? Stichwort: .svg