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.
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.
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.
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”.
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:
Inserisci un Tag Meta chiamato “viewport” nella sezione ‘head’ del nostro documento HTML
Questo è di fondamentale importanza, perché indica al browser come controllare le dimensioni e la scala della pagina.
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).
Altro elemento fondamentale per ridurre i tempi di risposta e controllare ogni elemento dell’HTML modificandolo in base alla risoluzione del dispositivo.
(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.
