Spunti su come ottimizzare un sito web per dispositivi mobili
L’enorme sviluppo nell’ambito dei dispositivi mobili ci impone di prestare la massima attenzione a questa sempre più importante fetta di mercato di potenziali utenti, che accederanno al sito che stiamo sviluppando con risoluzioni di molto inferiori agli standard (320 x 480 non ti dice niente?).
In questo articolo ti fornirò alcuni spunti su come sia possibile ottimizzare il sito, o una parte di esso, per una migliore usabilità su questi dispositivi mobili. Negli esempi che seguono prenderò come riferimento l’iPhone.
Ottimizzare siti per dispositivi mobili: Individuare il dispositivo
Il primo passo da compiere é stabilire se la richiesta alla nostra pagina proviene da un dispositivo mobile e, in caso affermativo, da quale tipo di dispositivo. Questa informazione (insieme ad altre che non ci interessano in questo caso) é contenuta nell’array superglobale $_SERVER e più precisamente nell’indice HTTP_USER_AGENT.
Andiamo dunque a verificare con strpos() la presenza della stringa iPhone in questa variabile.
In pratica strpos() trova la posizione dell’occorrenza (in questo caso iPhone) all’interno della stringa che passiamo come primo parametro. Se non trova nulla ritorna FALSE; dunque andrà benissimo per il nostro scopo
if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
//Operazioni da svolgere in caso si tratti di un iPhone
}
Caricare un foglio di stile specifico
Un passo certamente fondamentale per ottimizzare il nostro sito é quello di poter caricare un foglio di stile specifico per il dispositivo. In questo modo possiamo formattare alcuni elementi in modo diverso rispetto al foglio di stile utilizzato per la visualizzazione del sito web.
Ad esempio sarebbe buona norma lasciare una maggiore distanza tra gli elementi cliccabili. Questo perché utilizzando il dito non si arriva ad avere la stessa precisione del mouse. Non mi voglio dilungare troppo in questi particolari anche perché non é il mio campo; chissà se la nostra esperta di usabilità un giorno ci farà un bell’articolo sulle linee guida da applicare nell’ottimizzazione del css per i dispositivi.
Intanto iniziamo a vedere una possibile soluzione per caricare un foglio di stile specifico per l’iPhone.
Ad esempio possiamo inserire un codice del genere nell’header del nostro documento.
<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
?><link rel="stylesheet" href="iphone.css" type="text/css" /><?php
}
else
{
?><link rel="stylesheet" href="style.css" type="text/css" /><?php
}
?>
In questo modo verrà caricato il file iphone.css se il dispositivo rilevato é un iPhone, altrimenti viene caricato il foglio di stile standard (style.css).
Quando l’html5 sarà completamente implementato, potremo gestire i fogli di stile in questo modo:
<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" > <link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" > <link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >
Non male.
Non solo CSS
Una volta che siamo in grado di stabilire che tipo di dispositivo sta accedendo al nostro sito, possiamo anche decidere di sviluppare alcune parti in modo specifico utilizzando delle caratteristiche aggiuntive.
Poniamo ad esempio che il nostro sito abbia un form di contatto. Quando l’utente cliccherà su contatto, se sta accedendo da un iPhone verrà indirizzato al form appositamente sviluppato per questo dispositivo; vediamo come realizzarlo.
Lo svilupperemo in html5 e non per sfizio; scopriamo perché:
- Se abbiamo stabilito che la richiesta arriva da un iPhone, siamo certi che il browser é Safari. Dunque molte caratteristiche di html5 sono supportate, in particolare quelle che andremo ad utilizzare.
- Con le caratteristiche che utilizzeremo miglioriamo l’usabilità del nostro form; vedremo in seguito come.
- Invece di fare esperimenti teorici con html5, queste sono occasioni per iniziare ad utilizzarlo a livello di produzione.
Iniziamo dunque a preparare la nostra pagina form.php, dichiarando il doctype di html5
<!DOCTYPE html> <html> <head>
Ora inseriamo un metatag particolare che indicherà ad iPhone che deve visualizzare la pagina non ingrandita o rimpicciolita ma esattamente come dichiarata; questo in quanto daremo delle dimensioni ottimali al nostro form tramite css.
<meta name ="viewport" content ="initial-scale = 1.0, user-scalable = no">
In questo caso ho anche escluso la possibilità da parte dell’utente di utilizzare lo zoom (non era necessario, l’ho fatto solo per fini didattici).
Ora definiamo lo stile del nostro form:
#container{
width: 250px;
margin: 0 auto;
}
input{
width: 250px;
height: 25px;
font-size:18px;
-webkit-border-radius: 5px;
}
input#submit{
width: 80px;
height: 30px;
}
Semplicemente centriamo il contenitore. In seguito aumentiamo l’altezza dei campi ed il carattere. Utilizzo senza problemi la proprietà -webkit-border-radius (siamo di sicuro su Safari).
Ed ora ecco il body del documento:
<body>
<div id="container">
<form action="#" method="post">
<label for="name">Nome e Cognome</label><br />
<input type="text" id="name" name="name">
<br /><br />
<label for="web">Sito</label><br />
<input type="url" id="web" name="web">
<br /><br />
<label for="email">Email</label><br />
<input type="email" id="email" name="email">
<br /><br />
<label for="phone">Numero di telefono</label><br />
<input type="tel" id="phone" name="phone">
<br /><br />
<input type="submit" value="invia" id="submit">
</form>
</div>
</body>
Come puoi vedere ho utilizzato il type url, email e tel che sono stati introdotti in html5 e perfettamente supportati da iPhone. Vediamo con quali vantaggi sull’usabilità (Se disponi di un iPhone puoi provare direttamente sulla pagina di esempio).
Il nostro form, viene così visualizzato
Ora, se seleziono il campo Nome e Cognome, mi viene mostrata la tastiera standard.
Ma se mi porto sul campo Sito, ecco che mi viene mostrata la tastiera specifica per l’inserimento di url (in basso ho a disposizione il punto, la barra e il .com)
Questo in quanto iPhone é in grado di rilevare il type url ed agire di conseguenza.
Similmente entrando nel campo email, verrà mostrata la tastiera specifica per l’inserimento di email (in basso ho a disposizione la chiocciolina ed il punto).
Ed infine entrando nel campo numero di telefono, viene mostrato il tastierino numerico.
Come ho detto prima, non é uno sfizio o una forzatura utilizzare html5 in casi come questo.
Ed ecco il codice completo
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
<title>form ottimizzato per iPhone</title>
<style>
#container{
width: 250px;
margin: 0 auto;
}
input{
width: 250px;
height: 25px;
font-size:18px;
-webkit-border-radius: 5px;
}
input#submit{
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<div id="container">
<form action="#" method="post">
<label for="name">Nome e Cognome</label><br />
<input type="text" id="name" name="name">
<br /><br />
<label for="web">Sito</label><br />
<input type="url" id="web" name="web">
<br /><br />
<label for="email">Email</label><br />
<input type="email" id="email" name="email">
<br /><br />
<label for="phone">Numero di telefono</label><br />
<input type="tel" id="phone" name="phone">
<br /><br />
<input type="submit" value="invia" id="submit">
</form>
</div>
</body>
</html>
Conclusione
In questo articolo abbiamo visto alcuni semplici spunti che ci permettono di ottimizzare la visualizzazione del nostro sito sui dispositivi mobili. Abbiamo anche visto come l’utilizzo di alcune proprietà di html5 possano migliorare l’usabilità. In questo senso possiamo immaginare che i dispositivi mobili saranno i motori ed i precursori del passaggio a quest’ultima versione dell’html. Inoltre va detto che Safari nella versione per iPhone é ancora più evoluto di quello della versione per computer ed é l’unico (ed il primo) a supportare tutte le proprietà css3.
Ne abbiamo a sufficienza per divertirci!
Come ulteriore complemento, ti segnalo questa tabella comparativa che mostra la compatibilità dei vari browser con css3 e html5. Ma siccome siamo arrivati fino a questo punto, perché non spingerci oltre? Stò preparando una serie di tutorial su jQuery Mobile, un estensione di jQuery (comprensiva di un framework css) appositamente studiata per facilitare lo sviluppo di siti web per dispositivi mobili.
E tu? Cosa ne pensi di ottimizzare i tuoi siti per i dispositivi mobili? Ci stai pensando?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
17 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
ciao maurizio, ovviamente complimenti per l’articolo.
Avrei un appunto da fare. Quando si utilizza la variabile $_SERVER['HTTP_USER_AGENT'] verifica prima l’esistenza.
$browser = (isset($_SERVER['HTTP_USER_AGENT'])) ? $_SERVER['HTTP_USER_AGENT'] : 'IE';
E’ importante anche perchè alcuni spider dei motori di ricerca non inviano dale header e ti ritroveresti indicizzati i NOTICE (se impostati dal display errors).
OFF TOPIC: non dimenticherò mai un’esperienza che mi fu raccontata in cui un sito bilingue selezionava dati da db sulla base di $_SERVER['HTTP_ACCEPT_LANGUAGE'] e si ritrovò il sito con zero contenuti indicizzati!!!
FINE OFF TOPIC
Volevo anche segnalare l’ultimo articolo di Rocco Passaro che tratta questo argomento per aspetti legati al css:
http://www.ebug.it/adattare_sito_web_risoluzione_css_javascript/
Grazie oly. Questa cosa non la sapevo. Tu sai di preciso quali spider “non si presentano al server?” (maleducati).
no sò risponderti.
Però a testimonianza di quanto ti dicevo ti riporto il link di una discussione a cui ho partecipato nel forum di html.it
http://forum.html.it/forum/showthread.php?s=&threadid=1431688&highlight=%24SERVER+language
(in un messaggio a fine pagina l’utente che ha aperto il topic riscontra il problema con google!!!)
Come dicevo in quella sede io seguo un principio molto semplice:
se una variabile proviene da un client – chiunque esso sia e in qualsiasi forma tale variabile provenga – la verifico sempre e, se occorre faccio una validazione (ad esempio inserire l’ip dell’utente nel db).
Ciò vale per molti degli elementi che compongono $_SERVER.
La sto già facendo l’ottimizzazione per i miei ultimi layout, usando per la maggiore css3 :D
Ciao Rocco.
Utilizzi anche jQuery Mobile o qualcosa di simile?
sisi jquery mobile :D
Ci sto preparando una serie di articoli intoduttivi.
Pur essendo ancora in alpha, lo trovo un framework eccezionale con il quale diventa veramente semplice l’ottimizzazione.
Complimenti per l’ottimo articolo, oltretutto spiegato molto bene!
ho un’unico dubbio, se permetti Maurizio: quando tu dici “iPhone” intendi solo l’iPhone o tutti gli smartphone? un Blackbarry piuttosto che un Samsung sono la stessa cosa o occorre specificare ogni volta?
grazie mille
In questo caso ho parlato unicamente di iPhone, anche perché é l’unico dispositivo che ho.
é chiaro che cambiando dispositivo cambiano i paramentri. Se volessimo ottimizzare per iPad, la dimensione dello schermo é notevolmente maggiore.
Per risolvere la maggior parte dei problemi possiamo utilizzare un framework come jQuery Mobile, del quale inizieremo a parlare molto presto.
Ottimo articolo devo dire, infatti i dispositivi mobili stanno prendendo sempre più piede ;-)
Ottimo articolo, tra poco si è tagliati fuori, se il sito non è compatibile con i dispositivi mobili…
Ma, sei sicuro che sia:
if(strpos($_SERVER['HTTP_USER_AGENT'], “iPhone”))
e non:
if(strpos($_SERVER['HTTP_USER_AGENT'], “aifon”))
?
Penso che funziona anche così :-)
Ottimo articolo, chiaro e semplice.
Ho una sola nota: non sarebbe più corretto includere anche i dispositivi mobile con android? Infondo anche la si tratta di webkit e dovrebbero anche avere uno user-agent specifico. Chiaro che cambia la risoluzione, e quindi sarebbe da implementare un layout fluido anche per mobile. Però giustamente mobile è diverso da solo iPhone :)
Certamente, hai perfettamente ragione.
Ho considerato unicamente iPhone in questo articolo e quello che mi interessava era dare alcuni spunti generali.
A partire dal prossimo tutorial su questo argomento andremo ad utilizzare jQuery Mobile che appunto crea dei layout fluidi che si adattano perfettamente a qulasiasi tipo di dispositivo.
Una piccola precisazione: personalmente uso come doctype in maniera che sia subito chiaro il contenuto della pagina agli spider e il meta ciò non tanto per la corretta visualizzazione sui vari smartphone ma per evitare che nel caso si tratti di una versione mobile che risieda sullo stesso dominio es. http://www.miosito.it/mobile/ non vi siano problemi di contenuti duplicati. Qualcun’altro usa queste dichiarazioni? Ciao!
Non si vede il codice che ho incollato, pardon come posso mostrarlo?
come si nasconde la barra URL di safari mobile ance quando faccio lo scroll con jqmobile?