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 design reattivo, 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.

Anteprima Dispositivi

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 offre ai siti ottimizzati per dispositivi mobili un priorità più elevata. Gli stili dedicati dei siti Squarespace sono già ottimizzati per i motori di ricerca, e sono pronti ad essere trovati quando li si cerca da un dispositivo mobile Per ulteriori informazioni, visita la pagina Che cosa fa Squarespace per il 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

File 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 file video vengono riprodotti nella pagina in tutti i browser supportati per dispositivi mobili. Se hai aggiunto un'immagine di anteprima personalizzatacome immagine overlay, tocca due volte sul display per riprodurre il video.

Immagini banner

Le immagini banner appariranno sempre parzialmente ritagliate sui dispositivi mobili. Per ridurre al minimo gli effetti del ritaglio:

  • Modifica gli stili del sito per modificare la posizione o le dimensioni di un banner.
  • Motivi astratti e immagini senza testo o bordi funzionano meglio.
  • Nella maggior parte delle immagini banner, puoi regolare il focal point per controllare la centratura dell'immagine.

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.

  • Singole colonne - I blocchi a tutta larghezza vengono impilati verticalmente su dispositivi mobili, conservando il layout desktop 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.
  • 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 impostate su una colonna vengono visualizzate in una colonna. Le sezioni impostate 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 in due o più colonne vengono visualizzate in due colonne. 
  • Tutti i layout Slideshow- Mantengono la visualizzazione slideshow.

Le didascalie non vengono visualizzate nelle lightbox. 

Pagine Galleria

Molti modelli utilizzano 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

Nella maggior parte dei casi, le didascalie delle immagini vengono visualizzate sui dispositivi mobili come su desktop. 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 in genere vengono visualizzate sui dispositivi mobili come su desktop, tranne che per il layout Slideshow: semplice in cui non vengono visualizzate.
  • Blocchi Immagine e Blocchi Galleria - Le didascalie solitamente vengono visualizzate sui dispositivi mobili così come su desktop. 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 desktop. 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 tua navigazione su un dispositivo mobile 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 e il tipo di icona nelle impostazioni dell'intestazione. 

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

Se il tuo modello 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 Style (Stile) per personalizzare il design per dispositivi mobili o disattiva i popup su dispositivo mobile nel pannello Display & Timing (Visualizzazione e Intervallo).

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, fai clic 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 desktop, solitamente verrà visualizzato nell'angolo superiore destro anche su mobile.

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 in una o due colonne. 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.
  • 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. 
  • 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.
  • Attualmente, la Visualizzazione rapida e lo Zoom sull'immagine del prodotto non sono disponibili per i 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:

  • Pagine di copertinaLe 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 del sito

Le immagini di sfondo a tutto campo sono supportate sui dispositivi mobili. Potrebbe essere necessario rendere trasparente l'area del contenuto affinché venga visualizzata l'immagine di sfondo. 

La stessa immagine di sfondo verrà visualizzata sia su desktop che su dispositivi mobili. Le immagini di sfondo, poiché si adeguano agli schermi più lunghi e stretti dei dispositivi mobili, possono apparire tagliate o distorte. Per ridurre al minimo i problemi di ritaglio:

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

Gli stili per dispositivi mobili convertono le funzioni dei template in un'interfaccia mobile-friendly che offre comandi touch, come menu di navigazione a scomparsa e font leggibili. Questi stili sono predefiniti, ma puoi disabilitarli per la maggior parte dei modelli. 

Suggerimento: il Responsive design è integrato in ogni sito Squarespace e non può essere disabilitato.

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

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.

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: 45 su 123
Come verrà visualizzato il mio sito sui dispositivi mobili?