Recentemente un cliente mi ha commissionato la progettazione e realizzazione di un layout di un sito web per iPhone.

Oggi voglio condividere con voi alcuni consigli pratici e informazioni da sapere prima di realizzare un layout per iPhone.

Andiamo a vedere gli elementi fondamentali da conoscere e alcuni codici rapidi da implementare nelle nostre pagine web.

Il Browser

Il browser abilitato che troviamo in ogni iPhone si chiama Safari Mobile e si basa su WebKit, lo stesso motore di rendering di Safari per Mac e Windows e per altri browser.

Safari per iPhone supporta linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (in parte), JavaScript 1.4, supporto del Dom e Ajax.

Abbiamo la possibilità di visualizzare file Pdf e Microsoft Office (Word, Powerpoint, Excel), immagini Gif, Jpeg, Png e Tiff.

Possiamo far riprodurre filmati QuickTime e file MP3 direttamente dalle pagine Web.

Attualmente non vi è il supporto alla tecnologie Adobe Flash o Java.

Le dimensioni

Conoscere le dimensioni di visualizzazioni del browser è necessario per costruire una grafica ottimizzata e di facile utilizzo.

Il browser iPhone è composto da elementi come la barra di stato e di indirizzo che eliminano ben 80 pixel, mentre l’area inferiore pulsanti ben 44 pixel.

In questo modo dobbiamo sapere che le dimensioni del browser iPhone di prima visualizzazione (quindi senza scroll) sono di 320 px x 356px.

Come procedere?

Le strade sono due, creare un altro sito ad hoc ottimizzato iPhone (es: mobile.sito.it) oppure usare sempre lo stesso CSS.

Si avete capito bene usare lo stesso CSS!

Ovviamente si dovrebbe creare un sito web sapendo in partenza di ottimizzarlo con lo stesso CSS anche per iPhone per facilitare la scrittura di codice, ma non è detto che si possa fare anche dopo.

Abbiamo la possibilità di condizionare la lettura del CSS a seconda della risoluzione del browser.

Sapendo che la massima larghezza del browser iPhone e di 480 pixel in orizzontale possiamo inserire tra i tag <head> </head> il seguente codice nella nostra pagina web.
<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" />

La prima linea di codice abilita la lettura di stile.css se il browser è almeno 481 pixel mentre la seconda abilità la lettura di iphone.css se il browser in questione arriva a una larghezza massima di 480 pixel.

Come avrete capito nel primo caso saremo in un browser normale, mentre nel secondo in un browser iPhone.

Questa trucco ci permette di creare per la stessa pagina web delle classi differenti che verrnno attivate a seconda del browser.

Ispirazioni

CSSiPhone è una favolosa collezione di Interfacce grafiche web ottimizzate per iPhone realizzata da Michael Dick.

Codici utili

Ecco alcuni codici utili da usare per ottimizzare il vostro sito per iPhone.

Inserire icona sito mobile

Aggiungere un icona identificativa (web clip) in caso di aggiunta accesso rapido in home.

Inserire tra i tag <head> </head>
<link rel="apple-touch-icon" href="/icona.png" />

Inserire numero di telefono attivo

Ecco come inserire un numero di telefono attivo da iPhone

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

Nascondere la barra indirizzo

In questo modo nascondiamo la barra indirizzi del browser guadagnando 60 pixel

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

Identificare browser iPhone

Basta inserire il seguente codice nella nostra pagina web e il link alternativo per il browser iPhone
< script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
location.href = 'http://iphone.sito.it/';
}
</script>

Visualizzare un testo solo per chi naviga con iPhone

Ecco come visualizzare sulle nostre pagine web un testo solo per chi naviga con iPhone.

<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 >

Infine ci basterà posizionare il seguente div nella nostra pagina web, nel punto in cui vogliamo far visualizzare la frase.

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

Bordi arrotondati con CSS

WebKit, il motore del browser accetta alcuni tag proprietari che possono aiutarci a creare una grafica più elegante e curata.

Potete vedere tutti i tag su Safari CSS Reference.

.iphone img {
margin: 5px 5px 10px 5px;
border: 3px solid #666666;
float: left;
-webkit-border-radius: 5px;
}

Scalare la visualizzazione del browser

Quando un sito web viene caricato nel browser viene effettuato uno scaling da 980 pixel a 320 pixel verticale, 480 pixel orizzontale.

Se il nostro sito web è minore di 980 pixel avremo delle bande laterali bianche.

Per ovviare a questo problema basta impostare la misura iniziale su cui fare lo scaling in questo modo.

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

Impostare proprietà ZOOM browser iPhone

In questo modo possiamo limitare il massimo e minimo zoom durante la navigazione su browser iPhone

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

Inserire un video manualmente

Per inserire un video in una pagina destinata al iPhone procedere nel seguente modo

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

Spero che queste informazioni e consigli possano darvi un aiuto di partenza nel creare un sito web per iPhone.

Letture Consigliate per Ajax


Autore: Giuliano Ambrosio

Creative Strategist e Designer Freelance di Torino, fonda il blog JuliusDesign nel 2007, attualmente collabora con diverse agenzie su tutta Italia con le quali ha avuto modo di lavorare per diversi big brand.