Quante volte ti hanno detto che sarebbe stato più conveniente avere un sito responsive? Non sai di cosa si tratta? O forse si ma non sai dove mettere mano? Cercheremo di spiegarlo con un linguaggio semplificato e senza troppi giri di parole. Let’s start!

Cos’è un sito responsive?

Prima di incanalarci nell’argomento, partiamo da un preambolo. Hai presente quando sei in un negozio e ti dicono che l’abito è taglia unica? Quindi si adatta a vari modelli del corpo? E’ esattamente quello che fa il sito responsive. Il nostro sito si trasforma, cambia, muta in tutte le forme.

Un sito responsive è un sito che è adattabile a differenti dispositivi: desktop, tablet, mobile. Il problema sorge quando un’immagina viene tagliata, e non adattata al modello del dispositivo. In tal caso l’utente è costretto a zoomare i contenuti invece di vederli in un solo colpo d’occhio, su un’unica pagina. Dunque il contenuto deve essere abbastanza grande, altrimenti non si legge.

Le basi di un sito web responsive

Partiamo dal presupposto che per fare web responsive è necessario conoscere l’html e il css, nient’altro. Le basi su cui si fonda un sito web responsive sono 3. Vediamo insieme quali sono e le loro caratteristiche:

• Funzione Viewport: la viewport è l’area visibile di una pagina web che cambia a seconda del dispositivo;
• Grind: divide la pagina iniziale in righe e colonne. Un po’ come si faceva prima con i giornali. Assomiglia molto ad un formato Excel. E’ a tutti gli effetti una griglia;
• Media Queries: questo sistema permette alle immagini, alle grind di verificarsi correttamente su un dispositivo. Ovviamente dal cellulare sarà differente rispetto al desktop;

Esempi di sito responsive

Adesso che conosciamo le basi e abbiamo una definizione di sito responsive, puoi creare un tuo sito, prendendo spunto da questi esempi che ti elenchiamo:

• Netwars:

• Vizio.com:

• Adventure.com
• Karma
• Carta dei delfini blu
• Progettato per muoversi
• GoDaddy

Ovviamente, per chi è appassionato di video giochi o elementi ambientali, prediligerà un sito con template più semplice.

Come funziona un sito responsive?

Un sito responsive utilizza le griglie fluide, ovvero i grind. Tutti gli elementi che sono contenuti all’interno della pagina vengono posizionati e riadattati in base al modello del dispositivo. Se ad esempio, disponi di tre colonne ampie, devi ridimensionarle in base alle altre e allo spazio disponibile sul tuo mobile. Ogni web designer progetta la grafica e la disposizione degli elementi sul template, proprio per controllarli in caso di modifiche. Generalmente si parte dal layout, ossia dove vengono collocati gli elementi nello spazio. E’ importante distinguere gli elementi principali da quelli secondari da posizionare.

Il web designer predilige il sito responsive sul desktop, perchè è più facile da adattare. Una volta capito come procedere si passa al dispositivo mobile e infine al tablet.

Perché è importante?

Al giorno d’oggi, è importante avere un sito web del genere perché ti permette di essere visibile a molti utenti. I clienti che non conoscono i tuoi prodotti, possono farsi un’idea di ciò che proponi e perché no, fare un acquisto successivo. Ogni azienda dovrebbe capire l’importanza di un sito web per i numerosi vantaggi che presenta. Ogni giorno un utente su dieci va su internet e compra online, perché è semplice e veloce. Non solo. Il cliente non percepisce la pressione del tempo e sceglie il prodotto con tanta tranquillità. Con le chatbot automatiche, otterrà la risposta immediata, senza ricorrere ai sistemi antichi di Messenger o Whatsapp. In questo modo, sarai sempre visibile 24h su 24 e disponibile ad eventuali richieste.

Pro

Come abbiamo già visto, il sito responsive permette di navigare in modo facile e veloce passando da un dispositivo all’altro. E’ semplice da usare ed estremamente funzionale. La dimensione del testo è grande e leggibile. Non solo. Ti stiliamo un elenco di quali, secondo noi, possono essere altri benefici apportati:

