Il design responsive è solo una delle tre possibilità con cui creare un sito ottimizzato per le piattaforme mobile, e non è nemmeno dei migliori. Nell’articolo di oggi esamineremo le differenze tra i tre diversi design evidenziandone vantaggi e svantaggi.

Oggi, quando si parla di web, non si fa altro che pronunciare il termine “responsive”. Ci si riferisce ovviamente alla capacità che hanno i siti web, principalmente quelli che usano il framework Bootstrap, di adattarsi automaticamente alla forma e alla risoluzione del dispositivi dove vengono visualizzati. Minimo sforzo, massima resa. Si tratta quindi veramente della soluzione ideale? Ve lo dico subito: no. Il design responsive ovviamente è un sistema efficace per visualizzare correttamente un sito web su qualsiasi piattaforma, ma non per questo è la scelta ottimale.

Si tratta certamente di un grosso passo in avanti se si pensa che ancora molti siti non prevedono nemmeno questo, ma la soluzione migliore sarebbe un’altra. Precisamente una a scelta tra le altre due soluzioni disponibili: il design Adaptive o il mobile site.

Adaptive Design

Il Design Adaptive è una tecnica tramite la quale il sito non soltanto ridispone i contenuti in funzione dello schermo, ma li modifica. Per esempio può nascondere una sidebar che sullo smartphone non sarebbe utile, oppure mostra un testo più corto e sintetico. Impone quindi uno sforzo in più, quello di ripensare completamente il sito, con dei contenuti specifici, come foto con un soggetto centrato e magari un taglio verticale, che su smartphone è più indicato rispetto al tipico taglio orizzontale necessario per i siti web su computer desktop.

Un esempio? Amazon ovviamente, il cui modello di sviluppo è “mobile first”, ovvero la versione mobile è l’obiettivo principale e non un ripiego. I due siti, desktop e mobile, sono sensibilmente differenti. D’altronde è ovvio: che senso avrebbe replicare su un piccolo schermo la quantità di prodotti mostrati in homepage sul sito desktop?

Sito mobile (o M-site)

L’M-site è un sito diverso da quello desktop e solitamente ha anche un indirizzo differente. Fateci caso, se aprire il sito di Tiscali, verrete reindirizzati verso m.tiscali.it, che è un sito diverso da quello presente su www.tiscali.it. In questo caso la scelta fatta da Tiscali è stata quella di fare due siti completamente differenti. Il che pone sicuramente dei vantaggi, ma anche qualche svantaggio a livello di indicizzazione. Di fatto si tratta di realizzare due siti al posto di uno.

Tra le due possibilità, non sto nemmeno a specificarlo, quella che preferisco è la prima. Depennando completamente il design responsive, che si limita a riposizionare i contenuti sullo schermo, è chiaramente l’adaptive design il più interessante, perché permette di fornire contenuti differenti a seconda della piattaforma, senza essere costretti a fare due siti diversi.

Impone quindi uno sforzo in più, quello di ripensare completamente il sito, con dei contenuti specifici, come foto con un soggetto centrato e magari un taglio verticale

Come si implementa tecnicamente l’Adaptive Design?

Ci sono diverse possibilità. La prima e più semplice consiste nell’operare tramite le media query del CSS. Le media query sono delle istruzioni CSS che riguardano solo certi tipi di dispositivi di cui indicheremo risoluzione e orientamento del display. Così facendo si possono individuare smarpthone o tablet specifici, distinguendo tra orientamento landscape o portrait (orizzontale o verticale). Si può quindi decidere di nascondere su smartphone un blocco o una sidebar, ad esempio, oppure cambiare la dimensione o la forma di un tasto.

Se questo non dovesse bastare e volete cambiare totalmente i contenuti della pagina, allora si può fare in modo di reindirizzare il visitatore su una pagina pensata appositamente per il mobile. Questa però è un’operazione che cambia a seconda della piattaforma che avete scelto per lo sviluppo del sito. Se il sito è fatto in HTML, basterà aggiungere un piccolo script Javascript che riconoscerà l’User Agent del dispositivo con cui si sta navigando e reindirizzerà l’utente verso una pagina differente.

Ora siete ancora sicuri che un sito responsive sia la migliore soluzione possibile?

ASCOLTA IL PODCAST