Fit für Retina – mit 5 Tools

amit Icons, Fonts und Bilder auch auf Retina-Displays gut aussehen, braucht es nur einige kleine Kniffe. Mit diesen fünf Tools bedienen auch Sie die HiRes-Screens spielend.

1. retina.js
Dieses Skript sucht für jedes ausgelieferte Bild automatisch eine HiRes-Variante vom Server, sobald es erkennt, dass der Client auf einem System mit hochauflösendem Display läuft. Retina.js ist ein Open-Source JavaScript-Code und gratis.

2. X-Icon Editor
Auch die kleinen Fav-Icons, die neben der URL in der Adressleiste des Webbrowsers erscheinen, muss man an die neuen hochauflösenden Standards anpassen. Mit dem auf HTML5 und Canvas basierenden X-Icon Editor lassen sich Vorlagen bearbeiten oder freihändig Fav-Icons erstellen.

3. Fico Webfont
Text lässt sich im Allgemeinen unproblematisch an die höhere Auflösung anpassen, sofern er nicht in eine Grafik umgewandelt wurde. Bei Sonder-zeichen kann es aber sein, dass die entsprechenden Zeichen auf dem Gastcomputer nicht vorhanden sind. Webfonts wie der Fico Webfont können hier Abhilfe schaffen, zeigen sie doch jedem Besucher exakt das gesuchte Zeichen (siehe Bild oben).

4. PictureFill
Der JavaScript-Code bringt die Funktionalität des diskutierten HTML5-Tags schon jetzt auf die eigene Webseite und erleichtert es so, Grafiken immer in der besten Qualität zu übermitteln.

5.  Sketch
Das Online-Tool generiert aus Vektorgrafiken Bitmaps – automatisch und für alle benötigten Größen und Auflösungen.