Creare un sito per iphone: consigli e trucchi.
L’ industria del mobile cresce in modo sproporzionato e di conseguenza nasce la necessità di implementare i nostri progetti web anche su piattaforme diverse da un computer. L’ Iphone in questo momento ha venduto più di 50 milioni di unità. Oggi cercheremo di darvi qualche consiglio utile per creare una pagina web ottimizzata proprio per i nuovi cellulari firmati Apple.
Prima di tutto bisogna sapere che il sistema operativo presente su iphone è il “Safari Mobile”, che si basa su WEBKIT: supporta HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (non con tutte le nuove funzionalità), JavaScript 1.4, supporto del Dom e Ajax. Abbiamo il supporto verso tutti i file multimediali e non, presenti sul web ( jpg, png, pdf, mp3, tiff ed anche word ed excell) ad eccezione di adobe flash e java.
Ora passiamo alle dimensioni: in senso verticale in un iphone abbiamo la barra di stato e di indirizzo che occupano ben 88px, mentre i pulsanti inferiori 44px. In definitiva l’area verticale di un iphone senza scroll è di 320x356px.
Per implementare un sito per iphone possiamo procedere in due modi differenti:
1) Creare su un sottodominio un sito specificamente per iphone ( ex: iphone.sito.it ) e inserire nella prima pagina del sito standard qualche riga di javascript per avvertire il browser di cambiare indirizzo se si accede al sito da un dispositivo mobile.
2) Avere semplicemente un css diverso per iphone ed implementarlo attraverso l’uso delle “media query”:
<link media=”only screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”iphone.css” />
praticamente se la larghezza del browser è massimo di 480px deve essere utilizzato questo css (iphone.css).
Ora vi darò qualche consiglio utile per ottimizzare il vostro sito per iphone:
1) Inserire numeri di telefono attivi per iphone ( sarà possibile chiamare semplicemente cliccandoci sopra ):
<a href=”tel:02-123456?>02123456</a>
2) Nascondere la barra degli indirizzi guadagnando qualche pixel in verticale:
<body onload=”setTimeout(function() { window.scrollTo(0, 1) }, 100);”>
3) Come identificare il browser iphone ed indirizzare verso un nuovo indirizzo:
< script type=”text/javascript”>
if (navigator.userAgent.indexOf(‘iPhone’) != -1) {
location.href = ‘http://iphone.sito.it/’;}
</script>
4) 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? />
5) Impostare lo zoom su iphone per il nostro sito:
<meta name=”viewport” content=”initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8? />
6) Inserire un video su iphone:
embed src=”immagine.jpg” href=”movie.m4v” type=”video/x-m4v” target=”myself” scale=”1? [...]>
Questi sono solo alcuni piccoli accorgimenti da tenere presente nel creare un layout per iphone.
Tra qualche giorno invece vi parlerò di servizi web, grazie ai quali con semplici passi potrete creare partendo dal vostro sito web attuale, un layout perfetto per dispositivi mobile: se siete curiosi vi invito a visitare questo sito web:
http://mobify.com/ poi vi spiegherò come utilizzare al meglio questo servizio.
A presto
Lascia una risposta