Terminata la realizzazione del nostro sito web per mobile, è bene non dimenticarsi di preparare un’icona in modo da dare un tocco di classe al nostro lavoro. Vediamo quindi come impostare un tag affinchè la nostra icona venga riconosciuta su iOS e Android.
Nessuno vorrebbe che l’icona del proprio sito venisse visualizzata come nell’immagine qui sopra, confondendosi tra tutti gli altri salvataggi. Non curare l’immagine lascia al titolo l’unica possibilità di catturare l’attenzione. Se invece sfruttiamo anche questa piccola possibilità possiamo sperare di fidelizzare maggiormente l’utente con il nostro brand.
Settare un’immagine non per nulla difficile. Creiamo un PNG di 158×158 pixel, ed aggiungiamo dentro <head> il seguente codice HTML:
<link rel="icon" type="images/icon" href="favicon.png" /> <link rel="apple-touch-icon" href="images/icon.png"/>
Il consiglio è di non utilizzare trasparenze e ricordarsi che i bordi verranno stondati. Evitiamo quindi scritte troppo vicine ai margini.
Creare un immagine per il Display Retina
Quando realizziamo un sito per mobile potremmo decidere di sfruttare il display retina dell’iPhone per dare ai suoi utenti una visualizzazione migliore delle nostre immagini. Il meccanismo è semplice ed applicabile solamente alle immagini CSS di background.
Ricordo che per migliorare immagini inserite tramite tag img invece è sufficiente caricare immagini di dimensioni maggiori dello schermo e settare una larghezza del 100% ed un altezza automatica.
Ma vediamo un esempio che fa al caso nostro tenendo presente che 1px sull’iPhone corrisponde a 2 pixel retina:
<div id="editIcon"></div>
Nel css invece andremo ad impostare:
#editIcon{
height: 16px;
width: 16px;
background: url(img/edit.png) no-repeat; // L'immagine avrà una dimensione originale di 32x32pixel
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
}L’immagine con risoluzione 32×32 pixel viene usata per raddoppiare la qualità della risoluzione quando si forza l’immagine a 16x16px. Ovviamente questo comporta la creazione di immagini più pesanti, di conseguenza sarà opportuno realizzare un CSS apposito per il nostro dispositivo retina in modo da aggirare il problema:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="retina.css" />
