Websites einfach mit Retina Icons bereichern

Icons können dem User 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 zum Beispiel 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 muss man einige spezielle Anpassungen vornehmen.

Icons in Retina Auflösung einbinden

Mit Font Awesome kann man skalierbare Vektor Icons (gestochen scharf auf Retina Displays) für Webprojekte nutzen, die direkt über CSS Befehle angepasst werden können – Größe, Farbe, Schlagschatten und alles was CSS zu bieten hat. Ein enormer Vorteil im Vergleich zu normalen Pixelgrafiken. Font Awesome ist komplett kostenlos, bietet 361 hochwertige Icons und ist einfach nur „awesome“!

http://fortawesome.github.io/Font-Awesome/

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


In einem weiteren Artikel werde ich erklären, wie man Fotos und Pixelgrafiken einfach in Retina-Auflösung in die Website einbindet. 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.