Responsive Versus Adaptive Design: come scegliere tra i due?

Il responsive design viene sempre più promosso come lo standard aureo per la creazione della nuova gamma di applicazioni web. Tuttavia, a causa delle complicazioni derivanti dall'utilizzo dello stesso codice in ogni versione del sito Web, un'alternativa alla tecnologia RWD nota come consegna o design adattivo è ciò a cui i marchi si rivolgono in questi giorni. Come sceglieresti tra i due? Questo articolo è più o meno lo stesso.

Il responsive web design non è più una novità. La confraternita dei web designer, la comunità tecnologica e persino il maniaco del web confessato medio ora sa che il responsive design è la via da seguire. Lo smartphone, il dispositivo rivoluzionario ha davvero costretto i web designer a creare siti Web in grado di rispondere e adattarsi automaticamente a qualsiasi dispositivo con qualsiasi dimensione dello schermo e quindi è nato il responsive web design. Con le tecniche di RWD il layout del sito può essere ottimizzato per adattarsi alle dimensioni dello schermo del dispositivo su cui viene visualizzato. Allora da dove viene il discorso sul design adattivo?

Per chi non lo sapesse entrambe le parole d'ordine potrebbero sembrare termini intercambiabili per la stessa tecnica. Tuttavia, poiché sempre più traffico proviene dai dispositivi mobili, è diventato sempre più importante per gli editori conoscere le distinzioni tra i due e scegliere il meglio per il proprio sito. Inoltre, un sondaggio Millenial Media e comScore condotto negli Stati Uniti rivela che il 56% dei contenuti online viene ora consumato tramite smartphone e tablet mentre il restante 44% viene consumato tramite computer desktop. E il cambiamento continua ad accelerare. In questo modo si stabilisce una volta per tutte l'importanza di avere un sito adatto al pubblico mobile. Ora tornando alla domanda: come scegliere tra i due?

Qual è la differenza?

Il modo più semplice per scegliere un'opzione tra le due è comprendere le differenze ei vantaggi che una offre rispetto all'altra.

Mentre il design reattivo è un approccio lato client in cui l'intera pagina viene consegnata al client (browser del dispositivo), il design adattivo è generalmente lato server, in cui il server rileva prima gli attributi del dispositivo in genere tramite plug-in lato server o utente personalizzato agent detection, quindi carica una versione del sito ottimizzata per le sue dimensioni e caratteristiche native. Pertanto la consegna adattiva utilizza layout predefiniti che sono stati creati per una varietà di dimensioni dello schermo. Quando viene rilevata una particolare dimensione dello schermo, il layout corrispondente viene attivato e abbinato al foglio di stile. Nella progettazione adattiva i layout cambiano in base ai punti di interruzione.

Esiste anche un'altra alternativa, un approccio adattivo lato client in cui viene utilizzato JavaScript esteso per dotare i siti Web di funzionalità avanzate e personalizzazione. Un po' simile al responsive web design, questo tipo di consegna funziona sul lato client o nel browser dell'utente, che rileva diversi dispositivi e carica il modello corrispondente per l'utente. Il vantaggio qui è che richiede solo un set di HTML e JavaScript da utilizzare su tutti i dispositivi, in modo che l'implementazione delle modifiche sia molto più semplice.

Responsive vs Adaptive: quale scegliere?

Uno dei grandi vantaggi del design reattivo che lo ha spinto alla celebrità istantanea è stato che una singola base di codice funzionava bene sia per l'utente desktop che per quello mobile. Ciò ha semplificato la vita di uno sviluppatore in quanto ha quasi eliminato l'esperienza da incubo di dover occuparsi di più versioni del codice per diversi tipi di dispositivi. Tuttavia, lo stesso codice per entrambi i dispositivi significa che il sito Web lanciato sullo smartphone avrà le stesse dimensioni e complessità della versione desktop, che è il principale colpevole dietro i siti Web reattivi che si comportano in modo strano e gonfio sui dispositivi mobili.

Utilizzando invece un approccio adattivo, un server ha la libertà di scegliere come rendere in modo ottimale le pagine, rimuovendo o aggiungendo funzionalità al volo, sulla base del dispositivo rilevato e delle informazioni dell'utente.

I vantaggi possono essere così riassunti:

• Gli sviluppatori non dovrebbero ricreare il sito Web da zero come si dovrebbe fare durante la ricerca di un sito reattivo. La maggior parte dei siti Web diventa troppo complessa nel tempo, con una funzionalità aggiunta sopra l'altra e grattare tutto lo sforzo non è un'opzione praticabile. La fase di progettazione e test è particolarmente pignola in quanto è difficile personalizzare l'esperienza utente per ogni dispositivo o contesto.
• I siti Web adattivi sono più veloci e talvolta più intuitivi. Il motivo è abbastanza semplice. Poiché la consegna adattiva funziona trasferendo solo le risorse specifiche del dispositivo, le immagini e i contenuti multimediali possono essere ottimizzati al volo per adattarsi alla risoluzione e alle dimensioni del display.

L'adattivo lato server offre modelli distinti per ogni dispositivo, consentendo un maggiore livello di personalizzazione insieme a un caricamento più rapido delle pagine web. Inoltre, è compatibile con diversi plug-in lato server disponibili per i più diffusi sistemi di gestione dei contenuti e sistemi di e-commerce come Magento. Tuttavia, questo approccio richiede notevoli modifiche ai sistemi di back-end e, se hai un budget limitato, potrebbe rivelarsi un po' doloroso. Ti verrà richiesto di gestire più modelli che si mostreranno come un aumento del costo di manutenzione. Problemi di prestazioni possono sorgere anche quando i server sono sottoposti a un carico pesante.

Linea di fondo

I siti Web ricchi di contenuti in cui non c'è molta differenza nell'intenzione dell'utente tra utenti desktop e mobili generalmente scelgono il design reattivo. Tuttavia, se stai progettando un sito Web in cui l'intento dell'utente mobile è significativamente diverso dal tuo pubblico di destinazione desktop, il design adattivo sarà una scommessa migliore. L'esempio sono i siti di e-commerce.

Inoltre, se un webmaster sceglie il design adattivo, può ottimizzare ulteriormente l'esperienza dell'utente sfruttando le funzionalità extra offerte da questi dispositivi, ad esempio la posizione. Questo è esattamente il motivo per cui l'82% dei 100 migliori siti globali di Alexa utilizza una sorta di rilevamento lato server per servire i contenuti.

Per la maggior parte delle organizzazioni, l'utilizzo del design reattivo in combinazione con la consegna adattiva funziona bene. La parte ricca di contenuti del sito utilizza un approccio reattivo che consente ai lettori di consumare il contenuto in modo soddisfacente indipendentemente dal dispositivo su cui si trovano. D'altra parte, parti del sito ad alto intento funzionano bene attraverso la consegna adattiva. La chiave è trovare un equilibrio tra servire gli utenti e raggiungere l'obiettivo aziendale.

Il web design è una delle competenze più calde sul mercato da avere in questo momento. Secondo i dati sull'occupazione offerti dal Bureau of Labor Statistics, le prospettive di lavoro per gli sviluppatori web sono al 20%, che è più veloce della media. Il rapporto Best Jobs 2014 di USNews colloca i lavori di web design tra le prime tre carriere tecnologiche. Pertanto, per un aspirante web designer conoscere le sfumature del design come spiegato sopra può essere molto fruttuoso.