Il ritorno dei fogli di stile per il mobile

Questa è la traduzione dell'articolo Return of the Mobile Style Sheet di Dominique Hazaël-Massieux pubblicato originariamente su A List Apart il 6 Gennaio 2009. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

Negli ultimi due anni abbiamo assistito all'uscita di dispositivi mobili con capacità di accesso al web, tra cui l'iPhone di Apple con il suo browser Safari, la creazione della piattaforma Android da parte di Google con il browser basato su WebKit, l'uscita di browser cosiddetti "full web" (Nokia S60, Opera Mobile e Opera Mini tra gli altri), lo sviluppo preliminare di una versione mobile di Firefox. Questi browser per il mobile migliorano l'esperienza dell'utente, dando accesso pieno a siti web che prima erano non accessibili con un dispositivi mobile. In effetti, come un report pubblicato da Nielsen Media Research ha evidenziato, i dispositivi mobili hanno visto aumentare la quota di traffico generato del 13% su molti siti popolari.

Idealmente, gli autori di siti dovrebbero essere ora in grado di andare incontro alla crescente richiesta per un'esperienza sul mobile di qualità senza dover cambiare una sola riga di codice. Ma la realtà è che un sito progettato appositamente per il mobile fornirà sempre e comunque un'esperienza migliore, anche quando sono equipaggiati con il dispositivo del momento. Non è tanto una questione di costi, di ritardi e di limitazioni della CPU. Piuttosto, l'esperienza per il mobile ha bisogno di uno specifico approccio di design, come è evidente in un numero di articoli e documenti, tra cui le Mobile Web Best Practices del W3C rilasciate nel luglio del 2008 come raccomandazione ufficiale. La formula per un'esperienza mobile ottimale è ben sintetizzata da Song Spring Design: rendi mobile, non miniaturizzare. Gli utenti di dispositivi mobili operano in un contesto molto diverso da quello di chi usa un PC. Fornire ad essi un'esperienza ad hoc è probabilmente il miglior servizio che possiamo loro offrire.

Se state iniziando solo ora con il design per il mobile, potreste andare incontro a molti ostacoli, tra cui i costi e le sfide tecnologiche per la progettazione e il mantenimento di un secondo sito. Questo articolo discute di un primo passo verso un design per il mobile che usa i CSS per ottimizzare l'interoperabilità tra piattaforme. Iniziando dal semplice, potete fornire un'esperienza iniziale decente, sollecitare il feedback degli utenti e operare in vista di un design davvero mobile friendly. Questo è l'approccio che stiamo usando nel redesign del sito del W3C.

Nel 2004, Elika Etemad e Jorunn Newth hanno scritto un articolo intitolato Pocket-Sized Design. Il concetto chiave era quello di usare i fogli di stile cosiddetti handheld per risolvere alcune delle sfide in termini di usabilità poste dai dispositivi mobili. La loro soluzione consentiva di eliminare cose come lo scrolling orizzontale, che può essere davvero fastidioso su un piccolo dispositivo.

I browser più recenti tendono ad evitare quel problema offrendo un'interfaccia per lo zoom che consente agli utenti di spostare il focus su una parte della pagina. Le capacità di zoom offrono certamente dei vantaggi, specie per gli utenti che hanno familiarità con un sito web. Tuttavia, zoomare causa uno spostamento del viewport che può confondere e non risolve il problema degli utenti che su quel sito arrivano per la prima volta.

A causa di queste difficoltà derivate dallo zoom e soprattutto a causa dei problemi di scrolling orizzontale a cui gli utenti potrebbero andare incontro, offrire una versione linearizzata (piuttosto che un layout a più colonne) rimane un'opzione valida. Purtroppo, basarsi solo sui fogli di stile di tipo handheld per ottenere questo effetto non è sufficiente per la recente evoluzione dei browser per il mobile sul mercato.

Il ritorno dei fogli di stile screen

Già nel 1998, la specifica HTML 4 offriva dei modi per collegare alla pagina diversi fogli di stile a seconda del dispositivo usato come target, tra cui i dispositivi mobili (handheld):

<link rel="stylesheet" href="screen.css" media="screen"/>

<link rel="stylesheet" href="handheld.css" media="handheld"/>

I CSS avevano una funzionalità simile tramite @media:

@media screen { /* regole per lo schermo di un computer */ } 

@media handheld { /* regole per dispositivi mobili */ }

e tramite un parametro da usare con @import:

@import "screen.css" screen; @import "handheld.css" handheld;

