pagine mobile friendly

È un problema che occorre porsi, quello della fruibilità del proprio sito per chi naviga con dispositivi mobili, data la diffusione crescente di tali tecnologie.

Non pretendiamo di fornirvi una panoramica completa delle strategie che si posso attuare, ma solo rendervi conto di quanto abbiamo finora capito e messo in atto.

Ci sono essenzialmente due tipi di intervento possibile:

Nel primo caso si avremo gli stessi files (html, o php, per esempio) a cui si applicherà un nuovo foglio di stile; nel secondo avremo nuovi files (html o php).

applicare un foglio di stile specifico all'esistente

La prima soluzione dovrebbe essere la la più razionale ed “economica” e si fonda sulla possibilità di applicare un dato foglio di stile a una pagina in base al media device, che può essere screen (modalità di default), o ad esempio print, o appunto, nel caso di cellulari o palmari handheld.

Il codice sorgente per inserire un foglio di stile da usare nel caso di dispositivo mobile è <link rel="stylesheet" media="handheld" type="text/css" href="nomedelfogliodistile.css\" />, dove l'attributo media="handheld" comunica al browser di applicare quel foglio di stile solo ai dispositivi mobili.

Dicevamo che questa sarebbe la soluzione più razionale ed “economica”: sì, se tutto andasse alla perfezione. Ma succede che i browsers, almeno molti browsers che girano su dispositivi mobili appena un po' accessoriati ignorano puramente e semplicemente l'istruzione media="handheld", applicando, verrebbe da dire presuntuosamente, il foglio di stile pensato per devices desktop (ossia media="screen").

un trucco

C'è un trucco per costringere i browsers a non applicare un foglio di stile pensato per i desktop devices: è utilizzare l'istruzione che specifica ad esempio la larghezza minima dello schermo in pixel. Ad esempio possiamo specificare che il foglio di stile normal.css si applicherà solo a dispositivi con schermo maggiore di 640 pixel, questo è il codice <link rel="stylesheet" media="only screen and (min-width: 640px)" type="text/css" href="normal.css" />.

Si può fare anche l'inverso: costringere ad usare un foglio di stile pensato per i mobile devices usando l'istruzione max-width, e dicendo che tale foglio va adottato dai dispositivi che hanno uno schermo più piccolo di un dato numero di pixels: questo è il codice <link rel="stylesheet" media="handheld, screen and (max-width: 480px)" type="text/css" href="mobile.css" />.

Certo, adottando questo trucco bisogna comunque rinunciare alla soluzione “pulita” di usare l'istruzione media="handheld", e proporre come foglio di stile da usare su mobile un foglio con media="screen".

come comporre un mobile.css

Quali sono le avvertenze da seguire nell'elaborare un css per dispositivi mobili? Ad esempio evitare elementi flottanti (istruzione float): occorre che testi e immagini si dispongano verticalmente.

Occorre poi valutare se sia il caso di visualizzare le immagini, eventualmente disattivandole (ad esempio con img {display: none}).

Bisogna ricordarsi anche di disattivare le inline frames (iframes).

creare nuove pagine

Tutto sommato è la soluzione più sicura e più precisa. Permette di lavorare meglio su tutti gli elementi, rendendoli conformi al DOCTYPE Basic 1.1, che è quello per i dispositivi mobili.

Un utile strumento per verificare la conformità del proprio codice sorgente html ai mobili è il validatore del w3c per dispositivi mobili. Bisogna peraltro tenere presente che tale validatore da un lato è anche troppo pignolo, dall'altro non è completo (ad esempio promuove siti che non vengono visualizzati molto efficacemente su mobile). Diciamo che è un passaggio comunque importante, anche se non dovrebbe essere l'unico.

come indirizzare all'area mobile

A questo punto si pone il problema di come indirizzare verso le pagine mobile-friendly del proprio sito gli utenti con mobile devices. Ci possono essere due strade:

La seconda soluzione appare preferibile, perché non si vede per quale ragione un utente “mobile” non dovrebbe desiderare trovarsi in un ambiente pensato per lui, per facilitargli la vita.

Ci sono in proposito diversi scripts, sia server-side sia client-side. Noi abbiamo finora preferito questi ultimi, in particolare una istruzione javascript collocata nell'<head> della pagina non-mobile:

<script type="text/javascript">
<!--
if (screen.width <= 480) {
document.location = "mobile.php";
}
//-->
</script>

Con questa istruzione reindirizziamo vero mobile.php il browser di un dispositivo che abbia uno schermo uguale o minore di 480 pixels.

verificare il risultato

Ci sono fondamentalmente due modi: o disporre di un cellulare che navighi in internet o utilizzare uno strumento sofisticato di simulazione: noi abbiamo provato il tool di Opera, Opera Mini Simulator, trovandolo semplice e utile. Ma esistono anche altri utili tools, come l'Iphonesimulator o l'Iphonetester.

ridimensionare immagini e testo

Ne parliamo in una scheda apposita: ridimensionare automaticamente immagini (grandi) e testo (grande).