Design Sensibile

Come risposta ai problemi associati all'approccio per siti separati nel campo del Web design per mobile e desktop, un'idea relativamente nuova (che è abbastanza datata) sta aumentando la sua popolarità: evitare il rilevamento user-agent, e creare invece una pagina che risponda client-side alle capacità del browser. Questo approccio, introdotto da Ethan Marcotte nel suo articolo dal titolo A List Apart, è oggi conosciuto come Web Design Sensibile. Come l'approccio a siti separati, il Web Design sensibile possiede aspetti positivi e negativi.

Aspetti Positivi

Sebbene non fosse inizialmente pensato come un metodo per creare siti per dispositivi mobili, il design sensibile ha recentemente ricevuto un sacco di attenzione come metodo per muovere i primi passi verso la mobile-friendliness al posto di creare siti separati.

1. Fa risparmiare tempo e denaro dato che non vi è la necessità di mantenere più siti separati per diversi dispositivi.
2. Il Design Sensibile fornisce ogni pagina con un singolo e unico URL.
3. Le statistiche di condivisione Social (Mi piace di Facebook, Tweets, +1 su Google plus) non sono divise, dato che le versioni mobile e desktop delle vostre pagine web utilizzano un singolo e unico URL.
4. Il Design Sensibile non si cura degli user agent.

Ci sono degli aspetti decisamente buoni in questo approccio. Dato che non si appoggia al rilevamento degli user-agent, è più affidabile e a prova di aggiornamenti dell'approccio a siti separati. Per siti semplici, può essere significativamente più facile da realizzare e mantenere di altre opzioni.

Aspetti Negativi

Questo approccio non è privo di limitazioni. Dato che il contenuto può venire alterato client-side con JavaScript, solo cambiamenti minimali in esso sono consigliati. In genere, le cose possono diventare molto complicate molto in fretta se state provando a codificare due set separati di JavaScript per lavorare sullo stesso DOM. Questa è la ragione principale per la quale le applicazioni Web tendono a non adottare questa soluzione.

Dando al vostro sito un design sensibile implica anche il riscrivere gli stili se non avete realizzato già un layout flessibile. Questo potrebbe essere anche un vantaggio mascherato: creare un design sensibile per il vostro sito potrebbe essere una buona opportunità per modernizzarne e pulirne i fogli di stile.

Infine, dato che state aggiungendo codice ai vostri script e fogli di stile, le performance potrebbero peggiorare molto di più che con l'approccio a Siti Separati. Non c'è nessun modo per evitare ciò, anche se una riproduzione meditata dei vostri script e fogli di stile potrebbe salvare qualche byte nel lungo periodo.

Quando è bene scegliere questa opzione

Come già detto, dato il cambiamento dei contenuti potrebbe essere difficile, utilizzando questo approccio, far vivere agli utenti un'esperienza significativamente diversa agli utenti mobili senza rendere il codice più complesso. Detto ciò, se le versioni desktop e mobile del vostro sito sono molto simili, allora questo approccio è una buona scelta. Va bene per siti il cui nucleo è formato da documenti la cui prima funzione è consistente attraverso i dispositivi, come le pagine di prodotto. Come potete notare gli esempi sottostanti sono tutti blog e portfolio!

Esempi

Anche se non è popolare come l'approccio a siti separati, ci sono sempre più siti web che utilizzano questa tecnica ogni giorno. Fortunatamente, dato che il codice è tutto client-side, se volete vedere come funziona tecnicamente un sito che utilizza questo approccio, vi basterà visitarne uno e cliccare su "Visualizza il Sorgente Pagina". Quì di seguito riportiamo alcuni esempi:

• https://teixido.co/ – uno dei miei design sensibili preferiti, inserito anche in alcune immagini sottostanti!
• https://adactio.com/journal/1696 – contiene anche un buon articolo da leggere, con i propri esempi.
• https://thinkvitamin.com/
• https://stephencaver.com/
• https://hicksdesign.co.uk/

Malgrado sia un approccio relativamente giovane, stanno già emergendo delle pratiche migliori. Per esempio, se state progettando un sito da una bozza con questa opzione in mente, è solitamente utile creare un design per piccoli schermi prima, in maniera da avere chiari i vincoli del mobile fin dall'inizio. Altresì valido è l'utilizzo del miglioramento progressivo per i vostri fogli di stile invece di nascondere elementi del vostro sito esistente con delle media query. In questo modo, i vecchi browser che non supportano le media query potranno comunque visualizzare il layout corretto. Una presentazione eccellente sui meriti di questo metodo è disponibile qui.

Approcci per lo sviluppo Web per il mobile

Date un'occhiata agli articoli seguenti per un background e altri approcci per sviluppare piattaforme mobili.

• What is mobile-friendliness?
• Separate sites
• A hybrid approach
• Responsive versus adaptive design

Vedi anche

• Responsive Web design per risorse aggiuntive
• Responsive versus adaptive design