Sviluppatori Web e proprietari di siti Web prestano attenzione: è necessario impostare un'icona segnalibro iOS predisposta per retina. Le icone dei segnalibri sono chiamate icona Apple Touch e queste immagini personalizzate diventano l'icona che viene visualizzata sulla schermata iniziale di un utente quando aggiunge un segnalibro a un sito Web su un iPad, iPhone o iPod touch in iOS o il pannello dei segnalibri di Safari per OS X.Senza un set di file di icone Apple-touch personalizzato, gli utenti otterranno una miniatura noiosa e spesso brutta della pagina Web stessa e, senza utilizzare un'icona pronta per la retina, l'icona dei segnalibri apparirà pixelata e generalmente orribile sul nuovo schermo dell'iPad.

Ecco cosa devi fare per creare un'icona Apple Touch perfetta per la retina per qualsiasi sito web in pochi semplici passaggi.

1) Crea l'icona del sito web iOS Retina-Ready

Usa un modello o creane uno tuo. Ho usato il semplice kit di icone retina fai-da-te menzionato in un post precedente, è un file PSD che rende la progettazione di icone iOS dall'aspetto gradevole facile come un clic o due. Incolla un sito Web o un logo aziendale e sei praticamente a posto. Se non hai qualcosa per modificare i file PSD, Photoshop CS6 beta è eccellente e può essere scaricato e utilizzato gratuitamente fino all'uscita della versione finale nel corso dell'anno.

2) Salva come PNG e assegna un nome all'icona del segnalibro del sito Web Retina

L'icona deve essere un PNG e deve avere un nome tra due cose. Ogni nome di file offre un aspetto leggermente diverso dell'icona come visualizzato sulla schermata iniziale di un utente:

• “apple-touch-icon.png” aggiungerà la bolla di evidenziazione sovrapposta all'icona
• “apple-touch-icon-precomposed.png” visualizzerà l'icona come creata originariamente, senza la sovrapposizione evidenziata

Usa quest'ultima opzione -precomposta se hai creato la tua evidenziazione o se vuoi che l'icona appaia più piatta senza l'onnipresente bolla che appare sulla maggior parte delle icone predefinite di Apple.

3) Carica l'icona Touch del segnalibro del sito Web nella directory Web di base

Utilizza 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 si tratta della stessa posizione in cui si trova il file di indice principale del sito. Una volta caricato, conferma che si trova nella posizione corretta aprendo un browser Web e andando su "http://SITEURL.com/apple-touch-icon.png" e assicurandoti che venga caricato.

Ecco un esempio di un'icona segnalibro retina-ready 512×512 da OSXDaily.com:

Notare che senza il flag -precomposto, l'icona sopra visualizzerà il fumetto evidenziato. Puoi vedere la differenza tra i due confrontando l'icona effettiva con quella mostrata negli screenshot come segnalibro.

4) Usa un dispositivo iOS e aggiungi il sito ai segnalibri

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 in cui hai caricato l'icona, quindi tocca l'icona della freccia e seleziona "Aggiungi a Homescreen", assegna un nome al segnalibro, quindi torna alla schermata Home per confermare che è presente.

Nonostante sia 512 x 512 pixel, l'icona retina si ridimensionerà bene sugli iPhone meno recenti e sui dispositivi non retina. Se vuoi davvero, puoi utilizzare CSS e HTML per visualizzare icone di dimensioni diverse su dispositivi diversi, ma non è davvero necessario.

Ora se qualcuno aggiunge un segnalibro al tuo sito web su un iPad con display Retina, apparirà molto meglio sulla schermata iniziale. Questo è davvero tutto quello che c'è da fare. E sì, abbiamo già scritto dell'icona Apple touch, ma merita un' altra menzione ora che l'iPad 3 richiede icone e grafica con una risoluzione significativamente più alta.