< Update II: WP_Premium | Bye bye, facebook >

19 Apr 2008 Schon gesehen? »Nur ein Blog« relaunched

Ich persönlich kann mir ja kaum vorstellen, dass man Robert Lenders Blog nicht kennt – zumindest Serendipity-Benutzer kennen Robert als s9y-Enthusiasten, -Fürsprecher und »Herausgeber« des grandiosen fragmentarischen Online-Handbuchs zu s9y, der wohl komplettesten Linksammlung zur besten Blogengine der Welt.

Robert hat sein Blog gestern oder vielmehr heute relauncht. Des Lenders neue Kleider (in Blogsprech auch »Template« genannt) stammen aus meiner kleinen Templateschmiede – maßgeschneidert auf Roberts Bedürfnisse, welche u.a. eine möglichst hohe Barrierearmut einschließen.

Was Robert dort verpasst bekam, ist sozusagen eine Fortführung seines alten Templates, welches auf dem Bulletproof Template Framework für s9y aufsetzte, mit anderen Mitteln. Zu diesen zählt u.a. ein elastisches Layout, welches sich in vielen, aber nicht allen Maßen der im Browser eingestellten Schriftgröße anpasst – dasselbe Prinzip werkelt auch hier in meinem Blog. Drückt in Firefox einfach mal [Strg] + [+] :-)

Dieses Layout geht auf zwei meines bescheidenen Erachtens herausragende Artikel zurück:

Roger Johansson: Fixed or fluid width? Elastic!
Roger beschreibt hier das grundsätzliche Konzept und die Vorteile elastischer Layouts
Jon Tan: The Incredible Em & Elastic Layouts With CSS
Jon liefert die verständlichste Erklärung, die ich über die mysteriöse Einheit em gelesen habe und führt das Konzept des elastischen Layouts eine Stufe weiter

Ich behaupte keinesfalls, dass elastische Layouts für jede Webseite und/oder jedes Design als Grundlage ideal sind – für jemanden wie Robert, der Wert auf Barrierearmut legt, sind sie es jedoch ganz sicher. Die Schriftgröße skaliert, das Layout muss – zumindest in modernen Browsern – nie horizontal gescrollt werden, beides geschieht unabhängig von der Größe des Browserfensters (zumindest ab 800x600 Pixeln Bildschirmauflösung). Für mich persönlich ist dies »das perfekte Layout«, wenn, und das ist die einzige Einschränkung, die Gestaltung der Seite nicht zu sehr auf Grafiken basiert.

Der Witz an diesem Layout: Es hat – zumindest in den Browsern, welche die dafür nötigen CSS-Styles umsetzen – eine minimale und eine maximale Breite. Die minimale Breite ist in Roberts Template 760 Pixel, die maximale hingegen 52.5em, orientiert sich also an der im Browser eingestellten Schriftgröße. In Browser, die min-width und max-width nicht interpretieren (IE kleiner als Version 7) wird diese Breite statt dessen über ein via conditional comments eingebundenes IE-Stylesheet fest auf 760 Pixel festgezurrt.

Man kann diese Layoutform auf die Spitze treiben, indem man jede Maßeinheit im Stylesheet in em angibt: Abstände innen und außen, Ränder, Schriftgrößen, etc. pp. Die Praxis hat allerdings gezeigt, dass dieses Vorgehen bei sehr kleinen Maßeinheiten – etwa 1 Pixel großen Rändern – mitunter (z.B. in Safari) zu Rundungsfehlern führt. Ich verwende mittlerweile einen Mix aus em, Pixeln und Prozentwerten (für die Breiten der Spalten).

5 Trackbacks

Trackback-URL

  1. Nur ein Blog: Matthias Mees über elastisches Layout (19.04.08, 22:54)
  2. Nur ein Blog: Relaunch - Die Änderungen (20.04.08, 12:50)
  3. Pegasus' Traum: Ende und Neuanfang 2 (21.04.08, 10:42)
  4. YellowLeds Weblog: YL 102 (28.05.08, 11:32)
  5. Nur ein Blog: Relaunch von Nur ein Blog (02.10.10, 18:28)

5 Comments

RSS Feed (Comments) for this entry

  1. * Robert Lender (19.04.08, 22:41):

    Danke für die ersten Zeilen :-) Danke aber insbesondere dir für die viele Arbeit, die du mit mir und meinem Blog gemacht hast. Vielleicht ist diese Arbeit aber auch manchem S9y Nutzer Anregung etwas mehr auf Barrierefreiheit/Web Accessibility zu schauen.
    Dazu werde ich morgen einige Beiträge veröffentlichen.
    Und: Die Elastik ist wirklich super! :-)

  2. * Jochen Hoff (20.04.08, 09:17):

    Ja. Es ist schön. Aber ich denke jetzt noch mit Schrecken daran wieviel Arbeit ich hatte um von meinem Uralt-Layout auf Bulletproof zu kommen.Bulletproof entwickelt sich im Moment mit den Versionen von S9y weiter mit. Sprich ich muss beim Update so gut wie nichts tun.

    Genau das dürfte für viele Anwender wichtig sein.Ich komme ja schon nicht dazu Twitter einzubinden, oder endlich mal Dossiers anzulegen.

    Dabei wäre mir die Barrierefreiheit wichtig, weil ich sie auf meinem ersten Design hatte. Gibt es nicht eine Möglichkeit beides miteinander zu verbinden? Barrierefreies Bulletproof?

  3. * YellowLed (20.04.08, 09:27):

    Bulletproof ist erstaunlich barrierearm, wenn man bedenkt, dass es eine eierlegende Wollmilchsau ist, die etliche Möglichkeiten bietet, nahezu alles individuell konfigurieren lässt – und genau deshalb kaum barrierefrei umzusetzen ist. Es soll ja schließlich hinterher nach wie vor alles bei jedem funktionieren :-)

    Es werden sicherlich in zukünftige BP-Releases auch die Erkenntnisse aus diesem Projekt einfließen, aber bei BP muss ich einfach ganz andere Faktoren berücksichtigen.

  4. * Robert Lender (20.04.08, 11:23):

    Ich hoffe, dass sich die Faktoren – die Barrierefreiheit und die anderen – bald einmal noch besser verbinden lassen.

    Bulletproof ist sicherlich eine gute Ausgangsbasis. Und einiges ist dann auch hausgemacht, in dem man z.B. Bilder nicht mit Alternativtext versieht, Links schlecht beschriftet etc.

  5. * Markus Thies (28.05.08, 17:14):

    ich bin positiv überrascht wie weit sich die Serendipity weiterentwickelt hat. Ich werde mir das Framework auch genauer anschauen.

Add Comment

Please notice the comment directions.

Directions

Textile-formatting allowed
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
Gravatar, Twitter, Identica, Favatar author images supported.

Mandatory fields are marked with a *.

Comments including at least one link will be moderated. Comments including at least three links will be blocked. Sorry – spam protection.

Using noses in emoticons might lead to unexpected results in conjunction with Textile, especially in the middle of a sentence – please use :) or ;) etc. instead.