Webdesign für HiDPI-Displays

Webkit-Browser wie Apples mobiles Safari oder Googles Chrome rendern Webinhalte mit einer Skalierungsstufe, die von der Auflösungsdichte abhängt. Diese Skalierung vergrößert auch jegliche Ungereimtheiten wie JPEG-Kompressionsartefakte oder den Effekt chromatischer Aberration. Der Benutzer nimmt den Qualitätsverlust zum Teil als störend wahr.

Virtuelle Auflösung

Pixelbasierte Layouts passen sich nicht elastisch der Größe des Viewports an und da das Zoomen in einer Website auf einem berührungssensitiven Display unerwünschte Klicks auslösen kann, haben sich die Webkit-Entwickler eine Lösung einfallen lassen: Sie kommunizieren gegenüber dem Browser eine inkorrekte Pixelzahl.

So verfügt etwa ein iPhone der vierten Generation über ein Retina-Display mit einer physikalischen Auflösung von 640 x 960 Pixeln und einer Pixeldichte von 326 dpi, gibt sich jedoch als ein nur 320 x 480 Pixel großes Gerät zu erkennen. Bei diesen Einheiten handelt es sich um die so genannten geräteunabhängigen CSS-Pixel.

Um die Optimierung des Webdesigns für Displays in Retina-Qualität zu erzielen, führt der scheinbar nächstliegende Weg, nämlich schlicht die Auflösung zu erhöhen, aber in eine Sackgasse. Denn so würde man den immer noch zahlreichen Benutzern konventioneller Displays unnötig viel wertvolle Bandbreite abverlangen, die zudem zwar nicht dargestellt werden kann, aber beispielsweise beim Mobilfunk dennoch in Rechnung gestellt würde.

Natürlich möchte man den Benutzern der Retina-Displays gestochen scharfe Qualität gönnen, ohne den anderen Anwendern überflüssige Daten zuzumuten. Die avisierte Lösung muss also beide Anwendergruppen berücksichtigen. Dies lässt sich zum Beispiel über die Bereitstellung optimierter alternativer Stylesheets mittels @media-Abfragen bewerkstelligen.

Ein anderer Ansatz besteht darin, mobile Geräte unter Verwendung von @media-Abfragen oder Javascript mit den passenden CSS-Stylesheets zu beliefern. Dieser Ansatz optimiert die Nutzung der Bandbreite, ist jedoch seitens des Webdesigners mit deutlich mehr Aufwand verbunden.

Wer den Einsatz von Bildern minimieren möchte, kann Symbolschriften nutzen, um bestimmte Informationen zum Ausdruck zu bringen, ob in der Phase der Prototypenerstellung oder auch bei der finalen Freigabe.

Schließlich besteht auch die Möglichkeit, anstelle von Pixelbildern auflösungsunabhängige Vektorgrafiken im SVG-Format einzusetzen. Bei Fotos stellt SVG natürlich keine Lösung dar, aber viele Diagramme oder Logos beginnen ihre Existenz ohnehin als eine Illustrator-Datei (.ai oder .pdf aus Adobe Illustrator). Es liegt da nahe, die betreffenden Grafiken fürs Web gleich auflösungsunabhängig auszugeben.

Displayspezifische Ausgabe

Durch den Einsatz von @media-Abfragen können Sie jedes Zielgerät je nach tatsächlicher Auflösungsdichte mit eigenen Stylesheets beliefern, die passenden Bilder mittels der CSS-Eigenschaften background oder background-image referenzieren und die Bildgröße unter Verwendung der Eigenschaft background-size übergeben. Nutzen Sie hierzu ganz einfach die @media-Anweisungen:

Zum Beispiel:

oder eben so:

Das zentrale Element der Medienabfrage ist die Eigenschaft background-size, die für die korrekte Skalierung verantwortlich ist. Derzeit benötigen die einzelnen Browser die zugehörige herstellerspezifische Eigenschaft (also -moz-min-device-pixel-ratio, -Webkit-min-device-pixel-ratio oder -o-min-device-pixel-ratio).

Opera erwartet außerdem die Angabe der Pixelverhältnisse in Form eines Bruchs. Für Opera müssen Sie also beispielsweise den Wert 2/1 statt 2 oder 3/2 statt 1,5 eintragen. Ein Workaround für Bilder, die mit dem <img>-Tag eingebunden wurden, besteht im Übrigen in der Umsetzung so genannter adaptiver Bilder.

Displayspezifisch mittels Javascript

