Webentwickler und Websitebesitzer aufgepasst: Sie müssen ein retinafähiges iOS-Lesezeichensymbol festlegen. Die Lesezeichensymbole werden als Apple Touch-Symbol bezeichnet, und diese benutzerdefinierten Bilder werden zu dem Symbol, das auf dem Startbildschirm eines Benutzers angezeigt wird, wenn er eine Website auf einem iPad mit einem Lesezeichen markiert. iPhone oder iPod touch in iOS oder das Lesezeichenfenster von Safari für OS X.Ohne einen benutzerdefinierten Apple-Touch-Icon-Dateisatz erh alten Benutzer ein langweiliges und oft hässliches Miniaturbild der Webseite selbst, und ohne die Verwendung eines retinafähigen Symbols sieht das Lesezeichensymbol auf dem neuen iPad-Bildschirm verpixelt und allgemein schrecklich aus.

Hier ist, was Sie tun müssen, um in wenigen einfachen Schritten ein retina-perfektes Apple Touch-Symbol für jede Website zu erstellen.

1) Retina-fähiges iOS-Website-Symbol erstellen

Verwenden Sie eine Vorlage oder gest alten Sie Ihre eigene. Ich habe das einfache DIY-Retina-Icon-Kit verwendet, das in einem früheren Beitrag erwähnt wurde. Es ist eine PSD-Datei, mit der das Entwerfen gut aussehender iOS-Icons so einfach wie ein oder zwei Klicks ist. Fügen Sie eine Website oder ein Firmenlogo ein und schon kann es losgehen. Wenn Sie nichts zum Bearbeiten von PSD-Dateien haben, ist Photoshop CS6 Beta hervorragend und kann kostenlos heruntergeladen und verwendet werden, bis die endgültige Version später im Jahr herauskommt.

2) Als PNG speichern und das Lesezeichensymbol der Retina-Website benennen

Das Symbol muss ein PNG sein und es muss einen von zwei Namen haben. Jeder Dateiname bietet ein etwas anderes Erscheinungsbild des Symbols, wie es auf dem Startbildschirm eines Benutzers angezeigt wird:

• “apple-touch-icon.png“ fügt dem Symbol die Hervorhebungsblasen-Überlagerung hinzu
• “apple-touch-icon-precomposed.png“ zeigt das Symbol wie ursprünglich erstellt an, ohne die Hervorhebungsüberlagerung

Verwenden Sie die letztgenannte -vorgefertigte Option, wenn Sie Ihre eigene Hervorhebung erstellt haben oder wenn Sie möchten, dass das Symbol flacher erscheint, ohne allgegenwärtige Blase, die auf den meisten Standardsymbolen von Apple erscheint.

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 des Webs zu kopieren. Dies ist normalerweise derselbe Ort, an dem sich die Hauptindexdatei der Site befindet. Bestätigen Sie nach dem Hochladen, 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 retinafähiges Lesezeichensymbol von OSXDaily.com:

Beachten Sie, dass das obige Symbol ohne das Flag -precomposed die Hervorhebungsblase anzeigt. Sie können den Unterschied zwischen den beiden sehen, indem Sie das tatsächliche Symbol mit dem in Screenshots als Lesezeichen gezeigten vergleichen.

4) Ein iOS-Gerät verwenden und die Site mit einem Lesezeichen versehen

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 „Zum Startbildschirm hinzufügen“, benennen Sie das Lesezeichen und kehren Sie dann zum Startbildschirm zurück, um zu bestätigen, dass es dort ist.

Obwohl es 512 x 512 Pixel groß ist, lässt sich das Retina-Symbol auf älteren iPhones und Nicht-Retina-Geräten problemlos verkleinern. Wenn Sie wirklich möchten, können Sie CSS und HTML verwenden, um unterschiedlich große Symbole auf verschiedenen Geräten anzuzeigen, aber das ist wirklich nicht notwendig.

Wenn nun jemand Ihre Website auf einem iPad mit Retina-Display mit einem Lesezeichen versehen hat, sieht sie auf seinem Startbildschirm viel besser aus. Das ist wirklich alles, was dazu gehört. Und ja, wir haben schon früher über das Apple Touch-Symbol geschrieben, aber es verdient eine weitere Erwähnung, jetzt, wo das iPad 3 Symbole und Grafiken mit deutlich höherer Auflösung erfordert.