Con l’avvento del primo telefonino Apple la navigazione su dispositivi mobili non è più la stessa. Personalmente uso giornalmente il melafonino per controllare le email e per la navigazione veloce.

img_0011

Safari mobile, con tutti i limiti dovuti alle dimensioni dello schermo, include la quasi totalità delle funzioni offerte dalla versione desktop. Le pagine Internet vengono renderizzate con lo stesso motore (webkit) di Safari.

Con questa serie di articoli cercherò di spiegarti con semplici tutorial come rendere il tuo sito “iPhone Ready”.

Una comoda funzione che permette iPhone è quella di poter salvare una pagina web direttamente sulla home (springboard) in modo da renderla fruibile più velocemente.

Visitando un qualsiasi sito e cliccando sul pulsante ‘+‘  si accede ad un menù contestuale il quale, tra le altre funzioni, permette di aggiungere il sito visitato alla springboard.

img_0012

Cliccando sul tasto Aggiungi a Home viene creata automaticamente un’ icona partendo da uno screenshot del sito in questione. Confermando cliccando su Aggiungi viene creato il preferito.

img_0013

Questi link veloci vengono chiamati webclip. Lo scopo di questa guida è creare una webclip personalizzata con il logo del sito.

I Passi da seguire sono semplicissimi:

  • Con un qualsiasi programma di grafica devi realizzare un immagine di 57px per 57px in formato png con all’interno il logo scelto e assegnagli il nome webclip.png Non serve ne arrotondare gli angoli ne applicare un effetto “lucido” . OSX Mobile pensa a tutto per te!
  • Carica il file tramite FTP nella cartella principale (root) del tuo sito
  • Aggiungi questo codice all’inizio della tua pagina web:
Nota: Il codice deve essere inserito tra i tag <head> e </head>
Nota 2: Se hai inserito l’immagine in un percorso diverso dalla root o hai usato un nome diverso per il file ricordati di aggiornare l’indirizzo del tag html

Se tutto è stato fatto correttamente cliccando Aggiungi a Home vedrete il logo caricato precedentemente:

img_0014

Questo invece il risultato sulla springboard:

img_0015