Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Layout

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: Layout

Die große Stärke des Web ist seine Flexibilität. Doch die meisten Layouts sind auf fixe Breiten ausgerichtet. Dass es auch ganz anders geht, zeigt das ZDF. Das ist bemerkenswert, meint Jens Grochtdreis.

Fixe Layouts haben den Vorteil für den Entwickler einfach umsetzbar zu sein. Sie sind aber nie flexibel genug, wenn ein Nutzer die Schriftgröße anpassen will. Selbst die im IE nur möglichen zwei Stufen der Schriftvergrößerung genügen, um die meisten gängigen Webseiten praktisch unleserlich zu machen. Es wächst immer nur die Schrift, die Seiten- und Boxdimensionen sowie die Bilder bleiben gleich.

Das elastische ZDF

Das ZDF geht hier einen komplett anderen Weg und präsentiert die stark bebilderte Seite in einem elastischen Layout. Wird nun die Schriftart verändert, zoomt die komplette Seite – das Layout hält, allerdings in vergrößerter Form. Selbst die Bilder wachsen mit. Dies alles funktioniert, weil das gesamte Layout inklusive Container, Bilder und Formularelemente nicht mehr in Pixeln, sondern in em ausgezeichnet wurde.

Screenshot: zdf.de

Bilder anpassen

Die Bilder werden dabei schnell pixelig, lassen sich aber noch immer gut erkennen.
Vergrößert man Bilder, werden sie irgendwann pixelig und unansehnlich. Erstellt man die Bilder von vorherein größer und skaliert sie mittels CSS kleiner, erreicht man bei der Vergrößerung erst den Punkt, an dem das Bild in Originalgröße dargestellt wird. Und somit gelangt man erst später an den Punkt, ab dem die Bilder nicht mehr so toll aussehen. Allerdings fressen größere Bilder auch mehr Speicherplatz und machen so die Seiten träger.

Schnelltest

Jeder kann einen Schnelltest dieses Ansatzes machen: Einfach die Schriftgröße des body auf 62.5% setzen, dann gilt 1em = 10px. Dann nur noch alle Breiten, Höhen und Schriftgrößen von Pixeln in em wandeln. Dazu allen Bildern die Breiten- und Höhenattribute nehmen und diese über das CSS definieren. Fertig ist der Schnelltest einer Seite. Viel Spaß beim Experimentieren.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Mario
am 14.07.2008 - 08:38

Ich habe auch vor kurzem eine Website komplett mit dieser Technik umgesetzt und weiß daher sehr genau, welche Hürden hier genommen werden mussten. Deshalb respekt.
Vollständiges Layouting in em oder % ist mit einiger Planungsarbeit verbunden. Der Aufwand ist es aber wert. Noch.

Denn die neueste Browsergeneration skaliert standardmäßig innerhalb den Output der Rendering-Engine und nicht mehr die CSS-Werte. Dadurch werden alle Elemente immer korrekt skaliert. Wie immer werden veraltete Browser diese CSS-Technik aber noch lange notwendig machen.

Permanenter Link

Peter
am 14.07.2008 - 08:53

Ich finds nicht so praktisch, da waagrechte Scrollbalken entstehen. Zumindest sollte eine maximale Größe eingestellt werden, die nicht überschritten wird: die Breite des Browserfensters nämlich (wie z. B. bei YAML).
Das ist auch das entscheidende Argument gegen den Ganzseiten-Zoom, der momentan so hoch gelobt wird. Für Leute Kurzsichtige wie mich ist der normale Textzoom am besten geeignet; ein Zoom der gesamten Seite ist durch die waagrechten Scrollbalken ein Rückschritt, egal ob durch Formatierung über em oder durch einen Browser-Ganzseitenzoom.
Ein pixeliges Hochzoomen von niedrig aufgelösten Bildern bringt nicht viel - zumal man das betriebssystemseitig durch Zoom der Bildschirmdarstellung erreichen kann (bei mir einfach über Str-Scrollrad).

