Responsive Web Design: iniziamo al meglio!

Da sempre gli sviluppatori di siti Internet devono affrontare il problema dell'utilizzo di browser differenti che interpretano in modo diverso le indicazioni del W3C (World Wide Web Consortium). In passato progettare versioni diverse di uno stesso sito per Internet Explorer e Firefox era considerato fondamentale. La diffusione di una nuova generazione di dispositivi mobili non ha fatto che intensificare questa problematica. Ne è una prova il numero sempre crescente di utenti che si connettono a Internet dal loro smartphone. Non è più possibile creare diverse versioni di un sito per ogni dispositivo: ecco perché sono nate nuove soluzioni, prima fra tutte il Responsive Web Design.

Cos'è l'RWD (Responsive Web Design)?

L'RWD è un insieme di metodi e tecniche grazie a cui l’interfaccia di un sito o di un'applicazione si adatta automaticamente al dispositivo utilizzato dall'utente finale (smartphone, tablet, laptop, desktop, etc.). Ecco perché si parla anche di esperienza adattativa.

Le componenti tecniche adottate (quasi) all'unanimità sono tre:
la griglia flessibile: le pagine dei siti responsive sono progettate sulla base di una struttura che si adatta alle caratteristiche di tutti i browser Internet;
le media query: queste regole CSS conferiscono una dimensione flessbile alla griglia su cui è costruita la struttura del sito;
le immagini flessibili: per raggiungere una flessibilità generale, è necessario adattare immagini e video al layout dei vari dispositivi.

Scoppierà una guerra dei framework?
I framework di integrazione sono nati per semplificare il lavoro degli sviluppatori front-end. Boostrap, la soluzione messa a punto dai team di Twitter, è senza dubbio il framework RWD più conosciuto, oltre a essere il precursore di una nuova generazione di soluzioni che ha convinto società del calibro di Vogue, Newsweek, Spotify, MongoDB e addirittura la NASA.

Oggi è impossibile tenere il conto dei framework RWD disponibili. Le alternative a Boostrap più conosciute? Foundation, Skeleton, Boilerplate, HTML Kickstart, Sproutcore, Zebra, ecc...

Esempio di studio di breakpoint

Perché è necessario evitare la graceful degradation?

