Auch Entwickler brauchen Platz zum Spielen

31. Januar 2013 /

Retina Display: Wie Webentwickler ihre Projekte optimieren

Webseiten für Retina-Displays anpassen, erfordert Mehraufwand: Nach Möglichkeit auf CSS setzen und Bilder in 2 Auflösungen verfügbar machen.
Retina Display

Hochauflösende Bildschirme der Tabletts und neuerdings mobiler Rechner wie das aktuelle MacBook Pro versprechen mehr Schärfe vor Augen. Das Betriebssystem und die meisten Anwendungen sind bestens auf das “Next Generation Display” abgestimmt und ergänzen sich gegenseitig prachtvoll. Bewegt sich der Nutzer dagegen ins Web, so erwartet ihn dort eine unangenehme Überraschung: Die Unschärfe der Inhalte. Was können Webentwickler also tun, um Webseiten auch auf HiDPI-Bildschirmen genussvoll und in voller Schärfe darzustellen, zeigt dieser Artikel.

Retina-Display: Schärfe soweit das Auge reicht

Retina-Display: Schärfe soweit das Auge reicht

Als Erstes analysieren wir, welche Elemente einer Webseite genau die Unschärfe verursachen: Eine Seite im Web besteht aus Bildern, Texten und Dritt-/Videoelementen. Welche Objekte verschlimmern die Qualität der Wahrnehmung?

Texte für Retina
Buchstaben generiert der Browser nativ – mit einer Ausnahme: Textblöcke sind als Grafik angelegt (was eh recht ungünstig ist, schon alleine wegen der fehlenden SEO-Optimierung). So sind Textpassagen auf Retina-Displays in aktuellen Browsern (zum jetzigen Zeitpunkt nur Safari und Chrome) gestochen scharf und lassen sich angenehmer lesen wie Papier. Fazit: Keine Anpassungen notwendig, da vom System gerändert.

Videos für Retina
Bei eingebetteten Filmen kommt es auf die Auflösung des Videos an. Daher ist es bei der Einbindung empfehlenswert, eine hohe Auflösung des Materials zu wählen bzw. das Video in maximal hoher Auflösung zu übertragen. Je nach Auflösung des Videos generieren Hosting-Dienste entsprechende Vorschaubilder. Vimeo erlaubt eine händische Zuweisung eines Preview-Bildes, welches in hochwertiger Variante zugewiesen werden kann.

YouTube erlaubt eine manuelle Zuweisung der Videoqualität, zum Beispiel via JavaScript API. Dito bei Vimeo.

Grafiken für Retina
Staatsfeind #1 sind die Grafiken. Verschwommen wirkend verderben sie das Gesamtbild einer Webseite. Je nach Umfang der Website gehört jede eingesetzte Grafik inspiziert. Folgende Möglichkeiten zur “Reparatur” stehen zur Verfügung:

  • Symbole, Schaltflächen, Überschriften und andere GUI-Elemente möglichst mit CSS und Web Fonts (eignet sich hervorragend für Texte und Icons) realisieren. Vorteil: Inhalte werden nativ vom Browser erzeugt.
  • Für Fotos, Logos und andere grafische Objekte innerhalb der Seite existieren zahlreiche JavaScript- und CSS-Lösungen, die Ressourcen je nach Pixeldichte (nach-)laden und somit jede Auflösung bestens bedienen können. Als Webentwickler darf man Favicons und Apple Touch Icons – die gern von Feedreadern genutzt werden – nicht außer acht lassen.

Schlusswort
Je nach Komplexität eines Projekts, kann die Kompatibilität zu Retina-Displays unkompliziert in die Wege geleitet werden. Der größte Aufwand entsteht beim Generieren von 2 Varianten eines Bildes: 1 x für normale Bildschirme und ein Exemplar in doppelter Auflösung für HiDPI-Monitore. Bei Bedarf lässt sich die Skalierung von Groß auf Klein automatisieren.

Sergej Müller

[Der Autor]Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung, Apps und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das zugkräftige SEO-Plugin für WordPress-Blogs.

Thematisch ähnliche Beiträge