Benvenut* o bentornat* in questa nuova lezione di Web Design!

Oggi voglio parlarti della progettazione responsive di un sito web e del perché è sempre più diffusa e importante.

Il termine responsive significa reattivo/a e nel contesto in questione sta a indicare il comportamento reattivo di una pagina web a un cambiamento. Il cambiamento che scatena la reazione è la lettura del sito da parte di un device diverso rispetto al pc, che potrebbe essere uno smartphone, un tablet o netbook. La reazione riguarda la distribuzione e lo spazio occupato dai contenuti, i quali devono modificarsi per adattarsi alle diverse dimensioni dello schermo.
In parole spicciole, la progettazione responsive si occupa dell'adattabilità di un sito web alla visualizzazione da parte di tutti i dispositivi collegabili al web.

Iniziamo con lo specificare le diverse dimensioni a cui dobbiamo adattare i nostri siti:

- dai 1024 px in su: appartengono a questa fascia i pc e i Mac fissi e portatili.

- 1024 - 768 px: netbook, tablet e iPad disposti orizzontalmente.

- 768 - 320 px: tablet e iPad in verticale e smartphone e iPhone in orizzontale e verticale.

È molto importante prevedere l'utilizzo da parte di tutti i dispositivi in quanto, nel corso dei decenni, i device più piccoli hanno preso il posto dei pc come mezzi per connettersi al web. In particolare, sono i più giovani a beneficiare maggiormente del prezzo e delle dimensioni contenute di smartphone e iPhone, preferendoli di conseguenza.
Il vantaggio principale della progettazione responsive, quindi, è un maggiore afflusso di utenti che si traduce in una migliore SEO e in maggiori possibilità di vendere prodotti e/o di monetizzare attraverso le pubblicità.

Tutto molto bello, penserai, ma come possiamo progettare un sito in maniera tale che sia responsive?
Abbiamo più modi per farlo, ma possiamo riassumere le varie possibilità in due fasi:

1 - progettazione visiva: come nella lezione precedente, dovremo prima pensare a come vogliamo rendere i vari elementi da un punto di vista visivo e mettere su carta il nostro piano.

2 - codifica o acquisto: tradurre il progetto in un codice da scrivere da noi o nell'acquisto di un plug-in o di un tema adatto (vedi in Glossario il significato di plug-in).

Se la mia spiegazione non dovesse esserti chiara non è un problema, perché l'ultimo punto ha a che vedere con il processo di codifica e con i CMS (Content management system), argomenti che affronteremo più avanti.

Ecco una breve lista di consigli e pratiche per la progettazione responsive:

- design per fasce: non puoi progettare un sito adattandolo ad ogni singolo dispositivo, quindi pensalo dedicato alle tre tipologie di cui ti ho parlato qui in alto. Ciò significa che tutti i pc e i Mac, qualsiasi sia la dimensione del loro schermo, leggeranno il tuo sito nella stessa maniera. Lo stesso faranno anche i dispositivi della fascia 1024-768px e i device tra i 768 e i 320 px. Facendo così potrai limitarti a progettare soltanto tre design.

- prima per smartphone: per assicurarti il miglior risultato possibile, progetta il tuo sito prima per i device più piccoli in quanto sono i più difficili da concepire. Se partirai dal pc, il quale ti dà molta più libertà di creare e disporre i contenuti come vuoi, ti ritroverai a dover lavorare molto più faticosamente sugli schermi piccoli e potresti persino dover rivedere il progetto originario.

- lasciati ispirare: come sempre, è bene dare una sbirciatina ai lavori già in circolazione. Prendi il tuo pc o il tuo Mac e visita i siti che più ti piacciono modificando la dimensione della finestra della pagina web, così da poter comprendere le soluzioni altrui.

- distribuisci nel menu principale: inserire i contenuti nel menu è di grande aiuto per poterli adattare alle versioni responsive in quanto così facendo potremo racchiudere tutto all'interno del tasto "menu a hamburger". Più avanti ti mostrerò come funziona.

- flexbox: come nel punto precedente, anche qui parliamo di argomenti che rivedremo in un altro tutorial. Ti basti sapere che potrai inserire i tuoi contenuti in contenitori più o meno visibili; questi contenitori saranno "flessibili", ossia si adatteranno al contesto in cui si troveranno organizzando anche gli elementi al loro interno.

- dimensioni personalizzate: le dimensioni di immagini, video, tasti, caratteri dei testi, eccetera, possono essere adattate alla grandezza dello schermo, anche se gli elementi in questione non sono contenuti nei flexbox. Più il device in uso è grande, più l'elemento in questione potrà essere grande. Attenzione però alla leggibilità, non tutti i contenuti si adattano così bene agli zoom in o agli zoom out.


Con questa lista concludo il tutorial; nella prossima lezione ti mostrerò i vari elementi contenuti in un sito web, come poterli progettare e con quali soluzioni renderli responsive.


A presto!