Grazie alla vendita in abbinamento ad un abbonamento dati e alla disponibilità del miglior browser mai progettato per un cellulare, chi compra l'iPhone naviga molto, molto di più rispetto a chi utilizza un telefono tradizionale. Per darvi un'idea, Google lo scorso anno ha dichiarato al Financial Times che, in base ai log dei loro server, chi usa l'iPhone esegue ricerche 50 volte in più di chi utilizza un qualsiasi altro dispositivo mobile. È bene dunque che chi si occupa di siti Web cominci a pensare a come rendere i propri siti più compatibili con il dispositivo della Apple, per non perdere visite e per offrire subito ai visitatori una navigazione fluida e senza intoppi. La buona notizia è che, molto probabilmente, non servirà cambiare quasi nulla...

Il browser dell'iPhone è infatti quasi del tutto simile al browser Safari per Desktop, uno dei più rigorosi nell'interpretare le specifiche ufficiali di web publishing: se il vostro sito viene visualizzato bene in Safari lo sarà anche nel telefono, a patto, naturalmente, di aver seguito da vicino gli standard Web senza ricorrere a trucchi o a design "personali". Tuttavia, per rendere davvero bene sul dispositivo della Apple, un sito deve comunque fare i conti con diverse differenze d'uso. L'interfaccia, l'interazione, la grafica, il testo: tutto dovrebbe essere ottimizzato per funzionare bene anche sul dispositivo.

Il browser dell'iPhone
Il browser con cui è equipaggiato si chiama Safari Mobile e si basa su WebKit, lo stesso motore di rendering di Safari per Mac e Windows e per altri browser. Quasi la totalità delle tecnologie utilizzate da Safari per Desktop sono presenti in Safari per iPhone: supporto ai linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (parziale), JavaScript 1.4, supporto del Dom e funzionalità Ajax. Il browser dell'iPhone può visualizzare correttamente immagini Gif, Jpeg, Png e Tiff fino ad un massimo di 8 MB (128 MB per le Jpeg che però, dopo 2 MB, vengono ridotte di risoluzione) e riprodurre filmati in alcuni formati QuickTime e file MP3 direttamente dalle pagine Web. Safari converte in HTML e visualizza file Pdf e Microsoft Office (Word, Powerpoint, Excel), ma non supporta le tecnologie Flash o Java, ha un accesso limitato al file system e non può scaricare file. Non supporta il drag and drop degli elementi, la selezione, la copia e l'incollamento del testo. Come detto è compatibile con tecnologie comunemente chiamate Ajax e supporta anche gli eventi di JavaScript così da permettere di utilizzare facilmente soluzioni di HTML dinamico.

L'area di visualizzazione
Gli sviluppatori la chiamano viewport: è l'area di un dispositivo destinata a presentare i dati e ad offrire l'interazione con l'utente. Lo schermo dell'iPhone ha una risoluzione di 320x480 pixel ma, poiché alcuni pixel sono occupati dalla barra di stato e dalla barra dei pulsanti, solo una porzione di questo spazio può essere utilizzata per visualizzare la pagina. Come mostrato in figura (img_01) la viewport per i contenuti è di 320x356px; eliminando la barra dell'indirizzo, l'unica che si può nascondere utilizzando codice HTML, questa cresce a 320x416px. Inoltre va considerato che il telefono può essere anche ruotato in posizione orizzontale: in quel caso la risoluzione per i contenuti si riduce a 209x480px (269x480 senza barra degli indirizzi). I contenuti pubblicati nella viewport, a differenza di quanto accade nei browser tradizionali, non sono fissi: l'utente può eseguire uno zoom di un elemento di una particolare area per fruire meglio del contenuto pubblicato.

L'area dell'iPhone è occupata da alcune zone non destinate ai contenuti: solo la barra degli indirizzi può essere esclusa

La visualizzazione viewport
Quando l'iPhone carica una pagina Web esegue il cosiddetto scaling: ossia riduce la risoluzione della pagina per farla visualizzare a dovere nella viewport del cellulare. Il processo funziona così: l'iPhone imposta in un primo momento la larghezza della pagina ad una risoluzione, considerata la più comune, di 980 pixel per scalarla, in un secondo passaggio, alla risoluzione di 320 pixel (se il telefono è in posizione verticale) o 480 pixel (se è in orizzontale). Va da sé che i siti con risoluzione fissata a meno di 980 pixel (in larghezza) mostreranno uno spazio bianco ai lati (vedi figura in basso) che rende meno leggibile il testo pubblicato, oltre che meno elegante la pagina. Risolvere questo problema è molto semplice: basta aggiungere un tag meta che imposti il viewport dell'iPhone alla larghezza della pagina. Nel caso del blog di Grillo la pagina ha una larghezza di 700 pixel e il nostro viewport dovrà essere dunque di 700 pixel:

< meta name="viewport" content="width=700" />

