Das Retina Display überzeugt wie auch viele andere Displays durch die Eigenschaft eine sehr hohe Auflösung darstellen zu können, dies jedoch bringt dem Designer der für das Mobile Endgerät Apps oder ähnliches gestalten muss einige Probleme, denn es sind Pro Element immer 2 Auflösungen, welche erstellt werden müssen.
Ich werde in diesem Blogpost nun ein paar dieser Probleme auflisten und auch diverse Lösungsvorschläge einbringen.
Der Unterschied
Der Unterschied zwischen dem normalen Display des iPhone 3GS und dem Retina Display des iPhone 4/4s/5 liegt darin, dass das normale Display eine Auflösung von 163ppi (points per inch) bietet, wohingegen das Retina Display eine Auflösung von 326ppi darstellen kann. Das bedeutet, dass auf der gleichen Fläche 2x so viele Bildpunkte dargestellt werden können. Somit gewährleistet Apple, dass man mit bloßem Auge keine Pixel mehr erkennen kann.
Nachteil hiervon ist, dass wenn man z.B. Apps gestaltet man Bilder für das iPhone 4 und das iPhone 3GS, in den bereits genannten Auflösungen, gestalten muss.
Vektorgrafiken
Um von den unterschiedlichen Auflösungen der verschiedenen Displays unabhängig zu sein nutzen viele Designer Vektorgrafiken was an und für sich ja auch eine gute Sache ist, jedoch in Bezug auf das Mobile Design auch große Nachteile mit sich bringt.
Zum Beispiel der Verbrauch von zu vielen Ressourcen oder, dass man wenig Kontrolle über die Pixel hat wenn sie skaliert werden.
Denn wie auf der Grafik zu sehen ist verschlechtert sich die Qualität unseres Icons durch die Vergrößerung um ein vielfaches.
Eine sehr gute Alternative sind Icon-Fonts, diese sind größen unabhängig und lassen sich beliebig skalieren.
Hier sind ein paar gute Beispiele zu Icon-Fonts:
- http://css-tricks.com/flat-icons-icon-fonts/
- http://www.entypo.com/
- http://somerandomdude.com/work/iconic/#
Ahead-of-time Resolution Independence
Die Musterlösung die direkt von Apple zur Behebung unseres kleinen Problemes gewählt
wurde nennt sich Ahead-of-time Resolution Independence (Die vorbereitete Unabhängigkeit von der Auflösung)
Hierbei geht es darum App Icons und diverse Elemente für beide Auflösungen anzulegen und zu rendern. Das ist zwar mehr Arbeit aber es erzielt dafür bei jedem Gerät ein optimales Ergebnis.
Beim erstellen dieser Daten muss man darauf achten, dass man sie erst in der geringeren Auflösung anlegt um sie nachher um 200% zu skalieren, das erspart Arbeit und würde anders herum auch nicht zum gewollten Ergebnis führen, denn wenn wir ein Icon auf 326ppi anlegen und ihm eine 1px Kontur geben, wird diese 1px Kontur bei der Skalierung auf 50% auch so bleiben, denn Ebenenstile unterstützen nur Ganzzahlen, da wäre die Kontur 0.5px also nicht umsetzbar.
Weiterhin ist es sehr wichtig, dass sich nachher keine gerasterten Bedienelemente in der
Datei befinden, diese würden beim höher Skalieren verpixeln, hierzu legen wir alle Bedienelemente oder Icons als Vektormasken an, denn das gewährleistet eine Gute Qualität auch bei doppelter Auflösung.
Hierbei ist ein wichtiger Schritt, dass ihr die Box "an Pixeln ausrichten" in den Fällen wo sie verfügbar ist immer aktiviert habt.
Mehr dazu findet ihr hier:
Und nochmal interessant zum nachlesen ist dieser Blogpost: