Design Responsive

Scopri in che modo Squarespace modifica i contenuti del tuo sito per adattarli a qualsiasi dispositivo.

Ultimo aggiornamento 16 dicembre 2024

Il responsive design integrato di Squarespace consente di ridimensionare contenuti e immagini per adattarli a diversi dispositivi e larghezze dello schermo. Grazie al responsive design, i visitatori possono visualizzare automaticamente il sito in molte modalità, quindi non è necessario creare e mantenere siti separati per ogni potenziale dispositivo, browser e larghezza dello schermo.

La risposta a domande comuni come "Perché il mio banner viene ritagliato sui dispositivi mobili?" o "La mia immagine di sfondo è distorta. Come posso risolvere il problema?" sta nella conoscenza del responsive design e nella scelta di immagini che possono adattarsi alla forma di browser e dispositivi diversi.

Suggerimento

per maggiori informazioni sull'aspetto di determinati elementi del sito sui dispositivi mobili, visita Come verrà visualizzato il mio sito sui dispositivi mobili?

sizes.gif

Procedure consigliate per le immagini

Immagina un tappeto stretto che si adatta perfettamente al pavimento di una stanza stretta. Se sposti il tappeto in una stanza più piccola, o anche solo se lo giri di lato, non si adatterà correttamente.

Le immagini, in particolare le immagini banner e di sfondo, funzionano allo stesso modo. Il responsive design aiuta il tuo "tappeto" a cambiare dimensione e forma. Per un risultato ottimale, seleziona e imposta ogni immagine in modo che venga visualizzata correttamente nel maggior numero possibile di "stanze".

Quando scegli un'immagine da caricare, tieni presente questi aspetti:

Dimensione Immagine

Contenuti immagine

  • Motivi astratti e immagini senza testo o bordi funzionano meglio.
  • Per le immagini di sfondo, i motivi ripetuti offrono la massima flessibilità.
  • Modifica il focal point per controllare la centratura dell'immagine.
  • Se è importante che un'area specifica dell'immagine (come una persona o un oggetto) non venga ritagliata, può essere utile aggiungere un'area di "smarginatura" intorno ai bordi, in modo che il ritaglio sia meno evidente.
bleed-areas.png

Procedure consigliate per il testo

Il testo viene regolato automaticamente per adattarsi allo schermo.

Suggerimenti:

  • Aggiungi testo come didascalia, sovrapposizione o direttamente sulla pagina, anziché utilizzare immagini contenenti testo. Ciò ridurrà i problemi di ritaglio poiché i tipi di carattere si adattano alla larghezza del browser. I motori di ricerca possono inoltre indicizzarlo per i risultati.
  • Alcuni modelli della versione 7.0 offrono un controllo ottimizzato del ridimensionamento del testo sui dispositivi mobili.

Riorganizzazione dei contenuti su dispositivi mobili

In Fluid Engine, è possibile riorganizzare i contenuti per il layout mobile indipendentemente dal layout del computer.

Nell'editor classico, i contenuti sono impilati verticalmente nei dispositivi mobili. Questa modalità rende il tuo sito più facile da navigare e aiuta le immagini e il testo a rimanere visibili in un browser più piccolo e più stretto.

Per maggiori informazioni:

Nota

se il tuo sito è nella versione 7.0 e hai disabilitato gli stili per dispositivi mobili, i contenuti del sito non verranno riorganizzati o impilati su dispositivi mobili.

I contenuti rispondono in modo diverso sugli schermi Retina

L'aspetto del tuo sito sugli schermi Retina e HD dipende dalle dimensioni originali delle immagini caricate sul sito.

Quando carichi un'immagine, ne memorizziamo fino a sette versioni, ognuna con una larghezza diversa. Il nostro responsive design integrato rileva automaticamente lo schermo del visitatore e sceglie la dimensione dell'immagine più adatta. Sugli schermi Retina, mostreremo un'immagine al doppio delle dimensioni necessarie.

Nota

le immagini caricate tramite Stili sito nella versione 7.0, come le immagini di sfondo, sono l'eccezione a questa regola. Per queste immagini, mostriamo sempre l'immagine originale a grandezza naturale.

Ecco alcuni altri tipi di immagini da considerare:

  • Logo: caricare un file immagine di grandi dimensioni (il doppio delle dimensioni necessarie) per il logo può migliorarne l'aspetto sugli schermi HD e Retina. Tuttavia, ciò può causare una sfocatura su altri schermi e su alcuni browser. Considera il pubblico del tuo sito e usa una dimensione del logo adatta alla maggior parte degli schermi dei tuoi visitatori. Puoi modificare l'altezza del logo nella maggior parte dei modelli.
  • Icone: la maggior parte delle icone nei nostri modelli, come le icone menu e le icone social, si ridimensionano senza perdita di qualità dell'immagine perché si basano su web font o SVG. Alcuni modelli meno recenti o sospesi hanno icone basate su immagini che non si ridimensionano sui display Retina.
  • Testo: qualsiasi testo aggiunto al tuo sito si ridimensionerà per gli schermi Retina senza perdita di qualità.

Per ulteriori suggerimenti sull'ottimizzazione delle immagini, visita Formattare le immagini per la visualizzazione sul web.

Confronto su dispositivi diversi

Confrontare il sito su un dispositivo mobile e su un computer è un buon modo per capire come si adatta ai diversi tipi di browser. Quando apporti modifiche importanti sul tuo sito, è consigliabile tenere il telefono vicino, con il sito aperto nel browser. Quando salvi modifiche sostanziali su un computer, aggiorna il browser sullo smartphone per vedere l'effetto.

Testare le modifiche sul tuo dispositivo mobile ti offre la visualizzazione più accurata ed è l'unico modo per esplorare gli orientamenti verticali e orizzontali. Per vedere un'anteprima durante la modifica su un computer, utilizza Vista dispositivo.

Per saperne di più su come le dimensioni della finestra del browser possono incidere sulla formattazione dei contenuti del sito, visita Browser supportati.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.