Un sito Web tradizionale, visualizzato su uno schermo desktop, potrebbe contenere una colonna di grandi dimensioni. Lo stesso sito Web visualizzato su uno smartphone non mostra tutte le informazioni e l'utente deve scorrere in orizzontale. Agli utenti non piace lo scorrimento e lo zoom. Un altro problema con i siti Web tradizionali è il tempo di caricamento nei dispositivi mobile. Le immagini di grandi dimensioni sul sito Web lo rallenteranno.

Utilizzando Responsive Web Design, il tablet e lo smartphone regoleranno automaticamente la larghezza del sito Web. L'utente legge il contenuto della pagina e naviga attraverso il sito Web senza la necessità di scorrere in orizzontale. Le immagini di grandi dimensioni si adatteranno invece di distorcere il layout.

Alcuni dei principali vantaggi e funzionalità di un sito in Responsive Web Desing sono:

    SEO preferisce i siti con un Responsive Web Design.

Un sito Web può avere una versione separata per i dispositivi mobili, ciò significa un doppio lavoro per creare e mantenere i collegamenti per siti, sia mobili che desktop. Avere un Responsive Web Design significa che l'ottimizzazione e la manutenzione usano un singolo URL, mantenendo una coerenza nella struttura dell'URL su tutti i dispositivi. Il sito Web diventa cosi più popolare tra il resto dei risultati della ricerca.

    Il sito con Responsive Web Design è piu facile da mantenersi.

La costruzione di un singolo sito con Responsive Web Design ridurrà i costi di progettazione e di manutenzione. A lungo termine, ridurrà al minimo lo sforzo di manutenzione, in modo conveniente.

    Responsive Web Design aumenterà le vendite del tuo negozio online.

Se possiedi un negozio online, tutti i visitatori mobili sono potenziali acquirenti, quindi è meglio non ignorarli. Se gli utenti apprezzeranno il tuo sito Web, rimarranno più a lungo e molto probabilmente compreranno un prodotto nel tuo negozio. Inoltre, una interfaccia intuitiva del tuo sito, porterà il sito un al altro livello.

Responsive Design è costituito da Fluid Grids, Flexible images e query multimediali.

 
Fluid Grids

La tecnica delle Fluid Grids consiste nello specificare gli elementi per porzione della dimensione della pagina Web, e non per pixel. La grafica si definisce con una dimensione massima del layout, che è diviso in un numero specifico di colonne. In questo modo, il layout viene mantenuto pulito e facile da gestire. Ogni elemento della pagina Web è impostato con larghezze e altezze proporzionali, anziché un numero fisso di pixel. Ogni volta che il dispositivo o le dimensioni dello schermo vengono modificati, gli elementi regolano automaticamente le loro larghezze e altezze, mantenendo le proporzioni specificate al contenitore principale.

Ad esempio, se la pagina ha due colonne, la larghezza non è impostata in pixel, ma in proporzione alla dimensione massima del layout. La colonna 1 potrebbe occupare il 60% della larghezza della pagina e la colonna 2 potrebbe occupare il 40%.

Il vantaggio della fluid grids è che continuerà a funzionare su schermi più grandi, a causa dei calcoli basati sulla percentuale.

Flexible images ( immagini flessibili)

Un'immagine flessibile cambia le sue dimensioni a seconda delle dimensioni del dispositivo che l'utente sta visualizzando il sito Web. Un'opzione per l'immagine flessibile è che tutti i dispositivi caricheranno le stesse immagini. Icone di piccole dimensioni potrebbero non essere un problema.

Per caricare più velocemente la pagina Web, i browser caricano in anticipo tutte le sue immagini, in modo che possano identificarle nel codice sorgente, prima di caricare CSS o JavaScript. Questo approccio penalizza i visitatori mobili, costringendoli a scaricare tutte le varianti di un'immagine!

Una soluzione ben nota per una buona prestazione è l'uso della grafica vettoriale, che è scalabile, mantiene la sua qualità e può adattarsi alle dimensioni dello schermo di ogni dispositivo.

Media Queries

Responsive Web Design viene implementato utilizzando Media Query, che è un modo per applicare le regole CSS. Media Query indica al browser di applicare determinate regole o di ignorarle. Tutto dipende dal tipo di dispositivo che utilizza il visitatore.

Media Query applica regole CSS diverse sullo stesso contenuto HTML. Invece di creare una versione del sito Web per smartphone e una versione totalmente diversa per i computer desktop, il programmatore utilizza lo stesso file HTML per entrambi. Quando l'editor dei contenuti aggiunge un nuovo articolo o modifica qualcosa nel file HTML, le modifiche verranno applicate sia nel layout mobile che desktop. In questo modo, il contenuto e la presentazione sono in file separati. Lo sviluppatore implementa diverse presentazioni per diversi tipi principali di dispositivi e, utilizzando Media Query, vengono applicate diverse regole CSS.

La tipografia è l'aspetto del testo. Il progetto della tipografia è cruciale per attirare l'attenzione del visitatore, e incoraggiarlo a leggere ulteriori informazioni sul sito Web. Inoltre, la tipografia è importante per evidenziare o oppure no qualsiasi parte del testo sul sito Web. In pratica, una buona tipografia è quella che migliora la comunicazione con il visitatore. È molto importante che il testo sul sito Web sia facilmente leggibile.
Queste atributi della tipografia sono il fattore chiave in fase di progettazione:

•     Font Family
•     Dimensione del testo
•     Larghezza del testo
•     Altezza della linea

Il Font Family dà l'effetto emotivo della lettura del testo. Di solito, il disegnatore trova la famiglia di caratteri ottimale in base all'argomento del sito Web. Altri tre parametri: dimensione del testo, larghezza del testo e altezza della linea determinano se il testo è facilmente leggibile.

Nel Responsive Web Design, la tipografia dovrebbe seguire anche alcune regole. Il disegnatore dovrebbe aumentare la dimensione del carattere quando passa a una versione più grande dello schermo. Questo perché tendiamo a leggere a distanza quando il dispositivo è più grande. Inoltre, il disegnatore non dovrebbe modificare le proporzioni tra il testo e altri elementi del sito Web. Lui dovrebbe prestare attenzione ai parti importanti del testo. Sottolineando un titolo dovrebbe mantenere il resto del testo in una dimensione relativa, in modo di attirare il visitatore.

I codici JavaScript non sono obbligatori in un sito Responsive Web Design. È vero che JavaScript rende il sito web più gradevole e intuitivo, ma è possibile creare un disegno flessibile solo con HTML e CSS. Noi vi suggeriamo di mantenere il progetto più semplice possibile. Questo è un fattore chiave per l'intera performanca del sito web.

I dispositivi mobili fanno parte della nostra vita e li portiamo ovunque noi andiamo. Ma non sempre abbiamo una forte connessione a Internet. Inoltre, noi abbiamo bisogno delle informazioni il più rapidamente possibile, poiché spesso ci affrettiamo.
Tenendo conto di tutto ciò, la costruzione della versione mobile del sito Web non si limita semplicemente ad adeguare le dimensioni, ma risolve molti problemi di sviluppo mobile e la sfida è caricare il contenuto della pagina il più rapidamente possibile, con tutte le sue funzionalità.

Spero che questo articolo ti abbia aiutato a capire l'obiettivo principale del Responsive Web Design, ma se ti senti ancora confuso al riguardo, puoi scriverci email. Se stai già utilizzando la tecnica Responsive Web Design nel tuo sito o nella tua applicazione web, puoi convidere il link!