Siti responsive, perché sono così importanti e come si costruiscono?

Fino a qualche anno fa la parola "responsive" non era molto conosciuta. Le cose sono cambiate con il passare del tempo specie da quando i dispositivi mobili sono entrati a far parte della nostra quotidianità cambiando in maniera molto veloce, e per sempre, il nostro modo di andare sul web e il lavoro di chi, come noi, realizza siti internet.

Ciò significa che oggi, per chi lavora in ambito SEO è scontato sapere bene cosa sono i siti responsive e per quale motivo sono così importanti. Il concetto di responsive, però, gira sempre più anche tra i non addetti ai lavori e ci capita molto spesso di sentirci chiedere cos'è un sito responsive. Domanda lecita dal momento che non tutti possono sapere di cosa si tratta. In Doweb ci occupiamo anche di rendere quanto più "responsive" possibile i siti dei nostri clienti dando una notevole impennata alla qualità dei siti stessi. Andiamo, quindi, a spiegare dettagliatamente cosa si intende per sito responsive e qual è l'importanza che questo elemento assume in ottica SEO.

Iniziamo con una premessa per noi importante: il design responsive è quel design che, come agenzia web, utilizziamo per creare pagine internet che rispondano alla tipologia di dispositivi dove vengono visualizzate. Si potrebbe trattare di un pc fisso, di uno smartphone, di un tablet il cui schermo potrebbe essere delle più svariate dimensioni o, ancora, di uno smartphone. Le possibilità sono davvero tante al punto che quello che oggi è noto come Responsive Web Design è diventato uno degli strumenti più utilizzati dal 2012 ad oggi. Il motivo? Semplice, la diffusione sempre più capillare dei dispositivi portatili da cui si può accedere al web e visualizzare, di conseguenza, i siti web.

Vale la pena, poi, fare un'altra precisazione importante: un sito responsive non è assolutamente un'alternativa al sito tradizionale pensata solo ed esclusivamente per i dispositivi mobili. Per comprendere meglio l'argomento che andremo ad affrontare, ancor prima di definirlo in maniera completa, proviamo a giocare con la fantasia. Immaginiamo un sito responsive come se fosse un vestito che assume un aspetto diverso a seconda della persona che lo indossa. Ebbene, allo stesso modo un sito responsive è in grado di adattarsi perfettamente al display dei dispositivi su cui viene visualizzato. Avete presente le interminabili perdite di tempo derivanti dallo scorrere da destra a sinistra un sito internet per leggerne il contenuto su schermi più piccoli? Con i siti responsive potrete dire definitivamente addio a questa spiacevole sensazione.

Considerato che ogni giorno su Google vengono effettuate circa 6 miliardi di ricerche, Big G tende a consigliare una configurazione per i siti ottimizzata per gli smartphone e, quindi, il responsive web design. Google mette, addirittura, a disposizione un test mobile per effettuare una semplice verifica e controllare la facilità con cui i visitatori possono utilizzare il sito attraverso un dispositivo mobile. Per effettuarlo basterà procedere con l'inserimento dell'URL del nostro sito internet per ottenere il relativo punteggio attribuito da Google.


Cos'è un sito responsive e qual è il suo aspetto?

Lo abbiamo già specificato: l'obiettivo del web design responsive è la creazione di siti internet composti da elementi in grado di rispondere differentemente in base alla dimensione del display su cui vengono visualizzati. Facciamo un esempio pratico. Consideriamo un sito tradizionale. Su PC potrebbe comparire suddiviso in colonne ma visualizzabile, comunque, in tutti i suoi elementi. Come anticipato, però, lo stesso sito visitato da mobile potrebbe costringerci a scrollare orizzontalmente per leggerne tutti i dettagli. Operazione, questa, odiatissima da tutti e certamente anche da voi. In alternativa potremmo trovarci dinnanzi ad elementi completamente storpiati, poco visibili o tanto piccoli da essere necessaria una buona zoomata per leggerne il contenuto.

