Compatibilità:

WebSite X5 Evo e Pro

Nel Responsive Web Design, progettare correttamente una pagina non significa solo scegliere quali contenuti pubblicare, ma anche stabilire come questi contenuti devono adattarsi ai diversi dispositivi.


Su uno schermo ampio puoi affiancare più elementi, mentre nelle visualizzazioni più strette può essere necessario modificare la loro disposizione, stabilire un ordine diverso di lettura o nascondere contenuti meno importanti.


Con WebSite X5 puoi gestire questi aspetti attraverso le Impostazioni Responsive, intervenendo sull’ordine, sulla visibilità e sulla disposizione degli Oggetti nei diversi breakpoint.


Perché è importante pianificare i contenuti responsive

Quando progetti una pagina responsive, dovresti chiederti:

  • quali contenuti devono essere sempre facilmente accessibili;
  • in quale ordine devono essere presentati;
  • quali elementi possono eventualmente essere nascosti nelle visualizzazioni più strette;
  • come devono disporsi gli Oggetti quando non c’è più spazio sufficiente per mantenerli affiancati.


L’obiettivo non è semplicemente ridurre i contenuti su mobile, ma fare in modo che la Pagina rimanga chiara, leggibile e funzionale a qualsiasi risoluzione.


Una strategia pratica

Prima di intervenire sulle Impostazioni Responsive, considera i contenuti presenti nella Pagina e stabilisci quale sequenza permette di comprenderli e utilizzarli nel modo più efficace.


Individua gli elementi essenziali, valuta le relazioni fra testi, immagini e altri Oggetti e considera quali contenuti accessori possono eventualmente non essere visualizzati nelle risoluzioni più strette.


Questa valutazione va fatta per ogni Pagina, perché contenuti e priorità possono cambiare nelle diverse parti del Sito.


Esempio pratico

Immagina la Pagina di un ristorante in cui, nella visualizzazione Desktop, immagini dei piatti, testi descrittivi, informazioni di contatto e pulsanti per la prenotazione sono disposti su più colonne.


Quando lo spazio disponibile diminuisce, mantenere la stessa disposizione può rendere la Pagina poco leggibile. Puoi quindi stabilire in quale ordine presentare i diversi contenuti, fare in modo che alcuni Oggetti vadano a capo e, se necessario, non visualizzare gli elementi meno importanti in determinate risoluzioni.


In questo modo gli stessi contenuti possono adattarsi allo spazio disponibile mantenendo una struttura chiara e facile da consultare.


Come gestire i contenuti responsive in WebSite X5

In WebSite X5, una volta creata la pagina così come deve essere visualizzata su desktop, puoi definire quali modifiche deve subire in funzione dei diversi breakpoint attivati. 

1. Crea la pagina Desktop

  • Vai al Passo 4 - Pagine.
  • Apri la Pagina su cui vuoi lavorare.
  • Inserisci nella Griglia di impaginazione gli Oggetti necessari e organizza i contenuti come vuoi che vengano visualizzati su Desktop.

Questa struttura rappresenta il punto di partenza per definire il comportamento della Pagina alle risoluzioni inferiori.

2. Apri le Impostazioni Responsive

  • Clicca sul pulsante Responsive.
  • Nella finestra Impostazioni Responsive, la Responsive Bar propone tutte le Visualizzazioni determinate dai breakpoint attivati per il Sito.
  • Seleziona la Visualizzazione Desktop per iniziare.

La Griglia ripropone la struttura della Pagina e mette a disposizione i comandi necessari per definire come dovrà cambiare nelle Visualizzazioni successive.

3. Definisci l’ordine degli Oggetti

L’ordine stabilisce la sequenza con cui gli Oggetti vengono riorganizzati quando, diminuendo lo spazio disponibile, non possono più mantenere la disposizione impostata su Desktop.

  • Seleziona sulla Responsive Bar la Visualizzazione Desktop.  
  • Clicca sul pulsante Ordinamento.
  • Modifica l'ordinamento degli Oggetti in base alla sequenza logica dei contenuti e a come vuoi che vengano disposti nella Pagina. 
  • Prosegui con l’ordinamento fino all’ultimo Oggetto presente nella Pagina.

Se la Pagina è organizzata in più Sezioni, WebSite X5 gestisce separatamente l’ordinamento degli Oggetti presenti in ciascuna Sezione. Questo rende più semplice e veloce definire l’ordine degli Oggetti, soprattutto nelle Pagine più complesse..


