Cos’è un sito web responsive?

creazione siti internetIn parole semplici, il sito web responsive corrisponde al sito web ottimizzato per tablet, smartphone e monitor di grandi dimensioni. Per questo motivo, attraverso quello che viene definito responsive web design, si possono creare siti che cambiano la loro forma “reattivamente” in base alla grandezza dello schermo del device con il quale vengono visualizzati. Di fatto, il responsive design non è l’unica possibilità che abbiamo per rendere “mobile-friendly” un sito web.
I web designer che vogliono realizzare al meglio un sito web responsive possono seguire la linea guida ufficiale di Google, anche se in molti casi, il sito web si basa su un CMS, un content management system, che permette di gestire i contenuti, nonchè ottimizzare il design.

Perchè utilizzare il responsive design?

Il responsive design semplifica la divisione ed il collegamento ai contenuti di un singolo URL.
Consente agli algoritmi di Google di attribuire in modo preciso le proprietà di indicizzazione alla pagina. In più serve meno tempo per rielaborare pagine e contenuti, in questo modo si verificano meno errori, tenendo bene a mente che i siti che sono già stati ottimizzati per la navigazione da Mobile vengono già contraddistinti con la sigla “mobile-friendly” sulla SERP (Search Engine Results Page) di Google. Ciò va di fatto ad influenzare il ranking di Google, il che vale a dire che più l’esperienza d’uso sarà rispettata per ogni device e minore sarà la frequenza di rimbalzo in Google Analytics.

Quando è nato il web responsive?

Il web responsive nasce nel 2011, ed è proprio con l’aumento dei dispositivi portatili che si è cercato di fornire una migliore risoluzione agli utenti, sempre più numerosi, di quei siti in grado di essere visualizzati anche su display più piccoli.
La parte principale su cui si deve operare sono le media queries, un sistema che esegue porzioni di codice css, linguaggio utilizzato per la creazione di siti internet professionali, quando la risoluzione dello schermo è inferiore rispetto ad un determinato numero di pixel che normalmente si trovano in un computer, adattando la struttura del sito al display. Per realizzare tutto questo occorre per prima cosa lavorare su una struttura di default abbastanza semplice che può essere modificata con poche regole css dalle media queries. Una volta impostata quest’ultima il sito si adatta per quattro volte, rendendosi quindi fruibile da qualsiasi supporto.
L’ultimo passo prevede l’inserimento dell’Html, questo significa che le immagini, i link e le altre parti che compongono il sito vengono ridimensionate in base alle dimensioni dello schermo. Seguendo queste indicazioni si potrà dunque creare un sito Web Responsive, in grado di poter essere consultato su qualsiasi schermo.

Cosa succede se la larghezza del device scende al di sotto dei 767 pixel?

Se la larghezza del device scende al di sotto dei 767 pixel si dovranno allineare i contenuti e la sidebar deve essere collocata sotto il contenuto principale, su due colonne, mentre il menu viene nascosto e mostrato solo tramite un tasto posizionato in alto a destra.