Risultato? Un abbandono immediato del sito e la ricerca delle informazioni richieste su altri siti, possibilmente responsive. Come mai? I siti responsive rispondono, come dice il nome stesso, in maniera diversa in funzione del dispositivo su cui vengono visualizzati. Un po' come l'acqua che si adatta alla forma dei contenitori in cui viene versata, così i siti responsive si adattano perfettamente agli schermi dei vari dispositivi. I contenuti adattati agli spazi disponibili risulteranno così leggibili e di facile navigazione. Allo stesso modo eventuali immagini verranno adattate in modo da non risultare storpiate ed essere perfettamente in linea con gli spazi occupati dalla pagina. Può capitare anche che alcuni elementi, ritenuti inutili o semplicemente decorativi, vengano nascosti per consentire ai navigatori di reperire subito le informazioni richieste. Pratiche di questo tipo vengono utilizzate specialmente per le versioni dei siti dedicate ai dispositivi mobili dove la banda e tempi risultano elementi fondamentali per navigare correttamente in un sito web.

E così, gli elementi che compongono, ad esempio, la home di un sito responsive andranno a spostarsi o modificarsi nel momento in cui ridimensioneremo lo schermo, se cambieremo la risoluzione dello stesso o se, andremo a visualizzare il sito da un dispositivo portatile. Non ci sarà bisogno di creare un sito per ogni tipologia di dispositivo ma si potrà ottenere il meglio sempre e comunque da un unico sito. Niente male, vero?


Non esitate a contattarci per maggiori informazioni


Come funzionano i siti responsive?

Come funzionano i siti responsive? Comprenderlo non è troppo complicato. Ogni sito responsive, infatti, utilizza delle griglie fluide che consentono, per la loro caratteristica, di ridimensionare gli elementi di ogni pagina proporzionalmente. Nessuna variazione, quindi, in termini di pixel.

Per i web designer e, quindi, anche per noi di Doweb, partire con la progettazione di un template di tipo responsive si traduce nella progettazione di una grafica apposita oltre che dell'interazione utente con la capacità di controllare i cambiamenti del sito internet in base ai tipi di dispositivi utilizzati per visualizzarne il contenuto. Andremo a considerare tutti gli elementi dentro spazi (o layout) differenti.

Normalmente partiamo con il progettare la versione per desktop dato che spesso è quella che il cliente tende a visualizzare per primo. Successivamente parte il lavoro più scrupoloso in cui andiamo ad adattare i diversi elementi ai layout altrettanto differenti dando sempre la priorità a quelle che sono le informazioni più importanti che non potranno essere "nascoste" sul mobile ma dovranno, al contrario, entrare a pieno titolo all'interno della pagina. In altri casi, comunque, si predilige partire dalla versione mobile e questo vale soprattutto per i siti che hanno maggiori probabilità di ricevere i primi accessi direttamente in mobilità (parleremo, in questo caso, del cosiddetto mobile first). Insomma, un concetto molto più complicato da esprimere a parole che da comprendere nella realtà. Di fatto, però, si tratta di un concetto fondamentale da cui, oggi come oggi, non è assolutamente possibile prescindere se non si vogliono gettare alle ortiche anni di sacrifici (quelli necessari per la costruzione ed il lancio del sito internet).


Perché i siti responsive sono così importanti

Ma da dove arriva la grande importanza che oggi hanno i siti responsive? Per comprenderlo basta conoscere quelli che sono i motivi che dovrebbero spingere verso questo tipo di scelta. Ne abbiamo scelti 9.

