Auflösungsunabhängiges Webdesign

4. August 2007

Abstract

Nicht alle Browser reagieren gleich, wenn man ihre Zoom-Funktionen benutzt. Opera und der Internetexplorer 7 vergrössern die gesammte Seite inklusive aller Bilder, während Firefox und Safari nur jeweils die Textgrösse ändern.
Wegen der ständig steigenden Auflösung von Bildschirmen wird ein auflösungsunabhängiges Webdesign immer wichtiger.
Dieser Artikel versucht Wege aufzuzeigen, wie auch in Safari und Firefox die Bildgrösse vom Zoomfaktor abhängig gemacht werden kann.

72ppi

Wenn ich ein Bild für das Internet kreiere, so stelle ich dieses in einer Auflösung von 72ppi her, weil ich vor ca. 1000 Jahren oder mehr irgendwo einmal gelesen hatte, dass die Auflösung der Bildschirme bei 72ppi liege.
Was damals in den 90ern, als das Desktop Publishing aufkam, vielleicht stimmte, hat heute kaum mehr Gültigkeit, denn aktuelle Monitore haben eine viel höhere Auflösung.
Die höhere Auflösung hat den Vorteil, dass pro Masseinheit viel mehr Informationen untergebracht werden können und den Nachteil, dass – falls das Design nicht auflösungsunabhängig ist – alles viel kleiner wirkt.

Nimmt man als Beispiel einen MacBook Pro Bildschirm mit 17"-Diagonale und 1680 × 1050 Pixel so ergibt sich mit Ries und Pythagoras eine Auflösung von 116.5ppi. Bei der selben Diagonale aber 1920 × 1200 Pixeln hat man eine Auflösung von 133ppi.
Der kleine iPhone-Bildschirm mit einer Diagonale von 3.5" und 480 × 320 Pixeln bringt knapp 165ppi hin – also weit mehr als das Doppelte der altmodischen 72ppi.
Ein Text, der bei 72dpi also gut lesbar ist, wäre auf dem iPhone also weniger als halb so gross – eine wahre Freude die Augen! (Hinzu kommt, dass der Bildschirm des iPhones ausgeht, wenn man mit der Nase zu nahe rangeht ;)

Zum Glück gibt es die Zoomfunktion!

Zoom und Schriftgrösse

Es ist hart, aber ich muss gestehen, der IE7 hat eine prima Zoom-Funktion und Safari und Firefox könnten sich da was abgucken! Der IE und auch Opera vergrössern bzw. verkleinern nämlich nicht nur den Text, sondern alle Grafiken und Elemente gleich mit, so dass das Layout erhalten bleibt. Grafiken mit geringer Auflösung werden bei der Vergrösserung jedoch pixelig.
Die Vergrösserungs-/Verkleinerungsfunktionen in Firefox und Safari beziehen sich nur auf den Text. Die Bilder zoomen nicht mit, was zu hässlich verzerrten Layouts führen kann.

Beidem: pixeligen und/oder nicht mitzoomenden Grafiken kann man aber mit ein paar Kniffs abhelfen.
Im Folgenden werden wir zuerst Safari und Firefox beibringen, wie sie die Grafiken mit dem Text mitzoomen können und anschliessend untersuchen, wie man pixelige Bilder verhindern kann.

Superzoom in Safari und Firefox dank CSS

Der Kniff besteht darin, Grafiken mittels CSS eine Breite und Höhe zu geben, die abhängig von der Schriftgrösse ist. Dabei müssen wir unterscheiden zwischen Bildern, die mit dem img-Tag in HTML eingebunden werden und den CSS-Hintergrundbildern (background-image:url("bla.png")).

Bei Bildern, die mit dem img-Tag in HTML eingebunden werden kann man im style-Attribut des img-Tags Höhe und Breite des Bildes in em angeben.
Beispiel:

D

ies ist ein Text, der hierfür als Lückenbüsser herhalten muss. Lückenbüssertexte haben artbedingt ein schweres Leben, denn entweder sind sie in Pseudo-Latein verfasst oder sind einfach ein inhaltsloses Geschreibsel. Andere Lückentexte haben aber oft keine Inline-Bilder, d.h. Darstellungen, die im Textfluss stehen und ungefähr gleich gross sind, wie die Buchstaben.

Grössenangaben für CSS-Hintergrundbilder sind erst ab CSS3 möglich. Bis jetzt ist Safari der einzige Browser, der dies unterstützt.
Beispiel:

Dies ist ein Text, der hierfür als Lückenbüsser herhalten muss. Lückenbüssertexte haben artbedingt ein schweres Leben, denn entweder sind sie in Pseudo-Latein verfasst oder sind einfach ein inhaltsloses Geschreibsel. Andere Lückentexte haben aber oft keine Inline-Bilder, d.h. Darstellungen, die im Textfluss stehen und ungefähr gleich gross sind, wie die Buchstaben.

Es handelt sich übrigens um eine «Art Nouveau Initiale» vom «LaTeX Font Catalogue».

Gegen die Verpixelung

Wenn diese Grafiken nun stark vergrössert werden, läuft man Gefahr, dass sie pixelig oder – wenn die Kanten geglättet sind – schwammig werden.

 

Dem kann man entgegenwirken, indem man Grafiken mit genügender Auflösung bereitstellt. Die doppelte Grösse sollte genügen. Natürlich steigt damit der Speicherbedarf und die Übertragungszeit der Grafik, was je nach Menge ein kritischer Faktor sein kann.
Schliesslich muss jeder selbst abwägen, was drin liegt.

Weiterführende Gedanken

Auflösungsunabhängiges Design ist auch im Bereich der Userinterfaces von Betriebssystemen ein Thema, jedoch sehr umstritten, da die Auflösungsunabhängigkeit auch da mit grösserem Speicherbedarf und Rechenleistung erkauft werden (http://islayer.com/blog/?p=87).
Über object eingebundene Grafiken oder Filme lassen sich nicht zoomen. Gibt man eine kleinere Höhe oder Breite an, wird das Objekt einfach beschnitten.
Interessant wäre auch ein auflösungsunabhängiges Design, das auf SVG beruht. Allerdings muss da der Zoom der ViewBox mittels JavaScript implementiert werden. Im Moment zoomen Safari und Firefox nur die Texte innerhalb vom SVG (http://www.w3.org/TR/SVG/images/coords/ViewBox.svg).
Es ist auch vorstellbar, die benötigte Grösse einer Grafik per JavaScript auszulesen und die Grafik entsprechend auf dem Server zu generieren (http://windyroad.org/2007/05/18/resolution-independent-web-design/).

Kommentar hinzufügen