Arrivati a questo punto abbiamo completato lo sviluppo di un sito Web realizzando tutte le pagine Web in maniera personalizzata ed inserendo tutti gli elementi necessari. Adattandoli alle nostre esigenze.
Come avrai notato il sito Web è però visibile perfettamente soltanto attraverso dispositivi che superano una risoluzione di 1200px in larghezza, ovvero PC Desktop e laptop. Questo è normale in quanto durante la creazione del sito abbiamo assegnato delle dimensioni adatte a mostrare le pagine in una grandezza per noi comoda. Quello che faremo ora sarà ottimizzare le pagine del sito per fare in modo che siano visibili da ogni dispositivo mobile e siano ottimizzate per offrire la migliore esperienza utente.
Come si crea un sito Web ottimizzato per tutti i dispositivi?
Iniziamo col comprendere quanto sia fondamentale garantire che un sito Web sia ben visibile su qualsiasi dispositivo. È infatti cruciale sviluppare un prodotto che sia accessibile da qualsiasi dispositivo e in grado di adattarsi alle diverse dimensioni degli schermi.
In questa guida, abbiamo creato un intero sito Web considerando le misure e le proporzioni relative alla dimensione rettangolare di uno schermo standard. Tuttavia, è interessante chiedersi cosa accadrebbe se aprissimo il sito attraverso un tablet o uno smartphone. Come primo passo, è necessario accedere al file head.php e integrare il seguente blocco di codice:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport comunica al browser con cui si sta visualizzando la pagina di adattare le dimensioni e le proporzioni alla larghezza dello schermo del dispositivo utilizzato. In altre parole il tag rende la struttura della pagina fluida o attiva questa caratteristica. Successivamente, entriamo nel cuore della tecnica responsive dove analizzeremo le istruzioni che consentiranno di ridimensionare ogni elemento e renderlo ottimale per la visualizzazione su qualsiasi risoluzione e dimensione dello schermo.
Device e Responsive Web Site
Faccio una premessa: esistono diversi modi per rendere un sito responsive e quindi ottimizzato per tutti i dispositivi di navigazione. Utilizzando WordPress potrei prendere in considerazione di sfruttare dei plugin specifici (come abbiamo fatto per il menu di navigazione). Essi scriverebbero il codice all'interno delle pagine al posto nostro. L'obiettivo della guida è però quello di permetterci la piena personalizzazione. Ecco perché voglio evitare di usare plugin aggiuntivi e desidero entrare direttamente nel codice per inserire ogni elemento.
Apriamo quindi il file CSS principale chiamato style.css ed inseriamo al suo interno le seguenti regole di codice:
/*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
}Le media query
Analizziamo quanto scritto. Le media query sono istruzioni CSS che stabiliscono le condizioni in base alle quali devono essere applicate regole specifiche in relazione alle dimensioni dello schermo del dispositivo.
Ad esempio: possiamo definire che se la pagina Web è visualizzata su uno schermo con una larghezza massima di 1200px. Gli elementi dovranno quindi conformarsi alle regole CSS definite all'interno della media query (max-width: 1200px). Questo principio si applica anche a tutte le altre regole presenti nelle diverse query.
Per illustrare, consideriamo un esempio e aggiungiamo il seguente valore all'interno della query (max-width: 1200px):
/*Fino a 1200px di larghezza*/
@media screen and (max-width: 1200px) {
#content h1{ color: red;}
}Il risultato che otteniamo è il cambio di colore dell'elemento <h1> quando questo viene visualizzato con uno schermo inferiore a 1200px. Puoi notare il cambiamento anche solo semplicemente restringendo la finestra del browser fino a scendere sotto la grandezza dei 1200px.
Ovviamente quello riportato è soltanto un esempio di come funzionano le media query. Man mano che scrivo le regole all'interno delle query queste vanno a sovrascrivere quelle precedenti per fare in modo che il layout si adatti alle dimensioni delle diverse risoluzioni.
Simulare le risoluzioni dello schermo
Appreso il funzionamento delle media query possiamo passare alla pratica restringendo via via la finestra del browser, simulando la diverse risoluzioni ed aggiornando le regole CSS. Per simulare diverse risoluzioni rispetto a quella in uso possiamo anche avvalerci dello strumento "Ispeziona" disponibile con un click del tasto destro del mouse.
Con esso si aprirà una finestra di controllo attraverso la quale è possibile cambiare la grandezza della finestra.
Portiamo la grandezza della finestra a 980px di larghezza e, a questo punto, restringiamo alcune parti rendendole visivamente migliori.
/*980*/
@media (max-width: 980px) {
#logo {
width: inherit;
float: left;
}
nav {
width: 80%;
height: 80px;
background-color: transparent;
float: right;
display: flex;
align-items: center;
}
}Questa parte permetterà ad esempio di mantenere ben visibile il menu ed il logo anche nella nuova risoluzione. Passiamo poi a tutte le pagine per assicurarci che la visualizzazione degli elementi sia ottimale, dopodiché affrontiamo la media query successiva (767px).
In questa visualizzazione andiamo ad ottimizzare la visualizzazione sui dispositivi mobile, come smartphone o tablet. Quindi è necessario riadattare ogni elemento in modo da renderlo ben visibile anche quando viene visualizzato su dispositivi di piccola dimensione.
/*767*/
@media (max-width: 767px) {
nav {
width: 100%;
float: inherit;
display: block;
}
#mega-menu-wrap-primary {
width: 100%;
}
nav{
height: auto;
}
.grid-1-left {
width: 100%;
height: auto;
}
.grid-1-right {
width: 100%;
height: 350px;
}
.footer {
width: 100%;
height: auto;
float: left;
text-align: center;
border-bottom: 1px solid #fff;
}
}
Con queste regole abbiamo fatto in modo che il menu sia funzionale ed ottimizzato anche da smartphone, aprendosi verticalmente, ed inoltre abbiamo verticalizzato anche gli elementi presenti all'interno del <body> e del <footer>.
Ovviamente queste regole saranno presenti anche all'interno delle altre pagine del sito Web. Qualora volessi modificare specifiche aree, non dovrai far altro che richiamare l'elemento corrispondente e cambiare le sue regole per ottimizzare le pagine nella risoluzione desiderata.