1. Il mobile friendly è molto apprezzato da Google che quindi terrà conto, per il posizionamento in SERP, anche della presenza di un'eventuale versione responsive o meno. Anzi, è possibile affermare che questo è uno dei fattori fondamentali per Google per cui conviene tenerla strettamente in considerazione. Non ha senso applicarsi tanto nel rispetto di mille altre norme SEO se non si parte da questa che per Big G è di vitale importanza.
2. È ormai provato che tra due siti concorrenti, quello che utilizza un design responsive è molto più apprezzato dai potenziali clienti. La navigazione risulta molto più semplice e la costante diffusione della navigazione da dispositivi mobili fa il resto.
3. Adottare un design responsive vi pone in buona luce nei confronti degli addetti ai lavori e non solo. Date le caratteristiche di questa speciale tipologia è facile comprendere come verrete apprezzati già soltanto per il vostro essere attenti alle esigenze di ogni visitatore.
4. Il vostro sito responsive contribuirà a darvi un'immagine al passo con i tempi sul web. Per le aziende è importantissimo data l'espansione del mobile senza abbandonare, però, la più classica visualizzazione da desktop.
5. I siti responsive registrano aumenti nelle conversioni, una frequenza di rimbalzo minore e una migliorata esperienza utente. Se uno dei vostri scopi principali è di aumentare le conversioni, i siti web responsive sono la giusta risposta. Il tasso di conversione, difatti, dipende dall'esperienza utente che deve essere quanto più soddisfacente possibile indipendentemente dal tipo di dispositivo che viene utilizzato per la navigazione. Mettetevi al posto di un visitatore che deve continuamente zoomare per visualizzare i contenuti del vostro sito. Come vi comportereste? Lascereste il sito in brevissimo tempo.
6. Per quanto, poi, concerne la citata frequenza di rimbalzo, i siti responsive la abbasseranno dal momento che gli utenti saranno più disponibili a proseguire la navigazione sul vostro sito responsive senza abbandonarlo in maniera prematura.
7. I siti responsive garantiscono anche miglioramenti in ottica SEO. Abbiamo già detto come Google prediligga i siti con ottimizzazione per il mobile di cui i suoi algoritmi stanno tenendo sempre più conto in questi ultimi anni. Ne consegue che anche se il vostro sito internet ha ottenuto buoni posizionamenti in passato, potrebbe essere presto declassato se non adotterete il prima possibile un design responsive.
8. Specie per i piccoli imprenditori, il traffico organico è importantissimo. Una volta che avrete ricevuto una penalizzazione semplicemente perché non avete reso il vostro sito responsive, starete rischiando ingenti perdite anche in termini di traffico organico. Per evitare una situazione di questo tipo, è meglio rivolgersi quanto prima ad un'agenzia web specializzata nel settore come siamo noi di Doweb. Saremo lieti di aiutarvi a rimettervi in pista o, se lo siete già, a rimanere tra i primi posti in SERP.
9. I siti responsive risultano essere molto più facili da gestire. Buona parte delle aziende, difatti, specie se di piccole dimensioni, non possono dedicarsi appieno all'aggiornamento del proprio sito internet. Con un sito responsive gli aggiornamenti potranno essere effettuati in tempi molto più brevi e si potranno eseguire anche da soli.

Gli aspetti fondamentali dei siti responsive

Adesso che abbiamo fatto un po' più luce sui siti responsive andiamo a vedere come procedere nel momento in cui intendiamo costruire un sito di questo tipo. Diciamo sin da subito che gli aspetti da tenere in considerazione sono più d'uno. Sarà necessario progettare l'intero lavoro mediante un apposito "albero genealogico" che permetta ad ogni contenuto inserito di poter essere visualizzato correttamente sia su dispositivi fissi che mobili.

Vediamo, innanzitutto, quelle che sono le componenti fondamentali su cui si deve basare il nostro lavoro. Si tratta, nello specifico, di 4 elementi da cui non possiamo assolutamente prescindere e che sono il Bootstrap, la griglia fluida (cui abbiamo già accennato), le immagini flessibili e la media query. Vogliamo vedere più nel dettaglio di cosa si tratta?