Molti browser per il mobile hanno implementato questa funzionalità, ma in modi diversi:

1. Alcuni leggono solo il CSS handheld.
2. Alcuni leggono solo il CSS handheld se ce n'è uno, ma leggono quello screen nel caso contrario.
3. Alcuni leggono sia quello handheld sia quello screen.
4. Alcuni leggono solo il foglio screen.

L'ultima di queste situazioni non è certo una buona interpretazione delle specifiche. Da quello che ho capito in seguito a delle discussioni che ho avuto con alcuni produttori, essi hanno seguito questo approccio perché credevano che i fogli di stile handheld non fossero ben progettati e mantenuti rispetto a quelli screen, e perché, quindi, fornivano un'esperienza inferiore agli utenti.

Di recente, i browser per il mobile di Opera (Mobile e Mini), che implementavano la seconda opzione, sono passati di default a ad usare il foglio di stile screen, lasciando all'utente di scegliere il precedente comportamento.

La maggior parte (se non tutti) i nuovi browser, in omaggio al motto del "full web", semplicemente ignorano il foglio di stile handheld, lasciando per strada quelli che ancora sperano in un approccio fondato sui CSS. O almeno così sembra.

Le Media Queries: una nuova speranza

Le versioni recenti di Opera e Safari implementano le Media Queries CSS, uan specifica che è ancora in fase di sviluppo presso il W3C. Le Media Queries offrono più di una semplice lista di Media Type CSS. Consentono agli autori di personalizzare un foglio di stile in base ad alcune proprietà note come la misura dello schermo su cui viene resa la pagina.

Un esempio. Il codice che segue specifica un foglio di stile da usare sul browser dell'iPhone e non sul browser che gira su un PC usando (come mostrato da Craig Hockenberry su A List Apart):

<link rel="stylesheet" href="handheld.css" 
media="only screen and (max-device width:480px)"/>

Ci sono buon ragioni per sperare che il numero di browser che supportano le Media Queries andrà a crescere, magari grazie alla visibilità ottenuta dall'iPhone su scala mondiale.

Come si comportano i browser

La tabella che segue mostra come vari popolari browser per il mobile si comportano. La maggior parte delle informazioni proviene dai dati grezzi raccolti per i test del W3C sul modo in cui i browser reagiscono di fronte alle Media Queries e ai Media Type dei CSS.

Data questa diversità, potreste subito chiedervi quanti fogli di stile dovrete creare per ottenere un'esperienza mobile usabile. E come uno potrebbe adattarsi al gran numero di utenti che accedono al web con dispositivi mobili che in qualche modo implementano le tecniche dei Media Type CSS?

"Questi non sono i fogli di stile che cerchi"

Propongo una tecnica per usare i fogli di stile che assicura che la maggior parte dei browser useranno le regole specifiche per i dispositivi mobili ed eviteranno le regole che non siano mobile-friendly. I browser per PC leggeranno i fogli di stile concepiti per loro. Attenzione: rispetto al primo obiettivo, si tenga presente che non funzionerà con i browser mobili che applicano solo i fogli di stile screen e non implementano le Media Queries CSS. Funziona con tutte le versioni di Opera (Mobile e Mini), su Safari (iPhone), il browser Palm Blazer, IEMobile e con un buon numero di altri browser (si veda la tabella riassuntiva qui sotto).

Tra le proprietà non mobile-friendly annoveriamo:

• float e display: queste proprietà sono tradizionalmente usate per creare layout a più colonne, fanno sì che l'utente di un dispositivo mobile debba usare lo zoom;
• padding e margin: poiché l'ampiezza dello schermo è limitata sui dispositivi mobili, vorrete ridurre o rimuovere la maggior parte dello spazio definito da margini e padding su di essi;
• background-image: le immagini usate per decorare un sito web per i browser PC tendono ad essere grandi ed hanno una funzionalità limitata sui browser mobili, dovrebbero essere quindi rimosse o rimpiazzate.

L'idea è simile alla tecnica del reset come presentata da Eric Meyer:

• definite un foglio di stile screen.css per i browser per PC;
• definite un foglio di stile antiscreen.css per eliminare le regole e gli effetti non mobile-friendly definite in screen.css;
• collegate alla pagina questi fogli di stile in un foglio di stile core.css usando questo codice:

@import url("screen.css"); 
@import url("antiscreen.css") handheld; 
@import url("antiscreen.css") only screen and
(max-device-width:480px);

