Retina-Display & Retina Web Design

Retina Web Design und Retina-Displays sind in aller Munde. Alles wirkt feiner, weicher und angenehmer für das Auge. Retina ist kein technischer Begriff, sondern eine Display-Technologie, die ihre Wortschöpfung unter anderem der Firma Apple zu verdanken hat. Denn bis dato ist einem das Wort Retina maximal mit anderen Dingen begegnet, sei es die Netzhaut im Auge oder der dem Astronomen sicherlich bekannte Retina-Nebel.

Die Entwicklung von Retina

Als Apple das iPhone 4 vorstellte, tauchte der Begriff Retina-Display erstmals auf. Das 3,5 Zoll große Display bezeichnete Steve Jobs damals als Retina-Display, da es mit 960 x 640 Pixeln auflöste und 326 ppi bot. Das Vorgängermodell des iPhone 4 bot lediglich 480 x 320 Pixel, insgesamt wurde die Zahl der darstellbaren Pixel bei gleichbleibender Größe des Displays also vervierfacht. Der Begriff Retina-Display leitete sich deshalb als Name ab, da angeblich bei normalem Betrachtungsabstand von ca. 30 Zentimeter keine Einzelpixel mehr erkennbar sein sollen, davon profitieren Schriften und Bilder, sofern sie für die erhöhte Anzahl an Pixeln optimiert sind.

Der „alles-feiner-weicher-angenehmer-Effekt“ wird durch die wesentlich höhere Auflösung erzeugt, trotzdem bleibt die darstellbare Fläche identisch. Die für das Retina-Display angepassten Grafiken sind wesentlich größer und durch die skalierte Betrachtungsweise wirkt alles wohltuender für das Auge. Der Nachteil ist natürlich, dass “alte” Anwendungen auch angepasst werden müssen, da diese sonst unscharf erscheinen.

Retina Web Design

Bewegt sich der Nutzer dagegen im 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, und welche Elemente einer Webseite verursachen diese Unschärfe überhaupt?

Eine Seite im Web besteht aus Bildern, Texten und Dritt-/Videoelementen. Welche Objekte verschlimmern also die Qualität der Wahrnehmung? Buchstaben generiert der Browser nativ – mit einer Ausnahme: Textblöcke sind als Grafik angelegt, was ohnehin recht ungünstig ist, schon alleine wegen der fehlenden Suchmaschinen-Optimierung. So sind Textpassagen auf Retina-Displays mittlerweile in fast allen Browsern gestochen scharf und lassen sich angenehmer lesen wie Papier. Fazit: Keine Anpassungen notwendig, da vom System geändert.

Bei eingebetteten Videos im Retina Web Design kommt es auf die Auflösung des Videos an. Daher ist es bei der Einbindung empfehlenswert, auf eine möglichst hohe Auflösung des Materials zu achten.

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, welche sich übrigens auch hervorragend für Texte und Icons eigenen, realisieren. Der 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 gerne von Feedreadern genutzt werden – nicht außer Acht lassen.

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 zwei Varianten eines Bildes: Einmal 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.