Scopri come i vari elementi del sito appaiono ai visitatori da mobile.

I siti Squarespace sono progettati per fare in modo che i visitatori possano navigare con qualsiasi dispositivo, che sia un computer, un tablet o uno smartphone.

Questa guida spiega come alcuni elementi del sito sono visualizzati su dispositivi mobili e offre suggerimenti per modificare gli stili per tali dispositivi.

Guarda un video

Mantenere il sito mobile-friendly

Tutti i siti Squarespace si adattano ai browser più piccoli e si adattano al formato di un dispositivo. Lo facciamo con un responsive design, in cui i contenuti si ridimensionano automaticamente in base alle dimensioni della finestra del browser che visualizza il tuo sito. In generale, i contenuti vengono sequenziati verticalmente su dispositivi mobili. Ciò significa che i visitatori possono scorrere lo schermo per svelare tutti i contenuti, piuttosto che dover pizzicare, ingrandire e scorrere in molte direzioni.

Se il tuo sito è nella versione 7.0 di Squarespace, il tuo modello potrebbe disporre di stili per dispositivi mobili integrati aggiuntivi, che si attivano quando il sito rileva la visualizzazione su un dispositivo mobile. Per maggiori informazioni, visita la sezione relativa agli stili per dispositivi mobili della versione 7.0 riportata di seguito.

Nella versione 7.1, i siti si adattano automaticamente alle visualizzazioni per dispositivi mobili, ma alcune aree, come le sezioni o le intestazioni dell'Editor fluido, hanno opzioni specifiche per i dispositivi mobili.

SEO per dispositivi mobili

Google dà maggiore priorità ai siti ottimizzati per dispositivi mobili. Grazie agli stili unici dei siti Squarespace per dispositivi mobili, il tuo sito sarà compatibile con i motori di ricerca e pronto a essere visualizzato nei risultati di ricerca su mobile. Per maggiori informazioni, visita la pagina Che cosa fa Squarespace per la SEO.

Oltre ai design ottimizzati per i dispositivi mobili, ci sono altre cose che puoi fare per assicurarti che il tuo sito sia mobile-friendly, tra cui limitare il contenuto di una pagina Portfolio o Indice, utilizzare estratti del blog, ridurre la dimensione delle immagini e ridurre al minimo il numero di immagini in una pagina. Per maggiori informazioni, visita Suggerimenti per l'ottimizzazione del tuo sito per i dispositivi mobili.

Scoprire il funzionamento del tuo sito su mobile

Il modo migliore per imparare come funziona il tuo sito sui dispositivi mobili è fare direttamente una prova. Si consiglia di utilizzare la Vista dispositivo incorporata, e fare una prova su uno smartphone.

Vista Dispositivo

Lo strumento di visualizzazione del dispositivo mostra le diverse visualizzazioni mobili del tuo sito. Questo è un buon modo per testare il responsive design del tuo sito da un computer mentre modifichi. Per istruzioni dettagliate, visita la vista dispositivo. Nelle aree che utilizzano Editor fluido, usa la visualizzazione dispositivo per modificare il layout per dispositivi mobili indipendentemente dal layout del computer.

Usare i tuoi dispositivi

Le dimensioni delle finestre variano da un dispositivo all'altro, e alcune funzionalità avranno un aspetto diverso da quello assunto in Vista dispositivo. Per questo motivo, può essere utile visitare il sito da una pluralità di dispositivi mobili.

Per visitare il tuo sito da un dispositivo mobile, digitane l'URL nella barra di navigazione del browser.

Suggerimento: durante il periodo di prova, per visualizzare il tuo sito in anteprima come visitatore mobile, aggiungi una password (piuttosto che utilizzare il login del proprietario).

Audio e video

I file audio e video vengono aperti e riprodotti in base alle capacità di ciascun dispositivo e browser. Su alcuni dispositivi, tra cui iOS, i file audio vengono aperti nel lettore multimediale del tuo dispositivo.

