Come fare un sito web responsive con Oxygen e WordPress

Ormai si sa, gli smartphone ricoprono un ruolo molto importante nella vita di tutti noi. Tramite i nostri cellulari infatti passiamo molto tempo su internet, passando da un sito web all'altro. Diventa quindi impensabile avere un sito web che non si visualizza perfettamente da ogni dispositivo.

Questi siti web vengono definiti "responsive", poiché i contenuti presenti al loro interno si adeguano a qualsiasi schermo e risoluzione, offrendo agli utenti pagine perfettamente fruibili in ogni circostanza.

Questo aspetto è col tempo è diventato uno degli aspetti più importanti per un buon posizionamento nei motori di ricerca. Recentemente infatti, Google ha annunciato che darà più importanza ai contenuti scritti per i dispositivi mobili anziché quelli disponibili solo da desktop.

Come rendere responsive un sito web con Oxygen

Se ti trovi a leggere questo articolo è perché stai sviluppando il tuo sito web con Oxygen, o comunque perché stai pensando di iniziare ad usarlo. Quindi vediamo subito come questo fantastico page builder ci permette di avere il pieno controllo degli elementi da qualsiasi risoluzione (ed è l'unico a farlo!).

Prima di tutto, dobbiamo definire i breakpoint per il nostro sito web, ovvero la larghezza in pixel oltre la quale i contenuti devono fare riferimento ad altri stili grafici. Oxygen ci permette di gestire il responsive tramite 4 livelli di breakpoint:

• Computer desktop ad alta risoluzione
• Computer desktop a bassa risoluzione
• Tablet
• Smartphone

Quindi abbiamo la possibilità di variare l'aspetto delle nostre pagine web ben 4 volte, personalizzando completamente i contenuti in base alla risoluzione desiderata.

Se il concetto ti è poco chiaro, non preoccuparti, lo vedremo nel lato pratico tra pochissimo!

Impostare dei breakpoint personalizzati su Oxygen Builder

Anche in questo caso, Oxygen non si smentisce e ci consente di avere piena padronanza del nostro sito web. Infatti, a differenza di altri page builder, su Oxygen possiamo scegliere il valore di pixel oltre il quale attivare un determinato breakpoint.

Per farlo devi accedere al builder e cliccare su "Manage -> Settings", in alto a destra. Dopo di che, clicca sulla voce "Width & Breakpoints".

In questa schermata puoi scegliere 4 valori in pixel personalizzati per il tuo sito web. L'impostazione agisce a livello globale e non sulla singola pagina.

Io sono solito a non modificare i valori per tablet, landscape e portrait, ma modifico solo il valore "page width", impostandolo a 1360px (di default è impostato poco sotto i 1200px). In questo modo ottengo una pagina più larga, che riempie meglio lo schermo nei monitor ad alta risoluzione.

Dopo aver impostato i valori desiderati, clicca su salva e poi clicca sul link per rigenerare la cache CSS presente sotto all'ultimo breakpoint (è un processo automatico, ma almeno siamo certi di non avere problemi di visualizzazione).

Come spostarsi da un breakpoint all'altro

Ora che hai definito i tuoi breakpoint apri nuovamente il visual editor e seleziona un qualsiasi elemento presente nella pagina. Dal menu verticale di sinistra, nell'intestazione dell'elemento, è presente un menu a tendina con al suo interno l'icona di un monitor.

Cliccando sull'icona si apre il menu e sarà possibile selezionare un altro breakpoint. Dopo aver selezionato un breakpoint, l'area di lavoro verrà ridimensionata in base al breakpoint desiderato.

Facendo riferimento a questa immagine e alle impostazioni che abbiamo configurato poco fa, i breakpoint funzionano come segue:

• All devices: stili applicati a qualsiasi dispositivo
• Page container: stili applicati da "page width" in giù
• Less than 992px: stili applicati da "tablet" in giù
• Less than 768px: stili applicati da "landscape" in giù
• Less than 480px: stili applicati da "portrait" in giù

Quando attivi un breakpoint, tutte le modifiche che effettui ai contenuti della pagina verranno applicate al medesimo breakpoint e a quelli inferiori, se non diversamente specificato.

Infatti, se noi non andiamo a specificare degli stili grafici differenti nei breakpoint inferiori, Oxygen erediterà gli stili grafici dai breakpoint superiori, o più precisamente dall'ultimo breakpoint a cui abbiamo applicato uno stile. Facciamo un esempio al fine di capire perfettamente il concetto:

Inserisco un titolo in "all devices" e imposto una dimensione di 48px.

Attivo il breakpoint "less than 992".

Il campo della dimensione del font è vuoto, ma ciononostante il font è impostato su 45px, poiché eredità lo stile dal breakpoint "all devices".

Quindi imposto la dimensione a 24px, poi attivo il breakpoint "less than 480".

Trovo nuovamente il campo della dimensione vuoto, ma il font questa volta è impostato su 24px, poiché eredita lo stile dall'ultimo breakpoint che abbiamo modificato.

Questo è l'esatto funzionamento dei breakpoint e il meccanismo è valido per qualsiasi stile grafico e per qualsiasi elemento.

Responsive Oxygen: Cosa si può modificare e cosa non si può modificare?

Semplice, quando realizzi un sito responsive con Oxygen puoi modificare tutto ciò che rientra nello stile grafico di un elemento, ma non puoi modificarne il contenuto. Non confonderti e cerca di seguire quello che ti sto per spiegare, poi sarà tutto più chiaro 🙂

Cosa PUOI modificare

Colori dei font, colori di sfondo, immagini di sfondo, dimensioni di font, icone, immagini, larghezza e altezza di ogni elemento, padding, margine, allineamento dei contenuti, impostazioni di visualizzazione e via dicendo.

Puoi fare in modo che un testo cambi colore e dimensione per ogni breakpoint oppure puoi nascondere/mostrare determinati elementi solo in specifiche risoluzioni.

Cosa NON puoi modificare

L'unica cosa che non puoi modificare è il vero e proprio contenuto dell'elemento. Per banalizzare il concetto, possiamo dire che un elemento è composto da due protagonisti: il contenuto e lo stile.

Se lo stile (che ormai dovremmo aver capito cos'è) segue le stesse regole per ogni elemento, il contenuto invece varia in funzione della natura dell'elemento stesso. Un "elemento testuale", ha come contenuto dei veri e propri testi, mentre un elemento "immagine" ha come contenuto l'immagine che deve essere mostrata sul sito web.

Se noi modifichiamo un testo in un determinato breakpoint, cancellando per esempio una frase, questa modifica viene applicata a tutte le risoluzioni, perché abbiamo effettivamente eliminato un pezzo di contenuto.

Come fare quindi per modificare i contenuti di un sito web responsive con Oxygen?

Di "modificare" non se ne parle, tuttavia possiamo "nascondere" e "mostrare", in sostanza possiamo "scambiare" i contenuti.

Mi spiego meglio. Potrei inserire un titolo più lungo per chi visita il mio sito da desktop e inserirne uno più corto per chi lo visita da smartphone. Poi devo agire sui breakpoint come segue:

Quando la risoluzione dello schermo è superiore a X pixel, allora nascondi il titolo "breve" e mostra il titolo "lungo".

Quando invece la risoluzione è inferiore a X pixel, mostra il titolo "breve" e nascondi il titolo "lungo".

Bene, ma come si fa? Tramite lo stile CSS "display: none"!

Responsive design e comandi "display"

Tramite il CSS (quindi tramite Oxygen) possiamo nascondere e mostrare degli elementi tramite gli stili "display". Su Oxygen, questi stili li troviamo nella scheda "Advanced" di un elemento, cliccando sulla voce "Layout".

Cliccando su "Display -> none", andiamo letteralmente a nascondere un elemento dalla pagina. Quindi, qualora volessimo "sostituire" un titolo quando la pagina viene visualizzata da smartphone, dovremmo comportarci come segue:

Inserisco in "all devices" entrambi i titoli (per desktop e per smartphone).

Seleziono il titolo per smartphone e imposto "display: none" per nasconderlo.

Cambio breakpoint e seleziono nuovamente il titolo per smartphone (dovrò selezionarlo dalla struttura poiché non sarà visibile nella pagina), questa volta imposto "display: flex".

Infine, sempre da quest'ultimo breakpoint, seleziono il titolo per desktop e lo imposto su "display: none".

Semplice, vero? Questo puoi applicarlo a qualsiasi elemento, realizzando così un sito web perfettamente responsive con Oxygen! 🙂

Questa guida è giunta al termine e spero di aver risolto i tuoi dubbi. Se hai qualche domanda, ti invito a farla direttamente commentando questo post. Grazie per la lettura, alla prossima!