Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao

Websites Retina Ready, was bedeutet Retina Ready

Hochauflösende Bildschirme wie Retina Displays gewinnen insbesondere mit der wachsenden Marktdurchdringung des iPad3 zunehmend an Beliebtheit. Retina Displays sind hochauflösend und weisen im Vergleich zu normalen Bildschirmen eine deutlich höhere Pixeldichte auf. Auf der gleichen Bildschirmfläche werden ungefähr viermal so viele Pixel wiedergegeben, die dermaßen klein sind, dass diese vom normalen menschlichen Auge nicht mehr wahrgenommen werden können. Grafiken, Texte und Bilddateien erscheinen gestochen scharf. Dies bedeutet zugleich, dass bei normaler Auflösung lediglich 25 % des Displays erforderlich wären. Endgeräte mit Retina Displays vergrößern allerdings die in den Webseiten eingebundenen Elemente eigenständig. Im Ergebnis sehen Websites, die nicht Retina Ready sind, verpixelt und unscharf aus. Der Effekt gleicht dem bei einer einfachen Vergrößerung der Website. Webdesigner müssen entsprechend die in Websites eingebundenen Layoutgrafiken, Bilddateien und Fonts für Bildschirme mit hoher Pixeldichte (High-Resolution-Displays) optimieren, um auch für Retina Displays hochwertige Websites mit scharfen Bildern anbieten zu können.

Eine Möglichkeit besteht darin, Grafiken und Fonts zu verwenden, die auf Vektoren (SVG) beruhen. In CSS3 entwickelte Layoutelemente wie Grafiken, Buttons oder Icons basieren in aller Regel auf Vektoren und ermöglichen auch auf hochauflösenden Displays eine ausgezeichnete Performance.

Andernfalls müssen hochauflösende Displays von Webdesignern spezifisch bedient werden. Spätestens seit responsivem Webdesign und der steigenden Zahl an Smartphones und Tablets müssen Größe und Layout von Websites veränderbar sein und sich an das spezifisch verwendete Endgerät anpassen können. Dies kann beispielsweise mithilfe von Media Queries realisiert werden. Der Einsatz von Media Queries ermöglicht Webdesignern darüber hinaus auch die Optimierung von Websites für Retina Displays. Durch Media Queries können verschiedene Bildschirmabmessungen und -auflösungen angesprochen werden, indem spezielle Quellcodes für Endgeräte mit hoher Auflösung programmiert werden, so dass auch auf Retina Displays scharfe Pixelgrafiken wiedergegeben werden. Hierzu muss zunächst die gewünschte Pixelgrafik in vierfacher Größe erstellt und mit der Notation „px2“ abgelegt werden. Durch „min-device-pixel-ratio: 2“ können Retina Displays in CSS spezifisch angesprochen und angewiesen werden, die Bilddatei mit hoher Auflösung auf den Bildschirm zu laden.

Daneben existieren einige Scripte und Plugins, mit deren Hilfe Grafiken im HTML-Code für Retina Displays eingebunden werden können. Ein wichtiges Instrument zur Bedienung von Retina Displays stellt retina.js (http://imulus.github.io/retinajs/) dar. Retina.js ist ein kostenfreies JavaScript (Open Source), das auf dem Webseitenserver prüft, ob eine Bilddatei mit High Resolution zur Verfügung gestellt wird. Mit Hilfe von retina.js kann der Optimierungsprozess weitestgehend vereinfacht werden. Apple setzt die Notation „@2x“ zur Markierung einer Bilddatei in hoher Auflösung voraus. Neben der normalen Bilddatei (z. B. „bilddatei.png“) muss diese in retina-kompatibler Auflösung und mit der genannten Notation ("bilddatei@2x.png") im selben Verzeichnis bereitgestellt werden. Zudem wird das Script im HTML-Code eingebunden (<script type="text/javascript" src="/scripts/retina.js"></script>), so dass dieses automatisiert auf Bilddateien in hoher Auflösung prüft und diese abruft.