Breakpoint. Come impostare correttamente le risoluzioni di un Sito Web Responsive?

Compatibilità:

WebSite X5 Evo e Pro

Quando si progetta un Sito Web Responsive, uno degli aspetti più importanti da definire riguarda i breakpoint. Sono infatti questi punti di controllo che permettono al layout di adattarsi correttamente ai diversi dispositivi, garantendo una navigazione efficace su desktop, tablet e smartphone.

Impostare correttamente i breakpoint significa organizzare il sito in modo che struttura, contenuti e leggibilità possano modificarsi nei momenti giusti, offrendo agli utenti un’esperienza coerente indipendentemente dalla dimensione dello schermo.

Cos’è un breakpoint

Un breakpoint è un punto preciso nella scala delle risoluzioni dello schermo in cui il layout del sito cambia per adattarsi meglio allo spazio disponibile.

In pratica, ogni breakpoint definisce il passaggio da una visualizzazione all’altra.

Ad esempio, l'immagine seguente rappresenta 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 visualizzazioni. In questo modo:

• sopra 960px il sito può mantenere una struttura desktop;
• scendendo tra 720px e 960px, il layout può adattarsi a tablet posti in orizzontale;
• scendendo ancora tra 480px e 720px, il layout può adattarsi a tablet posti in verticale;
• su risoluzioni inferiori a 480px, il contenuto viene ottimizzato per smartphone.

Perché i breakpoint sono importanti

I breakpoint permettono di:

• adattare il layout alle diverse categorie di dispositivi;
• migliorare leggibilità e usabilità;
• evitare layout disordinati;
• ottimizzare immagini, testi e menu;
• offrire un’esperienza responsive più professionale.

L’obiettivo non è creare una configurazione per ogni singolo dispositivo, ma individuare macro-categorie di visualizzazione efficaci.

Breakpoint di riferimento in WebSite X5

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

Questi valori rappresentano una base di partenza, ma possono essere adattati in funzione delle esigenze specifiche del progetto.

Quanti breakpoint conviene utilizzare?

Non è possibile dare una risposta definitiva a questa domanda. La scelta dipende da:

• struttura del sito;
• complessità del layout;
• tipologia di contenuti;
• pubblico di riferimento;
• livello di personalizzazione desiderato.

In generale:

• WebSite X5 Evo consente la gestione di 3 breakpoint;
• WebSite X5 Pro permette di configurarne fino a 10.

Più il layout è articolato, maggiore può essere la necessità di breakpoint aggiuntivi.

Come impostare i breakpoint in WebSite X5

Fatti i dovuti ragionamenti su quanti e quali breakpoint attivare, in WebSite X5 puoi configurarli procedendo in questo modo:

1. Attiva il Responsive Design

• Vai al Passo 2 - Modello.
• Apri la finestra Risoluzioni e Responsive Design.
• Rimani nella sezione Breakpoint.
• Attiva l'opzione Sito Responsive.

2. Definisci i breakpoint

• Rimani nella sezione Breakpoint e definisci la lista dei breakpoint da attivare per il Sito utilizzando gli appositi comandi Aggiungi, Rimuovi e Modifica. Puoi:
  • modificare breakpoint esistenti;
  • aggiungere nuovi breakpoint (Pro);
  • rimuovere breakpoint intermedi (Pro);
  • personalizzare le soglie di adattamento.
• Tutti i breakpoint impostati sono elencati nella Tabella riassuntiva e verranno ripresi nella finestra Impostazioni Responsive.

3. Considera le regole di gestione

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 possono essere modificati con il pulsante Modifica, ad eccezione del breakpoint Smartphone, che riprende automaticamente il valore del breakpoint superiore.
• 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 breakpoint 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 Smartphone.
• 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.

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

Suggerimenti pratici

Per ottenere una configurazione efficace, tieni a mente questi suggerimenti pratici:

• evita breakpoint inutilmente eccessivi;
• testa il layout su più dispositivi;
• privilegia semplicità e leggibilità;
• considera il comportamento reale dei contenuti;
• verifica sempre la resa finale in Anteprima.

In sintesi

I breakpoint rappresentano la base tecnica su cui costruire un Sito Web Responsive efficace.

Con WebSite X5 puoi gestirli senza dover intervenire direttamente sul codice, sfruttando strumenti visuali che semplificano configurazione, adattamento e controllo delle diverse visualizzazioni.

Il tuo obiettivo è individuare i punti di transizione più adatti al progetto, così da garantire un’esperienza di navigazione ottimale su qualsiasi dispositivo.