Compatibilità:

WebSite X5 Evo e Pro

Un Sito Web Responsive è un Sito in cui il layout e i contenuti si adattano al comportamento e all'ambiente dell’Utente in base a fattori come la dimensione dello schermo, la piattaforma e l’orientamento del dispositivo. Questo significa che quando per esempio l’Utente passa dal suo PC desktop ad un tablet o ad uno smartphone, il Sito Responsive si adatta automaticamente alla nuova risoluzione continuando a permettere una fruizione dei contenuti e modalità di interazione ottimali.


Il principio alla base del Responsive Design, dunque, è che non occorre creare versioni diverse di uno stesso Sito Web: ogni Sito Web deve, piuttosto, sapersi adattare rispetto alla crescente varietà di dispositivi con i quali verrà fruito.


Per ottenere questo risultato, il Responsive Web Design fa ricorso ad un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS. Al di là dei mezzi tecnici adottati, per arrivare a realizzare un Sito Web Responsive è però importante comprendere appieno quali sono gli obiettivi che questo tipo di progettazione si pone e come questi obiettivi influiscono sul modo di organizzare e gestire i contenuti.


Avendo il fine di permettere un'esperienza utente positiva nei più diversi contesti d'uso, il Responsive Web Design si prefigge obiettivi come:

  • adattare il layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
  • adattare le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) alla risoluzione e alle dimensioni dello schermo;
  • semplificare il layout degli elementi presenti sulla Pagina per i dispositivi mobili con schermi piccoli;
  • nascondere gli elementi non essenziali su questi stessi dispositivi;
  • fornire un’interfaccia adatta all'interazione touch per i device che la supportano.


Tenendo ben presente questi obiettivi minimi e il fine ultimo di garantire la miglior esperienza d'uso possibile a prescindere dal device utilizzato, con WebSite X5 puoi realizzare Siti Web Responsive contando sul fatto che il programma semplifica la gestione dei contenuti e risolve completamente la parte di creazione del codice sottostante le pagine.


I passi che devi seguire per creare un Sito Web Responsive sono i seguenti:

  • Vai al al Passo 2, clicca su Risoluzioni e Responsive Design e nella finestra a cui accedi attiva l'opzione Sito Responsive.
  • Sempre nella finestra Risoluzioni e Responsive Design, definisci la lista dei breakpoint da attivare per il Sito (vedi, Come si impostano i breakpoint).
  • A questo punto puoi incominciare ad occuparti del Modello. Sempre al Passo 2, accedi alla sezione Struttura del Modello e utilizza la Responsive Bar per selezionare, una dopo l'altra, le diverse Visualizzazioni e lavorare a come il Modello deve cambiare per ciascuna di esse (vedi, Come si imposta il Modello per un sito responsive).   
  • Anche i contenuti delle Pagine devono adattarsi alle diverse risoluzioni. Vai al Passo 4 e, dopo aver creato la Pagina così come si presenta nella Visualizzazione Desktop, clicca sul pulsante  Responsive per richiamare la finestra Impostazioni Responsive (vedi, Come si gestiscono i contenuti di un sito responsive). 
  • Utilizza di nuovo la Responsive Bar per selezionare la Visualizzazione alla quale lavorare: parti da quella Desktop e procedi con ordine in modo da arrivare a quella Smartphone.
  • Per le diverse Visualizzazioni clicca sul pulsante  Ordinamento, quindi clicca sui diversi Oggetti inseriti nella Griglia in modo da ordinarli (vedi, Come funziona il processo di ordinamento degli Oggetti).
  • Se ci sono degli Oggetti che desideri rimuovere in determinate Visualizzazioni, clicca sul pulsante  Mostra/Nascondi Oggetto e poi clicca direttamente sugli Oggetti da nascondere.
  • Lavorando con la versione Pro puoi forzare il fatto che alcuni Oggetti si dispongano sulla riga seguente: clicca sul pulsante Interruzione di Riga quindi clicca sulle righe tratteggiate presenti tra gli Oggetti delle Griglia dove vuoi inserire gli "a capo" (vedi, Come e perché impostare le Interruzioni di Riga).
  • Quando hai finito di sistemare tutte le Pagine non ti rimane che controllare che tutto funzioni correttamente: clicca sul pulsante Anteprima in modo da visualizzare il sito nel browser in locale. Usa i pulsanti per simulare la visualizzazione delle pagine alle diverse risoluzioni (vedi, Come si verifica il funzionamento di un Sito responsive nell'Anteprima locale).