Perché è indispensabile avere un sito responsive.

Quando un architetto prende in mano la matita e comincia a schizzare il suo progetto, la probabilità che il risultato finale assomigli anche lontanamente al primo abbozzo è dello 0,1 %. Ad essere ottimisti. Ci sono mille variabili che entreranno in gioco durante il processo, e il progettista cambierà idea cento volte. Ma una cosa la sa benissimo dal principio: qualunque sia il risultato finale, una volta costruito l’edificio resterà li, immutabile. Da dovunque lo si guardi e in qualunque momento.

Per il web è tutta un’altra storia. Un sito web, una volta online, può essere modificato continuamente. Ma soprattutto può essere visualizzato decine di dispositivi di dimensioni differenti. Ora magari state leggendo questo articolo dal vostro laptop. Il vostro collega dal suo iPhone. Un altro dal suo tablet. Come adattare il nostro sito a tutti i dispositivi in circolazione?

Qui entra in gioco il Responsive Design.

Che cos’è il Responsive Design

Se prendete la finestra del browser che contiene questo articolo e cominciate a restringerla fino alla dimensione di uno smartphone, notate che il layout si aggiusta da solo. La foto si rimpicciolisce e il menu in alto a destra diventa un menu a tendina. Come vedete anche il nostro blog è responsive!

Il concetto di Responsive Design è stato inventato da Ethan Marcotte, che ha dato il via ad un nuovo modo di progettare siti web. Nel suo articolo illustra i concetti chiave che stanno dietro a questo modo di creare siti web. Non si tratta di un tool magico, ma di una serie di idee chiave che nel loro insieme permette di creare siti responsive.

Ma che cos’è in sostanza il responsive design? In realtà è meglio se riformuliamo la domanda. Che problema risolve il Responsive Design? Come avete notato, non navighiamo in internet solamente attraverso i computer. Steve Jobs è stato uno dei primi che ci ha permesso di navigare attraverso uno smartphone, poi hanno seguito gli altri fino a rendere normale per le persone accedere al web attraverso il cellulare. In risposta a questa tendenza, si è cominciato a creare delle versioni “mobile” dei siti web. Ogni sito aveva quindi sia una versione desktop sia una versione mobile.

 

Ma la tecnologia avanza ad un ritmo irrefrenabile, si sa. Negli ultimi anni sono diventati di uso comune dispositivi come tablet, mini portatili, schermi ad alta risoluzione e smartphone di tutte le dimensioni.

Ora, l’idea di creare una versione di un sito per ogni dispositivo in circolazione non sembra un gran che.

La soluzione sta quindi nel Responsive Design e di seguito vedremo tutte le tecniche che compongono questa soluzione.

Griglie Fluide (Fluid Grids)

Una delle unità di misura più usate per creare un sito web è il pixel. Questo modo di definire una pagina web andava benissimo fino a qualche anno fa, ma con la varietà delle dimensioni dei vari schermi in circolazione, il pixel, che è un’unità fissa, non sembra essere la soluzione giusta. E’ per questo che nel responsive design si usano unità relative come le percentuali.

C’è una semplice formula per trasformare i pixel in percentuali:

target/contesto=risultato

In parole povere, prendiamo un sito che ha un “wrapper” di 960px di larghezza e lo guardiamo attraverso uno schermo di 1920 piixel di larghezza. In questo caso, la larghezza della finestra del browser è il contesto, e la larghezza del wrapper è il target. Applicando la formula si ha:

960px/1920px=50%

La stessa regola si può applicare per tutti gli elementi all’interno del wrapper.

Prendiamo ora un layout formato da 2 colonne dentro la pagina di 960px di larghezza. La colonna a destra, che chiamiamo nav, è larga 300px e la colonna di sinistra, che chiamiamo main content, è larga 640px, con una spazio tra le 2 di 20 px.

Usando la stessa formula, ogni elemento avrà i seguenti valori:

  • Nav: 300px / 960px = 31.25%
  • Main Content: 640px / 960px = 66.66667%
  • Margin: 20px / 960px = 2.08334%

I valori in percentuali vanno poi inseriti in CSS applicandoli alle varie proprietà, ottenendo così degli elementi che si adattano ai veri tipi di schermi.

 Immagini Fluide (Fluid Images)

L’idea di base nelle Fluid Images è che l’immagine all’interno della pagina possa rimpicciolirsi o ingrandirsi adattandosi alla dimensione delle fluid grids che abbiamo visto precedentemente. Per ottenere questo risultato basta scrivere all’interno del file CSS questa riga:

img { max-width: 100%; }

Applicando questa proprietà, siamo sicuri che l’immagine non si ingrandisca all’aumentare della dimensione dello schermo, quindi non si sgrani. Tuttavia se lo schermo si rimpicciolisce l’immagine si rimpicciolirà a sua volta. L’altezza verrà calcolata automaticamente seguendo la proporzione dell’immagine.

Media Queries

Se prendete il layout a 2 colonne che abbiamo visto prima e provate a stringerlo per adattarlo alla dimensione di uno smartphone, il risultato non è dei migliori. Di solito gli smartphone sono più alti che larghi, e questo porta l’utente ad uno scorrimento del sito verso il basso. Non l’ideale per sito con layout a più colonne. Come risolvere il problema? Qui entrano in gioco i media queries. I media queries sono una tecnologia di CSS fondamentale per il responsive design e sviluppata ormai da qualche anno, che permette ad un codice CSS di entrare in azione solamente in determinate condizioni. Ad esempio, possiamo scrivere una media query che applica il codice CSS solamente quando il browser raggiunge una larghezza specifica. Se quindi si raggiunge una certa larghezza, ad esempio come quella di uno smartphone, entra in azione un diverso codice CSS che riorganizza il layout del sito.

Prendiamo l’esempio della pagina con il layout a due colonne. Per rendere migliore la lettura su un cellulare, vogliamo che il nav stia in alto e il main content in basso. La media query che scriveremo sarà una cosa del genere:

@media screen and (min-width: 600px) { /* …desktop styles here… */ }

Se quindi abbiamo il layout a due colonne quando apriamo il browser su un desktop, se restringiamo la finestra fino a raggiungere il “breakpoint” di 600px di larghezza vedremo che il layout cambia e i due elementi si sposteranno uno sopra l’altro.

 

Questi e tantissimi altri codici simili rendono quindi i siti navigabili sia da desktop sia da tablet o smartphone. Su This is  responsive potere trovare moltissime informazioni ed esempi per iniziare a rendere il vostro sito un po’ più responsive.

E questo prerequisito, l’adattabilità a più dimentsioni di schermo, è ormai fondamentale in quanto google stessa non permette più di indicizzare siti che non abbiano tali caratteristiche. Per rimanere tra i primi risultati è necessario infatti essere “mobile-friendly”.

Anche noi di Lacerba ci siamo quindi, ovviamente, adattati a questa nuova necessità. Fai un salto su Lacerba.io e divertiti ad aumentare o rimpicciolire la finestra per vedere come cambia la visualizzazione del sito. Ti sarà immediatamente chiara l’utilità di questa caratteristica.

Matteo Fratesi

Un architetto con la passione per il mondo del web design. Dopo la laurea e due anni di esperienza nell'architettura e nel design, si trasferisce a Berlino per immergersi a tempo pieno in quello che è la sua passione.
Ora Matteo è un esperto nell'utilizzo dei maggiori programmi di grafica e sa costruire siti con HTML, CSS e Javascript.

Vedi tutti i post

Aggiungi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *