Compatibilità:
WebSite X5 Evo e Pro
Quando si realizza un Sito Web Responsive, definire una gerarchia efficace dei contenuti è fondamentale. Non basta infatti scegliere quali elementi inserire in una pagina: è altrettanto importante stabilire come questi contenuti devono riorganizzarsi quando lo spazio disponibile diminuisce.
L’obiettivo dell’ordinamento responsive è garantire che testi, immagini e Oggetti mantengano una disposizione coerente, leggibile e funzionale anche passando dalla visualizzazione desktop a tablet e smartphone.
Con WebSite X5, questa gestione avviene attraverso la finestra Impostazioni Responsive, dove puoi controllare l’ordine con cui gli Oggetti verranno adattati alle diverse risoluzioni.
Perché l’ordinamento degli Oggetti è importante
Definire correttamente l’ordine dei contenuti permette di:
- stabilire priorità tra gli elementi;
- migliorare leggibilità e usabilità;
- evitare disposizioni disordinate;
- controllare la linearizzazione su mobile;
- rendere il layout più efficace nei diversi breakpoint.
In pratica, l’ordinamento determina il comportamento della Pagina quando la struttura desktop non può più essere mantenuta nello spazio disponibile.
Dove gestire l’ordinamento in WebSite X5
WebSite X5 assegna automaticamente un ordine iniziale agli Oggetti, ma questo non sempre corrisponde alla soluzione più efficace. Per questo motivo è consigliabile verificare l’ordinamento proposto e intervenire manualmente quando la gerarchia dei contenuti lo richiede.
Per intervenire sull'ordinamento dei contenuti devi procedere in questo modo:
- Vai al Passo 4 - Pagine.
- Apri la pagina desiderata.
- Clicca sul pulsante
Responsive. - Accedi alla finestra Impostazioni Responsive: presenta una Responsive Bar con l'elenco dei breakpoint attivati.
- Seleziona sulla Responsive Bar la visualizzazione Desktop: ora la Griglia mostra gli Oggetti presenti, numerati in base a come sono ordinati al momento.
- Clicca sul pulsante
Ordinamento: gli Oggetti diventano semi-trasparenti e quelli che puoi selezionare vengono evidenziati da un riquadro rosso. - Scegli il primo Oggetto fra quelli evidenziati e clicca per selezionarlo. L'Oggetto ridiventa completamente opaco e visualizza il numero assunto nell'ordinamento.
- Continua a cliccare sugli Oggetti seguendo l'ordine che vuoi venga utilizzato nel processo di linearizzazione dei contenuti. Di volta in volta WebSite X5 evidenzia gli Oggetti che possono essere selezionati come successivi.
- Se la serie iniziale di Oggetti non deve essere modificata, puoi aprire il menu accessibile dal pulsante Ordinamento e selezionare Prosegui l'ordinamento da un Oggetto. Clicca quindi sull'Oggetto da cui vuoi riprendere: tutti quelli precedenti mantengono l'ordine già impostato, mentre devi ridefinire la posizione di quelli successivi.
- Per terminare la procedura puoi:
- proseguire fino a selezionare l'ultimo Oggetto;
- usare il comando Ordinamento > Completa ordinamento per terminare la procedura confermando l'ordinamento corrente;
- usare il comando Ordinamento > Annulla ordinamento per annullare le modifiche e ripristinare l'ordinamento iniziale.
#tip - L'obiettivo del processo di ordinamento è disporre tutti gli Oggetti presenti in una pagina in modo da poter essere linearizzati correttamente. WebSite X5 valuta le possibili sequenze e mette in evidenza in rosso solo gli Oggetti che possono essere selezionati senza creare discontinuità che impedirebbero la corretta linearizzazione dei contenuti.
Strategia di ordinamento
In base all'Oggetto su cui clicchi e a come gli Oggetti sono disposti nella Griglia di impaginazione, cambiano di volta in volta le alternative disponibili per definire l'elemento successivo.
Il comportamento dipende anche da come hai strutturato la Pagina: puoi lavorare su una Pagina non suddivisa in più Sezioni oppure su una Pagina in cui hai utilizzato più Sezioni per organizzare aree indipendenti.
Caso 1. Pagina non suddivisa in più Sezioni
Se non hai suddiviso la Pagina in più Sezioni, WebSite X5 valuta il flusso degli Oggetti presenti nell'intera Griglia.
Per comprendere meglio il funzionamento, considera questa struttura:
Immagine 1. Struttura di partenza
Quando avvii la modalità Ordinamento, il programma evidenzia in rosso tutti gli Oggetti della prima Riga perché è fra questi che puoi scegliere quello da considerare come primo della lista.
Cliccando sull'Oggetto 1, la situazione cambia come segue:
Immagine 2. Click su 1: scelta tra 2, 3 e 4
La posizione dell'Oggetto 1 viene confermata e WebSite X5 propone come secondo elemento gli Oggetti 2, 3 e 4.
Quello mostrato è solo uno degli ordinamenti possibili: in base ai contenuti potrebbe essere più corretto scegliere come primo elemento uno qualsiasi degli altri Oggetti disponibili nella prima Riga.
Proseguendo con l'esempio, ipotizziamo di aver confermato la posizione degli Oggetti 1, 2 e 3. Il programma permette ora di scegliere fra l'Oggetto 4 e l'Oggetto 5.
Immagine 3. Scelta tra 4 e 5
La scelta ha conseguenze sulle possibilità successive. Se selezioni l'Oggetto 4, si determina una struttura organizzata principalmente per Righe; scegliendo invece l'Oggetto 5 si determina una struttura organizzata principalmente per Colonne.
Immagine 4. Click su 4: struttura a righe
Immagine 5. Click su 5: struttura a colonne
Caso 2. Pagina suddivisa in più Sezioni
Se la Pagina è suddivisa in più Sezioni, WebSite X5 gestisce l'ordinamento separatamente per ciascuna di esse: prima completa il flusso degli Oggetti presenti nella Sezione corrente e poi passa alla successiva.
Supponiamo, per esempio, che una prima Sezione contenga gli Oggetti 1, 2 e 3 e che subito dopo inizi una seconda Sezione.
Se durante l'ordinamento hai già selezionato gli Oggetti 1 e 2, WebSite X5 propone come elemento successivo solo l'Oggetto 3, perché è l'ultimo ancora da ordinare nella Sezione corrente.
Una volta selezionato l'Oggetto 3, l'ordinamento passa alla Sezione successiva e il programma evidenzia gli Oggetti che possono rappresentare i primi elementi del nuovo flusso.
#tip - Le Sezioni semplificano l’ordinamento responsive suddividendo la Pagina in aree gestite separatamente. Per maggiori informazioni, vedi Sezioni di pagina. Come creare layout con strutture diverse?
Blocchi di Oggetti
Durante la procedura di ordinamento si possono creare dei Blocchi di Oggetti. Un Blocco si comporta come se fosse un unico Oggetto e viene disegnato sulla Griglia non appena si forma, in modo da rendere più chiara la struttura.
Nell'esempio precedente, scegliendo una struttura a Colonne, gli Oggetti 1, 2, 3 e 4 formano un Blocco, mentre gli Oggetti 5 e 6 ne formano un altro.
Immagine 6.
Immagine 7.
Le Immagini 6 e 7 mostrano come scelte di ordinamento diverse possano creare Blocchi di Oggetti differenti e, di conseguenza, strutture di Pagina alternative.
In linea generale, non è detto che un Blocco di Oggetti rimanga tale in tutte le Visualizzazioni.
Immagine 8. Blocco di Oggetti nella visualizzazione Desktop
Immagine 9. Rendendo non visibile l'Oggetto 4, nella visualizzazione successiva il Blocco non si forma più
Nell'Immagine 8, per esempio, gli Oggetti 1, 2 e 3 formano un Blocco perché sono affiancati dall'Oggetto 4 disposto su entrambe le righe. Se però, come si vede nell'Immagine 9, si inserisce un'Interruzione di riga tra il Blocco e l'Oggetto 4 (possibile lavorando con l'edizione Pro) o se si rende invisibile l'Oggetto 4, nella Visualizzazione successiva gli Oggetti 1, 2 e 3 non sono più affiancati da altri Oggetti e non formano più un Blocco.
Se la Pagina è suddivisa in più Sezioni, il calcolo dell'ordinamento viene eseguito separatamente per ciascuna Sezione: anche la formazione dei Blocchi viene quindi determinata nell'ambito della Sezione corrente.
Blocchi Indivisibili
Quando un Blocco di Oggetti rimane tale in tutte le Visualizzazioni, ad eccezione di quella Smartphone in cui la Pagina viene completamente linearizzata, e non c'è modo di intervenire per scioglierlo, viene definito Blocco Indivisibile.
I Blocchi Indivisibili vengono disegnati sulla Griglia ed evidenziati con un colore diverso rispetto a quello utilizzato per i Blocchi normali.
Immagine 10. Esempio di Blocco Indivisibile
Nell'esempio, la disposizione "a fiore" degli Oggetti non permette di identificare una struttura a Righe o a Colonne. Questo riduce significativamente le possibilità di ordinamento, non consente di inserire Interruzioni di riga fra gli Oggetti interessati (funzione disponibile nell'edizione Pro) e non permette di rendere invisibile un singolo Oggetto senza rendere automaticamente invisibili anche tutti gli altri Oggetti del Blocco.
Quando si forma un Blocco Indivisibile, è quindi consigliabile verificare se puoi semplificare la disposizione degli Oggetti nella Griglia in modo da avere maggiore libertà nella gestione responsive.
Attenzione alle Celle vuote
Quando crei una nuova Pagina in un Sito responsive, fai in modo che nella Griglia di impaginazione non ci siano Celle vuote. Il programma tratta le Celle vuote come se fossero degli Oggetti (vuoti) e assegna a ognuno di essi una posizione nell'ordinamento: queste posizioni non potranno essere modificate ma influiranno sulle possibilità di ordinamento degli Oggetti reali. Per mantenere il maggior grado di libertà nell'ordinare gli Oggetti è meglio, dunque, evitare di avere Celle vuote inserendo piuttosto degli Oggetti vuoti: se inseriti manualmente, questi Oggetti vuoti non influiranno sulla composizione della Pagina e potranno essere ordinati.
Buone pratiche
Non esiste un ordinamento corretto in assoluto: la soluzione migliore dipende dai contenuti presenti nella Pagina e dal risultato che vuoi ottenere nelle diverse Visualizzazioni.
Per evitare problemi:
- stabilisci prima quali contenuti devono avere maggiore priorità;
- preferisci strutture semplici e facili da linearizzare;
- evita composizioni troppo complesse quando non sono necessarie;
- controlla la formazione dei Blocchi di Oggetti;
- quando possibile, limita i Blocchi Indivisibili.
Infine, verifica sempre in Anteprima come viene visualizzata la Pagina nei diversi breakpoint. Se i contenuti mantengono una sequenza coerente, leggibile e funzionale, l'ordinamento impostato può essere mantenuto.
In sintesi
L’ordinamento degli Oggetti è uno degli aspetti più importanti nella progettazione responsive, perché determina il modo in cui i contenuti si adattano alle diverse risoluzioni.
Con WebSite X5 puoi controllare questo processo in modo visuale, definendo una struttura più efficace, leggibile e strategica senza intervenire direttamente sul codice.
Un buon ordinamento migliora usabilità, flessibilità e qualità complessiva del progetto.