Prima di cominciare partiamo col capire l’importanza di creare un sito Internet ottimizzato per qualsiasi tipologia di dispositivo, è infatti essenziale sviluppare un prodotto Web accessibile attraverso qualunque device ed in grado di adattarsi alle diverse misure degli schermi.
In questa guida abbiamo sviluppato un intero sito Web prendendo in considerazione le misure e le proporzioni relative all'area di visualizzazione di un comune schermo per laptop. Cosa succederebbe però se aprissimo il sito attraverso un tablet o uno smartphone? Il risultato sarebbe il seguente:
Un output apparentemente corretto ma non responsive, quindi non in grado di adattarsi automaticamente al display con cui viene visualizzato.
La tecnica del responsive design evita agli utenti di dover ridimensionare i contenuti utilizzando zoom e di effettuare scrolling che di certo non aiutano la navigazione e non migliorano la user experience di chi sta navigando. Scopriamo come funziona.
Come rendere un Sito Web Responsive?
Per prima cosa dobbiamo aprire il file head.php ed aggiungere il seguente costrutto di codice:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Il meta tag viewport richiede al browser di adattare le dimensioni e le proporzioni della pagina Web alla larghezza dello schermo del dispositivo usato per la navigazione. In poche parole rende "fluida" la struttura della pagina.
Ora dobbiamo entrare nel vivo della tecnica responsive ed analizzare le istruzioni che permettono di ridimensionare ogni elemento e renderlo adatto alla visualizzazione tramite qualunque risoluzione e grandezza dello schermo.
Apriamo il file main.css ed inseriamo al suo interno le seguenti regole CSS:
/*RESPONSIVE*/
/*Fino a 1200px di larghezza*/
@media screen and (max-width: 1200px) {
//Qua il codice
}
/*Fino a 980px di larghezza*/
@media screen and (max-width: 980px) {
//Qua il codice
}
/*Fino a 767px di larghezza*/
@media screen and (max-width: 767px) {
//Qua il codice
}
/*Fino a 480px di larghezza*/
@media screen and (max-width: 480px) {
//Qua il codice
}Analizziamo quanto scritto. Le media query sono regole CSS che definiscono entro quale grandezza dello schermo debbano essere eseguite determinate regole.
Potremmo ad esempio dire che se la pagina Web viene mostrata attraverso uno schermo largo fino a 1200px, gli elementi dovranno rispettare le regole CSS presenti nella media query (max-width: 1200px). Lo stesso discorso vale per tutte le regole presenti all'interno delle altre query.
Facciamo un esempio e inseriamo all'interno della query (max-width: 1200px) il seguente valore:
/*Fino a 1200px di larghezza*/
@media screen and (max-width: 1200px) {
h1{ color: red;}
}Il risultato è un colore differente dell'elemento quando questo viene visualizzato tramite uno schermo di larghezza inferiore a 1200px.
Questo è ovviamente soltanto un caso tra i tanti che potrebbero verificarsi, non è inoltre necessario alla visualizzazione ottimale di una pagina Web ma aiuta a capire la logica del responsive design.
Definire regole per il responsive design
Procediamo quindi con l'inserimento di regole che renderanno responsive il nostro sito Web.
/*Fino a 767px di larghezza*/
@media screen and (max-width: 767px) {
ul#menu {
position: relative;
top: inherit;
right: inherit;
z-index: 1;
background-color: yellow;
padding: 10px 0px;
text-align: center;
margin-bottom: 0px;
}
ul#menu li a {
color: #111;
}
#logo {
position: absolute;
top: 100px;
left: 50%;
width: 80px;
margin-left: -40px;
}
}In questo modo abbiamo impostato gli elementi #logo e #menu all'interno dello screen, definendo delle regole che sono valide quando il sito viene visualizzato attraverso un dispositivo mobile, ovvero con dimensione inferiore a 767px.
Quando invece la dimensione aumenta e supera i 767px i due elementi vengono impostati rispettando le dimensioni dichiarate precedentemente.
Procediamo per step, apriamo il browser e attraverso il tasto destro del mouse analizziamo gli elementi presenti sfruttando la toogle device toolbar presente su Google Chrome.
Impostiamo la larghezza a 1200px e navighiamo nel sito per monitorare il risultato della visualizzazione.
Esso dovrebbe risultare piuttosto ordinato, in questo range di visualizzazione gli elementi dovrebbero essere infatti tutti ben visibili. Stesso discorso per quanto riguarda i 980px.
Qualora si volesse aggiornare la grandezza di alcuni elementi per meglio disporli all'interno della pagina non bisognerà far altro che inserire le regole CSS nelle relative media query.
Scendiamo ora fino alla dimensione più bassa da noi stabilità nelle query (max-width: 480px) ed aggiorniamo il footer come segue:
/*Fino a 480px di larghezza*/
@media screen and (max-width: 480px) {
.footer {
width: 100%;
}
}
Andiamo quindi all'interno della pagina "Contatti" e notiamo che il contenuto centrale necessita di una disposizione migliore. Procediamo all'aggiornamento del codice come segue ed ottimizziamo la visualizzazione e la lettura di tutti gli elementi presenti.
/*Fino a 480px di larghezza*/
@media screen and (max-width: 480px) {
.footer {
width: 100%;
height: 100px;
}
#content_contatti_left {
width: 100%;
height: auto;
}
#content_contatti_right {
width: 100%;
height: 500px;
}
#google_map {
width: 100%;
height: 500px;
}
}
Utilizzare le media query è quindi essenziale per dare forma a pagine Web e siti Internet in grado di fornire la miglior esperienza utente attraverso qualsiasi dispositivo e grandezza di schermo.