I video vengono riprodotti nella pagina in tutti i browser supportati per dispositivi mobili. Se hai aggiunto un'immagine di anteprima personalizzata come sovrapposizione immagine, tocca due volte per riprodurre il video. Scopri come funzionano i banner video su dispositivi mobili nella prossima sezione.

Blocchi

I blocchi aggiungono contenuti a sezioni, pagine e altre aree modificabili, come i post del blog. La modalità di visualizzazione dei blocchi sui dispositivi mobili dipende dalla versione del sito e da dove vengono aggiunti i blocchi.

Nelle aree dei siti della versione 7.1 che utilizzano Editor fluido, organizza il layout per dispositivi mobili indipendentemente dal layout del computer.

Nei siti della versione 7.0 e nelle aree dei siti della versione 7.1 che utilizzano l'editor classico, il responsive design di Squarespace impila automaticamente i blocchi verticalmente sui dispositivi mobili. Per saperne di più e per guardare un video su come funziona, visita Come si accumulano i blocchi sui dispositivi mobili nell'editor classico.

• Colonne singole - I blocchi a larghezza massima vengono impilati verticalmente su dispositivi mobili, preservando il layout per computer della pagina.
• Più colonne - La seconda e terza colonna e le colonne successive si spostano sotto la prima su dispositivi mobili e vengono impilate verticalmente, anziché orizzontalmente.
• I blocchi flottanti vengono visualizzati sopra il relativo Blocco di testo su dispositivi mobili.

I Blocchi Spazio vengono automaticamente nascosti sullo smartphone, ad eccezione di alcuni modelli nella versione 7.0.

Domini

I domini predefiniti e personalizzati del tuo sito funzionano sia su desktop che su dispositivi mobili, e pertanto non avrai bisogno di un URL mobile separato.

Se riscontri problemi con un dominio di terze parti che si connette a un dispositivo mobile, assicurati di averlo collegato correttamente al tuo sito.

Favicon o icona browser

La visualizzazione della favicon, o icona browser, dipende dal dispositivo mobile utilizzato. In alcuni casi, la favicon non viene visualizzata.

Gallerie

Il modo in cui la galleria viene visualizzata sui dispositivi mobili dipende dalla versione del sito e dal formato della galleria.

Suggerimento: Su un dispositivo mobile, i file immagine di grandi dimensioni o un numero eccessivo di immagini possono rallentare il caricamento del sito. Per ulteriori informazioni, visita Come mantenere mobile-friendly il tuo sito Squarespace.

Blocchi Galleria

In Editor fluido, i blocchi galleria si visualizzano su dispositivi mobili come su un computer, ma è possibile modificarne le dimensioni e la posizione. Nell'editor classico, la modalità di visualizzazione dei blocchi galleria sui dispositivi mobili dipende dal loro layout:

• Griglia - Visualizzazione a griglia, con due colonne
• Slideshow - Rimane come slideshow
• Carosello - Visualizzazione a carosello, mostra un'immagine alla volta
• A colonna - Rimane impilato

Di solito, le didascalie delle immagini vengono visualizzate sui dispositivi mobili come su computer. Per i Blocchi galleria slideshow, le didascalie non vengono visualizzate su browser più stretti di 480 pixel.

Per saperne di più, leggi Blocchi galleria.

Elementi dell'intestazione

La barra degli annunci, i menu di navigazione, il titolo e il logo del sito possono spostarsi sui dispositivi mobili.

Barra degli Annunci

Sui dispositivi mobili, la barra degli annunci viene visualizzata nella parte superiore della pagina.

In queste famiglie di modelli della versione 7.0, la barra degli annunci appare sotto la sovrapposizione dell'intestazione e sopra il contenuto della pagina:

• Brine
• York

Menu di navigazione

La modalità di visualizzazione del menu di navigazione dipende dalla versione del sito.

Per ulteriori informazioni, visita Definire lo stile della navigazione.

