8.8.2012 - Alessandro Trenti

Adaptive web design & responsive layout

Man mano che lo schermo diventa più piccolo , il web design diventa minimale, facendo scomparire gli elementi superflui.
La sempre più crescente popolarità e diffusione di dispositivi mobile ha evidenziato la necessità di adattare i siti web alle diverse risoluzioni degli schermi e browser. Uno dei principali approcci a questo problema è il responsive website con adaptive design.

I siti internet con responsive layout (web design reattivo o sensibile) sono quelli in grado sia di riconoscere l’ambiente e di adattarsi allo schermo in cui vengono riprodotti che di presentare contenuti adatti alle caratteristiche hardware e di connettività del device utilizzato dal visitatore.

Sui desktop o tablet più potenti si sfruttano le capacità multimediali e le potenzialità di html5, css3 e Javascript/JQuery per fornire una ricca esperienza di navigazione mentre sugli smartphone la presentazione del menù di navigazione e dei contenuti è semplificata in modo che il visitatore non sia costretto a scrollare continuamente su un piccolo schermo.

Esempio di responsive layout sviluppato da aaugh – Net Sinergy: http://www.attibassi.it

Un’alternativa al responsive web design (per esempio quando il sito è in flash o la struttura è molto complessa) è quella di reindirizzare ad una apposita versione mobile del sito; questo significa però sviluppare un secondo sito internet semplificato e ottimizzato esclusivamente per smartphone/tablet.

Esempio di sito mobile sviluppato da aaugh – Net Sinergy: http://www.coffeefeeling.it

Un ulteriore approccio “creativo e non convenzionale” su cui stiamo ragionando in aaugh® , il laboratorio di comunicazione creativa di Net Sinergy, è quello di prevedere una versione mobile del sito estremamente essenziale che invita a scaricare un’applicazione o advergame dall’App Store o dal Play Store. Con questo approccio, specialmente su smartphone dove l’utente preferisce utilizzare le applicazioni (su tablet si visualizza la versione desktop leggermente semplificata nelle animazioni), si propone all’utente un’esperienza ancora più adatta e personalizzata per il device che sta utilizzando.

Esempio di advergame sviluppato da aaugh – Net Sinergy: http://itunes.apple.com/it/app/capsman/

Non esiste una soluzione preferibile all’altra, tutti gli approcci devono essere presi in considerazione al momento di decidere quale sia la scelta migliore per un progetto, anche in funzione degli obbiettivi del cliente (evoluzione e manutenzione del sito, SEO search engine optimization, gradimento app., ecc.ecc.) e del budget a disposizione.

LEAVE A MESSAGE