Le differenze tra Adaptive e Responsive Design

L’utilizzo sempre maggiore di dispositivi mobile e la conseguente necessità di rendere più fruibile la navigazione da tablet e smartphone ha radicalmente cambiato l’approccio nella progettazione delle interfacce web. Se in precedenza il layout e i contenuti di un sito web dovevano rispondere solo alle esigenze della visualizzazione desktop, oggi per restare al passo coi tempi e rendere più efficace la propria presenza online non è più possibile ignorare questa nuova tendenza sempre più diffusa.

Da questo scenario sono nati diversi modi di progettare e realizzare siti webmobile-oriented“.
La logica che c’è dietro ad essi ha come punto in comune quello di pensare ad una struttura che, in base al device utilizzato dall’utente, fornisce la visualizzazione dei contenuti.

Non avere un #SitoResponsive vuol dire anche perdere i propri clienti. Condividi il Tweet

In questo articolo tratteremo nello specifico due tipi di approccio: l’Adaptive Design e il Responsive Design.

L’Adaptive Design si sviluppa creando diversi template con dimensioni fisse, generalmente basati su sei larghezze dello schermo: 320px, 468px, 760px, 960px, 1200px e 1600px. Nel momento in cui un utente si connette al sito viene riconosciuto lato client o lato server il device utilizzato. In base alla risposta sarà visualizzato uno dei template stabiliti. Questo metodo è però poco flessibile dato che è stabilito su una dimensione precisa dello schermo e richiede alti costi aggiornamento.

Il Responsive Design si basa su un unico template fluido e consente di:

– adattare il layout per un gran numero di dispositivi;
– decidere se un contenuto debba essere visibile o meno sui differenti devices;
– adattare le dimensioni delle immagini e video;

e, da non sottovalutare, il Responsive Design ha costi di manutenzione e di aggiornamento ridotti rispetto all’Adaptive Design perché utilizza un layout flessibile.

Ma come funziona il Responsive Design e su quali principi si basa?

Il Responsive Design è costruito sull’utilizzo della CSS mediaqueries. In base alle dimensioni del dispositivo è possibile stabilire il comportamento di ogni elemento.

Di seguito un’immagine che spiega il concetto:

Progettare siti web mobile Responsive design

Con il Responsive Design abbiamo modo di definire secondo le nostre preferenze ed esigenze come disporre i contenuti  per il maggior numero di dispositivi possibili.  Inoltre, il cambiamento avviene anche solo ridimensionando la finestra del browser.

Per la progettazione di siti responsive esistono diversi framework che facilitano, quantomeno per le operazioni “standard”, lo sviluppo di interfacce mobile: Bootstrap, Foundation, Skeleton e molti altri.

Ma di questo parleremo nei prossimi articoli, nei quali analizzeremo i vantaggi di Bootstrap, che viene regolarmente utilizzato da Futuraweb per lo sviluppo dei propri siti responsive.