0

Web design reattivo vs web design adattivo

Forse non lo sapete, ma “web design adattivo” e “web design reattivo” sono dei termini importanti nell’industria dei social media. Ma cosa significano? Tuttavia, come designer,  la comprensione di tali concetti è molto importante per evitare problemi di progettazione nei nostri lavori, soprattutto per chi è un freelance.

Il web design reattivo

Nel mese di maggio 2010, il designer e sviluppatore Ethan Marcotte coniò per primo il termine di “web design reattivo” o flessibile, tramite un suo articolo scritto per la rivista “A List Apart“. In questo articolo, egli partì da un assioma: la grande potenzialità del media web è basata sulla sua fluidità, ovvero il suo essere versatile ed adattabile…..anche se per molto tempo la prassi di costruzione degli spazi web dedicati lo hanno imbrigliato in pagine a dimensione fissa. Ciò è accaduto perché, soprattutto agli inizi, lo scopo era quello di ottenere lo stesso totale e maniacale controllo che si aveva sulla carta stampata. Con la diffusione di molteplici dispositivi di fruizione, però, si ebbe la necessità di liberare una pagina web da quella rigidità progettuale nella quale per tanto tempo la si è forzatamente costretta. Un primo passo in questa direzione può essere fatto promuovendo l’utilizzo delle cosiddette Griglie Fluide. Il Web Design ha sempre lavorato su uno spazio virtuale disegnando strutture, fruibili da diversi utenti, con soluzioni e strumenti variegati. Il sito web è o dovrebbe essere, aggiornato e soggetto a restyling, se non a vere e proprie riprogettazioni, abbastanza frequentemente.

Il Web può essere considerato un media flessibile per natura e sono diverse le variabili che ne sottolineano la poliedricità, ovvero:

  • la moltitudine di schermi che sono oggi disponibili;
  • tutti i diversi sistemi operativi presenti sul mercato (desktop e mobile);
  • numero sempre crescente di dispositivi di connessione;
  • diverse velocità di banda disponibili (ADSL, 3G, UTMS, …)

Il crescente sviluppo ed utilizzi di dispositivi mobile ha catalizzato queste esigenze in modo esponenziale. Per questo motivo, le aziende di oggi, hanno la necessità di realizzare una versione del proprio sito web adatta per device mobile.

Quindi Marcotte, per far comprendere meglio il concetto di immagini scalabili e di griglia fluida (struttura che si adatta, modificandosi, alla dimensione della finestra di visualizzazione), ha creato un progetto di un e-zine immaginario. Infatti, se proviamo a ridimensionare una finestra simulando le dimensioni schermo di un tablet o di uno smartphone, vedremo come, al restringersi della finestra di visualizzazione, cambi la disposizione dei testi (originariamente su 2 colonne) e delle immagini. Anche un Design Flessibile può essere soggetto ai cosiddetti punti di rottura, nei quali l’immagine o i contenuti risultano tagliati.

ethan marcotte

Questo è uno screenshot dell’esempio creato da Ethan Marcotte per individuare i punti di rottura nel ridimensionamento delle immagini.

Inoltre, la flessibilità delle immagini e delle griglie possono essere facilitate dalle media queries (che furono introdotte la prima volta nei fogli di stile CSS3), il terzo ingrediente fondamentale del web design reattivo. Grazie ad esse le immagini e i contenuti diventano completamente “reattive” al tipo di dispositivo dal quale sono visualizzate (smartphone, tablet, ….), perché consentono di associare un diverso foglio di stile CSS in quei “punti di rottura” ed adattare i contenuti in modo più fruibile per le nuove dimensioni. Il motto di Marcotte diventò: “Adapt, respond, and overcome“, ovvero adattarsi, reagire e risolvere, con soluzione tecniche raffinate e progettate per rispondere alle diverse esigenze di navigazione nelle loro complessità attuali e, per quanto possibile, future. Quindi, con questa nuova soluzione, il design diventa perfettamente in linea con le esigenze dei display più ridotti, anche con diverso orientamento (come quello dell’iPhone!). Provate a ridimensionare la finestra del vostro browser con questa nuova soluzione e vi accorgerete immediatamente della differenza!

Il web design adattivo

Un “web design adattivo” non è limitato all’avere un layout fluido. E questo è un bene, perché il web è saturo di milioni buoni di siti web e, per gli sviluppatori web che li gestiscono, sarebbe una tragedia il dover iniziare da zero per ricostruire il mark-up, CSS, ecc. In tali casi, il design adattivo si rivela essere una soluzione più pragmatica, rapida ed economica rispetto a quello reattivo. Il web design adattivo si propone di lasciare l’attuale design creato per schermi desktop ed adattarlo semplicemente ai diversi contesti in cui verrà applicato. In pratica, il design adattivo mira a migliorare l’esperienza utente per il pubblico più ampio possibile. Il designer Aaron Gustafson arriva a questa conclusione nel suo libro, “Web Design Adaptive“, il che spiega l’approccio filosofico al web design conosciuto come progressive enhancement. Il libro comprende anche un metodo pratico per l’applicazione di questo approccio in CSS, JavaScript ed HTML.

Tutto sommato, quello che personalmente ho capito di questo concetto è che il design adattivo riguarda l’adattamento controllato o di un approccio meno fluido all’adattare dei progetti web esistenti rispetto al design fluido e flessibile del web design reattivo.

Condividi suShare on Facebook0Tweet about this on TwitterShare on Google+0Share on Reddit0

Michele D'Ippolito

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


*