In Javascript können Sie dem Pixelverhältnis mittels window.devicePixelRatio auf die Spur kommen (diese Funktion liefert als Rückgabewert 1 oder 1,5 oder 2 und so weiter), allerdings ist die Unterstützung dieser Funktion nicht hinreichend verbreitet, um wirklich zuverlässig zu funktionieren.

Falls Sie nur Retina-Displays berücksichtigen möchten, können Sie die quelloffene Bibliothek Retina.js zu Hilfe rufen. Das Skript ersetzt jeweils jedes Bild, das in Standardauflösung vorliegt (wie /Bilder/Foto.png), durch eine Version in Retina-Auflösung (/Bilder/Foto@2x.png), falls eine entsprechend benannte Datei im betreffenden Pfad auf dem Server vorliegt und das Zielgerät über ein Retina-Display verfügt.

Minimieren von http-Anfragen

Jede @media-Abfrage referenziert die benötigten Bilder in der passenden Auflösung. Also gilt es für jedes Bild, eine Version der Abbildung für jede avisierte Pixeldichte bereitzustellen.Wenn Sie nur eine HiDPI-Pixeldichte unterstützen, verdoppelt sich schon einmal die Anzahl der referenzierten Bilder und somit wiederum die Anzahl der zugehörigen Selektoren; wenn Sie sich zwei HiDPI-Auflösungsdichten vornehmen, verdreifacht sich der Aufwand. Mit Hilfe von CSS-Sprites können Sie die Anzahl der http-Anfragen durch geschicktes Referenzieren der Retina-Version der Bilddatei vereinfachen:

Elastische Schrifteneinheiten

Amazon folgt mit dem Kindle einen völlig anderen Ansatz als Google in Android OS und Apple in iOS. So gibt zum Beispiel das Kindle Touch seine tatsächliche Auflösung mit 600 x 800 Pixeln an, setzt allerdings die Standardschriftgröße deutlich höher an als die branchenüblichen 16 Pixel beziehungsweise 14 Punkt.Würden Sie daher @media-Abfragen auf Basis der px-Einheit einsetzen, würde das Kindle Touch mit einem ungeeigneten Stylesheet mit einer aufgeblasenen Schriftgröße beliefert werden. Um das Problem zu umgehen, gilt es, @media-Abfragen in ems statt in px anzugeben, konkret also:

Automatisches Herunterrechnen unterdrücken

Stellt man Webbilder für Geräte mit einer hohen Auflösung des Displays bereit, kann zudem in allen mobilen Browsern mit der Webkit-Renderingengine noch ein anderer Effekt auftreten, der eine weitere und sehr unangenehme Qualitätsminderung zur Folge hat.

JPEGs ab einer Größe von 2 Megapixeln (2 x 1024 x 1024) sowie PNG/GIF-Bilder ab einer Größe von 3 Megapixeln werden in Webkit-Browsern wie dem mobilen Safari automatisch auf die halbe Pixelgröße heruntergerechnet.

Da die neuen OS-Geräte mit einer Pixeldichte von 2 arbeiten, werden die betreffenden Bilder dann wieder auf die gewünschte Display-Größe hochskaliert, was eine merkliche Minderung der Darstellungsqualität zur Folge hat. Um den Effekt zu verhindern, empfehlen wir, große Bilder nur im JPEG-Format und immer mit der Option progressiv abzuspeichern. Dann tritt der Fehler nicht auf.

Symbolschriften

Der Einsatz von Symbolschriften anstelle von Pixelgrafiken hat für Sie zahlreiche Vorteile. Zum einen können Sie die Größe der Symbole mit Hilfe von CSS leicht ändern, ohne einen Verlust der Schärfezeichnung zu verursachen.

Textzeichen sehen unabhängig von der Zoomstufe immer scharf aus und machen daher unabhängig von der Auflösungsdichte immer eine gute Figur. Auch lassen sich Schriftzeichen leicht einfärben oder mit CSS-basierten Schatteneffekten versehen.

Die einfachste Methode, Symbolschriften einzusetzen, besteht im Zuweisen einer CSS-Klasse zu einem HTML-Element wie beispielsweise <span> oder <strong>, also konkret etwa:

Der Inhalt des betreffenden Elementes entspricht dem Symbol, das Sie anzeigen möchten. Nach dem Einbinden der benötigten Schrift würden Sie die Klasse wie folgt deklarieren:

