Web-Inhalte für Retina-Displays optimieren

Mit dem iPhone 4S, dem iPhone 5 und dem neuen iPad halten hochauflösende, äußerst scharfe Displays nach Retina-Standard Einzug in die Medienwelt. Die Bildschirme sind in der Masse betrachtet noch selten. Es ist jedoch durchaus wahrscheinlich, dass ein Entscheider über ein zu bewilligendes Webprojekt ein Retina-Gerät sein Eigen nennt und Ihren Designvorschlag früher oder später darauf ansehen wird. Umso wichtiger also, dass das Design auch dort respektabel, also nicht verpixelt, aussieht. Gerade beim Einsatz vieler kleiner Symbole artet die Anpassung schnell in Arbeit aus. 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 Freigabe der Endversion.

Der Einsatz von Symbolschriften anstelle von Symbolgrafiken hat für Webdesigner zahlreiche Vorteile. Zum einen können Sie die Größe der Symbole mit Hilfe von CSS leicht ohne Qualitätsverluste ändern. Auch lassen sich Schriftzeichen leicht einfärben oder mit CSS-basierten Schatteneffekten versehen, ohne die Erstellung einer neuen Version zahlreicher anderer Symbole und damit einen umständlichen Weg über eine Grafikanwendung zu bemühen. Zudem sehen Textzeichen unabhängig von der Zoomstufe immer scharf aus und machen daher auch auf einem Display in Retina-Qualität mit 220 dpi nativer Auflösung eine gute Figur. Zur Einbindung einzelner Glyphen einer Symbolschrift können Sie ein data-Attribut verwenden. So lässt sich unter Verwendung der Schrift Fico von Lennart Schoors mittels

ein WiFi-Symbol auf die Seite zaubern, während

das Symbol eines Briefumschlags erzeugt. Um Symbole als Textzeichen zu nutzen, muss man selbstverständlich wie gewohnt die zugehörige Webschrift einbinden. Darüber hinaus gilt es, die benötigten Zeichencodes herauszufinden, um diese über ein data-Attribut an den Browser übergeben zu können. Um das Symbol einer statistischen Grafik zu erzeugen, könnte man ein Pseudoelement mit dem folgenden Markup nutzen:

Pseudoelemente vertragen sich allerdings nicht mit dem Internet Explorer bis einschließlich Version 7. Wer auch diesen Browser unterstützen möchte, kann ein alternatives Stylesheet mit Hilfe eines bedingten Kommentars einbinden:

Die meisten Bildschirmleseprogramme lassen Pseudoelemente außer Acht, allerdings gibt es Ausnahmen wie VoiceOver unter Mac OS X. Unter Verwendung des Attributs aria-hidden lässt sich das Vorlesen des Pseudoelementes unterdrücken; diese Methode erfordert jedoch etwas zusätzliches Markup, und zwar:

Stilisieren Sie jetzt dieses Markup wie folgt:

Der Einsatz von CSS-Klassen entfällt hierbei. Der Code des betreffenden Zeichens wird als der Wert des data-Attributs übergeben. Nach demselben Prinzip kann man etwa auch verlinkte Symbole unter Verwendung von Webschriften umsetzen. Eine andere Methode zur Bereitstellung scharfer Symbole bietet der Einsatz eines Dienstes wie Icomoon .

Online-Inhalte für iPhone 5 und iPad 3 optimieren: Scharfe Symbole mit Icomoon

Bilder auf Websites auch in höherer Auflösung bereitzuhalten, bedeutet zusätzlichen Aufwand. Als Lösung bietet sich ein Dienst wie Icomoon geradezu an. Icomoon bietet Webdesignern die Möglichkeit, ausgehend von einer Symbolschrift eine Sammlung von Vektor-Icons zu erzeugen. Da nicht jeder Webdesigner zusätzliche Kosten in Kauf nehmen will, gibt es sowohl eine kostenlose Open-Source-Variante des Dienstes als auch eine kostenpflichtige Version zum Preis von 39 US-Dollar. Natürlich wird niemand alle verfügbaren Icons benötigen und daher kann man sich unter keyamoon.com eine persönliche, maßgeschneiderte Sammlung der gewünschten Icons zusammenstellen und sich daraus im Browser einen eigenen Zeichensatz mit den gewünschten Icons und der gewünschten Zeichenbelegung zusammenklicken.