Permanenter Link

Frank
am 14.07.2008 - 08:57

Ich finde die Tatsache, dass die Dateigröße bei größeren Bildern größer wird nicht das eigentlich schlimme an der Taktik von vornherein größere Bilder zu verwenden. Die Verkleinerung per CSS sieht in den meisten Fällen eher weniger gut aus. Bei allen Skalierungsmöglichkeiten die man beachten sollte finde ich's doch am wichtigsten die Seite in erster Linie in ihrer ursprünglich angezeigten Größe zu optimieren.

Permanenter Link

Jens Grochtdreis
am 14.07.2008 - 08:59

@Peter: Was ist denn gegen horizontale Scrollbalken zu sagen? Es läßt sich kaum verhindern, daß man sich den Vorteil der guten Lesbarkeit bei möglichst großer Skalierbakriet durch den Nachteil des Scrollens erkauft. Beim ansonsten beschränkten Platzangebot eines fixen Layouts wären Texte sehr schnell unleserlich. Da nutzen auch Maximalbreiten nichts.

Bei diesem Thema bewegt mich allerdings immer einer Frage: tragen diejenigen, die es nötig haben, keine Brille? Ich trage eine und ich kann auch Schriften in 10 Pixel lesen. Interessiert mich nur, weil es ja offenbar einen Bedarf an Skalierung gibt - trotz der Erfindung der Brille.

Permanenter Link

accessoire
am 14.07.2008 - 09:23

Sehr beeindruckend! Wusste garnicht, dass sowas ohne einen zoomfähigen Browser möglich ist. Danke für diesen tollen Artikel :)! Werd das so bald wie möglich auch mal anwenden!

Permanenter Link

Andy Pillip
am 14.07.2008 - 09:24

Zitat: Einfach die Schriftgröße des body auf 62.5% setzen, dann gilt 1em = 10px

Ich bitte darum, aus Benutzerfreundlichkeit daran zu denken, dass 62.5% sich immer auf die Schriftgrößeneinstellung des Benutzers beziehen. Damit gilt diese Gleichung nur bei Benutzern, die diese Einstellung nicht verändert haben.

Permanenter Link

Jens Grochtdreis
am 14.07.2008 - 09:36

qAndy: Ja, das hast Du recht. Aber irgendeine Annahme muss man ja machen. Anders kann man nicht layouten. Und wenn jemand seine Basisschriftgröße auf 22 Pixel hochgeschraubt hat, dann ändert sich alles im Verhältnis.

Die große Stärke des Internet, seine Flexibiliät, ist in solchen Situationen auch sein größtes Problem für den Umsetzenden. Allerdings sehe ich keinen Sinn darin, auf Annahmen wie die obige zu verzichten, nur weil die Möglichkeit besteht, daß 3 Promille der Websurfer bewußt andere Einstellungen vornehmen. Wer dies bewußt tut, sollte auch selber mit den Konsequenzen seines Handelns umgehen können, oder?

Und das geht ja alles, dank der Flexibilität des Internet.

Permanenter Link

Dieter
am 14.07.2008 - 09:37

Die ZDF-Website ist in der Tat eine schöne Umsetzung eines flexiblen Layouts. YAML lässt grüßen. :-)

Bin ebenfalls ein Anhänger flexibler Layouts, weil sie nutzerfreudlicher sind als fixe Layouts.

@Jens:
Zum Thema Brille möchte ich nur anmerken, dass ich leider schon eine Lesebrille brauche und habe, die aber selten am PC sitzend aufsetze.
Zum Thema Skalierung: Die immer größeren Monitore und häufig damit auch einhergehenden größeren Bildschirmauflösungen führen dazu, dass die 10px-Schriften immer kleiner wirken. Vor wenigen Jahren mit einem 17" Monitor habe ich so gut wie nie die Schriftvergrößerung des Browsers benutzt. Inzwischen benutze ich schon relativ häufig die Seitenzoomfunktion des Firefox 3.