Diese Methode setzt voraus, dass Sie sich nicht daran stören, wenn Bildschirmleseprogramme den Inhalt des Symbols vorlesen (im Beispiel das "i").In HTML5 können Sie zur Einbindung einzelner Glyphen einer Symbolschrift alternativ das data-Attribut verwenden, um den Zeichencode an den Browser zu übergeben. Den Zeichencode müssen Sie natürlich erst herausfinden (die Belegung der Symbolzeichen ist von Schrift zu Schrift unterschiedlich).So lässt sich unter Verwendung der Schrift Fico von Lennart Schoors mittels data-icon="&#x25c8;" ein WiFi-Symbol auf die Website zaubern, natürlich nur, sofern Sie die benötigte Schrift in die Website eingebunden haben.Um das Symbol einer statistischen Grafik zu erzeugen, können Sie an ein Markup wie dieses:

mit dem folgenden CSS-Code ein Pseudoelement anhängen:

Mit Hilfe des Attributs aria-hidden im Zusammenhang mit der Eigenschaft speak:none lässt sich das Vorlesen des Pseudoelementes ganz einfach unterdrücken. Der Code des betreffenden Zeichens wird an den Browser im data-Attribut übergeben.Pseudoelemente vertragen sich allerdings nicht mit dem Internet Explorer bis einschließlich Version 7, und so müssten Sie für diesen Browser, falls Sie ihn noch unterstützen möchten, ein alternatives Stylesheet bereitstellen. Dieses können Sie zum Beispiel mit Hilfe eines bedingten Kommentars einbinden

Eine andere Methode besteht im Einsatz eines :before-Pseudoelementes mit der Eigenschaft content, wobei diesmal für jedes Symbol eine eigene Klasse zum Einsatz kommt, zum Beispiel

und dann weiter im CSS-Stylesheet:

Auflösungsunabhängig mit SVG

Als eine logische Lösung für Probleme mit der Bildschärfe im Web bietet sich der Einsatz von SVG-Vektorgrafiken nahezu an. Vektorbasierte Grafiken weisen eine deutlich geringere Dateigröße als Pixelbilder auf, fordern jedoch dem Zielgerät etwas mehr Rechenleistung ab. Die Unterstützung von SVG hat zudem so viele Nuancen, wie das SVG-Format Features beinhaltet.

Ein Browser mag den einen Teil der SVG-Funktionalität beherrschen, aber nicht den anderen. Zum Glück bleiben die Browser beim Parsen der Seite nicht stehen, wenn sie mit nicht unterstützten SVG-Funktionen konfrontiert werden.

Der Browser führt einfach die übrigen Anweisungen aus. Problematisch sind vielmehr diejenigen Teile der SVG-Funktionalität, die in dem betreffenden Browser zwar pro forma implementiert wurden, aber viel zu langsam ablaufen.

Stellt eine SVG-Grafik zu hohe Anforderungen an das Zielgerät hinsichtlich seiner Rechenleistung, "verschluckt" sich der Browser an der Website und bleibt einfach stehen. Beim Einsatz von SVG ist die Simplizität daher die wichtigste Tugend.

Die einfachste Methode zum Einbinden von SVG- Grafiken besteht im Einsatz des <img>-Tags, zum Beispiel:

Alternativ können Sie sich die CSS-Eigenschaft background-image mit einem Klassenselektor wie folgt zunutze machen:

Zu guter Letzt kommen Sie auch durch den Einsatz von content:url() ans Ziel:

Die Eigenschaften width und height funktionieren in diesem Fall allerdings nicht. Mit Hilfe der Bibliothek Modernizr lässt sich zudem die Rückwärtskompatibilität mit älteren Browsern problemlos herstellen. Hierzu können Sie zum Beispiel den folgenden Code nutzen:

Ein vergleichbares Resultat lässt sich in HTML 5 übrigens mit einem benutzerdefinierten data-Attribut erreichen, und zwar mit jQuery und Modernizr auf der Basis eines ganz einfachen Markups in der Form:

mit etwas Javascript wie diesem:

Diese Methode kann allerdings Altlasten-Browser, die mit SVG nichts anzufangen wissen, nicht vom Herunterladen der SVG-Grafik abhalten.

Fazit

HiDPI-Displays wie Retina müssen dank praxiserprobter Workarounds keinen Grund zur Sorge mehr darstellen. Wer die Unterstützung von Geräten mit einer hohen Auflösungsdichte ins Pflichtenheft übernimmt, kann diese neue Herausforderung mit System und Eleganz meistern.