#tip - Per maggiori informazioni, vedi Ordinamento Oggetti Responsive. Come organizzare correttamente i contenuti nelle diverse visualizzazioni?


4. Scegli quali Oggetti mostrare o nascondere

Non tutti gli Oggetti devono necessariamente essere visualizzati in tutte le risoluzioni. Se un contenuto diventa poco utile o occupa troppo spazio in una visualizzazione più stretta, puoi scegliere di non mostrarlo.


Per farlo:

  • Seleziona sulla Responsive Bar la Visualizzazione da cui vuoi partire.
  • Clicca sul pulsante Mostra/Nascondi Oggetto. 
  • Clicca sugli Oggetti che non vuoi visualizzare alle risoluzioni inferiori.
  • Clicca nuovamente sul pulsante Mostra/Nascondi Oggetto per confermare e uscire dalla modalità.

Gli Oggetti nascosti non saranno presenti nelle Visualizzazioni successive e gli altri contenuti verranno ridisposti nello spazio disponibile.


Procedi sempre valutando il ruolo effettivo dei contenuti: nascondere un Oggetto può essere utile per semplificare la Pagina, ma non dovrebbe rendere meno accessibili informazioni importanti.

5. Usa le Interruzioni di Riga per controllare la disposizione

Quando più Oggetti sono affiancati, a una risoluzione inferiore potresti voler stabilire esattamente in quale punto devono andare a capo.


Le Interruzioni di Riga servono proprio a questo: permettono di modificare la disposizione degli Oggetti nelle Visualizzazioni successive senza cambiare il loro ordine.


Per utilizzare questa funzione, disponibile solo nell'edizione Pro:

  • Seleziona la Visualizzazione desiderata.
  • Clicca sul pulsante Interruzione di Riga.
  • In tutti i punti in cui è possibile inserire un'Interruzione di Riga compare un tratteggio grigio: clicca sui tratteggi per impostare le Interruzioni di Riga desiderate. 
  • Clicca nuovamente sul pulsante Interruzione di Riga per confermare e uscire dalla modalità.


#tip - Sezioni e Interruzioni di Riga svolgono funzioni diverse. Le Sezioni organizzano strutturalmente la Griglia di impaginazione, mentre le Interruzioni di Riga controllano come gli Oggetti vanno a capo nelle diverse Visualizzazioni responsive. Per maggiori informazioni, vedi Impostazioni Responsive. Come creare layout più flessibili con le Interruzioni di Riga?


6. Gestisci le visualizzazioni intermedie

Lavorando con l'edizione Pro puoi impostare fino a 10 breakpoint complessivi. Dopo aver impostato la Visualizzazione Desktop, procedi dunque con le Visualizzazioni successive seguendo l’ordine indicato nella Responsive Bar.

  • Utilizza la Responsive Bar per selezionare la Visualizzazione successiva a quella Desktop. 
  • La Griglia viene aggiornata in base a quanto impostato per la Visualizzazione Desktop: su questa nuova configurazione procedi impostando, se necessario, altri Oggetti come non visibili e inserendo altre interruzioni di riga.
  • Ripeti questi passaggi per tutte le Visualizzazioni successive.


#tip - La Griglia mostra la struttura assunta dalla Pagina nella Visualizzazione selezionata. Le modifiche che imposti determinano invece come la Pagina verrà organizzata nella Visualizzazione immediatamente successiva.


7. Gestisci la visualizzazione Smartphone

Quando arrivi alla Visualizzazione Smartphone non sono necessarie ulteriori impostazioni.


Gli Oggetti rimasti visibili vengono completamente linearizzati e disposti uno sotto l’altro seguendo l’ordine definito inizialmente.


Controlla comunque il risultato per assicurarti che la sequenza dei contenuti rimanga comprensibile e che le informazioni più importanti siano facilmente accessibili.


Suggerimenti pratici

Per ottenere un buon risultato responsive:

  • considera l’ordine logico dei contenuti, non solo la loro importanza;
  • parti dalla Visualizzazione Desktop e procedi in ordine verso quelle più strette;
  • nascondi un contenuto solo quando non è necessario nella Visualizzazione considerata;
  • usa le Interruzioni di Riga per controllare il passaggio da una disposizione affiancata a una disposizione su più righe;
  • mantieni leggibili e facilmente accessibili i contenuti essenziali anche nelle Visualizzazioni più strette;
  • controlla sempre il risultato in Anteprima nei diversi breakpoint.