Permanenter Link

Herr Voß
am 14.07.2008 - 09:37

@Peter: Horizontale Scrollbalken sieht ja der normale User gar nicht. Man kann und sollte sie aber nicht verhindert, wenn Benutzer die Auflösung sehr hoch stellen müssen, um trotzdem Brille noch lesen zu können. Denen ist dann die genrelle Optik ziemlich egal, wenn sie an die Infos kommen.

@Jens: Das habe ich früher auch gedacht. Es gibt aber keinen vernünftigen Grund, Schriften so klein zu machen. Außer man empfindet Text als Störung des Layouts. Ich habe inzwischen einen Faible für Seiten, die bewusst große Schriftgrößen benutzen. Bsp: http://dasmagazin.ch/?issue=2008-27

Permanenter Link
Gerrit van Aaken

Gerrit van Aaken (Webkraut)
am 14.07.2008 - 10:03

@Dieter: Die regulären Programmseiten des ZDF sind übrigens _nicht_ mit YAML umgesetzt, sondern "nur" die Corporate-Seiten.

@all: Schön, dass Jens euch noch was Gutes beibringen konnte. Ich hätte nicht gedacht, dass die Zoomtechnik unter vielen der Leser hier noch so unbekannt ist - praktiziert wird das Ganze an der einen oder anderen Stelle schon seit über 4 Jahren. Aber besser spät als nie ;-)

Permanenter Link

GE
am 14.07.2008 - 10:22

Der Trend ist klar: moderne Browser (ausser Opera) bieten sowohl Seitenzoom als auch Textzoom an .

Und das ist auch gut so, denn nun kann der Nutzer selbst entscheiden, in welcher Art er die Seite an seine Bedürfnisse anpassen will.

Leider trifft man immer wieder auf Seiten mit viel zu langen Zeilen. Wenn ich das nun beheben will, indem ich den Text vergrössere, behindert mich eine Seite mit elastischem Layout. Eine zusätzliche Barriere sozusagen ;-). Ausserdem ist meine Entscheidungsfreiheit eingeschränkt, egal ob Text- oder Seitenzoom, die Seite macht immer das gleiche.

Heutzutage ist elastisches Layout rückwärts gerichtetes Webdesign, Seitenzoom für alte Browser.

Aber wer weiss schon, was die Zukunft noch alles bringen wird. Im Augenblick setzen die Browser das fixe Layout mittels Seitenzoom ausser Kraft, vielleicht gibt es ja in naher Zukunft Browser, die Schriftformatierungen erkennen und analysieren und eine "nur Schrift Vergrösserung" auch bei elastischem Layout umsetzen können.

Permanenter Link

Benni
am 14.07.2008 - 17:38

Das ist für mich nichts neues. Basiert doch mein altes und neues Blogdesign auf genau diesem Prinzip.

Aber allgemein finde ich es sehr gut, dass darüber geschrieben wird und so mehr Leute von dieser Technik erfahren und sie dann auch hoffentlich verwenden :-)

Permanenter Link

Matthias Koch
am 14.07.2008 - 23:31

GE:

Heutzutage ist elastisches Layout rückwärts gerichtetes Webdesign, Seitenzoom für alte Browser.

Diese Aussage ist hoffentlich nicht ernst gemeint, denn sie trifft schlicht und ergreifend nicht zu, wenn man fachlich informiert und mit der Materie vertraut ist.

Siehe dazu auch: Und es hat Zoom gemacht und diverse Artikel in einschlägigen Weblogs, die sich kompetent mit der Thematik auseinander setzen.

Wann haben alle, die Webseiten bauen, verstanden, dass Geräteunabhängigkeit ein unausweichlicher Bestandteil heutiger Webentwicklung ist, jenseits von Opera- und Safari- oder Mosaic-Browser (User-agent)?

Permanenter Link

