Quando parliamo di Design Responsivo (o Responsive Design) ci stiamo occupando di una particolare tecnica di Web design per la realizzazione di siti internet.

La responsività si traduce nel modo con il quale le pagine di un sito si adattano automaticamente al supporto: ad ogni schermo la sua visualizzazione!
Il layout strutturale del sito deve adattarsi in maniera funzionale alla tecnologia dalla quale il tuo utente sta navigando, ad esempio:

• desktop del PC con diverse risoluzioni

• tablet

• smartphone

• cellulari di vecchia generazione

• web tv

 

Per evitare quindi che la lettura e l’informazione risultino difficoltose, il Responsive Design è necessario.

 

Programmatori e siti responsive

Compito di un bravo sviluppatore è quindi creare progetti “one-web” in grado di soddisfare le specifiche caratteristiche dei diversi dispositivi, utilizzando un approccio che supporti sia gli utenti desktop che quelli mobile… A prova di futuro per gli schermi di domani.

Un sito responsivo viene quindi costruito con tecniche di progettazione specifiche che permettono un adattamento automatico delle pagine sui diversi schermi dei dispositivi tecnologici, soprattutto mobili. L’approccio utilizza le query multimediali CSS per modificare la presentazione di un sito web in base alle dimensioni di visualizzazione in un dato dispositivo.

Tra le migliorie immediatamente riscontrabili, un sito web responsive riduce le necessità di zoomare le pagine oppure scorrerle in orizzontale per leggere contenuti pensati e progettati per layout desktop (più grande e diversamente navigabile).

Ricordati infatti che la maggior parte degli accessi sul web proviene da dispositivi mobili, risulta quindi fondamentale curare l’esperienza di navigazione dell’utente da cellulari e smartphone.

Visitare un sito responsivo da dispositivi mobili significa: 

• trovare alcuni elementi allineati verticalmente (che sul pc vedresti allineati orizzontalmente)

• non essere costretto a zoomare in continuazione

• poter cliccare su link ben in vista e bottoni sufficientemente grandi

• leggere font chiari, ben spaziati e della dimensione giusta

Un passo indietro: il sito responsivo “ieri“

Non dobbiamo andare indietro di molti anni… Quando si realizzava un sito si creavano due versioni: una versione per il monitor fisso (desktop del PC) ed una versione per lo schermo del cellulare.

Per ottimizzare la fruizione del proprio sito le grandi aziende lavorarono sodo ma con il passare del tempo optarono per una soluzione più snella: realizzare un sito web “adattabile” grazie a dei meccanismi automatizzati.

Oggi non sempre questo approccio risulta funzionale dato che, nel caso di Design Responsivo, il template viene adattato in base alla dimensione del dispositivo senza una vera compressione delle immagini e di conseguenza i tempi di caricamento non ne gioveranno.

Per un programmatore, realizzare un template responsivo significa progettare la grafica e l'interazione utente di differenti layout, in base alle risoluzioni dei display più diffusi di smartphone, PC e tablet.

Poi ci sono le eccezioni!
I dispositivi mobili sono sempre più avanzati ma, caso per caso, bisogna valutare se non convenga seguire “la vecchia scuola” con una realizzazione separata in base al tipo di dispositivo (Design Adattivo), che permetta di realizzare layout per dispositivi specifici e con la tecnologia giusta per offrire agli utenti una piacevole navigazione (personalizzazione e visualizzazione delle funzionalità aggiuntive).

Design Adattivo: le caratteristiche

Entriamo per un attimo nel dettaglio, c’è una differenza tra…

Approccio adattivo lato client: uno dei vantaggi da considerare nella costruzione di un layout adattivo è non dover costruire il sito da zero ma lavorare su contenuti esistenti, fornendo un layout responsive per i dispositivi mobile. Gli sviluppatori esperti riescono così ad indirizzare in modo specifico determinati dispositivi o risoluzioni dello schermo (se hanno una buona conoscenza del linguaggio JavaScript!).

Approccio adattivo lato server: offre modelli distinti per ciascun dispositivo, consentendo una maggiore personalizzazione e mantiene la logica di rilevamento dei dispositivi sul server, consentendo di caricare pagine più piccole (che si caricano più rapidamente). Sono disponibili numerosi plug-in lato server per i comuni sistemi CMS e di e-commerce come Magento.

Non dimentichiamoci però che un sito realizzato ad hoc è visualizzabile e navigabile senza alcun intoppo, indipendentemente dal supporto e senza la necessità di versioni diverse per i vari dispositivi.

Adobe Flash Player: da evitare!

Per avere un sito molto compatibile consiglio di stare alla larga da Adobe Flash Player, un plugin ormai obsoleto:

• non è compatibile con i dispositivi mobili

• rallenta il caricamento delle pagine Web

• consuma tantissima energia

Tieni presente che Chrome, il browser di Google, tende a bloccarne l’esecuzione e avvisa l’utente ogni volta che un sito tenta di usarlo. 

… Credo di averti convinto a non utilizzarlo!

Conclusioni e consigli

Data l’impennata della navigazione Internet da dispositivi mobili, il sito web della tua attività deve necessariamente adattarsi a questo tipo di device.

Ci sono diverse strade da percorrere e da sviluppatore ti consiglio di basarti su quello che hai attualmente tra le mani: il tuo sito è già attivo e funzionante? Oppure stai pensando di crearne uno nuovo?

Il web design responsive funziona al meglio in combinazione con un approccio mobile-first, in cui l’uso dei dispositivi mobile ha la priorità in fase di sviluppo. Il miglioramento progressivo viene quindi utilizzato per affrontare i casi di utilizzo da tablet e desktop.

A seconda delle situazioni, si può valutare l’alternativa di un Design Adattivo.

Se devi realizzare un sito da zero il mio consiglio è indirizzarti verso un Design Responsivo dato che la tendenza è quella di fruire del web in qualsiasi momento e con schermi sempre diversi, vista anche la continua evoluzione dei modelli di smartphone disponibili sul mercato.

Se invece, per vedere il tuo sito da smartphone, è necessario zoomare o scorrere è arrivato il momento di aggiornarlo o sostituirlo con uno nuovo.