1. Il Bootstrap altro non è che una speciale tipologia di framework di svilippo che possiamo utilizzare in maniera completamente gratuita. Si tratta di un "prodotto" opensource che viene utilizzato tanto per la creazione di siti aziendali che per lo sviluppo di varie app web. I linguaggi su cui si basa sono HTML, CSS e JS in modo da risultare facile da utilizzare per ogni tipologia di ambito.
2. La griglia fluida ci è indispensabile per la creazione dei siti con layout reattivi oltre che essere uno dei sistemi più innovativi del tutto avallati nei layout generali dei siti web. Questo tipo di "prodotto", infatti, viene utilizzato dai web designer da diverso tempo sebbene, agli inizi, le modalità erano del tutto differenti. La larghezza iniziale, infatti, era standardizzata ed irremovibile, non si riusciva a renderla adattabile a tipologie diverse di display e non vi era alcun supporto ai layout fluidi. Oggi, invece, utilizzare la griglia fluida permette permette di usufruire di design flessibili e scalabili. Gli elementi verranno distanziati, di volta in volta tra loro a seconda della dimensione del display e si adatteranno (in larghezza) in base ad un preciso valore percentuale.
3. Il terzo elemento è rappresentato dalle immagini flessibili. Già dal nome comprendiamo che si tratta di immagini in grado di adattarsi, nella visualizzazione, al tipo di dispositivo da cui vengono, per l'appunto, osservate. La capacità di adattarsi ai layout specifici della pagina dipende dal fatto che esse si plasmano in base alle gerarchie di cui abbiamo parlato e che abbiamo impostato mediante il citato CSS. In questo modo anche i testi possono essere letti facilmente in maniera indipendente rispetto al dispositivo utilizzato dagli utenti. Con contenitori flessibili situati dentro la griglia, sia i testi che le immagini si regolano in modo automatico aumentando o diminuendo le dimensioni in funzione della grandezza dei display. Una difficoltà che può presentarsi lavorando con le immagini flessibili riguarda i tempi di caricamento che possono allungarsi leggermente. In ogni caso è possibile scegliere di procedere ad un loro ridimensionamento, ad un'operazione di ritaglio o a nasconderle in base a queli sono i contenuti essenziali per l'esperienza utente attraverso determinati tipi di dispositivo.
4. Quello del Media Query è un codice che riesce a rendere ancor più flessibili determinati layout di un sito web reattivo. In base a questo elemento riusciamo a specificare quale deve essere il CSS da applicare in una determinata situazione. Ad esempio, opteremo per orientamenti verticali sugli iPhone che diverranno orizzontali per gli iPad e così via. In definitiva, per ogni singola immagine sarà possibile impostare diverse tipologie di layout.

Nella costruzione di un sito responsive è indispensabile andare a testare il browser e la compatibilità con le diverse tipologie di dispositivi. Ci assicuriamo sempre che i layout utilizzati siano reattivi e, quindi, compatibili con ogni browser pertinente e che, quindi, l'esperienza utente non abbia a risentire della nostra scelta. In Doweb controlliamo sempre il sito su cui stiamo lavorando su un gran numero di dispositivi diversi. Consigliamo di farlo sempre perché si rischia davvero di rimanere sorpresi dai cambiamenti di un sistema operativo rispetto ad un altro.

Perché non prendere ispirazione da altri siti web reattivi? Non stiamo parlando di copiare, è ovvio! Questa è una pratica che non va mai presa in considerazione. Si tratta, invece, di osservare come funzionano gli altri siti reattivi e quali sono gli elementi di creatività a cui potreste anche ispirare la vostra creatività.


Cliccate qui per maggiori informazioni


L'importanza dei siti responsive

Prima che smartphone e dispositivi mobili in generale entrassero così prepotentemente nella nostra quotidianità, accedevamo ad internet utilizzando esclusivamente i computer, fossero essi portatili o fissi. La risoluzione dello schermo, quindi, era bene o male sempre la stessa e laddove variava questa variazione era davvero minima. Ecco perchè, fino ad allora, i siti internet venivano reaiizati su griglie che avevano larghezze standardizzate. L'arrivo di internet sui dispositivi mobili ha cambiato le cose e ha portato con sé l'esigenza di adattare ogni sito al tipo di dispositivo utilizzato dall'utente, piccolo o grande che fosse.

Si è così iniziato a parlare di "responsive" ed era il 2011. E, da allora, ne abbiamo fatto di strada al punto che attualmente rendere responsive il proprio sito è l'unica maniera per sopravvivere sul mercato del web e cercare di portare avanti al meglio la propria attività.