soophie
am 15.07.2008 - 08:51

GE

Leider trifft man immer wieder auf Seiten mit viel zu langen Zeilen. Wenn ich das nun beheben will, indem ich den Text vergrössere, behindert mich eine Seite mit elastischem Layout. Eine zusätzliche Barriere sozusagen ;-).

Wer die Zeilenlänge mit der Schriftgröße beeinflussen möchte, ist selbst schuld. Gottseidank bieten alle Browser einstellbare Fenstergrößen an.
Aber es stimmt schon, auf Widescreen-Monitoren sind die Textzeilen oft zu lang, wikipedia lässt grüßen.

Permanenter Link

GE
am 15.07.2008 - 09:15

@soophie: Die Zeilenlänge eines elastischen Layouts kann man nicht mit der Fenstergrösse beeinflussen, man erhält Scrollbalken, wenn man das Fenster verkleinert.

Du redest wohl von liquidem / fluidem Layout (wikipedia). Bitte erstmal mit den Begriffen beschäftigen.

@ Matthias: Was hat elastisches Layout mit Geräteunabhängigkeit zu tun? Die oben beschriebene Methode simuliert einen Seitenzoom für Browser, die keinen haben, also für alte Browser.

Geräteunabhängigkeit erreiche ich eher mit liquid / fluidem Layout.

Permanenter Link

Herr Voß
am 15.07.2008 - 10:18

Ich mag Sites mit Full-RSS-Feed. Da kann ich mir dann den Beitrag in meinem Feedreader ohne störende Elemente und in der Schriftgröße meiner Wahl anschauen. Und zum Kommentieren kann ich dann immer noch vorbeischauen. Sites, die sich nicht durch Werbung finanzieren, können das IMHO auch ziemlich unproblematisch machen.

Permanenter Link

soophie
am 15.07.2008 - 11:55

Wer wird denn hier mit Kanonen auf Spatzen schießen? Ich habe, wo wir grad bei Wikipedia sind, keine horizontalen Scrollbalken, auch nicht, wenn ich die Fenstergröße auf 800 x 600 Pixel skaliere. Von daher habe ich nicht unrecht.

Permanenter Link
Matthias Koch

Matthias Koch (Webkraut)
am 15.07.2008 - 12:29

GE: Ich habe den letzten Absatz geschrieben, um den Bogen ein wenig weiter zu spannen:
Geräteunabhängigkeit kannst du alleine durch Markup (HTML) erreichen.
Da CSS (zum Teil) geräteabhängig ist und Ausgabegeräte in Klassen unterteilt, kann HTML unabhängig von Geräten verwendet (und weiterverarbeitet!) werden.
Was hat also elastisches Layout mit Geräteunabhängigkeit zu tun?
Es hat mit Lesbarkeit zu tun. Geräteunabhängigkeit wird also durch semantisch wohlgeformtes und gültiges Markup ermöglicht, da der geräteabhängige Teil durch die CSS-Klassifizierung und die darin enthaltenen Stile festgelegt wird. Rückwärts gerichtetes Webdesign - um bei deiner Wortwahl zu bleiben - wäre da wohl präsentationsbezogenes HTML und auch die Simulation von Layouttabellen bzw. -spalten (auch mittels CSS-Grids - persönliche Meinung).

Permanenter Link

GE
am 15.07.2008 - 12:49

@ soophie: Wikipedia hat kein elastisches Layout. Die Seite passt sich dem Viewport an, das ist ein liquides / fluides Layout. Ich meine jetzt nicht die Startseite, sondern die Seiten mit den langen Zeilen.

Im Beitrag von Jens geht es um elastisches Layout, die Seite wächst mit der Schriftgrösse mit und erzeugt einen horizontalen Scrollbalken, wenn sie den Viewport sprengt oder das Fenster kleiner wird als die Seite. Die Zeilenlänge einer elastischen Seite kann ich nicht beeinflussen, weder durch Schriftvergrösserung, noch durch Verkleinerung des Viewports (Fensters).

