Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Come verrà visualizzato il mio sito sui dispositivi mobili?

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

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 visualizzare 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, vedi la sezione relativa agli stili per dispositivi mobili della versione 7.0 riportata di seguito

Nella versione 7.1, i siti si adattano automaticamente alla vista dispositivo mobile, ma alcune aree, come le intestazioni, hanno opzioni di stile specifiche per dispositivi mobili.

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

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 Vista dispositivo mostra le diverse viste dispositivo mobile del tuo sito. È un buon modo per testare il responsive design del sito da desktop mentre apporti delle modifiche. Per istruzioni dettagliate, visita Vista dispositivo.

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

SEO (ottimizzazione per i motori di ricerca) e sito mobile-friendly

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 ad essere visualizzato nei risultati di ricerca su mobile. Per ulteriori 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.

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 l'overlay dell'intestazione e sopra il contenuto della pagina:

  • Brine
  • York

Audio e video

I file audio e video vengono aperti e riprodotti in base alla funzionalità 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 immagine overlay, tocca due volte sul display per riprodurre il video. Scopri come funzionano i banner video su dispositivi mobili nella sezione successiva.

Immagini di sfondo di banner e sezioni

I banner e le immagini di sfondo delle sezioni appariranno sempre parzialmente tagliati su dispositivi mobili. Prima di caricare le immagini, segui i nostri suggerimenti per la formattazione delle immagini banner e le procedure consigliate per le immagini con responsive design. 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 banner del 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.

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

Blocchi

I blocchi aggiungono contenuti alle sezioni, alle pagine e ad altre aree modificabili, come i post del blog. Il responsive design di Squarespace impila automaticamente i blocchi in verticale sui dispositivi mobili.

Per ulteriori informazioni e visualizzare un video dimostrativo, visita Modificare il layout di pagine e blocchi sui dispositivi mobili.

  • Colonne singole - I blocchi a larghezza massima vengono impilati verticalmente su dispositivi mobili, conservando 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 causare un rallentamento del caricamento del sito. Per ulteriori informazioni, visita Come mantenere mobile-friendly il tuo sito Squarespace.

Sezioni della galleria

La visualizzazione delle sezioni galleria su dispositivi mobili dipende dal layout:

  • Griglia: semplice - Visualizzazione a griglia. Le sezioni disposte in una colonna vengono visualizzate in una colonna. Le sezioni disposte su due o più colonne vengono visualizzate in due colonne.
  • Griglia: strisce - Visualizzazione impilata in una colonna.
  • Griglia: bacheca - Le sezioni disposte in una colonna vengono visualizzate in una colonna. Le sezioni disposte su due o più colonne vengono visualizzate in due colonne.
  • Tutti i layout Slideshow - Rimangono in modalità slideshow. Il layout Slideshow: Reel ritaglia le immagini su dispositivi mobili per adattarle alla sezione, in base alla sua altezza. Anche il layout Slideshow: Completo ritaglia le immagini su dispositivi mobili. Per regolare l'immagine, utilizza il punto focale. Se vuoi che su dispositivo mobile l'immagine appaia per intero, seleziona il layout Slideshow: Semplice.

Ricorda:

  • Le didascalie non vengono visualizzate nelle lightbox.
  • Non è possibile visualizzare le slideshow di immagini in miniatura su dispositivi mobili. Puoi abilitare le immagini in miniatura solo nel layout Slideshow: semplice.

Pagine galleria

La maggior parte dei modelli utilizza la Pagina galleria standard. In questi modelli, sui dispositivi mobili:

  • Griglia: le Pagine Galleria vengono impilate verticalmente. Tocca un'immagine per visualizzarla in una lightbox. Nella lightbox, tocca il punto nell'angolo inferiore destro per visualizzare titoli e descrizioni delle immagini.
  • Presentazione: le Pagine Galleria vengono visualizzate come presentazione. Tocca per navigare. I titoli e le descrizioni delle immagini non vengono visualizzati sul browser più stretti di 480 pixel.

Se il tuo template supporta Collegamenti URL o URL con collegamento diretto, questi funzioneranno anche su dispositivi mobili.

Le pagine della Galleria hanno proprietà esclusive su dispositivi mobili nelle seguenti famiglie di modelli:

  • Avenue - Immagini impilate verticalmente
  • Flatiron - Immagini impilate sotto il titolo della pagina e il testo descrittivo
  • Forte - Immagini impilate verticalmente. Titoli e descrizioni delle immagini vengono visualizzati sotto l'immagine. Slideshow lightbox è disabilitata
  • Ishimoto - Immagini impilate verticalmente
  • Momentum - Le frecce di navigazione scompaiono dopo la prima diapositiva
  • Montauk - Le immagini sono impilate sotto la descrizione della pagina. Titoli e descrizioni delle immagini vengono visualizzati sotto ciascuna immagine
  • Supply - Le Pagine Galleria sono impilate sotto il titolo della pagina e il testo descrittivo. Titoli e descrizioni delle immagini vengono visualizzati sotto l'immagine
  • Tremont - Le immagini della Galleria sono impilate verticalmente sulla maggior parte degli smartphone. Smartphone e tablet più grandi mostrano il layout semplice

Blocchi Galleria

La visualizzazione dei Blocchi galleria su 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.

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 tramite tocco.
  • 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.

Didascalie delle immagini

