19.01.06Herausforderung elastische Layouts
Mitunter sollen ja elastische bzw. in der Breite flexible Layouts einer der Trends 2006+ werden. Es geht aber nicht nur um Trends. Es geht neben ästhetischen Aspekten und der möglichst geschickten Nutzung des zur Verfügung stehenden Raums bei großen Displays auch um die Zugänglichkeit von Websites . Es gibt dabei allerdings einige Hindernisse zu überwinden, um zu einem wirklich guten Ergebnis gelangen zu können. Diese zusammengenommen beschreiben auch gewissermaßen die Angst vorm Kontrollverlust des Designers. Fixe Layouts sind allgemein einfacher umzusetzen. Probleme bereitet die optische Präsentation der Inhalte, sobald Elemente von Websites in der Breite flexibel werden.
Grafiken und Hintergründe auf flexiblen Websites, sowie die Lesbarkeit der Texte, sind die großen Herausforderungen. Die CSS-Unterstützung durch die Browser ist noch nicht weit genug, um extrem komplexen detailreichen Designs das Dehnen ohne Umstände beizubringen. Noch eine Anmerkung vorweg. Es geht bei fluiden oder elastischen Layouts nicht darum, dass Websites auch 1:1 auf kleine Handydisplays passen - das ist ein Missverständnis. Für diese Problemstellung müssen andere Lösungsansätze diskutiert werden.
Minimale und Maximale Breite
Auch bei einer flexiblen Element- und Seitenbreite gilt es auf minimale und maximale Grenzbereiche zu achten. Ist die minimal zur Verfügung stehende Fläche zu schmal, wirkt es oft gequetscht. Bei extrem Breit ausgelegten Bereichen werden die Zeilen oft zu lang, die Lesbarkeit der Texte leidet erheblich. Deshalb sollte man bei aller Flexibilität Grenzen setzen. Vielleicht zwischen 760px - damit es auch auf den aussterbenden 15 Zöllern noch passt - und 1200px als maximale Gesamtbreite, damit die Inhalte in den Contentbereichen noch gut lesbar bleiben. Rein theoretisch eine sehr einfache Angelegenheit.
.flexibel {
width:50%;
min-width:380px;
max-width: 600px;
background:#fff;
}
Nur eben der Internet Explorer versteht diese CSS-Eigneschaft nicht. Aber mit etwas mehr Aufwand kann man auch ihn dazu bringen, minimale und maximale Breiten zu unterstützen.
Das Problem ist max-width dann, wenn JS nicht aktiviert ist. Die Folge sind u.a. unkontrollierbare Zeilenlängen und damit bei sehr breiten Displays, neben wahrscheinlich unschönen Layouteffekten, auch schlecht lesbare Texte, wegen der extrem langen Zeilen. Dennoch sollte man diese Probleme so für die meisten Besucher der Website lösen können.
Header-/Logografiken
Hier wird beispielsweise mit Übergängen gearbeitet. Das sieht oft allerdings nicht besonders gut aus. Besser sind Grafiken, die so ausgelegt sind, das sie rechts abgeschnitten weiter ein Hauptmotiv zeigen. So z.B. bei Roger Johansson.
Eine wirklich gelungene Lösung für in der Breite flexible Headergrafiken zeigt die Website der diesjährigen @media. Überhaupt wohl einer der vielversprechendsten Ansätze. Eine Haupt-Logografik , mit auslaufenden Elementen, bei denen es unerheblich ist, wieviel davon sichtbar ist. Es wirkt trotzdem irgendwie immer komplett.
Hintergründe
Das Problem sind hierbei z.B. Hintergrundgrafiken, die ein Element in der Horizontalen komplett füllen sollen. Wird das betreffende Element bei einer kleineren Auflösung schmaler, ist der rechte Bereich der Hintergrundgrafik nicht mehr sichtbar. Umgekehrt, endet der Hintergrund irgendwo mittendrin. Unschöne Auswirkungen hat das beispielsweise bei der Verwendung von Schattierungen. Diesem Problem ließe sich sehr umständlich mit zusätzlichen DIVs und/oder Ebenen lösen. Bequemer wäre die Möglichkeit, mehrere Hintergründe auf ein Element anwenden zu können, wie das mit CSS 3 möglich sein wird. Da diese Möglichkeit aber noch nicht besteht, bleibt entweder der Verzicht auf entsprechende Hintergrundgrafiken oder eben die Mehrarbeit.
Skalierbare Grafiken
Die beiden zuvor beschriebenen Problemzonen könnten damit bearbeitet werden. Mit SVG, den Scalable Vector Graphics. Aber das ist noch ein sehr weites Feld. Gerrit van Aaken beschreibt diese Technik am Beispiel der in Mode gekommenen Feed-Icons sehr schön. Allerdings weist er darauf hin, dass die Unterstützung der SVG noch sehr zu wünschen übrig lässt. Das macht diese Lösung noch nicht wirklich praktikabel.
Abstände und Polster
Eine echte Skalierung von Texten erfordert nicht nur die Angabe von Textgrößen in % oder EM. Ändert sich beispielsweise die Größe eines umgebenden Elements - z.B. einer Hinweisbox -, müssen Abstände (margins) und Polster (paddings) mit wachsen bzw. schrumpfen. Auch Abstände und Polster gilt es dann in flexiblen Maßeinheiten anzugeben. So bleiben bei Vergrößerung bzw. Verkleinerung auch die Proportionen erhalten. Insgesamt wirkt das Design so harmonischer.
Fazit
Das waren einige der wichtigsten Aspekte und Hindernisse, auf die es bei der Konzeption eines flexiblen Seitenlayouts zu achten gilt. Genannt wurden z.B. nicht die Unwegsamkeiten bei der Erstellung mehrspaltiger fluider Layouts. Wie ich finde ein weiteres weites Feld für sich. Aber da ich mich noch intensiver mit der Materie beschäftigen werde, wird wohl im Lauf der nächsten Monate auch hierüber zu lesen sein. Weiter informieren kann man sich über die Links im Anschluss. Es gilt eine Umstellung sehr detailiert zu planen und sich stets eine Vorstellung davon zu machen, was die flexible Breite für einzelne Elemente und ihr Zusammenspiel zu bedeuten hat. Die Frage lautet: Sind wir soweit, wirklich gelungene nicht fixierte Layouts zu produzieren? Oder wird das erst mit CSS 3 und SVG wirklich möglich sein?
Gelungene Studienbeispiele
Der Vollständigkeit halber auch noch der Hinweis auf den jüngst erschienenen Ansatz von Eric Eggert. Er hat sich die Focus-Site vorgenommen, um sie standardkonform und zugänglicher umzusetzen. Das Ergebnis kann sich - man beachte die knappe Umsetzungszeit - mehr als sehen lassen. Wie die Diskussion zeigt, gibt es zwar noch ein paar kleinere Hürden zu überwinden, die aber zu managen sind. Auch das sollte einer der Ansätze sein, die es für die Zukunft zu dikutieren und weiterentwickeln gilt. Eric ist übrigens auch ein Webkraut.
Weiterführende Quellen
- Liquid Designs Galerie
- Elastic Design
- Elastisches Layout
- Anleitung für sichere flexible Layouts
- Ausblick auf CSS 3
- Einführung in CSS3
macx am Jan 19, 2006 | Reply
Björn am Jan 19, 2006 | Reply
Aber vom Prinzip her geht es ja auch mehr darum, aufzuzeigen, wo angesetzt werden muss. Ohne jetzt konkrete Lösungsvorschläge im detail zu diskutieren.
In meine Überlegungen ist Erics Ansatz schon aufgenommen ;-)
robert am Jan 19, 2006 | Reply
solange die css unterstützung nur teilweise gegeben ist müssen wir uns mit aufwändigen hacks herumschlagen.
fazit: die möglichkeiten sind da, werden durch CSS3 weiter ausgebaut. aber erst wenn die browser (und einer ganz speziell) all das CSS unterstützen können wir gezielt arbeiten.
jp am Jan 19, 2006 | Reply
Sehr hübsch fand ich auch die Technik die auf der in diesem Artikel: http://mezzoblue.com/archives/2006/01/13/site_launch/
besprochenen Seite angewendet wird. Abhängig von der zur Verfügung stehenden Breite werden verschiedene Teile des Layouts geändert, so dass den Rahmenbedingungen Rechnung getragen wird.
Heiko am Jan 19, 2006 | Reply
chrismue am Jan 19, 2006 | Reply
Dagegen halte ich es für problematisch, dem klassischen fixes 2-Spalten Blog Design, einfach relative Breiten zu geben und dies elastisches Design zu nennen.
Mein Problem bei voll-elastischer Gestaltung, ist in erster Linie, die schlechte Lesbarkeit von viel zu breiten Textspalten. Wenn 500px Textspalten ins Doppelte ausarten, dann ist die Lesbarkeit dahin. Aber man kann den p-Tags eine max-width geben? Ja sicher, aber wozu dann ein elastische anlegen? Nur um ein paar vertikale Elemente, horizonzal fließen zu lassen?
Wenn jemand eine saubere und einfache Lösung, zum dynamischen Anlegen von Textspalten, findet, dann werd ich mich überzeugen lassen, bis dahin bleibe ich skeptisch. Kurze Antwort, ja ich werde bis CSS3 warten.
Dirk am Jan 19, 2006 | Reply
Für min-width ein fixer Wert von 760px sinnvoll. Für kleinere Bildschirme als 800×600 muss man sicherlich gesondert optimieren, das sehe ich wie Du.
Für max-width halte ich aber eine fixe Größe für wenig sinnvoll. Man will doch in der Regel zu lange Textzeilen vermeiden. Warum also nicht gleich max-width auf Basis der Schriftgröße festlegen? Damit bleibt das Verhältnis Schriftgröße/Zeilenlänge einigermaßen konstant. Ich hab das so in YAML eingebaut und finde diese Lösung deutlich angenehmer auf großen Bildschirmen. Das Layout wächst beim Vergrößern des Browserfensters bis zum zulässigen Maximalwert mit. Weiteres Breitenwachstum erfolgt erst mit Vergrößerung der Schriftgröße.
Die Seitenaufteilung bleibt somit weitgehend unabhänging von Auflösung und Schriftgröße erhalten.
Peter am Jan 19, 2006 | Reply
Ich bin vorsichtig mit mitzoomenden Layouts - sie führen nämlich schnell zu waagrechten Scrollbalken. Und damit ist der Vorteil des Zoomens teilweise wieder weg, da waagrechte Scrollbalken eine erhebliche Barriere darstellen. Je kleiner der Monitor, desto extremer. Das fällt mir beim Focus-Layout von Erik auf (das insgesamt schlicht riesig ist - nicht dass ich falsch verstanden werde :)
Schöner und barrerefreier finde ich die Kombination: das Layout zoomt mit, bis die Breite des Browserfensters erreicht ist. Danach bleibt das Layout in der Breite fix und nur der Inhalt zoomt - was natürlich zu einer Umbruchänderung führt. Aber genau diese Umbruchänderung ist aus meiner Sicht wichtig. Nur so kann man auch in hohen Zoomstufen mit der Tastatur blättern und den Text fortlaufend lesen. Das ist in YAML nach meinem Eindruck gut umgesetzt; dahinter steht wohl width: 100% und ein max_width bezogen auf em. Aus Sicht der Barrierefreiheit wäre es noch besser, wenn die rechte Spalte unter die Contentspalte springen würde, sobald die Spalten wegen zu langer Worte anfangen zu überlappen. ich wüsste aber nicht, wie das per CSS zu bewerkstelligen wäre (ausser durch alternative Stylesheets natürlich).
Wenn man so eine Maximalgrenze nicht einbauen kann, würde ich bei der herkömmlichen Zoom-Technik bleiben. Ich würde aus diesem Grund auch width explizit nicht an die Schriftgröße binden, im Gegensatz zu max_width.
Ein einfacher Usability-Test: Das Layout mit mind. 150% auf einem 1024 Pixel Monitor aufrufen und versuchen alle Artikel zu lesen, die wichtigsten Links aufrufen und dabei die Maus nicht benutzen. Für mich ist das der Sinn des Browserzooms …
Zu den Bildern: man kann Bilderbreiten auch in % oder in em angeben und mit einem max_width versehen. Aber letztlich bringt eine Vergrößerung der Bilder nur was, wenn man sie mit höheren Auflösungen einbindet als bei 100% Zoom erforderlich. Dadurch verschwendet man allerdings Bandbreite. Ist das vertretbar?
Björn am Jan 19, 2006 | Reply
Genau. Denn auch absolut fixierte und schmale Layouts haben ihre Daseinsberechtigung, auch wenn die Displays im Allgemeinen weiter werden. Auch solche Layouts sind zugänglich umsetzbar. Bei sehr vielen Inhalten ollte man allerdings langsam darüber nachdenken, mehr in die Breite zu gehen.
Das ist auch ein Ansatz über den man nachdenken kann. Ich hielt es damals erst für einen Fehler. Es ist aber gewollt und mach durchaus Sinn.
Da sehe ich auch ein großes Problem. Viele Bilder und Grafiken müssen beim Zoom ästhetisch doch einiges einbußen.
YAML will ich mir bei Gelegenheit sowieso genauer ansehen. Ich habe schon mal grob drübergesehn und positives darüber gehört.
Finkregh am Jan 19, 2006 | Reply
der link da ist falsch: http://456bereatreet.com/ . fehlt ‘nen s :)
Fink
ulle am Jan 20, 2006 | Reply
Alles im Fluß, ist das nicht sogar die Ur-Darstellung mit HTML! Ich denke so war es gedacht. Nur schreiben wir das Jahr 2006 und da kann eine WEBsite nicht ohne “Design” auftreten. Also warum nicht den Fluß in sinnvollen Grenzen seinen Lauf lassen. Aber auf die Einheit Pixel sollte im Sinne der Zugänglichkeit verzichtet werden, trotzdem sollte niemals eine Pixelgrafik in anderer Einheit deklariert sein!
min-width: 47.75em (~ 764px); ausgehend davon das Nutzer mit Sehschwäche über breitere Bildschirmdarstellungen verfügen als 800 Pixel.
max-width: –em; in sinnvoller Größe
Images (gif/jpg/png) in relativer Einheit (Size-Values) ist in meinen Augen UNFUG
reieRMeister am Jan 20, 2006 | Reply
Wie wäre es denn mit einem Ansatz, in dem kleinere Bröckchen der Seite einfach floaten und bei mehr Platz nach rechts nebeneinander und bei weniger Platz untereinander dargestellt werden?
Ein solcher Ansatz ist ja zum Beispiel auf den Web design postcards zu sehen. Wenn man das ein wenig weiter denkt, sind siche rauch einige sehenswerte Ergebnisse drin. Dann wären zumindest die Nutzung der vollen Breite und lesefreundliche Zeilenlängen miteinander vereinbar.
ulle am Jan 20, 2006 | Reply
Eine min-/max-width Liquid-Layout auf Basis von relativen Einheiten (em/%) schliesst ja interne float-Blocks nicht aus, des weiteren ist eine solche Technik auch nicht auf das Zentrum beschränkt.
Screen-With-Values jenseits der 1280 Pixel sind keine Seltenheit mehr.
Ein Blick in die Multimedia Welt wirft den Fokus auf HD-TV mit einer Auflösung von 1920 x 1080 Pixel!
Und damit einher geht die Navigation in den rechten Bereich zu verlagern, oder gibts dann Kilometergeld für die Mouse….
Björn am Jan 20, 2006 | Reply
Danke für Deine beiden Beiträge.
Das ist auch ein sehr interessanter Aspekt, den Du ansprichst.
Überhaupt bleibt die Frage, wie breit noch gut bedienbar ist.
Martin Labuschin am Jan 24, 2006 | Reply
ulle am Jan 24, 2006 | Reply
@Martin Labuschin
Und wenn doch, es geht doch nicht um die Gewohnheiten der Nutzer, es geht um die max. Darstellungsmöglichkeiten. D.h. in Zukunft, wie auch jetzt schon, ist es überhaupt nicht vorher sehbar welche Bildschirm Eigenschaften ein Ausgabemedium des Types “screen” mitbringt, bzw. in welchem Window-Modus der User arbeitet.
Und da setzt Björn mit seiner Folgefrage an:
Monika am Jan 29, 2006 | Reply
mehr als interessante Diskussion.
Auf einem breiten Bildschirm erschlägt mich ein mitwachsendes Layout.
Es wird mir meist alles zu groß.
Ich beobachtete Menschen mit extremen Seheinschränkungen, die die großen Bildschirme verwenden, die genießen bei den nicht ewigst mitwachsenden Layouts, dass sie nicht wegen jedes Wortes scrollen müssen.
Bilder derart groß zu speichern, damit sie elastisch mitwachsen können, finde ich paradox.
Verschleudert Traffic, der bekanntlich kostet und behindert Ladezeiten. Vor allem, wenn man Webauftritte gestaltet, die auch für Länder gemacht werden, wo noch kaum DSl zur Verfügung steht.
Bis dato sah ich echt noch kein einziges flexibles Layout, das wirklich gut lesbar war.
An die 650 Zeichen kann der Mensch pro Zeile gut lesen, alles andere wird anstrengend und verleitet zum Wegklicken.
Diese Grenze des Menschen ist für mich maßgeblich. Nicht die technischen Möglichkeiten einer Bildschirmauflösung.
Machen wir WebDesign für den Menschen oder für die Bilschirmauflösungen …
Ich habe noch keine letztgültige Lösung gefunden, aber im Hinterkopf habe ich diese Frage immer.
lg
Monika
Siegfried am Jan 31, 2006 | Reply
was inline-svg und andere nette Schmankerl und den IE angeht, habe ich zumindest für mich eine einigermaßen brauchbare Lösung gefunden. Ich halte grundsätzlich alle Seiten in zwei Versionen vor, eine davon XXX.html, Format html 4.x, die andere XXX.xhtml, Format xhtml 1.0. Dazu habe ich auf Serverseite ver .htaccess MultiViews aktiviert und für xhtml den passenden mime-typ konfiguriert. Der IE fordert ohne Änderungen an der Registry niemals den mime-tym application/xhtml+xml an. Er bekommt also eine altmodische html4-Datei, und statt dem inline-svg eben ein png, das ich daraus erzeugt habe. Browser, die application/xhtml+xml anfordern, bekommen die xhtml-Datei mit inline-svg und allen sonstigen modernen Features. Natürlich gibt’s auf jeder Seite im Footer einen Link zur jeweils anderen Version, für den Fall, daß Irgendwas schiefgeht. So bekommt Jeder das, was er verträgt. Und sollte ein IE7 tatsächlich xhtml anfordern, bekommt er das dann eben auch. Keiner ist ausgeschlossen, und Jeder bekommt, was er will. So kann man auf einfache (naja) Art Experimentierfreude mit backwards-compatibility kombinieren.
Struppi am Mai 19, 2006 | Reply
Das ist doch gelinde gesagt Unsinn. Gerade bei fixen Layout wird doch die Wortzahl verringert, wenn sich die Schrift vergrößert. D.h. bei den meisten fixen Layouts hast du spätestens nach zwei Sprüngen Vergrößerung nur noch drei Wörter pro Zeile.
Darüber hinaus: fließende Layouts heißt ja nicht, dass man völlig auf Breitenangaben verzichtet und sich alles über das ganze Fenster ausbreiten läßt.
Einer Breite von ~30em für Fließtext, ist die Monito- und die Schriftgröße egal. Sie hat immer die optimale Breite, im gegensatz zu 780px.
ff-webdesigner am Sep 20, 2006 | Reply
Björn am Sep 20, 2006 | Reply
Diese Argumente kann ich nicht gelten lassen. Wir machen ein extrem komplexes Layout für eine Webanwendung. Ganz ohne Layouttabellen. Es geht :-)
Michael am Mrz 16, 2007 | Reply
Elmar am Jul 8, 2008 | Reply
ich sehe bei flexiblen Layouts eigentlich nur zwei Probleme. Zum Einen könnten manche Bilder wirklich zu groß oder unscharf werden. Da hilft im Moment warscheinlich nur, sie fix zu lassen oder max-width nicht zu groß anzusetzen.
Zum Andern, die Reihenfolge der anfangs horizontal angeordneten Container, nach einer Veränderung der Auflösung in eine neue Ordnung zu bringen.
Damit will ich sagen, dass es ziemlich kompliziert wird, vorherzusagen welcher Content an welcher Stelle im Browserfenster, nach einer Veränderung erscheint. Eine bestimmte Reihenfolge kann dann kaum noch eingehalten werden.
Auyana am Dez 3, 2008 | Reply
Peter Dexheimer am Aug 13, 2010 | Reply
Obwohl bereits eineinhalb Jahre seit dem letzten Kommentar vergangen sind, hoffe ich, dass mein Kommentar gelsen wird und hilfreich ist, denn ich komme nicht aus dem technischen Bereich und bin wirklich heilfroh, dass sich mein Webdesigner mit diesen Fragen herumschlagen muss.
Für mich als Webseitenbesitzer ist immer die Frage wichtig: Wie wird meine Webseite in der Wirkung aufgenommen, wenn der Leser zum ersten Mal draufkommt? Spricht sie ihn an, bleibt er, wenn nicht, ist er gleich und auf nimmer Wiedersehen verschwunden. Und wenn das passiert, war meine Arbeit, Werbung etc. umsonst. Deshalb war und ist es für mich wichtig, einen ästhetischen Eindruck zu liefern, der den neuen Leser anspricht und animiert, die Inhalte meiner Seite unter die Lupe zu nehmen, wobei auch dort die Ästhetik gewahrt bleiben sollte.
Ich finde, mein Webdesigner hat dies gut umgesetzt, wobei es sicher viele andere Möglichkeiten gibt, doch musste ich mich ja für eine entscheiden.
Usability, guter Content etc. müssen natürlich genauso professionell gestaltet werden, doch ist der erste Eindruck der wichtigste, weshalb da keine Fehler passieren sollten.
Nur meine Meinung als völlig unbedarfter Laie, der sich um sein Geschäft kümmern muss, und dankbar ist, dass es Profis wie euch gibt, die meine Wünsche umsetzen können.
Grüße
Peter
Peter Dexheimer am Mrz 4, 2011 | Reply
jetzt sind wieder 7 Monate vergangen und kein neuer Kommentar liegt vor. Na ja, ich wollte eigentlich nur eine Layoutumsetzung für meinen neuen Blog vorstellen, was ich unter dem ersten Eindruck verstehe. Die Adresse ist wellness-infos-blog.de. Er entspricht sicher nicht den Ansporüchen von Profis, dennoch wollte ich ihn mal zeigen. Vielleicht erhalte ich ja einen Kommentar oder Tipp.
Besten Dank im Voraus
Peter
Oliver Scheffler am Mrz 30, 2011 | Reply