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 è più sostenibile.


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;
  • valutare la gerarchia dei contenuti;
  • intervenire manualmente quando necessario.


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 inseriti diventano semi-trasparenti e quelli selezionabili appaiono riquadrati in rosso.
  • Scegli il primo Oggetto fra quelli riquadrati in rosso e clicca per selezionarlo. L'Oggetto selezionato ridiventa completamente opaco e visualizza il numero assunto. Tutti gli altri Oggetti rimangono ancora semi-trasparenti e, se necessario, viene aggiornato il numero che riportano.
  • Clicca su tutti gli altri Oggetti della pagina seguendo l'ordine che vuoi venga seguito nel processo di linearizzazione dei contenuti di pagina.
  • Per accelerare i tempi, nel caso la serie iniziale di Oggetti non debba essere modificata, puoi aprire il menu accessibile dal pulsante Ordinamento e selezionare Prosegui l'ordinamento da un Oggetto: in questo caso, devi cliccare sull'Oggetto da cui vuoi proseguire nell'ordinamento. Tutti gli Oggetti precedenti vengono confermati mentre su tutti gli Oggetti successivi devi cliccare per definirne la posizione nell'ordinamento.
  • Per terminare la procedura di ordinamento devi:
    • giungere a cliccare sull'ultimo Oggetto presente nella Pagina;
    • usare il comando Ordinamento > Completa ordinamento: termina la procedura confermando l'ordinamento corrente;
    • usare il comando Ordinamento > Annulla ordinamento: termina la procedura annullando le modifiche effettuate e ripristinando 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. Il programma valuta tutte le possibilità di ordinamento e, di volta in volta, evidenzia in rosso solo gli Oggetti che possono essere selezionati senza causare discontinuità che impedirebbero la corretta linearizzazione degli Oggetti.


Strategia di ordinamento

In base all'Oggetto su cui clicchi durante il processo di ordinamento e a come tutti gli Oggetti sono inseriti nella Griglia di impaginazione, di volta in volta cambiano gli Oggetti riquadrati fra cui puoi scegliere per determinare quello che deve seguire nell'ordinamento.


Per meglio comprendere questo passaggio, considera l'immagine di esempio:


Immagine 1. Struttura di partenza


Con questa configurazione di Pagina, quando si avvia la modalità Ordinamento, il programma riquadra in rosso tutti gli Oggetti della prima riga perché è solo fra questi che è possibile scegliere quello che deve essere considerato il primo della lista.


Cliccando sull'Oggetto 1, la situazione sulla Griglia cambia come segue:


Immagine 2. Click su 1: scelta tra 2, 3 e 4


Come si vede, cliccando sull'Oggetto 1 si conferma la sua posizione e il programma chiede di scegliere il secondo fra gli Oggetti 2, 3 e 4.


Quello descritto è solo uno degli ordinamenti possibili: in base ai contenuti poteva essere più corretto impostare come primo Oggetto dell'ordinamento uno qualsiasi degli altri Oggetti presenti nella prima riga della Griglia.


Proseguendo con l'esempio, ipotizziamo di aver confermato la posizione degli Oggetti 1, 2 e 3. A questo punto il programma offre la possibilità di scegliere se cliccare sull'Oggetto 4 o sull'Oggetto 5.


Immagine 3. Scelta tra 4 e 5


Decidere di cliccare sull'Oggetto 4 piuttosto che sull'Oggetto 5 ha delle conseguenze sulle scelte successive. Nel primo caso, infatti, si determina una struttura di Pagina che si articola su due righe, nel secondo caso, invece, una struttura che si articola su due colonne.


Immagine 4. Click su 4: struttura a righe


Immagine 5. Click su 5: struttura a colonne


Blocchi di Oggetti

Durante la procedura di ordinamento si possono configurare delle strutture in cui si creano dei Blocchi di Oggetti: nell'Immagine 5, per esempio, gli Oggetti 1, 2, 3 e 4 formano un Blocco così come gli Oggetti 5 e 6 ne formano un altro. Un Blocco di Oggetti si comporta come se fosse un Oggetto unico e, per maggior chiarezza, viene disegnato sulla Griglia non appena si forma.


Immagine 6.


Immagine 7.


Le immagini 6 e 7 dimostrano come scelte di ordinamento diverse creano Blocchi di Oggetti diversi che, alla fine, determinano 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.


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. Anche 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


L'Immagine 10 rappresenta un esempio di Blocco Indivisibile. Come si vede, 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 l'inserimento di Interruzioni di riga fra gli Oggetti interessati (funzione disponibile nell'edizione Pro) e non permette di rendere invisibile uno degli Oggetti senza rendere automaticamente invisibili anche tutti gli altri Oggetti del Blocco. Dunque, anche se possono essere gestiti, quando si presentano dei Blocchi Indivisibili è consigliabile rivedere la disposizione degli Oggetti per cercare di semplificarla ed avere, così, maggiore libertà d'azione.


Buone pratiche

Non è possibile affermare genericamente che un ordinamento è più corretto o migliore di un altro: tutto dipende dai contenuti presenti e dai risultati che si vogliono ottenere. 


Per evitare problemi:

  • preferisci strutture semplici;
  • evita composizioni troppo complesse;
  • controlla sempre la formazione dei blocchi;
  • limita i blocchi indivisibili.


Verifica in Anteprima come la Pagina viene visualizzata ad ogni breakpoint. Se i contenuti continuano a disporsi in maniera coerente, significa che l'ordinamento impostato è funzionale e 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.