Spunti su come ottimizzare un sito web per dispositivi mobili

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Spunti su come ottimizzare un sito web per dispositivi mobili"

Sergio Bonelli
4 anni fa
Visualizzazioni

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

1 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 Caricare un foglio di stile specifico Un passo certamente fondamentale per ottimizzare il nostro sito é quello di poter caricare un 1 / 8

2 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. 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: 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 2 / 8

3 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. 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: 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: Come puoi vedere ho utilizzato il type url, 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 3 / 8

4 Ora, se seleziono il campo Nome e Cognome, mi viene mostrata la tastiera standard. 4 / 8

5 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) 5 / 8

6 Questo in quanto iphone é in grado di rilevare il type url ed agire di conseguenza. Similmente entrando nel campo , verrà mostrata la tastiera specifica per l inserimento di (in basso ho a disposizione la chiocciolina ed il punto). 6 / 8

7 Ed infine entrando nel campo numero di telefono, viene mostrato il tastierino numerico. 7 / 8

8 Powered by TCPDF ( Come ho detto prima, non é uno sfizio o una forzatura utilizzare html5 in casi come questo. Ed ecco il codice completo 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? 8 / 8

Documenti analoghi

jquery Mobile: La gestione dei form

jquery Mobile: La gestione dei form In questo articolo vedremo come jquery Mobile sia in grado di fornire un ottimo supporto nello sviluppo di form. Nel dettaglio andremo a vedere come, seguendo delle