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.


Uno stesso contenuto può infatti avere un ruolo differente a seconda che venga visualizzato su desktop o su smartphone: su schermi ampi può essere utile valorizzare elementi visivi, mentre su mobile spesso diventano prioritari rapidità di consultazione, leggibilità e accesso immediato alle informazioni essenziali.


Per questo motivo, una buona strategia responsive richiede di organizzare i contenuti in modo intelligente, definendo priorità, ordine di visualizzazione e presenza effettiva nei diversi breakpoint.


Perché è importante pianificare i contenuti responsive

Quando progetti una pagina responsive, dovresti chiederti:

  • quali contenuti sono realmente essenziali;
  • quali possono essere ridotti o nascosti su mobile;
  • quale ordine di visualizzazione è più efficace;
  • come ottimizzare l’esperienza utente sui diversi dispositivi.


L’obiettivo è offrire sempre il contenuto più utile nel modo più efficace possibile.


Una strategia pratica

Una buona strategia è fare una lista di tutti i contenuti che devono essere presenti in una Pagina e ordinarli da quelli più importanti a quelli meno importanti: in questo modo è più semplice identificare i contenuti essenziali, quelli che devono rimanere disponibili sempre, e i contenuti accessori che invece possono essere nascosti quando, a risoluzioni più basse, occorre presentare solo quello che serve realmente. Ovviamente questa operazione di ordinamento deve essere ripetuta per ogni Pagina del Sito.


Esempio pratico

Per meglio comprendere questo meccanismo, prendiamo ad esempio il sito web di un ristorante. Quando il sito viene visualizzato su desktop si può puntare molto su immagini e animazioni che mettono in mostra le diverse portate del menu per interessare e ingolosire gli utenti. Quando però lo stesso sito viene fruito da mobile, si può presumere che l'utente sia più interessato a leggere le recensioni o a trovare le informazioni di contatto piuttosto che a visualizzare immagini di grandi dimensioni. Diventa quindi necessario risparmiare sulle immagini per assecondare le esigenze di un utente che opera con un dispositivo meno capace (schermo piccolo, banda non necessariamente larga, ecc.) e che in mobilità ha bisogno di informazioni veloci e puntuali.


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.
  • Crea la Pagina trascinando nella Griglia di impaginazione gli Oggetti necessari e procedendo all'inserimento dei diversi contenuti. La Pagina così creata è quella che verrà visualizzata per risoluzioni superiori al breakpoint Desktop.

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.

3. Gestisci l’ordinamento degli Oggetti

  • Devi procedere in ordine: inizia selezionando sulla Responsive Bar la Visualizzazione Desktop.  
  • Nella Griglia viene riproposta la configurazione impostata nella finestra Creazione della Pagina. 
  • Clicca sul pulsante Ordinamento per attivare la modalità in cui è possibile procedere all'ordinamento degli Oggetti inseriti nella Griglia. Su ogni Oggetto inserito in Griglia viene visualizzato un numero assegnato in base all'ordinamento effettuato in automatico dal programma.
  • Modifica l'ordinamento degli Oggetti in base all'importanza che hanno i diversi contenuti e a come vuoi che vengano disposti nella Pagina. Puoi seguire diverse strade:
    • Impostando Ordinamento > Ordina tutti gli Oggetti dall'inizio, devi iniziare cliccando sull'Oggetto che vuoi posizionare per primo e poi procedere cliccando in ordine su tutti gli altri Oggetti.
    • Impostando Ordinamento > Prosegui l'ordinamento da un Oggetto, 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.

La procedura di ordinamento è guidata: selezionato un Oggetto, vengono evidenziati con un bordo rosso tutti gli Oggetti sui quali puoi cliccare per stabilire quello che deve seguire. L'ordinamento impostato per la Visualizzazione Desktop verrà mantenuto anche per tutte le altre Visualizzazioni.

  • La procedura di ordinamento termina:
    • quando clicchi sull'ultimo Oggetto presente nella Pagina.
    • se clicchi su Ordinamento > Completa ordinamento: termina la procedura confermando l'ordinamento corrente.
    • se clicchi su Ordinamento > Annulla ordinamento: termina la procedura annullando le modifiche effettuate e ripristinando l'ordinamento iniziale.


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


4. Mostra/Nascondi i contenuti

  • Clicca sul pulsante Mostra/Nascondi Oggetto: in questa modalità puoi impostare gli Oggetti come invisibili. 
  • Clicca sugli Oggetti che, a risoluzioni inferiori a quella attualmente selezionata, non dovranno più essere visualizzati.
  • Clicca una seconda volta sul pulsante Mostra/Nascondi Oggetto per confermare e uscire da questa modalità.

5. Gestisci le Interruzioni di Riga

  • Clicca sul pulsante Interruzione di Riga: in questa modalità puoi agire sull'allineamento degli Oggetti forzando alcuni di questi ad andare "a capo" a risoluzioni inferiori a quella della Visualizzazione Desktop (attualmente selezionata). 
  • 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 una seconda volta sul pulsante Interruzione di Riga per confermare e uscire da questa modalità.


#tip - 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: questo rende necessario gestire la visualizzazione dei contenuti anche a risoluzioni intermedie.

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

7. Gestisci la visualizzazione Smartphone

Giunto alla Visualizzazione Smartphone non devi fare più nulla dal momento che tutti gli Oggetti rimasti come visibili vengono semplicemente linearizzati, ovvero posizionati uno sotto l'altro, in base all'ordinamento impostato inizialmente.


#tip - La Griglia riporta la struttura che la Pagina assume nell'intervallo di risoluzioni identificato dalla Visualizzazione selezionata. Tutte le modifiche che imposti andranno, invece, a determinare la struttura che la Pagina assumerà per l'intervallo di risoluzioni associato alla Visualizzazione immediatamente successiva.


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.


Suggerimenti pratici

Per ottenere risultati migliori:

  • pianifica sempre i contenuti per priorità;
  • parti dalla versione Desktop;
  • semplifica progressivamente;
  • testa tutte le visualizzazioni;
  • privilegia velocità e leggibilità su mobile;
  • verifica sempre il risultato in Anteprima.


In sintesi

Gestire correttamente i contenuti responsive significa progettare pagine capaci di adattarsi non solo nella struttura, ma anche nella rilevanza e nella fruibilità dei contenuti.


Con WebSite X5 puoi controllare ordinamento, visibilità e disposizione degli Oggetti senza intervenire sul codice, costruendo un’esperienza utente più efficace, moderna e ottimizzata per ogni dispositivo.