Terminata la fase introduttiva entriamo nel vivo della nostra guida: vediamo quindi come iniziare a costruire l’ossatura HTML della nostra pagina web ottimizzata per dispositivi mobili partendo, come logico, dalle intestazioni.
In questa lezione, infatti, vedremo come configurare correttamente l’header del nostro m-site (abbreviazione di "sito mobile"). L’intestazione della pagina, infatti, è un elemento fondamentale affinche il nostro sito web venga correttamente interpretato dai browser dei dispositivi mobili. Vediamo, quindi, come configurarlo a dovere.
Ad aprire il documento HTML, come sappiamo, è la dichiarazione del doctype. Personalmente suggerisco di utilizzare sempre la dichiarazione di HTML5:
<!DOCTYPE html>tuttavia, se preferite, è possibile utilizzare doctype più tradizionali.
A seguire si apre il contenuto del tag <head>. All’interno di questa sezione dobbiamo inserire, oltre al classico tag <title>, fogli di stile, eventuali script ed ai tradizionali metatag (come charset, description, ecc.) alcuni elementi specifici richiesti per la corretta configurazione di una webpage ottimizzata per gli smartphone. Vediamo questi meta-tag uno ad uno:
HandheldFriendly
Il metatag HandheldFriendly dice al browser se la pagina è ottimizzata o meno per dispositivi portatili come gli smartphone e palmari; questo metatag si rivela utile soprattutto coi palmari ed altri devices particolarmente datati.
<meta name="HandheldFriendly" content="true" />format-detection
Il metatag format-detection serve per abilitare o disabilitare l’individuazione automatica dei numeri di telefono: se attiva questa funzionalità trasformerà automaticamente in link cliccabili tutti i numeri che identificherà come numeri telefonici.
<meta name="format-detection" content="telephone=no" />il problema è che molto spesso questa funzionalità (se attivata) rileva come numeri telefonici anche numeri che non lo sono… come, ad esempio, la partita IVA! il mio suggerimento è di settare sempre questa feature su "no" e poi eventualmente definire manualmente i numeri di telefono cliccabili utilizzando il seguente markup HTML:
<a href="tel:+39 800000000">Chiama Ora</a>MobileOptimized
E’ un tag proprietario di Internet Explorer Mobile e serve per indicare al browser la risoluzione del nostro sito mobile. In pratica, se il sito viene visualizzato attraverso IEMobile, il browser forzerà la visualizzazione alla larghezza specificata.
<meta name="MobileOptimized" content="176" />viewport
Si tratta, sicuramente, del metag più importante nella definizione di un sito mobile. Attraverso questo metatag, infatti, possiamo istruire il browser mobile circa il corretto utilizzo della viewport, cioè dell’area di visualizzazione.
I browser dei dispositivi mobili, infatti, sono soliti adattare automaticamente la viewport secondo regole prestabilite al fine di fornire al lettore una visione accettabile anche di siti web non ottimizzati; viceversa se il sito web è nativamente ottimizzato per smartphone è consigliabile disabilitare questa funzionalità in quanto potrebbe alterare il design che abbiamo ideato.
Vediamo un esempio di settaggio a mio avviso "corretto" di questo metatag per un sito mobile:
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />Vediamo ora nel dettaglio le varie proprietà settate nell’attribto content di questo metatag:
- width: indica la larghezza della pagina; può avere come valore un numero (ad es. 320) oppure, come nel nostro esempio, "device-width", il che sta a significare – in poche parole – che il design occupa il 100% della larghezza effettiva dello schermo;
- height: stesso discorso della width ma per l’altezza. Oltre ai pixel si può usare "device-height" (in genere questo valore viene omesso come nel nostro esempio);
- user-scalable: consente di specificare se vogliamo consentire o meno agli utenti di cambiare il livello dello zoom (nel nostro caso "no");
- initial-scale, minimum-scale, maximum-scale definiscono, rispettivamente, il livello predefinito dello zoom, quello minimo e quello massimo consentito (nel nostro caso è sempre 1.0 cioè nessun ingrandimento o rimpicciolimento per i nostri contenuti).
Un esempio completo di head per un sito mobile
Vediamo un esempio completo di intestazioni settate correttamente per un m-site:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito mobile!</title>
<link rel="stylesheet" href="foglio-di-stile.css" type="text/css" />
<meta name="HandheldFriendly" content="true" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
</head>
...
</html>Nelle prossime lezioni lavoreremo ancora nella sezione head della pagina per integrare alcuni meta-tag ed altri elementi specifici per i devices equipaggiati con il sistema operativo iOS e Android.
