PHP Blogger

Startseite Schreib mir ne Mail! RSS Abo Webnews

CSS: EM und Prozent vs. Pixel und Punkt

Einen alten Hut gefällig? Viele Entwickler und Gestalter drücken sich immer noch um frei skalierbare Webseiten. Mittlerweile gibt es die Technik her, aber nicht alle nutzen sie. Gerade ist der Relaunch des PHP Bloggers in Vorbereitung (dazu mehr Details im Februar) und auch dieser Relaunch wird nicht skaliert umgesetzt.

Dazu mag es verschiedene Gründe geben:

  • Die einen wissen nicht, dass es geht.
  • Andere wissen nicht wie.
  • Wer weiß, das und wie, will vielleicht nicht.

Genau. Der PHP Blogger will nicht. Aber warum? Meiner Meinung nach sind die Grafiken der größte Nachteil. Natürlich können die Grafiken skaliert werden, verlieren dann aber drastisch an Qualität und verpixeln oder werden unscharf.

Um dagegenzuhalten müsste man die Grafiken in einer besseren Qualität hinterlegen. Das drückt die Ladezeit nach unten. Und die ist Hemmschwelle Nummer 1, wenn es um das Wegklicken von Webseiten geht. Kommt in DSL-Zeiten kein Inhalt nach ein paar Sekunden, heisst das für die meisten Besucher “Der Server ist offline” oder “doof” und sie klicken die Seite weg.

Ein nicht ganz vergleichbares, aber ähnliches Thema zur Grafikqualität hat übrigens vor einiger Zeit A List Apart veröffentlicht. Es ging damals um hochaufgelöstes Drucken - sehr lesenswert, wers noch nicht kennt, sollte unbedingt mal einen Blick reinwerfen!

Was nach wie vor noch nicht geht, ist die Skalierung von Hintergrundgrafiken (vom eingebauten Browserzoom á la IE7 mal abgesehen). Auch hier müsste man entweder Hintergrundgrafiken entwickeln, die super kacheln oder nicht an Optik verlieren, wenn sich die Box (in der das Hintergrundbild eingebettet ist) vergrößert und die Größe des Hintergrundbildes gleich bleibt. Schwierig.

Eine andere Möglichkeit wäre, das Hintergrundbild so groß zu gestalten, das es je nach Größe der Box mehr oder weniger Details freigibt. Die Dateigröße spricht dann für sich - um nämlich alle Bildschirmauflösungen abzudecken, müsste man ein riesiges Hintergrundbild hinterlegen. Wenn ich daran danke, das die Bildschirm-Auflösungen der Besucher des PHP Bloggers von 1024×768 bis 1920×1200 reichen, wird mir schlecht.

Geschickt haben es z.B. die Entwickler von Fotolia gelöst: Ein Flash auf der Startseite skaliert automatisch nach rechts mit, wenn der Browser mehr Fläche zum Anzeigen bereitstellt (= höhere Bildschirmauflösung). Dadurch das Flash die Technologie mitbringt, um Inhalte im Hintergrund zeitgesteuert nachzuladen und Fotolia ein PHP Backend hat, sind jede Menge Spielereien möglich.

Ich denke hier vor allem an einen Nachlademechanismus wie er von Google für Maps und Earth eingesetzt wird: Es werden immer nur die Bildbereiche nachgeladen, die auch angezeigt werden. Mit PHP und Flash kein Problem, statt Flash könnte man wie Google natürlich auch Javascript einsetzen. Das drückt dann aber die Performance etwas.

Schon 2005 hat der Webstandard-Blogger für EM als Größeneinheit plädiert. Immer noch ein aktueller und lesenswerter Artikel.

Ein super Beispiel für eine komplett skalierbare Seite bietet übrigens das ZDF. Ruhig mal Strg gedrückt halten und mit dem Mausrad spielen! Das gibt einen Aha-Effekt. Beim Teaserbild oben links sieht man bei Zoom allerdings auch die Nachteile, die ich etwas weiter oben beschrieben habe.

Wer mit skalierten und unschönen Grafiken leben kann, sollte berücksichtigen, das eine verpixelte Grafik auf jeden Fall eine Barriere für sehbehinderte Menschen sein kann. Von Barrierefrei ist dann weder in dem einen (nicht skalierbare Seite) noch dem anderen (skalierbare Seite mit vielen Grafiken) zu reden.

Teile und genieße
  • MisterWong
  • del.icio.us
  • Technorati
  • Digg
  • Slashdot
  • YahooMyWeb
  • Furl
  • Ma.gnolia
  • Spurl
  • Netscape
  • StumbleUpon
  • MyShare
  • blogmarks

Florian meint dazu:

30. Januar 2008 um 11:09

Prozentangaben sind, meiner Meinung nach, in den meisten Fällen sinnlos. Zumindest mir reichen 1024 Pixel Breite vollkommen aus, mehr ist in den meisten Fällen sowieso sinnlos, da bei zu breiten Spalten der Lesefluss merklich gestört wird.
Und em setzt man im Prinzip ja nur ein weil der Internet Explorer 6 bei Pixelangaben nicht gezoomt hat. Ich bin mittlerweile soweit das ich mir diese ganze em-Arbeit nicht mehr antue. Wenn man Webseiten zoomen will, muss man halt einen Browser einsetzen der es kann. Solange die Webdesigner immer die ganze Arbeit machen, machen sich die User nie die 5 min Arbeit auf einen anderen, besseren (auch für den Designer) Browser umzusteigen.

timi meint dazu:

30. Januar 2008 um 11:17

Guter Einwand. Man sollte wirklich hergehen und an mündige User glauben, die fähig sind, die Zoom-Funktion Ihres Browsers zu verwenden.

Ein Relaunch für 1024er Breite schwebt mir auch für den PHP Blogger vor - ich halte das durchaus für angemessen.

BTW: Ein Layout kann durchaus breit ausfallen - so fern man die optimale Spaltenbreite beibehält, sonst wirds wirklich schwer zu lesen. MIr fallen da einige interessante Layouts ein, blöd ist nur das floaten - was rechts nicht hinpasst, wandert dann unter den Hauptcontainer. Und wird somit übersehen…

Martin meint dazu:

30. Januar 2008 um 11:23

Hat sich mit Internet Explorer 7 und Firefox 3 sowieso erledigt, die beiden Browser skalieren alles, egal ob es %, px oder em ist.

Holger meint dazu:

30. Januar 2008 um 13:46

Ich schließe mich meinen Vorschreibern an. Zoomen kann der Browser besser, da sollte es auch passieren. Und wer Websites als Besucher zoomt, weiß welche Browser er benutzen sollte/muss.

Coly meint dazu:

16. Juli 2008 um 17:28

Ich will ja nicht klugscheißen, aber es tut mir weh - > “(…) DAS es geht (…)”, müsste eigentlich “(…) DASS es geht (…)” heißen.

Danke für den Artikel!

timi meint dazu:

17. Juli 2008 um 11:30

Sorry, das war schon immer meine Schwäche :)

RSS für Kommentare zu diesem Artikel · TrackBack URI

Schreib Deine Meinung