Come affrontiamo questo cambiamento gigantesco nel comportamento degli utenti? Siamo passati dall’era degli hack m-dot o t-dot, in una in cui le tecniche di design responsive e adattive dominano il mercato: ciò che il W3C chiama un approccio One Web. La parte fondamentale della raccomandazione W3C è che “One Web significa rendere, per quanto possibile, le stesse informazioni e servizi disponibili per gli utenti indipendentemente dal dispositivo che stiano utilizzando.”

Per uno sviluppatore l’adozione di un approccio One Web significa non solo garantire che il sito funzioni sugli smartphone e tablet, ma che possa essere a prova di futuro per gli schermi inimmaginabili di domani.

Attualmente ci sono tre approcci più importanti applicabili allo sviluppo di un sito One Web: il design responsivo; design adattivo lato client; e design adattivo lato server.

Uno non è migliore o peggiore dell’altro; ognuno ha i suoi punti di forza e punti deboli, e come sviluppatori web dovete prendere in considerazione i vantaggi e gli svantaggi di ciascuno prima di scegliere quello che si adatterà meglio al vostro prossimo progetto.

Design Web Responsivo

Il web design responsivo è l’approccio One Web più comune. 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.

Un vantaggio chiave di questo metodo è che i designer possano utilizzare un modello unico per tutti i dispositivi e utilizzare semplicemente i CSS per determinare come viene eseguito il rendering per adattarsi alle diverse dimensioni dello schermo. Inoltre, esiste un numero crescente di strumenti open source e responsive come Bootstrap o Foundation che aiutano a semplificare il processo di creazione di siti responsive.

Le fasi di progettazione e test possono essere abbastanza complicate, in quanto può essere difficile personalizzare l’esperienza utente per ogni possibile dispositivo o contesto. Tutti abbiamo presenti i layout di siti responsive che assomigliano a pezzi di puzzle che non si incastrano insieme. 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 di tablet e desktop.

I numeri sono così alti perché un approccio responsive copre tutti i dispositivi. L’utente utilizza solo un dispositivo, ma deve attendere il caricamento di tutti gli elementi e risorse della pagina prima di poterla utilizzare. Sugli smartphone, il tasso di conversione si riduce di un 3,5% quando gli utenti devono aspettare anche solo un secondo in più. Con un lasso di tempo di tre secondi, il 57% degli utenti abbandonerà il sito.

Sebbene il design responsive stia diventando rapidamente lo standard de facto, crea anche nuove sfide per le aziende, tra cui come gestire le immagini, come ottimizzare le prestazioni mobile, aspetti questi, che spesso obbligano i sviluppatori a ricostruire i siti da zero.

Adattivo lato client

Il design adattivo si basa sui principi del design responsive per offrire un’esperienza utente mirata a dispositivi e contesti specifici. Utilizza JavaScript per arricchire i siti web con funzionalità e personalizzazioni avanzate. Ad esempio, i siti web adattivi offrono immagini di qualità Retina solo ai display Retina mentre i display a definizione standard ricevono immagini di qualità inferiore.

Esistono due approcci alla progettazione adattiva: uno in cui gli adattamenti si verificano sul lato client, nel browser dell’utente e un altro in cui il server svolge un ruolo importante nel rilevamento di vari dispositivi e nel caricamento del modello corretto. Esempi di siti adattivi lato client includono Threadless e Ideeli. Uno dei punti di forza di questo approccio adattivo è la possibilità di riutilizzare un set di HTML e JavaScript tra i dispositivi, semplificando la gestione delle modifiche e il testing.

Un approccio adattivo lato client significa che non dovete ricostruire il sito da zero. Potete invece creare su contenuti esistenti continuando a fornire un layout responsive per i dispositivi mobile. Per gli sviluppatori esperti, questo approccio consente anche di indirizzare in modo specifico determinati dispositivi o risoluzioni dello schermo. Ad esempio, per un’azienda che riceve la maggior parte del traffico mobile dagli iPhone, adattivo lato client significa che possono ottimizzare il sito specificamente per gli Smartphone Apple.

A differenza della progettazione responsive, i design adattivi garantiscono che solo le risorse richieste siano caricate dal dispositivo del cliente. Poiché il rilevamento di dispositivi e le funzionalità vengono spostate sul dispositivo mobile stesso, le reti CDN come Akamai e Edgecast possono utilizzare la maggior parte delle funzionalità di memorizzazione nella cache senza interrompere l’esperienza utente.

L’approccio adattativo lato client ha una barriera più alta rispetto al design responsive. Gli sviluppatori devono avere una solida conoscenza del linguaggio JavaScript per utilizzare questa tecnica.

Adattivo lato server

Siamo in grado di raggiungere l’approccio adattivo lato server in una varietà di modi, tramite il plug-in lato server e il rilevamento di user-agent personalizzati. I siti che sono adattivi lato server includono Etsy, One Kings Lane e OnlineShoes.com.

Perché scegliere un approccio adattivo lato server? In genere 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. Inoltre, sono disponibili numerosi plug-in lato server per i comuni sistemi CMS e di e-commerce come Magento.

Certo, molte aziende stanno ancora scoprendo le basi del design responsive e non sono pronte a confrontarsi con i gusti più sofisticati dell’adattamento. Sempre più spesso, la concorrenza e il traffico mobile guideranno le organizzazioni ad investire su tutti e tre gli approcci e a scegliere quello che funziona meglio per i loro utenti.

Pin It on Pinterest