Titolo del sito e logo

La modalità di visualizzazione del titolo o del logo del sito dipende dalla sua versione.

Immagini

Per tenere conto della larghezza ridotta dei dispositivi mobili, alcune immagini e caratteristiche delle immagini possono cambiare.

Immagini di sfondo di banner e sezioni

I banner e le immagini di sfondo delle sezioni appariranno sempre parzialmente ritagliati sui dispositivi mobili. Il ritaglio avviene perché le immagini dei banner e i video sono larghi e orizzontali, mentre gli schermi dei dispositivi mobili sono stretti e verticali.

Segui i nostri suggerimenti per la formattazione delle immagini banner e le procedure consigliate per le immagini con responsive design prima di caricare le immagini. Quando visualizzi il tuo sito su dispositivi mobili, ricorda:

• L'entità del ritaglio dipende dall'altezza del banner e dalla larghezza del browser.
• Le impostazioni per definire l'altezza del banner non sempre sono disponibili per dispositivi mobili.
• I banner video a volte non vengono visualizzati su dispositivi mobili, a seconda della velocità di connessione e della versione del browser. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il video.
• Per i banner a livello di sito, l'impostazione Posizione fissa non apparirà su alcuni dispositivi mobili, tra cui iOS. Per maggiori informazioni, visita Aggiungere immagini di sfondo su tutte le pagine del sito nella versione 7.0.

Per ridurre al minimo gli effetti del ritaglio delle immagini banner, visita Risoluzione dei problemi di ritaglio.

Didascalie delle immagini

I tipi di didascalie utilizzati dal sito dipendono dalla versione in uso.

Blocchi Instagram e Flickr

I blocchi che mostrano le immagini dagli account social, come Instagram e Flickr, mostrano le immagini in una griglia, larga due colonne.

Lightbox

In generale, i dispositivi mobili supportano effetti lightbox, ma esistono alcune limitazioni:

• La funzionalità di zoom mediante avvicinamento delle dita non è supportata.
• Se l'immagine è corredata di una didascalia che appare al passaggio del mouse, comparirà un puntino bianco nell'angolo in basso a destra del lightbox. Per visualizzare la didascalia, tocca il puntino.
• Nella versione 7.0, i lightbox sono disabilitati nelle pagine della galleria del modello Wexley.

Elementi della pagina

Gli effetti al passaggio del mouse e il padding sui dispositivi mobili cambiano per mantenere il sito mobile-friendly.

Effetti al passaggio del mouse

I dispositivi touchscreen, come smartphone, tablet e laptop touchscreen, non supportano il passaggio del mouse. Per elementi sul tuo sito con effetti al passaggio del mouse, puoi visualizzarli toccando lo schermo. Ad esempio:

• I menu a discesa vengono visualizzati quando vengono toccati.
• I titoli e prezzi dei prodotti vengono visualizzati sotto l'immagine.
• La visualizzazione delle didascalie delle immagini, sempre, quando toccate o mai, dipende dal tipo di dispositivo e dalla larghezza del browser.
• I titoli e le immagini in evidenza delle pagine secondarie del portfolio potrebbero non venire mai visualizzati. 

Padding (Spaziatura)

Spesso, i siti Squarespace dispongono di un padding integrato per dispositivi mobili, che aiuta a ottimizzare il sito per i browser più piccoli e per il responsive design. In pratica, i tweak di spaziatura e di padding che incidono sulla versione per computer del sito, non sempre influiscono sul suo aspetto sui dispositivi mobili.

Pop-up promozionali

Se il tuo sito utilizza pop-up promozionali, puoi attivarli su dispositivi mobili. Per impostazione predefinita, i pop-up avranno un formato standard sui dispositivi mobili, secondo le direttive di Google per la classificazione dei siti nei risultati di ricerca.

Utilizza il pannello Stile per personalizzare il design per dispositivi mobili o disattiva i popup sui dispositivi mobili nel pannello Visualizzazione e tempistica.