Questa proprietà consente anche di bloccare il massimo (maximum-scale) e il minimo (minimum-scale) zoom possibile sulla pagina da parte dell'utente, oltre che impostare uno zoom iniziale predefinito (initial-scale).

< meta name="viewport" content="initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8" />

I numeri che impostano lo scaling vanno calcolati come coefficiente rispetto alla dimensione in pixel della pagina che, come detto, se non altrimenti impostata è di 980 pixel: 0.6 corrisponde così a 588 (come risulta dal calcolo 980 x 0.6).

Il blog di Beppe Grillo ha una risoluzione orizzontale di 700 pixel e mostra ai lati inutili spazi bianchi

Identificare l'iPhone
Come ogni browser, anche Safari Mobile ha un suo user agent, ossia la stringa che lo identifica ai web server. L'user agent della versione 1 dell'iPhone è questo:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/X Mobile/Y Safari/Z
Dove al posto di X, Y e Z vi sono le versioni dei vari componenti. Sebbene le buone regole di Web Design lo considerino una procedura deprecabile, "sniffando", come si dice in gergo, l'iPhone è possibile eseguire un rindirizzamento verso una pagina appositamente creata per iPhone o mostrare contenuto solo a chi si collega con quel dispositivo. Per indirizzare un utente iPhone ad una nuova pagina si può usare il seguente codice JavaScript:

< script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
location.href = 'http://iphone.sito.it/';
}
</script>
Utilizzando quest'altro codice si può visualizzare un testo solo per chi naviga con il cellulare Apple:
<script type="text/javascript">
window.onload = function () {
if (navigator.userAgent.indexOf('iPhone') != -1) {
var o = document.getElementById( 'iphone' );
o.innerHTML = "<h1>Benvenuto iPhone!</h1>";
}
}
</script >

Per decidere dove far visualizzare il messaggio basta aggiungere, nel punto desiderato, un elemento DIV vuoto con id iphone:

<div id="iphone"></div>

Aprendo il sito di Google si viene subito rindirizzati ad una pagina costruita appositamente per iPhone

Assegnare un file CSS
Piuttosto che creare un sito separato per l'iPhone, e dunque rindirizzare Safari Mobile verso quel sito come abbiamo fatto nel paragrafo precedente, spesso è sufficiente impostare i CSS in modo che prevedano per l'iPhone stili diversi da quelli utilizzati dai browser tradizionali. Un tempo si ricorreva al media type handheld per assegnare ad un browser utilizzato su un cellulare CSS diversi. Da un po' di tempo tuttavia molti dei browser più evoluti, tra cui quello dell'iPhone, non supportano più questo tag e lo hanno sostituito in favore di una tecnologia dei CSS3 chiamata Media queries. Una media query verifica che il browser supporti determinate caratteristiche di visualizzazione (come la risoluzione) e sceglie in base alla risposta il CSS adatto. Sull'iPhone che, come detto, può avere in larghezza una risoluzione di 320 pixel o, se ruotato in orizzontale, di 480 pixel, basterà dunque utilizzare la seguente sintassi per differenziare il suo foglio di stile da quello di altri dispositivi:

<link media="screen and (min-device-width: 481px)" rel="stylesheet" type="text/css" href="stile.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" href="iphone.css" />

Come si può notare l'istruzione caricherà per tutti i dispositivi che hanno una larghezza dello schermo minore o uguale a 480 pixel (max-device-width: 480px) il foglio di stile iphone.css mentre per tutti quelli che hanno una larghezza maggiore o uguale a 481 pixel (min-device-width: 481px) il foglio di stile stile.css. Grazie alla chiave only i vecchi browser salteranno completamente la seconda istruzione.

Css specifici
WebKit, il cuore di sviluppo del browser Safari Mobile, accetta alcuni tag proprietari (ma comunque proposti al W3C) che non sono disponibili per altri navigatori. Alcuni di questi sono molto utili per creare elementi dalla grafica più curata e più integrata con l'ambiente Apple. I moduli di ricerca, i box testuali o le immagini dell'iPhone, ad esempio, non hanno il classico contorno rettangolare ma arrotondato. Per gestire gli angoli si usa la proprietà -webkit-border-radius. Un semplice CSS come questo:

.iphone {
background-color: silver;
padding: 10px 10px 10px 10px;
width: 320px;
-webkit-border-radius:10px;
}
.iphone img {
margin: 5px 5px 10px 5px;
border: 3px solid #666666;
float: left;
-webkit-border-radius: 5px;
}

Richiamato nella pagina HTML da questo codice:

<div class="iphone"><img alt="XXX" src="foto.png" />testo</div>