Dal 2015, poi, il Mobile Friendly è stato specificato da Google come fattore importantissimo per ottenere un buon posizionamento in SERP. Detto in parole povere, ogni sito responsive viene premiato dal motore di ricerca. Ma non è questo l'unico vantaggio che si può trarre dai siti responsive. Secondo quanto riportato da diversi studi, oltre il 60% di coloro che si interfacciano con siti internet difficilmente navigabili da smartphone lo lasciano per andare alla ricerca di un sito che, invece, non dia loro questo tipo di problema. Immedesimiamoci un attimo in un utente qualunque che accede ad un sito da smartphone. Il sito in questione non è stato ottimizzato, è lento a caricarsi e il testo è piccolissimo. Impossibile, in una situazione di questo tipo trovare le informazioni ricercate. Qual è la prima reazione? Ovviamente quella di effettuare una nuova ricerca e rivolgersi alla concorrenza. Ebbene quel sito, non ottimizzato, ha perso l'occasione di essere utile all'utente e di mandare avanti, quindi, il proprio business.

Indispensabile, quindi, correre ai ripari perché il rischio più che concreto è quello di essere superati dai concorrenti.


La creazione di siti responsive: 5 mosse e siamo online

In base a quanto rivelato da recenti sondaggi, il 50% circa degli italiani naviga in rete utilizzando il proprio dispositivo mobile. Credere, dunque, che realizzare un sito internet non debba tenere conto di questo dato è da pazzi dato che precluderemmo la navigazione del nostro sito a circa metà dei potenziali utenti. Come procedere, dunque, per la creazione di un sito web responsive? Nonostante il percorso includa tanto studio e molto materiale da studiare abbiamo deciso di facilitare la comprensione suddividendo il lavoro in un totale di 5 mosse. Vediamole insieme.

- Decidiamo quale contenuto mostrare al visitatore

Tra gli sbagli che si compiono più di frequente con risultati davvero poco confortanti c'è quello di ostinarsi a mantenere intatti tutti i contenuti delle proprie pagine indipendentemente dai display che li visualizzeranno. Errore gravissimo! Ci sono alcuni elementi che, se presenti sul display di un dispositivo piccolo come uno smartphone non solo sono inutili ma, soprattutto, rendono più difficoltosa la navigazione. Banner, qualunque immagine secondaria, immagini in background vanno sacrificati a tutto vantaggio della user experience. Per comprendere meglio il concetto possiamo paragonare il sito su desktop ad un armadio e la versione su smartphone ad una valigia. Nel momento stesso in cui decidiamo di partire, una parte dei vestiti dall'armadio passerà alla valigia. Ma solo, per l'appunto, una parte. Impensabile inserire tutto l'armadio in valigia. Ecco, quindi, che partendo portiamo con noi solo gli abiti che ci serviranno lasciando il superfluo in armadio. Ebbene, con i siti responsive dobbiamo comportarci allo stesso modo! Sacrificare gli elementi superflui ci aiuterà a dare il giusto spazio, invece, agli elementi essenziali.

- Utilizziamo il metatag viewport

Per fare in modo che una pagina diventi responsive è indispensabile, a questo punto, mettere mano ad alcuni codici. Procederemo, dunque, all'inserimento nell'head del codice

<meta name="viewport" content="width=device-width">.

Con il metatag viewport andiamo a specificare quelle che saranno le superfici su cui verranno disegnate le pagine web. Ma attenti! Sugli smartphone le dimensioni del viewport non vanno confuse con la risoluzione dei display. Indipendentemente da quale sia la risoluzione del nostro smartphone, infatti, buona parte dei dispositivi associa a questo viewport una larghezza corrispondente a circa 1.000 pixel.

- Definiamo i breakpoint

Il lavoro che stiamo facendo mira a rendere responsive un sito mantenendo invariato il codice HTML di ogni pagina e andando, invece, ad agire sui layout assegnando una regola diversa in funzione dei dispositivi da cui si naviga. Per far sì che questo avvenga, si devono utilizzare le già citata media query. Con questo elemento, porremo qualche condizione in base a cui un insieme di regole CSS può trovare, o meno, applicazione in base alla larghezza delle dimensioni del viewport. Il consiglio è quello di basare il lavoro sulla larghezza inserendo poi altre query qualora si dovessero notare problemi su particolari tipi di dispositivo. Dal momento che è difficile che per il desktop servano CSS specifici, ci troveremo dinnanzi l'impostazione di due media query: una per gli smartphone ed una per i tablet.

