Realizzare un sito per il mobile:Parte 1

L’argomento principale di questa settimana riguarda la realizzazione di un sito internet per il mobile. Partiamo dal presupposto che realizzare un sito per dispositivi vecchi, diventa quanto mai inutile per non parlare del risultato e del lavoro che bisogna fare a parte.

Quindi con questo tutorial vedremo come realizzare un sito per il mobile per dispositivi di ultima generazione senza nessuna specifica ad iPhone o Blackberry, ma per tutti i dispositivi mobili.

Prima di tutto chiediamoci, perchè realizzare un sito per il mobile? A quali utenti mi rivolgo? Per quale motivo navigare con il cellulare e non da casa?

Teniamo ben in mente che gli utenti che si rivolgono al mobile hanno esigenze molto diverse dagli utenti Internet. Un esempio è il settore del turismo, senz’altro quello che maggiormente ha investito in questo tipo di servizio. In Italia anche in questo siamo in ritardo rispetto ai paesi stranieri, ma comunque si inizia a vedere un significativo interesse. Molti albergatori hanno deciso di realizzare il loro sito versione mobile e il motivo può essere il raggiungimento di una nuova fetta di mercato, soprattutto straniera e battere la concorrenza sul tempo.

Vedimo per punti le cose fondamentali da fare per questo tipo di progetto.

1) Nuovo sito o no?

Una decisione importante da fare prima di iniziare a lavorare è se realizzare un adattamento per il mobile del sito già esistente, oppure realizzarne uno nuovo. Se la scelta ricadrà sulla prima soluzione allora bisogna adattare i fogli di stile al mobile e inserire nel link il media per il quale dovrà essere utilizzato. Ne vediamo un esempio qui sotto:

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

Questa non è sicuramente la scelta migliore sia per la quantità di lavoro da fare sui CSS e sia perchè a seconda del layout con cui è stato realizzato il sito originale, potremo avere non poche difficolta nell’adattarlo alla visualizzazione sui cellulari.

2) Dominio, sottodominio o …?

Se invece la vostra scelta sarà quella di realizzare un nuovo sito, possiamo scegliere se registrare un nuovo dominio (al momento non è consigliabile utilizzare un dominio .mobi perchè risulta di difficile indicizzazione, ma consiglio di registrarlo comunque per utilizzarlo in futuro e così non rischiare di non trovarlo libero quando ne avrete bisogno), possiomo decidere di utilizzare un sotto dominio – www.mobile.miosito.it – oppure caricare tutto il sito mobile in una cartella specifica del nostro sito – www.miosito.it/mobile – e far puntare il sito nella cartella specifica se l’utente vi accede da mobile.

3) Script per il redirect

In quest’ultimo caso, lo script per il redirect che ho trovato in rete e che ho verificato funziona è il seguente:

<script type="text/javascript">
if (checkmobile(navigator.userAgent)) window.parent.location="http://mobile.tuosito.com/"
function checkmobile(nameApp) {
if (nameApp.indexOf('MSIE') != -1) return false;
if (nameApp.indexOf('iPhone') != -1) return true;
if (nameApp.indexOf('Trident') != -1) return true;
if (nameApp.indexOf('Creative AutoUpdate') != -1) return false;

browser_list = new Array("midp", "j2me", "avantg", "docomo",  "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda",  "windows ce", "mmp/", "blackberry", "mib/", "symbian", "wireless",  "nokia", "hand", "mobi", "phone", "cdm", "up.b", "audio", "SIE-",  "SEC-", "samsung", "HTC", "mot-", "mitsu", "sagem", "sony", "alcatel",  "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic",  "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg",  "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt",  "sendo", "sgh", "gradi", "jb", "dddi", "moto");
for(i=0;i<lenght(browser_list);i++){
if(nameApp.indexOf(browser_list[i]) != -1) return true;
}
return false;
}
</script>

Non vi spiego il funzionamento dello script ma vi rimando al sito in cui l’ho trovato.

4) Il Doctype corretto

Altra cosa fondamentale è l’utilizzo DocType corretto. I nuovi dispositivi mobili adottano il sistema  XHTML-BASIC/MP è molto simile all’ Xhtml e viene interpretato dai browser allo stosso modo,  con alcune caratteristiche in più per i dispositivi cellulari.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile  1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Per oggi è tutto. La prossima settimana vedremo la fase di design del sito ed entreremo nel vivo del tutorial.

E voi avete mai realizzato un sito per mobile? Avete dei consigli da dare?

1 Comment

• 
  Francesco 6 giugno 2010 alle 07:58

  Articolo molto interessante. Complimenti. Aspetto la seconda parte!

  Replica