Visualizza un elegante box con angoli arrotondati contenente un'immagine, anch'essa con gli spigoli smussati (figura sotto). Un'altra proprietà CSS utile nella gestione dei siti per iPhone è -webkit-text-size-adjust. Essa interviene per adattare la grandezza del testo della pagina in modo che sia leggibile quando un utente esegue uno zoom. Safari Mobile lo fa automaticamente ma, in alcuni casi, è possibile che il testo venga adattato male o che serve una grandezza maggiore. Per questo motivo si può o disabilitare l'adattamento automatico (-webkit-text-size-adjust:none) oppure impostarlo a percentuali di grandezza più elevate (-webkit-text-size-adjust:200%). La proprietà può essere naturalmente impostata per tutti o solo per alcuni elementi della pagina.

Il design su iPhone fa largo uso di elementi con gli angoli arrotondati, sia per i box sia per le immagini

Link specifici
L'iPhone gestisce almeno tre tipi di link in modo differente rispetto ad un tradizionale browser: i link a numeri di telefono, i link a mappe di Google Mappe e i link a video di Youtube. La prima volta che Safari Mobile carica una pagina in memoria questa viene scansionata alla ricerca di numeri di telefono. Se trovati, i numeri di telefono vengono resi cliccabili in modo che toccandoli si avvii automaticamente una chiamata. A volte alcuni numeri di telefono non sono interpretati correttamente e altre volte vengono resi cliccabili anche numeri di partita IVA o altri (vedi figura sotto). Per evitare che altri numeri vengano interpretati come numeri telefonici si usa questo meta-tag:
<meta name="format-detection" content="telephone=no">
che disabilita la ricerca di numeri per l'intera pagina. Per attivarli singolarmente si dovrà dunque usare quest'altro codice:

<a href="tel:02-831212">02831212</a>

I link a video di YouTube o a una mappa di Google Mappe aprono, rispettivamente, l'applicazione Youtube e l'applicazione Mappe dell'iPhone. Per Google Maps funzionano i link dai vari siti di Google (vedi figura sotto), per Youtube, almeno fino alla versione 1 dell'iPhone, per aprire un video si deve invece inserire un link che punti al sito globale del servizio. Ad esempio: questo link non funziona sull'iPhone:

<a href="http://it.youtube.com/watch?v=g7_2qI-VQYM">Gol di Grosso</a>
Questi due invece sì:

<a href="http://www.youtube.com/watch?v=g7_2qI-VQYM">Gol di Grosso</a> <a href="http://www.youtube.com/v/g7_2qI-VQYM">Gol di Grosso</a>


I numeri di telefoni vengono convertiti automaticamente in link anche se non sempre con precisione

Cliccando su un link di Google Mappe di aprirà automaticamente l'applicazione Mappe dell'iPhone

Capire le gesture
A causa delle dimensioni ridotte dello schermo, una delle attività più comuni eseguite su una pagina Web per chi utilizza un iPhone è lo zoom eseguito toccando velocemente due volte sull'elemento che si vuole ingrandire (doppio-tap). Il webmaster deve utilizzare un design che renda questa azione la più efficace possibile. Quando un utente esegue un doppio-tap su un elemento l'iPhone può eseguire due azioni: se è un'immagine la ingrandisce automaticamente e la centra nello schermo; se è una porzione di testo verifica in quale blocco è inclusa, espande il blocco a tutto schermo e lo centra. Da questo principio seguono due regole: la prima è che è necessario strutturare la pagina in diversi blocchi di contenuto in modo da consentire un più facile ingrandimento della porzione che interessa al'utente. La seconda regola, molto più importante, è evitare un layout con delle colonne troppo ampie in larghezza oppure, molto peggio, un layout senza colonne. In questi casi eseguendo uno doppio-tap sul contenuto l'iPhone non riuscirà ad impostare la grandezza del blocco, non eseguirà lo zoom e lascerà il contenuto del tutto illeggibile (figura sotto).

Un layout ad una colonna rende impossibile eseguire uno zoom sui contenuti della pagina e va evitato

Altri codici utili
L'iPhone permette di aggiungere un sito alla pagina principale del telefono (Springboard o Home) per facilitare un accesso rapido. È possibile personalizzare l'icona (o web clip) che il telefono userà per identificare il sito semplicemente aggiungendo alla cartella principale del sito un'icona in formato Png chiamata apple-touch-icon.png. Se si vuole limitare l'icona ad una pagina si usa questo codice:

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

Un metodo molto semplice per nascondere la barra degli indirizzi quando una pagina viene caricata, e guadagnare così 60 pixel, è sostituire il tag con quest'altro:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

Dalla versione due dell'iPhone, ma non è confermato, si potrà utilizzare un sistema più semplice:

<meta name="apple-touch-fullscreen" content="YES" />

Per includere un video all'interno di una pagina Web destinata all'iPhone si usi questo codice:

<embed src="immagine.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" [...]>

In questo modo l'iPhone visualizzerà, al posto di un poco significativo triangolo grigio, l'immagine Jpeg specificata dall'attributo src. I filmati che l'iPhone accetta sono quelli codificati in H.264 o MPEG-4 Part 2 video, gli stessi riproducibili sull'iPod.

La Springboard dell'iPhone può contenere le icone dei siti preferiti o web clips