Blog

Responsive Web Design

Lunedì, 25 Febbraio 2013 Scritto da 
Responsive Web Design

 La diffusione dirompente che oggi hanno dispostivi come smartphone o tablet ha reso necessario lo sviluppo di una nuova strategia di progettazione delle applicazioni web che vengono fruite attraverso una molteplicità di canali i quali forniscono servizi differenti in relazione al dispositivo che si utilizza per interagire con esse.

E' impensabile progettare un sito web diverso per ogni dispositivo anche perchè ce ne saranno sempre di nuovi e con caratteristiche diverse e, quindi, si deve trovare una metodologia di sviluppo di tipo adattativo che garantisca interoperabilità e facilità d'utilizzo.

Nasce così il "Responsive web design", ovvero, un'insieme di tecnologie, strumenti ed idee che permettono di adattare e contestualizzare il contenuto di un applicativo in base alla piattaforma di fruizione. Cambia, in altre parole, il modo di progettare un sito web tenendo in maggiore considerazione tutte le molteplici situazioni e device di navigazione.

Per raggiungere questo scopo vengono utilizzate griglie e immagini fluide che adattano automaticamente le proprie dimensioni in relazione a quelle dello schermo su cui sono visualizzate. Le griglie con proporzioni fluide in cui i vari elementi sono dimensionati tramite unità di misura relative come percentuali (calcolate sulla base di proporzioni) ed EM e css3 media queries sono gli strumenti fondamentali per raggiungere questi obbiettivi.

Le media query utilizzano la nota regola css 'media' che viene ampliata nelle sue opzioni. Si utilizzano così diversi stili css che permettono di adattare il layout dell'applicazione all'ambiente in cui viene visualizzato e di mostrare i contenuti disposti in modo tale da essere facilmente consultabili senza agire troppo sulle barre di scorrimento in particolare quella orizzontale. Con la direttiva @media all'interno dei file css3 si indica se quel file deve essere utilizzato per mobile (cellulare), narrow (per tablet), normal (pc desktop), wide (schermi di grandi dimensione) ed in base alla risoluzione, alla dimensione e alle funzionalità dell'user agent utilizzato scegliere tanti tipi di layout differenti ed appropriati.

Tecniche di browser detection, device detection e librerie Javascript determinano la tipologia di browser e di dispositivo e applicano le direttive precedentemente predisposte dal web design. In questo modo si riesce a fornire all'utente finale un'interazione efficace e si risponde con puntualità alle sue aspettative.

 

Ultimi articoli

Seguici sui nostri social network

Close