Per responsive homepage si intende la predisposizione della home a essere visualizzata su dispositivi mobili, quali tablet e smartphone.
Dopo aver visto, negli articoli precedenti, i contenuti più convenienti da proporre nella pagina principale e le modalità più pratiche per il loro inserimento, ci assicureremo adesso di aver effettivamente realizzato una cosiddetta “responsive homepage”.
Tabella dei Contenuti
Modalità responsive
Come avevamo visto nella seconda parte della guida, è molto semplice verificare la visualizzazione da tablet e smartphone con il plugin Elementor.
È infatti sufficiente abilitare la modalità responsive (clicca qui per maggiori dettagli) per vedere l’anteprima della pagina come la si vedrebbe da un dispositivo mobile.
In base a come hai costruito il layout della pagina, ti troverai con più o meno cose da sistemare.
Bisogna comunque considerare che gran parte dell’ottimizzazione è gestita automaticamente dal plugin e quindi, il più delle volte, sono sufficienti delle piccole messe a punto.
Andiamo quindi a vedere, sezione dopo sezione, come appare la nostra home sui dispositivi mobili.
Ottimizzare home per mobile e tablet
Iniziamo con la intro che abbiamo creato nell’articolo Introduzione home.
In questa prima sezione, la versione per tablet non necessità interventi particolari. Volendo essere pignoli, si potrebbe giusto aumentare un po’ la dimensione del titolo e del sottotitolo.
Lo stesso discorso vale per la versione mobile.
L sezione relativa al testo (vista in Titolo e descrizione home) è perfettemente visibile su tablet e non necessita modifiche.
Possiamo però apportare un intervento alla versione mobile di questa sezione. Il sottotitolo va a capo con una parola e sta poco bene. Inoltre, la giustezza del testo risulta troppo stretta e sarebbe bene diminuire il rientro a sinistra e destra.
Seleziona l’intestazione per modificarne la dimensione del corpo. Spostati in STILE, clicca sull’icona della matita Tipografia e riduci o aumenta il corpo in base alle tue esigenze. In questo caso, abbiamo ridotto di qualche pixel il corpo per mantenere la scritta su una sola riga e poi abbiamo aumentato leggermente l’interlinea (Altezza riga).
Per diminuire il rientro laterale del testo, seleziona l’elemento e spostati su AVANZATO. Noterai che i campi sotto Rientro sono vuoti. A questo punto potresti chiederti: da dove arriva questo rientro? Ebbene viene ereditato dalle impostazioni Desktop. Ti basterà cliccare sull’iconcina del dispositivo (vicino al nome del relativo campo) per tornare alla versione Desktop e controllare i valori precedentemente inseriti.
Nel nostro caso avevamo inserito un riento in percentuale di 0 (sopra), 20% (destra), 3% (sotto) e 20% (sinistra). Abbiamo così modificato con i seguenti valori: 0 (sopra), 5% (destra), 3% (sotto) e 5% (sinistra).
La sezione relativa a box icone e CTA su tablet risulta ordinata e la possiamo lasciare così.
Come avrai notato, le colonne di una sezione “scivolano” automaticamente una sotto l’altra nella versione per smartphone. Naturalmente potresti anche decidere di modificare questo comportamento, prevedendo più colonne per riga. Per avere due colonne, ad esempio, ti basterebbe impostare al 50% la larghezza di ciascuna colonna ed eventualmente diminuire il corpo di testi e icone.
La nostra CTA su mobile va prevalentemente bene: si potrebbe soltanto ridurre un pochino la dimensione dell’headline e rendere il separatore sagomato “freccia” un po’ meno a punta, aumentando la larghezza e diminuendo l’altezza.
Vediamo ora l’ultima sezione, relativa all’articolo contenuti in evidenza e banner.
Su mobile, l’intera sezione risulta già ben ottimizzata.
Solo su tablet, gli articoli del blog risultano un po’ troppo stretti su due colonne. Tuttavia, mantenere un solo articolo per colonna potrebbe non essere la soluzione ideale. In questo caso, dovrebbe bastare ridurre il rientro laterale delle colonne e diminuire un poco il corpo dei titoli.
Conclusioni
Siamo dunque giunti al termine del capitolo home page. Nella prossima parte della guida, andremo a vedere come realizzare altre pagine molto importanti del sito web, come la pagina Chi siamo, I Servizi, Contatti, sempre utilizzando il plugin Elementor.
