Negli scorsi articoli di questa guida dedicata alla creazione di un sito web con WordPress ed Elementor, abbiamo esaminato dettagliatamente la creazione delle pagine, integrando template personalizzati e sfruttando gli strumenti del plugin con l'estensione "Happy Addons for Elementor". Tutto ciò per una personalizzazione ancora più avanzata.
Proseguiamo ora con un approfondimento dedicato al responsive design. Assicurandoci che le nostre pagine siano ottimizzate per una visualizzazione e una fruizione efficace su dispositivi mobile, come smartphone e tablet, oltre che naturalmente su Desktop.
Parliamo di responsive design?
Il responsive design è un approccio alla progettazione e allo sviluppo dei siti web che mira a garantire una visualizzazione ottimale su una vasta gamma di dispositivi e dimensioni di schermo. In pratica, il layout di un sito web deve essere concepito in modo tale che si adatti e si modifichi automaticamente in base alle caratteristiche del dispositivo utilizzato per visualizzarlo, sia esso un monitor di grandi dimensioni o il display di una smartphone dalla diagonale limitata.
Le principali caratteristiche del responsive design includono:
- flessibilità delle dimensioni: gli elementi del sito web, come testo e immagini, sono progettati per adattarsi proporzionalmente alle dimensioni dello schermo, mantenendo la leggibilità e l'usabilità.
- Adattamento del layout. Il layout del sito si adatta in modo dinamico alle diverse dimensioni dello schermo, ridisponendo gli elementi in modo ottimale per garantire una buona esperienza utente.
- Navigazione intuitiva. I menu di navigazione e i pulsanti sono progettati per essere facilmente accessibili e utilizzabili su dispositivi di diverse dimensioni, consentendo agli utenti di navigare nel sito con facilità.
In sintesi, il responsive design è fondamentale per garantire che un sito web sia accessibile e fruibile su qualsiasi device. Migliorando la user experience, uniformandola e aumentando l'efficacia della comunicazione online.
Ottimizzare un sito web per i dispositivi mobile con Elementor
Vediamo quindi come ottimizzare un sito web per il responsive design grazie ad Elementor.
Raggiungiamo la dashboard di WordPress e partiamo dalla Home Page.
Per accedere alla modalità di lavoro per il responsive design dobbiamo cliccare sull'icona situata in basso a sinistra la quale ci porterà all'interno dell'area di lavoro dedicata.
In questa sezione abbiamo la possibilità di passare alla vista attraverso i 3 step principali di visualizzazione. Ovvero Desktop, tablet e mobile.
Passando da una visualizzazione all'altra possiamo notare come il nostro sito web si adatti in base alla grandezza della finestra entro la quale deve essere ottimizzato.
Già da questa prima parte possiamo verificare se il layout delle pagine del sito web presenta qualche problema di visualizzazione.
In questo caso possiamo vedere ad esempio come per la visualizzazione da tablet il menu di navigazione non sia veda per intero. Sarebbe quindi buona cosa migliorarne l'aspetto intervenendo con il responsive design.
Andiamo quindi a ridurre leggermente la grandezza del font del menu sistemando al meglio la visualizzazione anche attraverso le dimensioni dello schermo del tablet (in questo caso w768 x h888).
Ovviamente è possibile anche testare una grandezza di schermo specifica, semplicemente modificando i valori dei campi dedicati.
Inoltre cliccando sull'icona dell'ingranaggio è possibile gestire i punti di breakpoint. Cioè indicare sotto quale grandezza la visualizzazione dovrà passare alle nuove impostazioni responsive.
Mostrare e nascondere elementi di pagina
Un altro intervento che possiamo effettuare consiste nel mostrare o nascondere alcuni elementi in base alla resa in fase di visualizzazione. Quindi decidere che con una specifica grandezza della pagina uno o più elementi debbano essere nascosti. Questa pratica è comune soprattutto per ottimizzare la resa grafica o per rimuovere elementi superflui. Vediamo come funziona.
Decidiamo per esempio che, all'interno della visualizzazione mobile, l'immagine presente sotto al testo di introduzione non dovrà essere mostrata.
Clicchiamo quindi sopra di essa, andiamo all'interno delle impostazioni avanzate e scendiamo fino alla tab dedicata al design Responsive.
A questo punto avremo la possibilità di nascondere l'elemento per la visualizzazione che preferiamo. Nel nostro caso la nasconderemo per il mobile.
Fatto questo, se aggiorniamo ad andiamo all'interno dell'anteprima da mobile l'immagine sarà sparita.
In questo modo si potrà decidere quale grandezza e quale livello di visibilità dovranno avere tutti gli elementi delle nostre pagine.
Personalizzare elementi e ottimizzare il responsive design
A questo punto vediamo anche come sia possibile personalizzare gli elementi man mano che la grandezza della pagina si riduce. Ipotizziamo ad esempio che un certo titolo debba essere più piccolo, e quindi ridurre automaticamente le sue dimensioni, quando lo si visualizza da un smartphone.
Per questo scopo non dovremo far altro che andare all'interno delle impostazioni di stile e poi stabilire che per la dimensione di pagina "mobile", la dimensione del carattere dovrà ridursi.
In questo modo quando visualizzeremo la pagina attraverso uno smartphone il carattere si ridurrà alla dimensione stabilità.
Conclusioni
Ora che abbiamo esaminato come funziona il responsive design e come sia possibile ottimizzare un sito web per la visualizzazione su smartphone e tablet utilizzando Elementor e WordPress, siamo pronti a creare un sito web che offra un'esperienza utente ottimale su qualsiasi dispositivo.
Ricorda che il responsive design è fondamentale per garantire che i tuoi visitatori possano accedere ai contenuti in modo chiaro, immediato e intuitivo. Indipendentemente dal dispositivo che utilizzano.
Un design responsive non solo migliora l'usabilità del tuo sito, contribuisce anche a costruire la tua reputazione online come professionista e ad aumentare il coinvolgimento degli utenti. Offrendo un'esperienza coerente e piacevole su tutti i dispositivi, dimostri agli utenti che ti preoccupi della loro esperienza e che sei impegnato a fornire loro il miglior servizio possibile.