Ratgeber: Webdesign

Web-Inhalte für Retina-Displays optimieren

Displays nach Retina-Standard, etwa iPhone 5 oder das neue iPad, sind der neueste Trend. Wir geben Tipps & Tricks, damit Ihre Homepage auch auf Apple-Gadgets eine gute Figur macht.

Wir zeigen, wie Sie Webseiten für Retina-Displays optimieren.

© WEKA Media Publishing GmbH

Retina-Displays verbreiten sich immer stärker. Wir zeigen, wie Sie Ihre Online-Inhalte optimieren können.

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

data-icon="&#x25c8"

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

data-icon="&#x2709"

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:

<h2 id="stats" class="stats-title">Balkendiagramme</h2>

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:

<!--[if lte IE 7]><link rel="stylesheet" href="lte-ie7. css" /><![endif]-->

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:

<h3><span aria-hidden="true" data-icon="&#x21dd></span>Balkendiagramme</h3>

Stilisieren Sie jetzt dieses Markup wie folgt:

[data-icon]:before {
font-family: icons; 
content: attr(data-icon);
speak: none; /* damit das Zeichen nicht vorgelesen wird */
}

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

Screenshot von http://icomoon.io/app/

© Screenshot von http://icomoon.io/app/

Zusammenstellen einer Symbolschrift in Icomoon (keyamoon.com/icomoon/app/).

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

Microsoft Surface

© Microsoft

Microsofts neues Tablet Surface verfügt über ein 10,6-Zoll- Cleartype-Display mit Gorilla Glass; bisher gibt es jedoch kein Wort zur nativen Auflösung.

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:

@media only screen and (min--moz-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 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

Screenshot von http://xip.io/

© Screenshot von http://xip.io/

Xip.io, der Wildcard-DNS-Server von 37signals zum Testen von Websites im lokalen Netzwerk.

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.

Mehr zum Thema

Media Queries
Ratgeber Media Queries

Wir zeigen Ihnen, wie Sie Webseiten mit Media Queries für Smartphones und Tablet umsetzen.
Android-Logo
Ratgeber: Animationen mit CSS3

Sie möchten mit CSS3 Animationen basteln? Wir zeigen Ihnen anhand eines selbst erstellten Android-Logos, wie sich dies mit CSS3 umsetzen lässt.
Internet-Magazin-Logo
Ratgeber: CSS3 und PHP

Unser neuer Ratgeber verrät Ihnen, wie Sie mit CSS3 crossplattformfähige Reflektionen umsetzen und wie Sie eine neue PHP-Sicherheitslücke stopfen…
Fußball WM 2014 Brasilien
WM 2014 im Live Stream

Dank Live-Streams der TV-Sender und Apps wie Zattoo oder Magine können Sie die WM auch unterwegs verfolgen. Doch welcher Stream verbraucht am…
iPad Air im Test
Netzwerkdrucker ohne AirPrint

Wenn Sie von iPhone und iPad drucken wollen, dann zeigt Ihnen unser Ratgeber, wie Sie das anstellen. So nutzen Sie Netzwerkdrucker ohne AirPrint.