Wie man ein Retina-Ready iOS Bookmark Icon für eine Website erstellt und setzt
Web-Entwickler und Website-Besitzer achten darauf: Sie müssen ein Retina-fähiges iOS-Lesezeichen-Icon setzen. Die Lesezeichen-Symbole werden als Apple Touch- Symbol bezeichnet und diese benutzerdefinierten Bilder werden zum Symbol, das auf dem Startbildschirm eines Benutzers angezeigt wird, wenn sie eine Website auf einem iPad, iPhone oder iPod touch in iOS oder im Lesezeichenbereich von Safari für OS als Lesezeichen speichern X. Ohne eine benutzerdefinierte Apple-Touch-Icon-Datei-Set, Benutzer bekommen eine langweilige und oft hässliche thumbnail der Webseite selbst, und ohne ein Retina-Ready-Symbol verwenden, wird das Lesezeichen-Symbol pixelig und im Allgemeinen schrecklich auf dem neuen iPad Bildschirm.
Hier ist, was Sie tun müssen, um eine Retina perfekte Apple Touch Icon für jede Website in ein paar einfachen Schritten zu erstellen.
1) Erstellen Sie das Retina-Ready iOS Website Icon
Verwenden Sie eine Vorlage oder gestalten Sie Ihre eigene Vorlage. Ich habe das einfache DIY-Retina-Icon-Kit verwendet, das in einem früheren Post erwähnt wurde, es ist eine PSD-Datei, die das Design von gut aussehenden iOS-Icons so einfach wie ein oder zwei Klicks macht. Fügen Sie eine Website oder ein Firmenlogo ein und Sie sind ziemlich gut zu gehen. Wenn Sie nicht etwas haben, um PSD-Dateien zu bearbeiten, ist Photoshop CS6 Beta hervorragend und kann kostenlos heruntergeladen und verwendet werden, bis die endgültige Version später im Jahr erscheint.
2) Speichern Sie als PNG und benennen Sie das Retina Website Bookmark Icon
Das Symbol muss ein PNG sein, und es muss eines von zwei Dingen benannt werden. Jeder Dateiname bietet ein etwas anderes Erscheinungsbild des Symbols, das auf dem Startbildschirm des Benutzers angezeigt wird:
- " Apple-touch-icon.png " fügt das Highlight-Bubble-Overlay zum Symbol hinzu
- " Apple-touch-icon-precomposed.png " zeigt das Symbol wie ursprünglich erstellt an, ohne das Highlight-Overlay
Verwenden Sie die zweite Option, wenn Sie eine eigene Hervorhebung erstellt haben oder wenn das Symbol ohne allgegenwärtige Blase, die auf den meisten Standardsymbolen von Apple angezeigt wird, flacher angezeigt werden soll.
3) Laden Sie das Website-Lesezeichen-Touch-Symbol in das Basis-Webverzeichnis hoch
Verwenden Sie einen SFTP-Client (OS X enthält FTP im Finder und CyberDuck oder Filezilla sind kostenlos), um die Datei apple-touch-icon.png in das Stammverzeichnis zu kopieren. Dies ist normalerweise derselbe Speicherort, an dem sich die Hauptindexdatei der Site befindet. Nach dem Hochladen bestätigen Sie, dass es sich an der richtigen Stelle befindet, indem Sie einen Webbrowser öffnen und zu "http://SITEURL.com/apple-touch-icon.png" gehen und sicherstellen, dass es geladen wird.
Hier ist ein Beispiel für ein 512 × 512 Retina-Ready-Lesezeichen von OSXDaily.com:
Beachten Sie, dass ohne das Flag "-compected" das obige Symbol die Highlight-Blase anzeigt. Sie können den Unterschied zwischen den beiden sehen, indem Sie das tatsächliche Symbol mit dem Screenshot als Lesezeichen vergleichen.
4) Verwenden Sie ein iOS-Gerät und Lesezeichen auf der Website
Dies ist der einfachste Teil, schnappen Sie sich ein iOS-Gerät (vorzugsweise ein iPad 3, um den Retina-Aspekt zu bestätigen) und öffnen Sie Safari. Aktualisieren Sie die Website, auf die Sie das Symbol hochgeladen haben, und tippen Sie dann auf das Pfeilsymbol und wählen Sie "Zur Startseite hinzufügen", um das Lesezeichen zu benennen, und kehren Sie dann zur Startseite zurück, um zu bestätigen, dass es dort ist.
Obwohl das Retina-Symbol 512 x 512 Pixel groß ist, wird es auf älteren iPhones und Nicht-Retina-Geräten gut skaliert. Wenn Sie das wirklich wollen, können Sie CSS und HTML verwenden, um Symbole unterschiedlicher Größe für verschiedene Geräte anzuzeigen, aber das ist wirklich nicht notwendig.
Wenn nun jemand Ihre Website auf einem iPad mit einem Retina-Display bucht, sieht das auf dem Startbildschirm viel besser aus. Das ist wirklich alles, was dazu gehört. Und ja, wir haben schon einmal über das Apple Touch-Symbol geschrieben, aber es verdient eine weitere Erwähnung, dass das iPad 3 deutlich höhere Auflösungssymbole und -grafiken erfordert.
