Chiama

Maps

Whatsapp

In questo breve articolo vi daremo spunti utili per iniziare a familiarizzare con il “Responsive Web Design” sui suoi vantaggi e perché usarlo, ma andiamo per gradi.

1) Perché utilizzare un Responsive Design:

Quasi l’80% del traffico di navigazione in Internet si effettua oggi tramite dispositivi mobili: e-commerce, siti vetrina o blog, tutto è raggiungibile da ogni luogo e in qualsiasi momento. I dati parlano chiaro e la tendenza è in continuo aumento, in questo contesto è diventata una vera e propria “necessità” realizzare siti web o e-commerce “responsivi”, cioè ottimizzati ed adattabili ad ogni dispositivo e risoluzione.

web design responsive

I siti mobile-friendly inoltre hanno una maggiore probabilità che l’utente non solo visiti il sito, ma che vi rimanga collegato a navigare tra le pagine. Il colosso di Mountain View Google, già dal 2015, ha dichiarato tramite comunicato che adopera azioni di declassamento ai siti difficilmente navigabili da dispositivi mobile facendoli subire quindi svantaggi nelle SERP (pagine dei risultati di ricerca), mentre invece premia in “posizioni” i siti mobile-friendly… in alcuni casi la visibilità di siti responsive è addirittura triplicata (un bell’incentivo a fare SEO ;) ).

Adattarsi ai dispositivi mobile è diventata ormai una pratica necessaria: i vantaggi sono evidenti anche dal punto di vista della UI/UX. Il nostro sito risulta essere più “ordinato” e ben navigabile, senza dover compiere continue e scomode operazioni di ridimensionamento della pagina, di scorrimento e spostamento laterale (con relativi spazi bianchi al lato). Tutto questo rende “l’esperienza utente” da mobile più gradevole, facendo sì che i contenuti cercati dai visitatori siano facilmente fruibili, meglio organizzati e con conseguente probabilità che l’utente ritorni a farci visita.

2) Ma cosa significa avere un design responsivo?

Nato dalla mente di Ethan Marcotte in un articolo sulla rivista A List Apart, nel modo in cui lo conosciamo oggi, il Responsive Web Design è diventato protagonista indiscusso del nostro tempo “always-on-line”.

Un Design responsivo, o Responsive Web Design, fa uso di un’impaginazione grafica con griglie a proporzioni fluide, struttura e immagini flessibili: ciò vuol dire, in parole povere, che ogni “contenuto” si adatta al suo “contenitore”.

visualizzazione da desktopvisualizzazione da desktop
visualizzazione da tabletvisualizzazione da tablet
visualizzazione da cellularevisualizzazione da cellulare

Alcune delle caratteristiche negative che presentano i siti web non responsive, ad esempio, sono i testi troppo piccoli per poter essere letti dallo smartphone, i link difficili da cliccare perchè troppo vicini tra loro, la dimensione delle immagini non adattate . Sono questi i principali elementi che rendono difficile la lettura e la fruizione di una pagina web sui dispositivi mobile, come tablet e smartphone, rendendone difficile l'accessibilità ai suoi contenuti, e valutati quindi in modo negativo da Google, la quale tiene conto di numerosi fattori, che non si soffermano solo ai dispositivi, ma anche sulle caratteristiche fisiche di ogni utente.

Ma come possiamo ovviare a questo:

Vediamo alcuni consigli utili per rendere il nostro sito “Responsive

1) Imposta una viewport

Inserisci un Tag Meta chiamato “viewport” nella sezione ‘head’ del nostro documento HTML

viewport

Questo è di fondamentale importanza, perché indica al browser come controllare le dimensioni e la scala della pagina.

  • Il meta tag viewport controlla la larghezza e la scala della viewport (area visibile) del browser.
  • width=device-width imposta la larghezza del sito con la larghezza dello schermo indipendentemente dal dispositivo.
  • Initial-scale=1 oridina al browser di definire una relazione fra i pixel del foglio CSS e quelli del dispositivo in uso, permettendo così alla pagina di sfruttarne la larghezza orizzontale totale.

2) Non utilizzare larghezze fisse e unità assolute

Per far si che la pagina sia fluida e proporzionata, bisogna utilizzare valori relativi: le percentuali (width:50%) o "em" per la grandezza dei font.

(L'utilizzo di unità di misura relative semplifica la creazione delle disposizioni ed evita la creazione di componenti troppo grandi per la viewport, facendo adattare i contenuti in percentuale relativa alla risoluzione schermo).

3) Utilizza le ‘media query’

Altro elemento fondamentale per ridurre i tempi di risposta e controllare ogni elemento dell’HTML modificandolo in base alla risoluzione del dispositivo.

media query

(esistono diversi elementi a cui applicare le query, ma i più adatti sono: min-width, max-width, min-height e max-height).

Queste appena esposte sono solo alcune delle principali nozioni per quanto riguarda il “Responsive Web Design”, ma di fondamentale e basilare importanza; speriamo con quest' articolo di esservi stati utili.

Commenta questo Articolo