Tra il 2000 e il 2005, il modo di progettare i siti Internet è stato rivoluzionato dalla combinazione di importanti fattori.
Il concetto di separazione tra la struttura (cioè il contenuto HTML) e la forma (l'impaginazione tramite fogli di stile chiamati CSS) ha consentito lo sviluppo di soluzioni per la gestione dei contenuti (i Content Management System o CMS) e reso possibile a tutti la modifica dei propri siti Internet.

Da allora il volume di contenuti sul Web è esploso, anche grazie alla diffusione dei blog. La crescita esponenziale del numero di browser e di smartphone ha portato al progressivo abbandono di questo metodo, che consisteva nel creare diverse versioni di un sito per ogni tipo di browser.

Di fronte a queste nuove sfide sono nati approcci innovativi, come la graceful degradation che si è naturalmente imposta per rendere flessibili i siti Internet inizialmente non progettati in una prospettiva multipiattaforma.

Responsive Web Design OVH

La graceful degradation è indubbiamente uno dei primi approcci di Web adattivo che merita di essere riconosciuto come tale. È un metodo ancora oggi molto utilizzato, nonostante sia in totale disaccordo con le aspettative degli utenti. In pratica, si tratta di un metodo "correttivo" privilegiato dai team creativi che non sono a proprio agio con i cambiamenti portati dai nuovi utilizzi.

Al giorno d'oggi, infatti, più di un visitatore su due naviga dal suo smartphone, e questa tendenza è in aumento in tutto il mondo. In ambito e-commerce, dal 30% al 35% dei clienti acquista da un dispositivo mobile. Alla luce di queste cifre, non è più possibile prescindere dall'approccio mobile friendly nella progettazione di ogni sito Internet.

Questa pratica è diventata assurda, perché sono necessarie molte risorse per "decostruire" il sito e adattarlo ai diversi dispositivi.

Il miglioramento progressivo

La nascita di un sito o di un'applicazione online, di tipo adattivo o no, è necessariamente il risultato di un processo preliminare di studio. Senza dubbio è in questo settore che il contributo dell'approccio RWD è più significativo.

Il miglioramento progressivo è una seconda scuola che ha letteralmente rivoluzionato la progettazione, ben oltre il Web applicativo. In questo caso, si tratta di pensare al sito Web o all'app come stretta combinazione di contenuto e componenti strutturali:

1. le informazioni primarie(1)
2. la struttura delle pagine
3. la navigazione

Al contrario della graceful degradation, è a partire da questi tre elementi che vengono concepiti i template, innanzi tutto per siti mobile. In seguito l'interfaccia viene migliorata e arricchita progressivamente aggiungendo elementi, in modo da ottimizzare le caratteristiche anche con schermi di risoluzioni superiori.

Sfruttando lo spazio aggiuntivo, è possibile anche utilizzare i sensori installati sui dispositivi mobili. Ad esempio, nel campo della cartografia interattiva, i punti di interesse geografico vengono visualizzati direttamente nell’app predefinita presente sul dispositivo, invece che nella pagina del sito Internet aperto sul browser.

Quando si prova ad applicarlo per la prima volta questo metodo è molto destabilizzante, ma permette di focalizzarsi sulla qualità dell'user experience concentrando gli sforzi sull'informazione diffusa, sulla struttura e sulla navigazione.

Da questo punto di vista, il miglioramento progressivo ha più punti in comune con un approccio editoriale che con un processo strettamente tecnico.

Come strutturare (bene) un sito RWD?

La definizione del minimo comune denominatore
Spesso, quando un sito è concepito in fretta, non è raro piccole imperfezioni. L'homepage è perfettamente RWD ma, ad esempio, la pagina successiva non è più responsive.

Esiste un metodo molto semplice per rimediare a questo genere di problema. Viene insegnato anche a scuola: basta applicare il principio del minimo comune denominatore.

Prima di concentrarci sui template del sito, pensiamo a progettare un’arborescenza adeguata.

Questa rappresentazione permette di distinguere facilmente le famiglie di template e la navigazione associata.

Testiamo, testiamo e ritestiamo!

Dal momento che l'RWD è ormai una caratteristica fondamentale di ogni sito Web, i principali browser rispondono alle necessità degli sviluppatori front-end proponendo funzionalità che consentono di testare siti su più piattaforme(2).

La visualizzazione adattiva ad esempio di Firefox, disponibile tra gli strumenti di sviluppo preinstallati, permette di visualizzare una pagina HTML su ben 8 schermi di differenti formati e di simulare le reazioni ai tocchi dell'utente su dispositivi "touchscreen".

A un primo impatto, queste funzionalità offrono numerosi servizi e propongono una rapida panoramica dell’integrazione HTML/CSS. Ma bisogna fare attenzione: anche se i simulatori si evolvono, niente può sostituire i test sui dispositivi reali.

Il futuro dell’adattabilità e l’ostacolo inevitabile del Mobile First

Pensare RWD significa garantire che la consultazione di un sito Internet o di un'applicazione sia adeguata, a prescindere dal dispositivo utilizzato.

In base alle nostre esperienze, ci accorgiamo che questa visione orientata principalmente alla tecnologia lascia il posto a un approccio molto più complesso rivolto soprattutto all'utente. Il dispositivo utilizzato non è che una piccola incognita nella complessa equazione dell'ottimizzazione RWD.

La maggior parte degli utenti, oggi, utilizzano più dispositivi nell'arco della stessa giornata. Non è raro iniziare a consultare un'informazione su uno smartphone per poi terminarne la lettura su un tablet, stando comodamente sul proprio divano.

Il futuro dell'adattabilità passa inevitabilmente da un'analisi sempre più precisa degli usi degli utenti e dei dati che producono. Pensare Mobile First non è quindi fine a sé stesso: è sufficiente osservare la diffusione degli smartwatch e dell’IoT per convincersene.

Note:
(1) Le informazioni primarie sono costituite da contenuti editoriali e servizi online.
(2) In questo caso, intendiamo come piattaforma la combinazione di: ambiente di sviluppo, browser e visualizzazione.