• Risparmio di denaro per l’azienda: con questo tipo di sito il risparmio è assicurato! Dovrai crearne uno ed unico per tutti i dispositivi. Questo cosa vuol dire? Tempi e costi semplificati. E anche in caso di aggiornamento, sarà un gioco da ragazzi;
• Velocità e scorrimento: un sito non responsive costringe l’utente a dover ingrandire lo schermo, rimpicciolirlo, spostarsi a destra e sinistra, o su e giù, per muoversi al meglio. Un sito responsive invece presenta una grafica tale che l’utente ha già tutto chiaro sulla pagine iniziale;
• Mostra contenuti essenziali;
• Facile comprensione;
• Design più snelli;
• Ottimo in termini di SEOSEO è l'acronimo di Search Engine Optimization, ovvero Ottimizzazione per i Motori di Ricerca. Questa sigla comprende tutte le pratiche volte a migliorare l'indicizzazione e il posizionamento di un contenuto...;
• Template aggiornato e al passo con i tempi;
• Contenuti originali;

Questi ultimi vantaggi sono molto interessanti e non scontati, soprattutto perchè in un mondo all’avanguardia, dove la tecnologia avanaza, essere creativi e unici, non è alla portata di tutti.

Contro

Ed ora passiamo alle note dolenti.

Una tecnica che si usava per le immagini responsive era “max-width: 100%“. Che significa? Che se ai tempi disegnavo una stella, essa prendeva il 100 per cento dello spazio iniziale sulla pagina. Quindi che senso ha scaricare un’immagine che pesa 2900 ad esempio, per uno schermo che non leggerà mai tale risoluzione? E’ una problematica grave, perché su un mobile non c’è abbastanza connessione e memoria per supportare queste dimensioni. Non vogliamo, pertanto, che il sito ti faccia scaricare altre risorse più di quante ne siano necessarie. Google ti direbbe che non è giusto e che bisognerebbe migliorare la tecnica.

Come creare un sito web responsive?

Per creare un sito web responsive ti consigliamo di seguire man mano questi passaggi che ti andremo ad illustrare. Ma prima una piccola annotazione.

La cosa migliore da fare è creare dei “breakpoint” o punti di interruzione per adattare il sito sia a dispositivi mobili e anche al PC. Questo perché molti utenti si collegano dal cellulare, e quindi l’aumento del traffico è in crescita.

Una volta stabilito questo aspetto, possiamo passare a creare il nostro sito.

Le regole base per la creazione di un sito responsive sono:

• LogoIl Logo, o logotipo, è la rappresentazione grafica del nome di un prodotto o un'azienda. Si tratta di un segno distintivo, determinante per distinguersi dai competitor e rendere immediatamente riconoscibile... a sinistra;
• menù a destra;
• nel corpo centrale: a sinistra l’articolo, a destra una sidebar, dove si collocano i widget;

Impostiamo i pilot a sinistra e attribuiamo i valori alle larghezze, che corrisponderanno alle dimensioni del sito. Andiamo a creare una media query, che il browser elabora nel momento in cui si verifica una condizione che abbiamo impostato noi. Se ad esempio abbiamo inserito 300 in pixel come valore per la larghezza per un tablet, le immagini appariranno molto grandi e non idonee a quel modello di file. Pertanto nella scrittura riporteremo questo:

@media screen and (max-width: 1024 px).

Cosa abbiamo fatto in poche parole? Abbiamo inserito dei valori e abbiamo successivamente modificato le condizioni, in modo tale che il sito apparirà per tutti i dispositivi, fissando un valore massimo. Continueremo la dicitura in questo modo:

.article (float: none; width: 100%-margin right:0).

A questo punto il sito è perfettamente navigabile con la risoluzione di un piccolo desktop e perfettamente strutturato.

Conclusioni

Siamo giunti alle battute finali. Alla fine, creare un sito responsive non fa che crescere la tua azienda. Se noti, i vantaggi emergono rispetto agli svantaggi. Quindi non può che portarti aspetti positivi. Un’azienda non responsive appare vecchia e malandata, rispetto a quella responsive, che appare aggiornata e attenta alle innovazioni. Non aspettare altro tempo. Rivolgiti ad esperti e non resterai deluso. Se vuoi approfondire l’argomento o hai dei dubbi, puoi commentare qui sotto o scriverci privatamente. Ti risponderemo nel minor tempo possibile. Ricorda, noi di Mailsenpai siamo disponibili per ogni tua richiesta.