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 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.

Über den Autor

Webentwickler, SEO und CEO Richard Albrecht

Richard Albrecht ist Webentwickler, SEO und CEO und betreut mit seinem Unternehmen Kunden in ganz Deutschland. Gemeinsam haben sie seit 2006 über 1300 Website Projekte realisiert.

Richard berät als Dozent bei Seminaren und Veranstaltungen (z.B. Handelskammer und Handwerkskammer Hamburg oder Hamburger Gründertag) und veröffentlicht ab und zu über Themen, in die er sich bei der Arbeit tief eingearbeitet hat. Meist schreibt er über die technische und inhaltliche Optimierung von Websites und Suchmaschinenoptimierung.