Ci sono degli eventi (tariffe flat, dispositivi mobili touch screen, interfacce mobili dei social network) che fanno supporre una spinta verso la diffusione della navigazione mobile.
Può uno sviluppatore web non interessarsi a questa nuova opportunità? Certamente no! Vediamo, quali sono i passi che si devono rispettare per costruire un’adeguata versione mobile di un sito.
Costruzione di un markup idoneo
Sono lontani i tempi in cui si usava il vecchio WML e il più avanzato cHTML. Questi linguaggi di markup erano evidentemente troppo limitati e sembravano essere, più che altro, degli esperimenti che preannunciavano l’avvento di un linguaggio più completo e flessibile. Oggi i dispositivi mobili di qualità sono capaci di visualizzare correttamente siti web scritti nello standard xhtml. E’ intuitivo, però, capire che non ci si può limitare a costruire il sito solo e direttamente nel classico xhtml transitional o strict per 2 ragioni :
- C’è una netta differenza tra le dimensioni dello schermo di un pc e le dimensioni di quello di un dispositivo mobile
- Il markup xhtml non è detto che sia ancora integralmente riconosciuto da tutti i browser dei dispositivi mobili in circolazione
Dunque, è necessario costruire una versione ad hoc dei nostri siti attraverso un sottoinsieme standard dell’xhtml noto come XHTML Mobile Profile, la cui versione attuale è la 1.2. Un esempio di documento XHTML MP valido è questo:
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.2//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Titolo</title>
<meta http-equiv=”Content-Type” content=”application/vnd.wap.xhtml+xml”/>
<meta http-equiv=”Cache-Control” content=”no-cache” />
<meta name=”description” content=”Descrizione per i motori di ricerca” />
<meta name=”keywords” content=”parole chiave” />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
</body>
</html>
La Doctype e il Content-type specifici vanno assolutamente rispettati nella loro composizione. All’interno del body possiamo andare a scrivere tutti i tag che ci servono per comporre la pagina. Possiamo usare quasi tutti i tag dell’xhtml standard con qualche variante. Ad esempio, in xhtml mobile profile il tag delle immagini richiede obbligatoriamente l’uso degli attributi width e height (una differenza non irrilevante, proprio perchè sui dispositivi mobili le dimensioni sono importanti! ). In ogni caso queste piccole varianti possono essere scoperte facilmente, armandosi di buona volontà e provando a validare il markup dei nostri siti con l’apposito validatore w3c : http://validator.w3.org/mobile/ il quale ci segnala gli errori e ci spiega passo passo come risolverli.
Creare un redirect alla nostra versione mobile
Servire il sito web direttamente nella versione adatta al browser che in quel momento lo sta visualizzando, è sempre un tocco di professionalità. Digitando cioè lo stesso url, il browser da dispositivo mobile dovrebbe essere smistato alla versione mobile del sito, altrimenti dovrebbe visualizzare la versione standard del sito (ovvero quella per “browser da PC”). Questa funzionalità può essere implementata in PHP cercando alcune parole chiave (che identificano i browser o i dispositivi mobili più famosi) all’interno della variabile d’ambiente $_SERVER[‘HTTP_USER_AGENT’] . Quando una di queste parole chiave viene individuata, si imposta il redirect alla versione mobile con header(“Location : http://www.url-nostro-sito/versionemobile”);
Ecco un esempio di come si potrebbe smistare il traffico al sito mobile :
<?
function browser_mobile()
{
$mobile = 0;
$lista_mobile = array(‘mobile’,’phone’,’wml’,’Teleca’,’Elaine’,’iPhone’,
‘iPod’,’Palm’,’EudoraWeb’,’Blazer’,’AvantGo’,’Windows CE’,
‘Cellphone’,’Small’,’MMEF20′,’Danger’,’hiptop’,’Proxinet’,’ProxiNet’,
‘Newt’,’PalmOS’,’NetFront’,’SHARP-TQ-GX’,’SonyEricsson’,
‘SymbianOS’,’UP.Browser’,’UP.Link’,’TS2′,’MOT-V’,’portalmmm’,
‘DoCoMo’,’Opera Mini’,’Palm’,’Handspring’,’Nokia’,’Kyocera’,
‘Samsung’,’Motorola’,’Mot’,’Smartphone’,’Blackberry’,’WAP’,
‘SonyEricsson’,’PlayStation Portable’,’LG’,’MMP’,’OPWV’,
‘Symbian’,’EPOC’,’xhtml mp’,’j2me’,’midp’,’cldc’);
foreach($lista_mobile as $chiave)
if(strpos(“PAD” . strtoupper($_SERVER[‘HTTP_USER_AGENT’]), strtoupper($chiave) ))
{ $mobile = 1; break; }
return $mobile;
}
if(browser_mobile())
header(“Location: http://www.url-nostro-sito/versionemobile“);
?>
Segnalazione ai motori di ricerca
Anche le versioni mobile dei siti possono essere segnalati ai motori di ricerca. E’ necessario costruire una sitemap opportuna, come questa:
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:mobile=”http://www.google.com/schemas/sitemap-mobile/1.0″>
<url>
<loc>http://www.url-nostro-sito/pagina_mobile.xhtml</loc>
<mobile:mobile/>
</url>
</urlset>
e segnalarla in tutti i modi: con il file robots.txt, con gli url/ping forniti dai motori di ricerca, e nel caso di Google, usando l’apposita area degli strumenti per webmaster.