Pagine dei negozi e Commerce

I clienti possono acquistare sul tuo sito da dispositivi mobili seguendo la stessa procedura d'acquisto utilizzata su un computer. Come il resto del sito, anche il tuo negozio Squarespace si adatta a schermi di piccole dimensioni e all'utilizzo su dispositivi mobili. I prodotti vengono impilati verticalmente. Sulle singole pagine dei dettagli del prodotto, l'immagine dei prodotti appare impilata sopra la descrizione, il prezzo e il pulsante Aggiungi al carrello.

Gli altri stili dipendono dalla versionedel tuo sito.

Testo e tipi di carattere

I tipi di carattere in genere mantengono lo stesso stile sui dispositivi mobili, ma i caratteri di grandi dimensioni, come le intestazioni, possono essere ridimensionati per adattarsi alla larghezza del browser. Se il testo su dispositivi mobili risulta sovrapposto, modifica l'altezza della riga del carattere.

I numeri di telefono aggiunti al corpo o al piè di pagina del sito vengono visualizzati come link sul browser per dispositivi mobili Safari.

Alcuni modelli nella versione 7.0 utilizzano tipi di caratteri scalabili che permettono di impostare manualmente la dimensione massima e minima di titoli, intestazioni e altro testo chiave.

Stili per dispositivi mobili nella versione 7.0

Queste funzionalità sono specifiche per i siti della versione 7.0:

• Pagine di copertina - Le Pagine di copertina si adattano ai dispositivi mobili in base al loro layout.
• Intestazioni e piè di pagina specifici per pagina - Per i modelli che supportano intestazioni o piè di pagina, il contenuto verrà visualizzato su dispositivo mobile.
• Parallax scrolling - Il Parallax scrolling è un effetto speciale disponibile in determinati modelli, in cui l'immagine di sfondo scorre più lentamente del contenuto in primo piano. È disponibile su dispositivi mobili nella Brine family.
• Barre laterali - Le barre laterali vengono visualizzate nella parte inferiore della pagina su dispositivo mobile. Nel modello Ishimoto, le barre laterali non vengono visualizzate sui dispositivi mobili.
• Immagini di sfondo a livello di sito - Le immagini di sfondo a livello di sito sono supportate su dispositivi mobili. Potrebbe essere necessario rendere trasparente l'area del contenuto per visualizzare l'immagine di sfondo.

Stili specifici per modello

Per informazioni sulle opzioni per dispositivi mobili a seconda del modello, visita le nostre guide specifiche per modello.

Per una lista di tutti i modelli con opzioni specifiche per dispositivi mobili, visita Stili per dispositivi mobili avanzati.

Disabilita gli stili per i dispositivi mobili

La maggior parte dei modelli di Squarespace è provvista di un design speciale ottimizzato per i dispositivi mobili, che aiuta i visitatori a visualizzare e a navigare nel tuo sito da qualsiasi dispositivo. Alcuni modelli prevedono un'opzione per disabilitare questa funzione, anche se consigliamo di mantenere abilitati gli stili per dispositivi mobili.

Ricorda:

• Disattivando gli stili per dispositivi mobili, il sito verrà visualizzato in modo identico su dispositivo mobile e su desktop. Invece di impilare il contenuto del sito in una colonna verticale, i blocchi e gli altri contenuti verranno visualizzati con lo stesso layout di un browser del computer.
• La disattivazione degli stili per dispositivi mobili potrebbe incidere sulla SEO. Nell'aprile 2015, Google ha iniziato a considerare la caratteristica "mobile-friendly" nel classificare i siti nelle ricerche effettuate tramite dispositivi mobili. I siti Squarespace sono conformi ai requisiti di Google solo quando gli stili per dispositivi mobili sono attivati.
• La disattivazione degli stili per dispositivi mobili disattiva la navigazione mobile.
• Non è possibile disattivare gli stili per dispositivi mobili per le pagine di copertina.

