Design reattivo

Che cos'è il design reattivo?

Prima che il responsive design diventasse una pratica standard, i blogger mantenevano pagine web diverse per le varie piattaforme. Così, un sito poteva avere la homepage della sua versione desktop su tuodominio.com e la homepage della sua versione mobile all'indirizzo m.yourdomain.com.

Tuttavia, con il responsive design, i proprietari dei siti devono gestire un solo sito. Questo sito si adatta automaticamente ai diversi dispositivi e alle diverse dimensioni dello schermo. Questo migliora la esperienza dell'utente per i visitatori e semplifica lo sviluppo e la manutenzione del sito.

Un sito può essere reso reattivo includendo le media query nel suo codice CSS. Ad esempio:

@media screen and (max-width: 768px) {
  corpo {
    font-size: 14px;
  }

  .container {
    larghezza: 90%;
    margin: 0 auto;
  }
}

La media query di cui sopra indica al browser di applicare i seguenti stili CSS quando la larghezza dello schermo del dispositivo di visualizzazione è pari o inferiore a 768 pixel:

• Impostare la dimensione del carattere del corpo a 14px
• Impostare la larghezza del contenitore a 90% 
• Impostare il contenitore in modo che sia centrato orizzontalmente

Importanza del design reattivo

Prima che il responsive design diventasse uno standard, blogger e sviluppatori creavano versioni separate dei loro siti web per i vari dispositivi. Era quindi comune che i siti avessero versioni diverse per i loro dispositivi. utenti di desktop, tablet e cellulari.

Alcuni siti si sono spinti oltre creando versioni diverse per le diverse risoluzioni dello schermo. MAlcuni siti avevano addirittura versioni diverse per i dispositivi più diffusi del momento. Ad esempio, alcuni siti avevano versioni diverse per gli utenti iPhone, Blackberry e Samsung. 

Ciò complicava lo sviluppo del web, poiché questi siti e versioni erano gestiti separatamente. È stato insostenibile all'epoca, e sarebbe peggiorato oggi con l'aumento del numero di dispositivi e delle dimensioni degli schermi. 

Questo è stato il momento in cui i blogger sono passati al responsive design. Invece di creare versioni o siti diversi per pubblici diversi, i blogger hanno creato un unico sito web che si adatta al dispositivo del visitatore. 

Questo migliora l'esperienza d'uso dei visitatori, che possono accedere al sito indipendentemente dal loro dispositivo. Ne beneficiano anche i blogger che devono mantenere e ottimizzare una sola versione del loro sito invece di creare e gestire più siti e versioni. 

Il design reattivo è ancora più critico in quest'era di indicizzazione mobile-first, dove i motori di ricerca considerano la versione mobile la versione principale del sito e, di conseguenza, le attribuiscono maggiore importanza e la scansionano più spesso. 

Google considera anche la mobile friendliness un fattore di ranking. Ciò significa che i siti che offrono agli utenti mobili una scarsa esperienza d'uso incontreranno problemi di posizionamento su pagine dei risultati di ricerca. 

Principi del design reattivo

Il design reattivo si basa su diversi principi fondamentali, tra cui:

• Griglie fluide
• Query multimediali
• Immagini flessibili
• Tipografia reattiva
• Approccio mobile-first

Questi principi rendono i siti reattivi e garantiscono un buon funzionamento su tutte le dimensioni dello schermo e su tutti i dispositivi.

1 Griglie fluide

Un sistema a griglia fluido definisce la larghezza del layout utilizzando unità relative come le percentuali, anziché unità fisse come i pixel. Questo permette agli elementi della pagina di scalare in base alle dimensioni dello schermo. Ad esempio, un contenitore impostato su una larghezza di 80% si ridimensiona automaticamente per adattarsi a 80% dello schermo. 

2 Query multimediali

Le media query sono regole CSS che fanno sì che gli elementi di un sito cambino in base alle dimensioni o alle caratteristiche dello schermo del dispositivo. Queste query specificano tipicamente i punti di rottura, ovvero le larghezze dello schermo in cui il sito cambierebbe il suo layout. 

Ad esempio, una regola CSS come @media (max-width: 768px) può far sì che la barra di navigazione di un sito passi da una barra orizzontale a un menu pieghevole quando viene visualizzata da un dispositivo di dimensioni non superiori a 768 pixel.

3 Immagini flessibili

Le immagini flessibili aumentano o riducono le loro dimensioni per adattarsi ai loro contenitori. Senza questa flessibilità, queste immagini traboccano e possono essere visualizzate solo con una barra di scorrimento.

Se non c'è una barra di scorrimento, il visitatore noterà l'overflow ma non potrà visualizzare la parte dell'immagine che deborda, a meno che non abbia un dispositivo più grande. Le immagini flessibili sono specificate utilizzando regole CSS come larghezza massima: 100%.

4 Tipografia reattiva

La tipografia reattiva è la pratica di ridimensionare le dimensioni del testo in base alle dimensioni dello schermo. Questo si ottiene spesso con unità relative come em, rem, o con funzioni dinamiche come clamp(). In questo modo il testo rimane leggibile indipendentemente dalle dimensioni dello schermo.

5 Approccio Mobile-First

L'approccio mobile-first è una tecnica di sviluppo di siti web in cui gli sviluppatori progettano i loro siti per schermi più piccoli prima di scalarli su schermi più grandi. In questo modo si dà priorità allo sviluppo di siti web per gli utenti mobili, che oggi costituiscono la maggioranza degli utenti del web.

6 Priorità ai contenuti

La prioritizzazione dei contenuti è la pratica di decidere gli elementi più essenziali della pagina web da visualizzare per gli utenti mobili. È essenziale che gli utenti mobili vedano per primi i contenuti di maggior valore. Pertanto, blogger e sviluppatori identificano i contenuti più importanti e si assicurano che siano disponibili per gli utenti mobili. 

Ad esempio, un sito web di notizie potrebbe dare la priorità alla visualizzazione di titoli e brevi sommari per gli utenti mobili, spingendo invece i contenuti meno essenziali, come le pubblicità o gli articoli estesi, più in basso nella pagina o nascondendoli dietro sezioni espandibili. 

Tuttavia, lo stesso sito può visualizzare riepiloghi più estesi e persino annunci laterali per gli utenti desktop con schermi più grandi.