Quando si ha a che fare con un qualsiasi progetto web spesso si perde l’importanza dei META TAG e della loro utilità. Soprattutto se si ha la cattiva abitudine di utilizzare “editor” visuali che con un click impaginano il sito senza minimamente preoccuparci di cosa viene prima del “body”. Per l’impaginazione mobile qualcosa (o forse più) cambia, i browser per cellulari hanno bisogno di interpretare che il vostro sia effettivamente un sito web mobile e lo fanno in base al rendering del codice di marcatura attraverso proprio i META TAG ed il DOCTYPE che fanno assumere all’intera pagina dei connotati ben precisi: “Questo è un sito mobile”. Non a caso se provate a visualizzare qualsiasi sito web “normale” su un cellulare, beh, lo vedrete non male…ma peggio! Questo dipende dal fatto che il DOCTYPE del sito web tradizionale è differente rispetto quello di un sito web formato mobile, stessa cosa dicasi per i META TAG che adesso elencherò:
Doctype mobile
Tutte le pagine XHTML MP devono obbligatoriamente avere una dichiarazione DOCTYPE. Essa indica il nome della DTD e la sua URL. Cosa contiene un doctype? Informazioni relative alla sintassi del markup e indica quali elementi e regole possono essere utilizzati all’interno del documento in sede di validazione.
Per i siti web mobile lo standard è il seguente:
I tool di convalida DEVONO essere utilizzati per controllare se il documento è conforme agli standard internazionali. Tra i TOOL UFFICIALI di validazione vi è quello del w3c mobile ma di questo probabilmente scriverò un articolo a parte.
META MobileOptimized
Credevate che col mobile vi sareste eternamente sbarazzati di INTERNET EXPLORER e di tutti i suoi derivanti bug di inusabilità? Microsoft ha infatti inventato un META TAG per il mobile, il “MobileOptimized” che serve a controllare la larghezza di layout per browser di tipo Internet Explorer Mobile (Pocket IE su Windows Mobile 5). Il contenuto del meta-tag è un numero intero (larghezza in pixel). Quindi con la presenza di MobileOptimized verrà forzata la larghezza di visualizzazione di un sito web mobile con browser IEMobile seguendo la larghezza specificata.
Alcuni esempi concreti di misure standard applicabili su dispositivi Windows Mobile sono i seguenti:
META HandheldFriendly
Tradotto in parole spicciole serve ad indicare al browser che sta interpretando la pagina “si, questo è un sito web ottimizzato per mobile!”. Generalmente è un tag facoltativo che viene interpretato soprattutto dai palmari sui quali senza questo META TAG immagini, tabelle e codice javascript “potrebbe” essere compromesso.
META ViewPort
Eccoci dunque al sodo, quello che considero il meta-tag più importante. Spesso ogni browser web adotta delle regole di interpretazione della pagina interne ad esso, allargando e restringendo la pagina a seconda della larghezza dei loro display.
ViewPort controlla intelligentemente le dimensioni della finestra del viewport del browser donando al vostro sito una visualizzazione più compatta e consona alla vostra logica di impaginazione. La presenza di questo meta-tag indica che il documento è ottimizzato per i dispositivi mobili.
Ma cerchiamo di capire meglio il significato di tutti questi valori che possono essere fatti passare tramite ViewPort:
| Meta-tag | Esempio valore | Descrizione |
| width | width=320 width=device-width |
La larghezza “logica” della finestra, in pixel. 320 in questo caso è il valore ideale per un dispositivo Apple iPhone/iPod ma non necessariamente deve essere questo. |
| user-scalable | user-scalable=no | L’altezza “logica” della finestra, in pixel. Valore che solitamente viene tralasciato in quanto spesso l’altezza è variabile. |
| initial-scale | initial-scale=2.0 | Imposta il ridimensionamento iniziale per la visualizzazione di una pagina web. Il valore di default è 2.0. |
| maximum-scale | maximum-scale=2.5 | Imposta il limite massimo per il ridimensionamento/zoom della pagina web. Il range dei valori va da 0,25 a 10,0. Il valore di questa direttiva costituisce un fattore di scala o moltiplicatore applicato ai contenuti viewport. |
| minimum-scale | minimum-scale=0.5 | Esatto opposto del maximum-scale, indica il limite minimo per il ridimensionamento/zoom-out della pagina web. |
META Format-detection
Il vantaggio pratico dei siti web mobile è quello di poter attribuire ad un link la possibilità di far partire una chiamata o un sms se quello che si sta cliccando è un numero di telefono:
Chiama ora
Invia sms
Un problema molto frequente su iPhone è quello di rilevare in automatico come numero telefonico qualsiasi intero si inserisce (es: P.Iva: 09092021 l’iPhone lo interpreta come un numero telefonico).
Il meta-tag format-detection abilita o disabilita la rilevazione automatica dei numeri interi presenti in una pagina web su iPhone. E’ buona norma impostare questo meta-tag a “NO” e applicare le regole HTML spiegate qualche riga più su.
Esempio di intestazione sito web mobile
La nostra intestatione (meta-tag parlando) sarà simile alla seguente:
Titolo della pagina
I meta tag utilizzabili in una pagina web standard sono un’infinità ma per ottenere un buon sito web mobile le basi fondamentali di dichiarazione all’interno dell’intestazione di una pagina sono descritte in questo articolo.
15 comments
Fabiana Testini
1 Novembre 2010 at 10:20
Davvero interessante come articolo. Mi ha fornito molti spunti per migliorare.
marcus
1 Novembre 2010 at 11:57
ciao conosci qualche plugin wordpress che faccia tutto questo?
admin
1 Novembre 2010 at 12:07
Ci sono diversi plugin per wordpress, tra questo wp-tap credo sia il più funzionale. Comunque sia questo articolo ti può essere utile per migliorare qualsiasi struttura gia esistente (plugin per wordpress ad esempio).
Paki Romita
6 Novembre 2010 at 14:29
ottimo come sempre
peterborto
15 Dicembre 2010 at 14:02
Ottimo riepilogo stu studiando come fare una velina che apra automaticamente sull’iphone una piccola scheda che ti salvi nei preferiti… l’ho vista da qualche parte ma non ricordo dove :s
admin
15 Dicembre 2010 at 14:20
Ciao,
probabilmente devi darti una lettura a questo articolo: http://www.marioconcina.it/blog/mobile-development/come-realizzare-sito-web-per-mobile-iphone.html alla voce “Sito web per iPhone” c’è, forse, quello che vorresti.
peterborto
15 Dicembre 2010 at 14:38
@admin grazie l’ho già letto ma è un altra cosa quella che voglio implementare.. praticamente arrivando sul sito si apre automaticamente l’icona con la possibilità di salvarla un link tra le app.. col tag apple-icon etc funge se tu manualmente clicchi su aggiungi ai preferiti…
admin
15 Dicembre 2010 at 14:43
A questo punto l’unica soluzione che mi salta in mente è quella di utilizzare jQuery. Fare una cosa tipo: al caricamento della pagina fai questa determinata azione. Non credo ci sia qualcosa di gia pronto in tal senso.
peterborto
15 Dicembre 2010 at 14:54
Già forse è possibile farlo con jquery mobile.. stay tuned!
admin
15 Dicembre 2010 at 15:00
Ma anche solo con jQuery, tanto il browser dell iPhone è safari per cui non ci sono problemi.
peterborto
16 Dicembre 2010 at 9:55
Che ne pensi di usare jquery tooltip, con un bel onLoad quando si carica la pagina?
admin
16 Dicembre 2010 at 10:08
basta anche fare una cosa del genere:
jQuery(function(){
//Qui dentro quello che devi implementare
});
peterborto
16 Dicembre 2010 at 14:09
ho messo uno script che si chiama mobile-bookmark-bubble direi che fa quello che mi interessa :d
Simone
22 Aprile 2011 at 20:54
Ciao Mario,
leggo per la prima volta stasera il tuo blog ma sicuramente non sarà l’ultima 🙂
Ti disturbo subito con una domanda però : perché se uso il docktype come da te indicato (in un sito fatto su tabelle) le immagini mi rimangono distanziate tra loro anche impostando padding, bordi ecc tutto a zero, sia nelle immagini nche nelle celle? Cosa che non succede usando transitional.
admin
30 Maggio 2011 at 19:38
Perchè le tabelle sono obsolete, utilizza i div e vedrai che non avrai alcun problema.