Compatibilità:

WebSite X5 Evo e Pro

Uno dei primi punti che devi risolvere nella progettazione di un Sito Web Responsive è quello relativo ai breakpoint.


Un breakpoint è un punto, sulla linea ideale che esprime la risoluzione dei possibili dispositivi su cui potrà essere visualizzato un Sito, in cui si verifica una qualche modifica al layout della Pagina.


Per meglio comprendere il meccanismo, considera l'immagine di esempio che rappresenta schematicamente il comportamento di un Sito per il quale sono stati impostati 3 breakpoint: a 960px, a 720px e a 480px.



Con 3 breakpoint si determinano 4 diverse tipologie di visualizzazioni. Per risoluzioni inferiori a 480px, il Sito ha lo sfondo blu. Quando la finestra del Browser raggiunge la dimensione di 480px in larghezza, lo sfondo diventa verde e rimane di questo colore fino a quando la larghezza non supera i 720px: a questo punto lo sfondo diventa giallo. Infine, a 960px c’è un altro breakpoint e da quel punto in poi lo sfondo è rosso.


Ma quanti breakpoint è opportuno o necessario creare? Non è possibile dare una risposta definitiva a questa domanda: molto dipende dalle caratteristiche del Sito, dal suo layout, dal pubblico a cui si rivolge, ecc. Si potrebbe rispondere che occorre creare tanti breakpoint quanti ne servono perché una Pagina si adatti al meglio ai dispositivi su cui viene visualizzata.


La pratica prevalente tende a fissare i breakpoint sulla base delle dimensioni dello schermo delle principali tipologie di dispositivi. Riprendendo questa prassi, WebSite X5 riporta sulla linea delle Risoluzioni di Riferimento i seguenti breakpoint:

  • 960px: Desktop
  • 720px: Tablet con orientamento landscape
  • 600px: Tablet con orientamento portrait
  • 480px: Smartphone con orientamento landscape
  • Inferiore a 480px: Smartphone con orientamento portrait


L’obiettivo da raggiungere è impostare i breakpoint in modo da identificare delle macrocategorie: i dispositivi sono talmente tanti, infatti, che è impossibile cercare di fissare un breakpoint per ciascuno di essi. Con l'edizione Evo di WebSite X5 puoi gestire 3 breakpoint; con l'edizione Pro, invece, puoi impostare fino a 10 breakpoint, inclusi quelli legati alle Visualizzazioni Desktop e Smartphone.


Fatti i dovuti ragionamenti sui breakpoint da attivare, in WebSite X5 puoi procedere nella creazione di un Sito Web Responsive in questo modo:

  • Al Passo 2 nella finestra Risoluzioni e Responsive Design attiva l'opzione Sito Responsive.
  • Sempre nella finestra Risoluzioni e Responsive Design, definisci la lista dei breakpoint da attivare per il Sito utilizzando gli appositi comandi. Nell'impostare i breakpoint considera che:
    • Di default tutti i breakpoint vengono impostati secondo valori ripresi dal Modello grafico scelto per il Progetto.
    • Tutti i breakpoint, ad eccezione di quello Smartphone che riprende automaticamente il valore del breakpoint superiore,  possono essere liberamente modificati attraverso l'apposito pulsante Modifica....
    • Nell'edizione Evo non è possibile né eliminare i breakpoint presenti né aggiungerne di nuovi.
    • Nell'edizione Pro non è possibile eliminare il breakpoint Smartphone ma è invece possibile decidere di eliminare (tramite il pulsante Rimuovi) i breakpoint intermedi. Il brekpoint Desktop può essere selezionato e rimosso ma, automaticamente, il breakpoint successivo viene assunto come nuovo breakpoint Desktop. Al minimo devono essere presenti almeno 2 breakpoint, quello Smartphone e quello Desktop.
    • Nell'edizione Pro è possibile aggiungere (tramite il pulsante Aggiungi) nuovi breakpoint fino a un massimo di 10, inclusi i breakpoint Desktop e Smarphone.
    • Il breakpoint Smartphone definisce la risoluzione minima al di sotto della quale il Sito viene sempre visualizzato linearizzato: tutti gli Oggetti vengono visualizzati uno sotto l'altro (rispettando l'ordinamento e la scelta degli Oggetti da rendere non visibili fatti nella finestra Impostazioni Responsive) e, come la larghezza di Pagina, sono impostati in modo da occupare il 100% dello spazio disponibile in larghezza.

Tutti i breakpoint impostati sono elencati nella Tabella riassuntiva e verranno ripresi nelle finestra Impostazioni Responsive.


#tip - Mentre con l'edizione Evo viene richiesto di fissare solo il breakpoint Smartphone, nell'edizione Pro è possibile impostare fino a 10 breakpoint, inclusi quello Desktop e quello Smartphone. Aprendo con l'edizione Pro un progetto realizzato con l'edizione Evo, viene ripreso il breakpoint Smartphone e si ha la possibilità di aggiungerne altri nuovi.