Retina Icons

Icons können deinen Nutzern helfen, Elemente intuitiver zu verstehen. Ob ein Link eine Seite, ein Dokument, eine E-Mail-Anwendung oder eine externe Website öffnet, lässt sich über ein entsprechendes Icon einfach anzeigen. Ebenso bekannt sind die Icons für Facebook, Twitter und Google Plus, die auf vielen Websites genutzt werden.

Mit dem iPhone 4 schob Apple den Trend zu hochauflösenden Displays (hohe Pixeldichte, dadurch schärfer) im großen Stil an. Der von Apple geprägte Begriff „Retina" (laut Apple soll das menschliche Auge aus einem typischen Betrachtungsabstand nicht in der Lage sein, einzelne Pixel zu erkennen) setzte sich als Beschreibung für diese Art Display im allgemeinen Sprachgebrauch durch.

Text wird auf diesen Displays gestochen scharf dargestellt. Grafiken und Fotos allerdings erscheinen „normal" und ein wenig unscharf im direkten Vergleich zum extrem scharfen Text auf Retina-Displays. Um auch Grafiken und Fotos gestochen scharf auf Retina-Displays darzustellen, musst du einige spezielle Anpassungen vornehmen.

Icons in Retina-Auflösung einbinden

Mit Font Awesome kannst du skalierbare Vektor-Icons (gestochen scharf auf Retina-Displays) für Webprojekte nutzen, die direkt über CSS-Befehle angepasst werden können, also Größe, Farbe, Schlagschatten und alles, was CSS zu bieten hat. Ein enormer Vorteil gegenüber normalen Pixelgrafiken. Font Awesome ist komplett kostenlos, bietet 361 Icons und ist einfach nur „awesome".

Font Awesome Icons bereits in Photoshop zum Layouten nutzen: solife.cc/blog/font-awesome-photoshop.

In einem weiteren Artikel könnte ich vielleicht irgendwann einmal, wenn sich denn die Zeit findet, erklären, wie man Fotos und Pixelgrafiken einfach in Retina-Auflösung in die Website einbindet.