Dabei besteht die Möglichkeit, den benötigten Symbolen Zeichencodes aus dem privaten Bereich von Unicode (PUA, oder Private Use Area) zuzuweisen, die nicht vorgelesen werden können. Am Schluss erhalten Sie einen Download-Link zu einem Archiv, der unter anderem Ihre Schriften, die zugehörigen Bilder und ein Stylesheet zur Herstellung der Kompatibilität mit dem Internet Explorer 7 beinhaltet. Wer bei Symbolen auf SVG ausweichen möchte, muss damit rechnen, dass ältere Browser, darunter der Internet Explorer bis einschließlich Version 8 und Android OS bis einschließlich Version 2.3, diesen Standard gar nicht unterstützen.

Online-Inhalte für iPhone 5 und iPad 3 optimieren: höhere Bildschärfe mit CSS

Die Ankunft hochauflösender Displays - zuerst im neuen iPad, dann im portablen Macbook Pro und künftig möglicherweise auch in Geräten anderer Hersteller - stellt Webdesigner vor eine neue Herausforderung: Bilder können wesentlich schärfer als bisher dargestellt werden, aber nur wenn sie die Auflösung eines Retina-Displays aufweisen.

Bei gewöhnlichen Bildern in 72 dpi und bei kleinen Symbolen hat die höhere Pixeldichte eines 220 dpi starken Retina-Displays eine geminderte Darstellungsqualität zur Folge. Wer eine Behelfslösung benötigt, kann jedem User Agent Bilddaten in gewünschter Qualität mit Hilfe von CSS-Medienabfragen servieren.

Um diesen Workaround zu implementieren, erstellen Sie zu jedem gewöhnlichen Bild eine Version in Retina-Qualität; verdoppeln Sie also die Anzahl von Pixeln in jeder Dimension (statt das Originalbild in einer Version für das Web in 100 x 100 Pixel auszugeben, geben Sie es in 200 x 200 Pixel aus). Um Displays in Retina-Qualität anzusprechen, fügen Sie Ihrem CSS-Stylesheet folgenden Quelltext hinzu:

Das zentrale Element der Medienabfrage ist die Eigenschaft background-size mit der zugehörigen Regel. Diese weist den jeweiligen Browser an, das angelieferte Bild herunter zu skalieren. Derzeit erfordern alle Browser eine um das zugehörige Präfix erweiterte Eigenschaft (also min--moz-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 (also 2/1 statt 2). Ein Workaround für Bilder, die mit dem <img>-Tag eingebunden wurden, besteht in der Umsetzung so genannter "adaptiver" Bilder.

Online-Inhalte für iPhone 5 und iPad 3 optimieren: Adaptive Bilder mit Javascript

Wer ein bestehendes CMS um die Fähigkeit der Handhabung von Bildern in Retina-Qualität aufrüsten möchte, ohne das Mark-up der Site zu verändern und mehrere Versionen aller Bilder hochladen zu müssen, kann sich einer Lösung namens "Adaptive Images" von Matt Wilcox behelfen. Es handelt sich dabei um ein Skript, welches die Größe des Displays erkennt, um automatisch eine optimierte Version der betreffenden Bilder zu erzeugen, diese zu cachen und an den User Agent auszuliefern.

Der Vorteil für Webdesigner besteht darin, dass sie nur minimale Modifikationen erfordert und mit PHP 5.x auf Apache 2 läuft. Optimierte Versionen der Bilder senken die erforderliche Bandbreite, was sich besonders auf mobilen Geräten in kürzere Übertragungszeiten durch die geringeren Datenmengen bemerkbar macht. Das Skript finden Sie unter adaptive-images.com.

Online-Inhalte für iPhone 5 und iPad 3 optimieren: Tipp - Lokaler Staging Server

Heutige Websites müssen von Desktops über Tablets und Mobiltelefone bis hin zu Fernsehern auf einer Vielzahl verschiedener Geräte lauffähig sein. Das Testen einer Website auf nur einem Bruchteil der verfügbaren Geräte wäre schon eine Vollzeitbeschäftigung. Wichtig sind daher Lösungen, die den umständlichen Vorgang vereinfachen. Eine solche Lösung ist beispielsweise AdobeShadow. Was den Vorgang dennoch erschwert, ist die Einrichtung eines lokalen Staging-Servers, der eine virtuelle Host-Domain nutzt. Abhilfe schafft hier ein Wildcard-DNS-Dienst namens Xip.io von 37signals. Mit diesem Dienst können Sie eine lokale IP-Adresse aus Ihrem LAN, wie zum Beispiel 10.0.1.1, mittels projektname.10.0.1.1.xip.io aus Ihrem lokalen Netzwerk ansprechen, zum Beispiel unter Verwendung eines Tablets oder eines Smartphones via WiFi. Der Dienst erfordert keinerlei Konfiguration.