CSS  »  Articoli  »  Responsive Design 

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;

Altri articoli

Altre guide

Altre newsletter