• definite un foglio di stile handheld con stili addizionali per i browser mobili;
• collegate il tutto alla pagina con questo codice:

<link rel="stylesheet" href="core.css" media="screen"/> 
<link rel="stylesheet" href="handheld.css" media="handheld,
only screen and (max-device-width:480px)"/>

(oppure attraverso blocchi @media e direttive @import).

I browser mobili che leggono solo il foglio di stile handheld non vedranno mai le proprietà CSS potenzialmente pericolose definite in screen.css. I browser mobili che leggono i fogli di stile screen e i fogli di stile handheld o quelli con le Media Queries non saranno mai colpiti negativamente dalle proprietà definite in screen.css, dal momento che sono cancellate in antiscreen.css. Infine, i browser per PC ignoreranno tranquillamente sia antiscreen.css sia handheld.css.

Rimane un problema pratico: se il vostro foglio screen.css è lungo e regolarmente modificato, la creazione e il mantenimento manuale di antiscreen.css potrebbe risultare complicato.

Per fortuna possono assisterci i computer. Se il vostro browser supporta la specifica DOM Level 2 Style, potete usare uno script da eseguire nel vostro browser su una pagina (magari attraverso l'uso di questa bookmaklet) per identificare quali fogli di stile volete cancellare.

"La possibilità di agire con successo nel campo degli user-agent è di 3720 su 1"

Questa tecnica va incontro alle necessità di un buon numero di browser, inclusi alcuni dei più diffusi. Ma cosa fare con quei browser mobili che non leggono i fogli di stile handheld e non interpretano le Media Queries? Ci sono due opzioni:

1. Usare Javascript per forzarli a leggere il foglio handheld (dal momento che i browser in questa categoria sono piuttosto recenti, è probabile che abbiano un discreto supporto per Javascript).
2. Appoggiarsi a tecniche lato server per fornire a questi browser il foglio handheld quando essi richiedono quello screen.

In entrambi i casi il limite principale (e la ragione per cui non vi raccomando di usare questa tecnica per tutti i dispositivi mobili) è che dovrete esplicitamente avere una corrispondenza nella stringa dello user-agent inviata dal browser. User-agent è il nome che il browser (mobile e non) manda al server web quando richiede una certa pagina, un nome che in genere identifica un browser su una specifica piattaforma. Potete vedere una lista molto estesa di stringhe di user-agent sul sito user-agents.org.

Il problema, usando questo approccio, è che ci sono molti diversi produttori di browser e molte versioni dei browser. Mantenere una lista esaustiva di user-agent è cosa complicata e fonte di possibili errori, dal momento che di continuo vengono presentati nuovi dispositivi e nuovi browser. Ci sono al momento soluzioni che consentono agli sviluppatori web di usare fonti esterne per questo tipo di dati (per esempio il Device Description Repository API del W3C), ma poiché il nostro obiettivo è quello di affidarsi a tecniche semplici, l'argomento è al di fuori dello scopo di questo articolo.

Nel nostro caso, dobbiamo andare incontro ad un numero limitato di browser, e si spera che quel numero non crescerà nel tempo. Johann Burkard offre un esempio di come ottenere questo risultato usando Javascript basandosi su un test effettuato sulla proprietà navigator.userAgent.

Per ottenere lo stesso risultato con tecnologie lato server su un server Apache, usiamo un Rewrite:

# This rewrite rule should be applied in the directory 
# of the screen.css style sheet 
# For Series60 browsers 
RewriteCond {HTTP:User-Agent} Series60 
# we redirect screen.css to the handheld stylesheet 
RewriteRule 
^screen.css$ /path/to/handheld/stylesheet/
handheld.css [R=permanent,L] 
# We set the Vary header on screen.css 
# to make sure HTTP Cache pays attention to the User-Agent 
# header as required by the HTTP specification  
<File screen.css>  
Header add Vary User-Agent </File>

Conclusioni

Sintetizzando:

• i browser mobili stanno diventando sempre più potenti e diffusi;
• ci sono ancora molti browser non così potenti e capaci, e anche quelli migliori rappresentano una sfida sul piano dell'usabilità;
• sebbene un'esperienza utente specifica per il mobile andrà meglio incontro alle esigenze dei vostri utenti, un sito ottimizzato per il mobile è meglio di niente;
• la tecnica dell'antiscreen.css (combinata con uno script per implementarla) vi consente di creare fogli di stile mobile-friendly che funzionano su un gran numero di browser mobili.