Eine solche Seite verhält sich im Textzoom genauso wie im Seitenzoom, so wie bei der Seite, um die es im Beitrag geht: zdf.de . (Den Link hat Jens in seinem Beitrag wohl vergessen ;-)

Noch einmal:

Liquid / fluid (flüssig / gasförmig): Eine Flüssigkeit dehnt sich in ihrem Behälter aus, eine Website passt sich automatisch dem Viewport an. (wikipedia)

Elastisch: Wenn man einen Luftballon aufbläst, wächst alles, was da draufgedruckt ist, mit. Bilder, Logos, Schriften ... (zdf.de)

Es gibt natürlich Mischformen. Bei wikipedia scheint die Breite der Navigationsspalte in em ausgezeichnet zu sein, die Seite selbst verhält sich jedoch liquid.

Zum Beitrag: Das elastische Layout bei zdf.de ist in der Tat hervorragend umgesetzt und eine Erwähnung bei den Sonnenseiten wert. Trotzdem bin ich der Meinung, dass mit dem Trend zum Seitenzoom diese Art der Skalierung von Internetseiten an Bedeutung verlieren wird.

Permanenter Link

GE
am 15.07.2008 - 13:08

@ Matthias: Jetzt verstehe ich Dich und stimme Dir zu.

In diesem Beitrag von Jens geht es aber doch um die Präsentation der Seite auf visuellen Ausgabemedien per CSS. Die Aktion "Sonnenseiten" will doch ausschliesslich bestimmte Aspekte eines Internet-Auftrittes vorstellen und ansonsten "alle fünfe grade sein lassen": Sonnenseiten »

Es geht hier also nicht um Geräteunabhängigkeit durch wohlgeformtes (X)html, sondern ausschliesslich um die Gestaltung der Seite zdf.de in einem elastischen Layout mittels Formatierung aller Elemente und der Schrift per CSS in em.

Das ist nichts neues, das gibt es schon seit Jahren und wird in Zukunft (und teilweise auch jetzt schon) von den Browsern erledigt durch Seitenzoom.

Deshalb sehe ich elastisches Layout als eine Blume, die am verwelken ist, auch wenn sie gerade noch auf der "Sonnenseite" steht ;-) .

Permanenter Link
Matthias Koch

Matthias Koch (Webkraut)
am 15.07.2008 - 13:23

Na ja, wenn du alle Styles mal abschaltest, die Bilder auch, dann wirst du staunen: Außer Überschriften und Verweisen gibt es da nämlich keinen Fließtext. Eine Webseite, die nur Verweise zu anderen Seiten enthält - das ließe sich doch auch sehr elegant ohne Zoom und elastische Strümpfe auflisten. Ohne Frage: ein gelungenes Design, fast wie Fernsehen. :-)

Permanenter Link

GE
am 15.07.2008 - 13:40

Wenn Du das als "fast wie Fernsehen" empfindest, dann haben die ja ihre Hausaufgaben gut gemacht ;-).

Eine glatte eins im Fach "Design und Layout" (weil heute Zeugnistag ist in Berlin).

Permanenter Link

Susanne Jäger
am 23.07.2008 - 19:19

Um noch mal auf die gelobte Flexibilität der ZDF-Seiten zurückzukommen. Wenn ich im Browser eine Mindestschriftgröße definiert habe (z.B. Seamonkey 14px) passt da gar nix mehr so richtig. Und auch ohne das handele ich mir beim moderaten Textzoom reihenweise Floatdrops mit katatstrophalen Überlappungen ein und das schon ganz ohne Userstylesheet mit dem ich mir normalerweise Mikroschriften vom Leib halte. Ob dafür leicht andere Schriftschnitte unter Linux oder die Auflösungseinstellung verantwortlich sind, kann ich auf die Schnelle nicht sagen.

Permanenter Link

Die Kommentare sind geschlossen.