I tipi di didascalie utilizzati dal sito dipendono dalla sua versione.

  • Sezioni galleria - Le didascalie solitamente vengono visualizzate su dispositivi mobili così come su desktop.
  • Blocchi immagine e Blocchi galleria - Le didascalie solitamente vengono visualizzate sui dispositivi mobili così come su computer. Le didascalie delle immagini visualizzate al passaggio del mouse possono essere sempre visualizzate, se toccate o non essere mai visualizzate, in base al tipo di dispositivo mobile e alla larghezza del browser.
  • Blocchi immagine e Blocchi galleria - Le didascalie solitamente vengono visualizzate sui dispositivi mobili così come su computer. Le didascalie delle immagini visualizzate al passaggio del mouse possono essere sempre visualizzate, se toccate o non essere mai visualizzate, in base al tipo di dispositivo mobile e alla larghezza del browser.
  • Pagine galleria - La visualizzazione su dispositivi mobili dipende dal tuo modello.

Blocchi Instagram, Flickr e 500px

Blocchi che visualizzano immagini di account social, come Instagram, Flickr e 500px, mostrano le immagini in una griglia di 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 compare 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.

Menu di navigazione

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

L'aspetto della navigazione su dispositivi mobili dipende dal layout dell'intestazione del sito. La Navigazione principale finisce per comprimersi sempre dietro l'icona del menu, ma è possibile impostare il layout di navigazione, il tipo di icona e il colore di sovrapposizione nelle impostazioni dell'intestazione.

L'aspetto della navigazione su dispositivi mobili dipende dal modello utilizzato, ma la Navigazione Principale solitamente appare in un'icona di menu (nota come icona "hamburger") o un link.

Se il tuo template supporta la Navigazione a Piè di pagina, viene visualizzata nella parte inferiore della pagina, in un'unica colonna.

Per ulteriori informazioni, visita Definire lo stile della navigazione.

Padding (Spaziatura)

I siti Squarespace spesso dispongono di un padding per dispositivi mobili integrato, che aiuta a ottimizzare il sito per i browser più piccoli e per il design reattivo. 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.

Titolo del sito e logo

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

Lo stile del titolo o del logo del sito dipende dal layout della sua intestazione. Nell'editor delle intestazioni, clicca sull'icona Mobile per modificare il layout.

In generale, il titolo del tuo sito o il logo rimangono in una posizione simile su dispositivi mobili. Ad esempio, se il titolo del sito è visualizzato nell'angolo superiore destro su un computer, solitamente verrà visualizzato nell'angolo superiore destro anche sui dispositivi mobili.

Per una descrizione dettagliata del modo in cui il titolo del sito di ciascun modello viene visualizzato sul dispositivo mobile, visita il titolo del sito e la visualizzazione del logo.

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.

  • Più immagini di un dato prodotto vengono visualizzate in modalità slideshow, che gli acquirenti possono scorrere.
  • I prodotti vengono visualizzati in un'unica colonna.
  • La navigazione delle categorie viene visualizzata orizzontalmente, per consentire agli acquirenti di scorrerla lateralmente.
  • Quando il carrello è abilitato nelle impostazioni dell'intestazione, viene sempre visualizzato nella parte superiore della pagina. Se si disabilita l'icona del carrello, questa verrà visualizzata solo in fondo alla pagina e quando un cliente vi aggiungerà un prodotto.
  • Al momento,Anteprima prodotto e Zoom immagine prodotto non sono disponibili sui dispositivi mobili.
  • Più immagini di prodotto vengono visualizzati in piccole miniature, oppure impilati nelle pagine di informazioni del prodotto.
  • I prodotti vengono visualizzati in due o più colonne.
  • La navigazione delle categorie viene in genere visualizzata come menu a discesa Filtro. In Supply, essa viene visualizzata nel menu di navigazione.
  • Il carrello viene visualizzato dopo che il cliente ha aggiunto almeno un articolo. Nella maggior parte dei modelli, esso appare in una barra mobile nera nella parte inferiore del sito.
  • Al momento,Anteprima prodotto e Zoom immagine prodotto non sono disponibili sui dispositivi mobili.
  • Le Pagine negozio avanzate ed esclusive presentano funzionalità speciali per i prodotti. In alcuni modelli, puoi modificare gli stili del carrello per i dispositivi mobili.

Testo e caratteri

Nei dispositivi mobili, i tipi di carattere in genere conservano lo stesso stile, mentre i caratteri di grandi dimensioni, ad esempio le intestazioni, possono ridimensionarsi in base alla larghezza del browser. Se noti sovrapposizioni di testo sui dispositivi mobili, modifica l'altezza della linea del tipo di 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:

Stili specifici del modello

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

Per una lista di tutti i template 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 è dotata 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 gli stili per dispositivi mobili abilitati.

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 sul SEO. Nell'aprile 2015, Google ha iniziato a prendere in considerazione la caratteristica "mobile-friendly" nel classificare i siti nelle ricerche di 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. Nel Menu Home, clicca su Design, quindi 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. Questi 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 rileverà automaticamente il sistema operativo, che invierà un segnale per visualizzare i relativi stili 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 il tuo browser mobile e gestire alcuni aspetti del tuo sito Squarespace su un dispositivo mobile, ma tieni presente che alcune funzionalità sono disponibili esclusivamente su un 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 rettificare 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 sarà 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 saranno sempre riorganizzati e ridimensionati. Per ulteriori 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:

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 49 su 146
Come verrà visualizzato il mio sito sui dispositivi mobili?