Definire un’icona ed uno Splash Screen per iOS

Vediamo ora come configurare un’icona per il nostro m-site o per la nostra web app. Questa operazione è molto importante in quanto consente agli utenti di visualizzare la nostra icona nella home screen del proprio devices (iPhone o iPad) esattamente come accade per le app native installate sul dispositivo.

Inoltre questa icona può essere utilizzata nei preferiti di Safari Mobile con evidenti vantaggi dal punto di vista dell’immediata riconoscibilità del nostro sito da parte degli utenti che hanno deciso di aggungerlo ai propri bookmark.

Vediamo quindi come configurare un icona per i dispositivi iOS da utilizzare per la home screen o per i preferiti di safari.

Configurare un icona per iOS

Le API di iOS ci sonsentono di utilizzare il tag <link> per configurare un’icona per il nostro m-site. Per farlo dovremo valorizzare il contenuto dell’attributo rel come apple-touch-icon oppure apple-touch-icon-precomposed.

apple-touch-icon

Attraverso questo markup è possibile definire l’icona del nostro sito. L’icona deve essere un file grafico PNG delle dimensioni di 60×60 pixel.

Se vogliamo prevdere un’icona valida per l’intero sito, in realtà, non è necessario utilizzare nessun markup, ma è sufficiente posizionare nella root del nostro sito un file PNG chiamato:

apple-touch-icon.png

Se, viceversa, si vuole prevedere delle icone personalizzate per singole sezioni del sito o singole pagine sarà necessario aggiungere nell’intestazione della pagina un link come questo:

<link rel="apple-touch-icon" href="/icona_per_ios.png">

Si faccia attenzione: in assenza di questo markup Safari cercherà il file apple-touch-icon.png nella root del sito, viceversa questo file verrà ignorato e verrà utilizzato quello indicato nel tag <link>.

Volendo essere più "raffinati" è anche possibile prevedere diverse icone (con diverse risoluzioni) personalizzate per specifiche versioni dei dispositivi Apple:

<!-- iPhone (iOS 6 o inf.) -->
<link rel="apple-touch-icon" size="57x57" href="/icona_57x57.png" />
<!-- iPad (iOS 6 o inf.) -->
<link rel="apple-touch-icon" size="72x72" href="/icona_72x72.png" />
<!-- iPad (iOS 7) -->
<link rel="apple-touch-icon" size="76x76" href="/icona_76x76.png" />
<!-- iPhone + retina display (iOS 6 o inf.) -->
<link rel="apple-touch-icon" size="114x114" href="/icona_114x114.png" />
<!-- iPhone + retina display (iOS 7) -->
<link rel="apple-touch-icon" size="120x120" href="/icona_120x120.png" />
<!-- iPad + retina display (iOS 6 o inf.) -->
<link rel="apple-touch-icon" size="144x144" href="/icona_144x144.png" />
<!-- iPad + retina display (iOS 7) -->
<link rel="apple-touch-icon" size="152x152" href="/icona_152x152.png" />

Come potete vedere la risoluzione ottimale per l’icona cambia a seconda della versione dell’OS e della presenza o meno del retina display.

apple-touch-icon-precomposed

Attraverso apple-touch-icon-precomposed è possibile definire, esattamente come accade per apple-touch-icon, l’icona da utilizzare per la Home Screen o per i preferiti di Safari con la sola differenza che, in questo caso, il file grafico PNG viene utilizzato "così com’è".

Per essere più chiari: il file PNG specificato come apple-touch-icon viene elaborato da iOS (versioni precedenti alla 7) che vi applicherà degli effetti grafici (come ad esempio una specie di effetto traslucenza), viceversa il file specificato come apple-touch-icon-precomposed viene utilizzato senza alcuna modifica grafica.

Si noti che a partire da iOS7 l’utilizzo di apple-touch-icon-precomposed è inutile in quanto la nuova release di iOS, nell’ottica di un design più minimale, non applica mai effetti grafici alle icone! Vediamo un esempio comunque utile per i devices che non hanno ancora aggiornato alla versione più recente di iOS:

<link rel="apple-touch-icon-precomposed" href="/icona_per_ios.png">

Configurare uno Splash Screen

Su iOS, similmente a quanto accade con le applicazioni native, è possibile specificare una immagine di avvio che viene visualizzata al lancio di applicazioni web.

<link rel="apple-touch-startup-image" href="/immagine_di_avvio.png">

Quest’immagine deve essere di formato PNG ed avere un formato di 320 x 480 pixel. Anche in questo caso, tuttavia, è possibile definire diverse immagini di startup con risoluzioni differenti a seconda delle caratteristiche del device in uso:

<!-- iPhone 4 o inf. -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" />
<!-- iPhone 4 o inf. + retina display -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" />
<!-- iPad, Landscape -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-768x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" />
<!-- iPad, Portrait -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-768x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" />
<!-- iPad, Landscape + retina display -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
<!-- iPad, Portrait + retina display -->
<link rel="apple-touch-startup-image" href="/static/images/apple-touch-startup-image-1536x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />

Aggiunti questi tag il nostro m-site è pronto per un utilizzo ottimale su iOS. Nella lezione successiva vedremo come impostare l’ossatura del nostro template e come stilizzare gli elementi principali del nostro sito ottimizzato per smartphone.