HD-Webdesign

Webdesign für Retina-Displays

Mobilgeräte glänzen bisweilen mit einer höheren Auflösungsdichte als PC-Monitore. Nicht optimierte Websites sehen auf den HiDPI-Displays deshalb unscharf aus. Wir zeigen, wie Sie Ihren Webauftritt in voller Schärfe erstrahlen lassen.

Autoren: Anna Kobylinska und Filipe Pereira Martins • 3.4.2013 • ca. 10:00 Min

internet, webdesign, hidpi, retina, display, tool — Webdesign für HiDPI-Displays

Ein iPhone 5 packt auf sein 4 Zoll kleines Display dank einer Auflösungsdichte von 326 ppi (pixel per inch) 1136 x 640 Bildpunkte, ein iPad 4 protzt sogar mit einer Auflösung von 2048 x 1536 Pixeln (264 ppi) - mehr als bei herkömmlichen Desktop-Monitoren. Auch beim Macbook Pro ist die...

Das Problem: Webkit-Browser rendern Web-inhalte mit einer Skalierungsstufe, die von der Auflösungsdichte abhängt. Diese Skalierung vergrößert auch jegliche Ungereimtheiten wie JPEG-Kompressionsartefakte. Und der Benutzer nimmt den Qualitätsverlust zum Teil als störend wahr. Pixelbasierte Layouts passen sich zudem nicht elastisch der Größe des Viewports an.

Da auch noch 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 teilen dem Browser eine inkorrekte Pixelzahl mit. So verfügt etwa ein iPhone der vierten Generation über ein Retina-Display mit einer physikalischen Auflösung von 640 * 960 Pixeln und einer Pixeldichte von 326 ppi. Es gibt sich jedoch nur als ein Gerät mit 320 * 480 Bildpunkten zu erkennen.

mobile, browser, retina, display — Ein iPad der vierten Generation hat eine Auflösung von 2048 x 1536 Pixeln bei einer Dichte von 264 dpi.

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. Ein Ansatz besteht darin, mobile Geräte unter Verwendung von @media-Abfragen oder JavaScript mit den passenden CSS-Stylesheets zu beliefern.

Diese Lösung optimiert die Nutzung der Bandbreite, ist jedoch seitens des Webdesigners mit viel 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.

Anstelle von Pixelbildern können Sie 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 also nahe, die betreffenden Grafiken fürs Web gleich auflösungsunabhängig auszugeben.

Display-spezifische 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 die @media-Anweisungen:

device-pixel-ratio -o-min-device-pixel-ratio min--moz-device-pixel-ratio -Webkit-min-device-pixel-ratio

Zum Beispiel:

oder eben so:

@media only screen and (-moz-min- device-pixel-ratio: 1), only screen and (-o-min-device- pixel-ratio: 1/1), only screen and (-Webkit-min- device-pixel-ratio: 1), only screen and (min-device-pixel- ratio: 1){ .bild{ ... } } @media only screen and (-moz-min- device-pixel-ratio: 2), only screen and (-o-min-device-pixel- ratio: 2/1), only screen and (-Webkit-min-device- pixel-ratio: 2), only screen and (min-device-pixel- ratio: 2) { .logo { background: url(/pfad/zur/Datei.png) no-repeat; background-size: 100px 100px; /* die übrigen CSS-Anweisungen */ } }

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-Skript für Bilder, die mit dem <img>-Tag eingebunden wurden, gibt es von Matt Wilcox auf der Webseite adaptive-images.com .

Anpassungen mit 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, durch eine Version in Retina-Auflösung, falls eine entsprechend benannte Datei im betreffenden Pfad auf dem Server vorliegt.

Minimieren von http-Anfragen

Jede @media-Abfrage referenziert die benötigten Bilder in der passenden Auflösung. Also muss für jedes Bild eine Version der Abbildung für jede avisierte Pixeldichte bereitgestellt werden.

Selbst wenn Sie nur eine HiDPI-Pixeldichte unterstützen wollen, verdoppelt sich schon einmal die Anzahl der referenzierten Bilder und somit wiederum die Anzahl der zugehörigen Selektoren; wenn Sie sich dagegen zwei HiDPI-Auflösungsdichten vornehmen, verdreifacht sich der Aufwand. Mit Hilfe von CSS-Sprites können Sie die Anzahl der http-Anfragen durch Referenzieren der Retina-Version der Bilddatei vereinfachen:

div.spritesegment1 { background: url(sprite.png) no-repeat 0 0; } div.spritesegment2 { background: url(sprite.png) no-repeat -100px 0; } div.spritesegment3 { background: url(sprite.png) no-repeat -100px -100px; } .content a.fav-link { background: url(sprite.png) no-repeat 0 -100px; } @media only screen and (-Webkit-min- device-pixel-ratio: 2), only screen and (min-device-pixel- ratio: 2) { div.spritesegment1, div.spritesegment2, div.spritesegment3, div.spritesegment4 { /* das Sprite in @2x -Auflösung für Retina */ background-image: url(sprite@2x.png); /* Zurücksetzen der Dimensionen des @2x-Sprite für Retina */ background-size: 200px 200px; } }

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*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:

@media all and (min-width: 16em)

Automatisches Umrechnen vereiteln

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 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 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 zu speichern. 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 Schrift deklarieren Sie die Klasse wie folgt:

.icon { font-family: ,Die Internet-Magazin -Symbolschrift-1'; }

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="◈" ein WiFi-Symbol auf die Website zaubern, sofern Sie die benötigte Schrift in die Website eingebunden haben. Um das Symbol einer statistischen Grafik zu erzeugen, können Sie ein Markup wie dieses definieren:

<h3><span aria-hidden="true" data-icon="?"></ span>Balkendiagramme</h3>

Und mit dem folgenden CSS-Code hängen Sie schließlich auch noch ein Pseudoelement an:

[data-icon]:before { font-family: icons; content: attr(data-icon); speak: none; }

Mit Hilfe des Attributs aria-hidden im Zusammenhang mit der Eigenschaft speak:none lässt sich das Vorlesen des Pseudoelementes zudem 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, der folgerndermaßen aussehen könnte:

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:

[class^="symbol-"]:before { font-family: ,Die Internet-Magazin- Symbolschrift-1'; } .symbol-information:before { content: ,h'; }

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 kann deshalb 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 Einfachheit daher die wichtigste Tugend. Die simpelste Methode zum Einbinden von SVG-Grafiken besteht daher im Einsatz des <img>-Tags, zum Beispiel:

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

.bild { background-image: url(Logo.svg); background-size: 200px 300px; height: 200px; width: 300px; }

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

.bild-container:before { content: url(Logo.svg); }

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:

.bild { background-image: url(Logo_ kompatibel.png); background-size: 200px 300px; } .svg { .bild { background-image: url(Logo. svg); } }

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:

Oder mit etwas JavaScript wie diesem:

$(document).ready(function(){ if(!Modernizr.svg) { var images = $(,img[data- Ersatzbild]'); images.each(function(i) { $(this).attr(,src', $(this). data(,Ersatzbild')); }); } });

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.