PROGRAMMIAMO
Html - I principi del responsive design
Responsive Design

Con Responsive Design (tradotto talvolta con Design Responsivo) si intende una tecnica di progettazione di siti web in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (monitor PC con diverse risoluzioni, tablet, smartphone, cellulari, tv, etc), riducendo al minimo la necessità dell'utente di ridimensionare e scorrere i contenuti.

Tale problematica può essere ricondotta all'accessibilità, in quanto si tratta appunto di garantire la piena accessibilità del sito a tutti gli utenti, indipendentemente dal dispositivo utilizzato ed ha assunto enorme importanza negli ultimi anni, con la grande diffusione di terminali mobili (tablet e smartphone). Vi sono anche aspetti di usabilità, in quanto un sito progettato secondo le tecniche di Responsive Design può essere usato in modo più efficace su tutti i dispositivi.

Se un sito non viene progettato avendo in mente il Responsive Design, il rischio è che le pagine vengano visualizzate correttamente su uno schermo di grandi dimensioni, ma non sui piccoli schermi o viceversa (richiedendo per esempio lo scrolling orizzontale per poter leggere tutto il contenuto della pagina).

Esempio di Responsive Design

Gli obiettivi del responsive design: di cosa ci si deve occupare

Il responsive design può essere definito più in generale come una serie di tecniche di progettazione, volte ad assicurare il corretto funzionamento e visualizzazione di tutti gli elementi di una pagina su dispositivi differenti. I principali obiettivi del responsive design possono essere così sommariamente elencati:

Come si vede le cose di cui si deve occupare un progettista di responsive design sono davvero molte e in questa sede non potremo che affrontarne solo alcune.

I principi responsive design: come gestire i contenuti della pagina

Il punto di partenza per progettare in modo responsive è mettere al centro del proprio progetto i contenuti della pagina, cioè le informazioni che si vogliono comunicare al visitatore. Questa priorità dei contenuti implica che il layout (la disposizione degli elementi sulla pagina) va pensato solo in un secondo tempo e solo in funzione dei contenuti stessi.

Per ‘contenuti’ non si intendono qui semplicemente i testi, le immagini e gli altri elementi multimediali che costituiscono la base informativa del sito. Sono ‘contenuti’ anche il logo, il menu di navigazione principale, le sezioni secondarie, i moduli per la ricerca sul sito, le inserzioni pubblicitarie, etc.

Le domande pratiche a cui bisogna rispondere sono:

Un buon approccio pratico al problema è cominciare col fare una lista di tutti i contenuti che dovranno essere presentati sulla pagina. Poi si ordina la lista, partendo dagli elementi più importanti fino ai meno importanti. I più importanti dovranno ovviamente essere visualizzati su ogni tipo di terminale, mentre gli altri (quelli meno importanti) potranno anche essere riservati solo agli schermi di dimensioni maggiori.

Date un'occhiata all'immagine in figura:

priorità dei contenuti nel responsive design

Si osservi come passando dal monitor del PC al tablet alcuni contenuti non vengano visualizzati (es. la carta geografica al centro) e altri vengano visualizzati a dimensioni ridotte (es. l'immagine in alto a destra). Anche il layout della pagina cambia e si riduce a solo due colonne. Passando ancora al piccolo schermo dello smartphone, sparisce anche l'immagine di Obama e in contenuti vengono riorganizzati su un'unica colonna.

Nella progettazione di una pagina responsive uno dei principi cardine è partire dal dispositivo mobile (mobile first) ovvero da quello con lo schermo di minori dimensioni.

Secondo questo approccio, non si parte, quindi, da un layout e da un set di funzionalità concepiti per il desktop per poi adattarli per il mobile. Al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci, man mano che insomma aumentano le dimensioni dello schermo (ma anche la potenza dell’hardware).

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it