Come creare e impostare un'icona di segnalibro iOS retina-pronta per un sito web
Gli sviluppatori Web e i proprietari di siti Web prestano attenzione: è necessario impostare un'icona del segnalibro iOS retina-ready. Le icone dei segnalibri sono chiamate un'icona Apple Touch e queste immagini personalizzate diventano l'icona che viene visualizzata sulla schermata iniziale di un utente quando si aggiunge un segnalibro a un sito Web su iPad, iPhone o iPod touch in iOS o sul pannello dei segnalibri di Safari per OS X. Senza un set di file Apple-touch-icon personalizzato, gli utenti otterranno una noiosa e spesso brutta miniatura della stessa pagina web, e senza usare un'icona retina-ready, l'icona dei segnalibri sembrerà pixelata e generalmente terribile sul nuovo iPad schermo.
Ecco cosa devi fare per creare una Apple Touch Icon perfetta per la retina per qualsiasi sito web in pochi semplici passaggi.
1) Creare l'icona del sito Web iOS Retina-Ready
Usa un modello o crea il tuo. Ho usato il semplice kit di icone retina fai-da-te menzionato in un post precedente, è un file PSD che rende facile progettare icone iOS con un clic o due. Incolla in un sito Web o logo aziendale e sei praticamente a posto. Se non si dispone di qualcosa per modificare i file PSD, Photoshop CS6 beta è eccellente e gratuito da scaricare e utilizzare fino a quando la versione finale verrà rilasciata più avanti nell'anno.
2) Salva come PNG e nomina l'icona del segnalibro del sito web Retina
L'icona deve essere un PNG e deve essere denominata una delle due cose. Ogni nome di file offre un aspetto leggermente diverso dell'icona visualizzato sulla schermata iniziale di un utente:
- " Apple-touch-icon.png " aggiungerà la sovrapposizione della bolla di evidenziazione all'icona
- " Apple-touch-icon-precomposed.png " visualizzerà l'icona come originariamente creata, senza la sovrapposizione evidenziazione
Usa l'ultima opzione -ecomposta se hai creato il tuo highlight o se vuoi che l'icona appaia più piatta senza bolle ubiquitarie che appare sulla maggior parte delle icone predefinite di Apple.
3) Caricare l'icona "Bookmark" del sito Web nella directory Web di base
Utilizzare un client SFTP (OS X include FTP nel Finder e CyberDuck o Filezilla sono gratuiti) per copiare il file apple-touch-icon.png nella directory Web principale. Di solito è la stessa posizione in cui si trova il file di indice principale dei siti. Una volta caricato, conferma che si trova nella posizione corretta aprendo un browser Web e andando a "http://SITEURL.com/apple-touch-icon.png" e assicurandosi che venga caricato.
Ecco un esempio di un'icona del segnalibro 512 × 512 retina-ready da OSXDaily.com:
Si noti che senza il flag -precomposed, l'icona sopra mostrerà la bolla di evidenziazione. Puoi vedere la differenza tra i due confrontando l'icona attuale con quella mostrata negli screenshot come il segnalibro.
4) Utilizzare un dispositivo iOS e aggiungere il segnalibro al sito
Questa è la parte più semplice, prendi un dispositivo iOS (preferibilmente un iPad 3 per confermare l'aspetto della retina) e apri Safari. Aggiorna il sito web sul quale hai caricato l'icona, quindi tocca l'icona a forma di freccia e seleziona "Aggiungi a Homescreen" chiama il segnalibro, quindi torna alla schermata Home per confermare che è lì.
Nonostante sia 512 x 512 pixel, l'icona della retina si ridimensionerà bene su vecchi dispositivi iPhone e non-retina. Se lo desideri, puoi utilizzare CSS e HTML per visualizzare icone di dimensioni diverse su dispositivi diversi, ma in realtà non è necessario.
Ora se qualcuno memorizza il tuo sito web su un iPad con un display retina, apparirà molto meglio sulla schermata principale. Questo è davvero tutto quello che c'è da fare. E sì, abbiamo già parlato dell'icona di Apple Touch, ma merita un'altra menzione ora che l'iPad 3 richiede icone e grafica a risoluzione significativamente più alta.