Per disattivare gli stili per dispositivi mobili:

1. Apri il pannello Design e clicca su Impostazioni Modello.
2. Seleziona Disabilita gli stili per dispositivi mobili.
3. Fai clic su Salva.

Questa opzione non viene visualizzata se il modello non supporta la disattivazione degli stili per dispositivi mobili. Gli stili non possono essere disattivati nelle seguenti famiglie di modelli:

• Brine
• Farro
• Galapagos
• Skye
• Supply
• Tremont
• York

Domande Frequenti

In che modo Squarespace decide quando utilizzare stili per dispositivi mobili o desktop?

Quando visiti un sito su un dispositivo mobile, Squarespace ne rileva automaticamente il sistema operativo, che invierà un segnale per visualizzare gli stili per dispositivi mobili, a meno che il tuo sito non sia nella versione 7.0 e tu non li abbia disattivati.

Posso modificare il mio sito da un dispositivo mobile?

Puoi modificare il tuo sito su dispositivi mobili utilizzando l' app Squarespace per iOS o Android.

Puoi anche accedere tramite browser e gestire alcuni aspetti del tuo sito Squarespace su un dispositivo mobile, ma tieni presente che alcune funzionalità sono disponibili esclusivamente su computer.

Qual è la differenza tra stili per dispositivi mobili e responsive design?

Gli stili per dispositivi mobili sulla versione 7.0 e il responsive design sono concetti diversi, ma correlati.

• Gli stili per dispositivi mobili sono unici per i modelli versione 7.0. Questi stili incidono solo sulla navigazione specifica per i dispositivi mobili, sulle restrizioni applicate al caricamento degli sfondi dei contenuti e su altri elementi di design che potrebbero risultare ingombranti sui dispositivi mobili. Questi elementi sono disattivati quando disattivi gli stili per dispositivi mobili per presentare una versione del tuo sito più simile a quella per computer.
• Responsive Design si riferisce alla capacità del tuo sito e dei suoi elementi di contenuto di cambiare le proprie dimensioni per adattarsi alla finestra del browser del visitatore. Il responsive design rimane valido per tutti i siti Squarespace anche con gli stili per dispositivi mobili 7.0 disattivati. Ciò significa che il sito Web completo è pur sempre dimensionato per adattarsi a dispositivi più piccoli, ma se gli stili per dispositivi mobili sono disattivati, il contenuto non sarà riorganizzato per agevolare la navigazione. Gli stili per dispositivi mobili non possono essere disattivati nella versione 7.1, quindi i contenuti sono sempre riorganizzati e ridimensionati. Per maggiori informazioni, visita il sito Responsive design.

Posso aggiungere codice CSS personalizzato per modificare il layout del mio sito su dispositivi mobili?

Le modifiche basate su codice non rientrano nell'ambito del nostro supporto. Ciò significa che non possiamo fornire ulteriore assistenza in relazione alla configurazione o alla risoluzione dei problemi. Inoltre, non possiamo garantire la funzionalità o la completa compatibilità del codice inserito con Squarespace. Ciò include il modo in cui funziona con il nostro design reattivo, soprattutto relativamente all'aspetto sui dispositivi mobili e al funzionamento su tutti i modelli. Il codice personalizzato potrebbe causare problemi di visualizzazione con i futuri aggiornamenti della nostra piattaforma. Pur non potendo offrire ulteriore assistenza, esistono diverse risorse per indicarti la giusta direzione da seguire:

• Scopri le procedure consigliate per aggiungere codice personalizzato.
• Leggi la nostra guida generale sulle personalizzazioni di terze parti.
• Visita il Forum Squarespace, la nostra community per clienti e sviluppatori.
• Affidati a uno Squarespace Expert per creare un codice personalizzato per il tuo sito. Scopri di più sui servizi degli esperti disponibili tramite lo Squarespace Marketplace.