Per gli smartphone useremo valori compresi tra 320 e 480 pixel mentre per i tablet questi valori saranno compresi tra 768 e 1.024 pixel.

- Usiamo un layout fluido

Consci del fatto che nel web design responsive il concetto di pixel si allontana leggermente da quello a cui siamo abituati, è bene specificare che occorrera non utilizzare le dimensioni in pixel ma farlo in valore percentuale adattando i layout ad ogni circostanza e facendo in modo che gli elementi di ogni pagina si possano adattare in maniera conseguente. Quest'idea, unita alle media query, rappresenta il punto di partenza ideale per avvicinarci al mondo dei siti responsive. Bisogno di un esempio pratico? Immaginiamo che il nostro sito su desktop si basi su 3 colonne per le quali la larghezza di ognuna occupa il 33,3% di larghezza. Ebbene, passando su smartphone potremmo pensare di ridurre questa larghezza non in termini di pixel veri e propri ma in termini di percentuali settandola, ad esempio, al 100% per ogni colonna. Questo significa che lo stesso sito che su desktop vediamo suddiviso in 3 colonne, visualizzato su smartphone vedrà una colonna sopra l'altra e per leggere l'intero contenuto sarà sufficiente scorrere normalmente la pagina verso il basso. Molto facile, no?

- Utilizziamo i framework dove necessario

Siamo giunti alla quinta ed ultima mossa indispensabile nella costruzione di siti responsive. Per approfondirla al meglio dobbiamo, però, scindere il lavoro di un sito da mettere su da zero da quello di un sito che già esiste ma che bisogna semplicemente ottimizzare rendendolo responsive. Nel primo caso le alternative sono tante grazie a tanti framework già esistenti che implementano al loro interno tutto quello che abbiamo bisogno e di cui abbiamo ampiamente parlato fin qui.

Nel caso in cui il lavoro che stiamo facendo sia incentrato su un sito già esistente da rendere responsive, introdurre un framework potrebbe risultare un'operazione un po' invasiva quindi, da escludere fintanto possibile. La cosa migliore da fare, in questo caso, è quella di procedere con l'ottimizzazione del CSS già esistente. Ci sono, poi, alcune librerie javascript che possono risultare molto utili e che possiamo facilmente reperire sul web.

Concludendo..

Abbiamo visto quanto importante e fondamentale sia, al giorno d'oggi, il concetto di sito responsive. Fare in modo che un sito funzioni alla perfezione su tutti i dispositivi da cui è possibile navigare in rete è di vitale importanza per non essere tagliati fuori da un mondo che è diventato sempre più mobile. Ribadiamo tutti i vantaggi che ne derivano:

• tutti gli utenti potranno navigare comodamente sul sito da qualunque tipo di dispositivo;
• il numero di visite al sito non caleranno a causa dell'inevitabile abbandono da parte di utenti eventualmente scontenti della navigabilità del sito stesso;
• tempi e costi per la gestione dei siti responsive sono notevolmente ridotti;
• si diventa sempre più competitivi rispetto alle altre aziende dello stesso settore.

In definitiva, l'obiettivo del web design responsive è quello di offrire agli utenti del web un'esperienza utente sempre migliore, ottimizzata e che non tenga conto del tipo di dispositivo con cui si naviga.

Se avete bisogno di una mano non esitate a contattarci. In Doweb, come Agenzia Web di esperienza pluriennale, sappiamo quanto il concetto di responsive sia importante sul web e lavoriamo ogni giorno per garantire ai nostri clienti la migliore UX per le proprie aziende mediante, appunto, il responsive design. Completeremo, poi, il lavoro con una strategia SEO responsabile e mirata i cui vantaggi non tarderanno ad arrivare.

Cliccate qui per contattarci.