Che cosa si intende per realizzazione siti web responsive? La tecnologia avanza a passi rapidi, fino a poco tempo PC e notebook erano gli unici dispositivi che garantivano un’esperienza di navigazione e visualizzazione ottimale dei siti internet. Da quando è sempre più frequente, pratico e utile navigare anche con smartphone e tablet, si è reso necessario “ottimizzare” e adattare la visualizzazione degli schermi anche per dispositivi più piccoli e con varie definizioni. Senza la necessità di “duplicare” il proprio sito – aziendale o personale che sia – la tecnologia informativa si è evoluta fino a rendere automatico l’adattamento del video per le varie tipologie e definizioni di schermo, permettendo una navigazione fluida per ogni dispositivo in uso. Questa capacità di “adattamento” è frutto della realizzazione siti web responsive, che “rispondono”, appunto, alle esigenze degli schermi in uso. Ma come si creano siti web responsive? Ecco alcuni piccoli “trucchi” per impostare un sito web responsive anche in previsione futura …
Menu di navigazione dell'articolo
Dal sito web statico al sito responsive
Con la diffusione delle piattaforme di web design - open source o a pagamento – è diventato relativamente più semplice realizzare siti web in genere, al punto che anche web designer professionisti ne hanno approfittato per “velocizzare” il proprio lavoro e anche per soddisfare quei clienti che – pur conoscendone poco in materia – richiedono espressamente di voler, per esempio, un sito web cu piattaforma Wordpress, o Shopify o Joomla e così via. Questa sorta di “rilassamento” ha, in parte, arrugginito e impigrito alcuni web designer che sono rimasti spiazzati dalle richieste crescenti di siti web che fossero compatibili con tutti i formati di schermo in circolazione: Smart TV, Pc, notebook, laptop, tablet, smartphone, senza modificare la versione del sito di partenza.
Fermo restando che anche le piattaforme di web design hanno aggiunto delle funzioni integrate di adattamento automatico della visualizzazione di un sito alle varie tipologie di schermi, il modo migliore per la realizzazione di siti web responsive è metterci le mani e scrivere i codici in HTML e CSS affinché il risultato sia ottimale e personalizzato. Ecco, dunque, la necessità di una guida sulla realizzazione di siti web responsive: tutto comincia dalla comprensione degli elementi del design responsive.
Cos’è il design responsive
realizzare un sito web responsive significa creare un sistema che permette a ogni singolo sito di essere riconosciuto e adattato alle dimensione del dispositivo in uso dall’utente. Per fare ciò, occorre partire dal design responsive, la struttura grafica adattiva che a sua volta si basa su tre elementi: l’uso di una griglia fluida, l’impiego di immagini e testi flessibili e la scrittura di media query.
- La griglia fluida o Fluid Grid è una funzione che permette al sito web di apparire più grande o più piccolo in base alle dimensioni dello schermo di un dispositivo senza deformazioni o perdita di definizione.
- Le foto e i testi flessibili sono elementi adattati e adattabili alle varie tipologie di schermo e che in base alle “istruzioni” dettate e dalle dimensioni del sito possono essere sostituite automaticamente, non comparire affatto o adattarsi nelle dimensioni in base ai dispositivi sui quali gli elementi visuali saranno visualizzati
- Il media query è l’istruzione scritta in codice HTML per permettere alle griglie fluide e alle immagini e testi flessibili di apparire correttamente sui vari schermi. In buona sostanza, la scrittura delle media queries è il fulcro della realizzazione di siti web responsive.
Come si definiscono le media query
Nella realizzazione siti web responsive, il codice del sito scritto in HTML rimane immutato, ma le “query” (comandi o istruzioni), in particolare modo in questo caso le media query permettono al CSS di applicare regole in vario modo e di “comandare” anche come visualizzare le pagine del sito su schermi di dimensioni varie.
Una media query si scrive nel modo seguente:
@media (max-width: 500px;) {/* scrivi la regola/query CSS qui*/}
Queste porzioni di istruzioni che si aggiungono nel CSS si applicano in presenza di determinati breakpoint. Cosa sono i breakpoint? Si chiamano così i punti di interruzione che determinano quando la griglia fluida del sito deve cambiare dimensione e quando il contenuto all’interno di una pagina viene riadattato, nascosto o sostituito. I breakpoint impostati generalmente si basano sulle dimensioni più comuni dei vari dispositivi.
Come fare con gli schermi del futuro?
Poiché non si può realizzare un sito web responsive per ogni singolo tipo di schermo esistente o che esisterà, la cosa più logica da fare è impostare dei breakpoint e rispettive regole CSS basandosi sulle dimensioni più comuni sia dei monitor per PC che per dispositivi mobili. Non è necessario essere “maniaci della perfezione” scrivendo media query specifici per tutti gli schermi, per esempio, della Serie “S” Samsung o per quelli di ottava generazione o per i device Apple.
La semplicità e la logica è la via maestra, attenendosi alle caratteristiche comuni a tutti i dispositivi. Per cui definiremo e scriveremo sul codice sorgente almeno 5 breakpoint e relative query, nel modo seguente (i “comandi” si scrivono in lingua inglese per convenzione):
- @media (max-width: 1200px;) {/*for desktops*/} ► per gli schermi dei PC;
- @media (max-width: 991px;) {/*for laptops*/} ► per gli schermi dei notebook e portatili;
- @media (max-width: 768px) and (max-width: 990px;) {/*for large tablets*/} ► per i tablet nel range di grandezza da 768 pixel a 990 pixel;
- @media (max-width: 768px;) {/*for smaller tablets*/} ► per tablet di formato piccolo
- @media (max-width: 500px;) {/*for cellphones*/} ► per cellulari /smartphone.
Per ogni breakpoint definito occorre assicurarsi che la regola sia applicata nella realtà e che il comando venga eseguito. Inutile negare che, spesso, occorre procedere per tentativi affinché – anche con le impostazioni standard – la griglia fluida si adatti in modo appropriato al sito su cui si sta lavorando.
Per effettuare le verifiche, si consiglia l’uso degli strumenti per sviluppatori messi già a disposizione dei browser. Chi utilizza Google Chrome e Mozilla Firefox può semplicemente premere il tasto F12 della tastiera oppure premere il tasto destro del mouse o touchpad e selezionare la voce “ispeziona” per poter simulare la visualizzazione del sito su schermi di varie dimensioni. Queste funzioni valgono anche per gli utenti del Mac. Chi, invece, utilizza il browser Safari, per attivare gli strumenti per sviluppatori occorre abilitare il “Web Inspector”.
Infine, il metodo migliore per visualizzare il risultato è vederlo applicato direttamente verificando sul proprio dispositivo mobile. È il modo migliore per testare e capire se si è fatto un buon lavoro nella realizzazione di siti web responsive e controllare se le immagini e i testi si adattano allo stesso modo, si ridimensionano in modo corretto senza perdere qualità.
Conviene sempre realizzare siti web responsive?
La risposta breve è “Sì”, per due ragioni. Dal 2015, Google ha introdotto delle penalizzazioni per i siti che non sono mobile-friendly e che quindi non permettono un’adeguata visualizzazione anche da smartphone o altri dispositivi mobili. La seconda ragione è perché un sito web responsive è la risposta migliore per tutte le soluzioni di visualizzazione sui vari schermi. Ma questo non significa prediligere il concetto di mobile first. Infatti, non è consigliabile realizzare siti web solo in ottica di visualizzazione da smartphone. Lavorare sul design in ottica solo mobile è limitativo, basti considerare che solo il 20% della popolazione mondiale alla fine – pur utilizzando sempre i dispositivi mobili – lo utilizza per effettuare acquisti o prenotazioni, studiare o leggere. Molti prediligono ancora la visualizzazione da schermo PC. È bene, in ultima analisi, realizzare siti web responsive a tutto campo senza limitarsi nelle possibilità: finché convivono tutte le tipologie di schermo, occorre soddisfare tutti gli utilizzatori di tutti i dispositivi.
