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 template  Squarespace sono progettati per garantire ai visitatori una navigazione semplificata su qualsiasi dispositivo: desktop, tablet e smartphone.

Tutti i siti Squarespace si adattano anche ai browser più piccoli e al formato di un dispositivo. Questo è possibile grazie a:

  • Responsive Design - Il tuo contenuto verrà automaticamente ridimensionato in base alla dimensione della finestra del browser dal quale visualizzi il tuo sito.
  • Stili per dispositivi mobili - La maggior parte dei template Squarespace offre stili per dispositivi mobili integrati che vengono attivati quando il tuo sito rileva la visualizzazione da un dispositivo mobile. Gli stili per dispositivi mobili solitamente hanno impatto su elementi di design e della navigazione, per aiutarti a mantenere il tuo sito mobile-friendly e rispondere a comandi touch.

Sebbene il modo in cui il tuo sito appare sui dispositivi mobili varia in base al template, la maggior parte dei template offre funzionalità simili. Questa guida descrive cosa aspettarsi dal proprio sito e offre suggerimenti su come impostare gli stili per dispositivi mobili.

Scoprire il funzionamento del tuo sito su mobile

Il modo migliore per scoprire come funziona il tuo sito sui dispositivi mobili è testarlo personalmente. Esistono due modi per testare le funzionalità del tuo sito su dispositivi mobili: Anteprima Dispositivi e accedere il tuo sito da dispositivi mobili e browser più piccoli. Entrambi sono consigliati.

Anteprima Dispositivi

L'Anteprima Dispositivi è un buon modo per testare il design responsive del tuo sito mentre apporti delle modifiche. Per aprire l'Anteprima Dispositivi, accedi al tuo sito e passa il mouse sulla pagina nella parte superiore del browser. Clicca sulla freccia visualizzata e seleziona un tipo di dispositivo. Per istruzioni dettagliate, visita Anteprima Dispositivi.

Usare i tuoi dispositivi

L'Anteprima Dispositivi ti permette di avere un'idea di come il tuo sito apparirà su un tipico browser per dispositivi mobili, ma non sarà accurata al 100% per ogni telefono o tablet. Le dimensioni delle finestre variano a seconda del dispositivo e alcune funzioni appariranno in modo diverso su un dispositivo mobile reale rispetto a quanto visualizzato all'Anteprima Dispositivi. Per questo motivo, ti consigliamo di visitare il tuo sito su tutti i dispositivi che ti è possibile utilizzare.

Per visitare il tuo sito da un dispositivo mobile, digita l'URL del sito nella barra di navigazione del browser. Il tuo sito non avrà un indirizzo diverso da utilizzare su dispositivi mobili.

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 da maggiore priorità ai siti ottimizzati per dispositivi mobili. Grazie agli stili unici dei template 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 Panoramica SEO e Squarespace.  

Oltre ai template 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 in una Pagina Indice, utilizzare estratti di blog, ridurre la dimensione delle immagini e ridurre al minimo il numero di immagini in una pagina. Per ulteriori informazioni, visita Come mantenere il tuo sito Squarespace mobile-friendly.

Regole generali

In generale, il contenuto viene impilato verticalmente sui dispositivi mobili. Questo significa che i visitatori possono scorrere per visualizzare l'intero contenuto, senza dover ingrandire o scorrere in diverse direzioni.

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

Di seguito, troverai alcune regole generali per alcuni elementi del sito su dispositivi mobili.

Nota: alcuni modelli offrono opzioni di stile specifiche per dispositivi mobili. Poiché non puoi modificare il sito su un dispositivo mobile, puoi apportare queste modifiche su un computer. Per maggiori informazioni, visita Apportare modifiche di stile.

Barra degli Annunci

Nella maggior parte dei modelli, la barra degli annunci viene visualizzata nella parte superiore della pagina nella versione per dispositivi mobili.

Le barre degli annunci vengono visualizzate sotto la sovrapposizione dell'intestazione e sopra il contenuto della pagina nelle seguenti famiglie di modelli:

  • 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 personalizzata come immagine overlay, tocca due volte sul display per riprodurre il video.

Immagini di sfondo

Le immagini di sfondo sono supportate su dispositivi mobili. In alcuni template, potrebbe essere necessario impostare un'area canvas o del contenuto trasparente per rendere visibile l'immagine di sfondo. Per informazioni, visita Modificare i colori.

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:

  • Quando scegli un'immagine di sfondo, la forma dell'immagine può avere un impatto notevole sulla visualizzazione dell'immagine sul dispositivo mobile.
  • Consulta i nostri suggerimenti sulla risoluzione dei problemi per opzioni di stile che funzionino anche sui dispositivi mobili.
  • Quando aggiungi un'immagine di sfondo, utilizza un dispositivo mobile o Device View (Anteprima Dispositivi) per controllare come verrà visualizzata su dispositivi mobili.

Banner e Scorrimento Parallax

Le immagini banner appariranno sempre parzialmente ritagliate sui dispositivi mobili. Per ridurre al minimo i problemi di ritaglio:

  • Modificare gli stili del sito per modificare la posizione o le dimensioni di un banner o impostarlo come fisso.
  • I motivi rendono meglio delle parole. Inoltre, è consigliabile utilizzare l'orientamento orizzontale anziché verticale.
  • Regola il punto focale dell'immagine per controllare l'area di ritaglio.

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.

Pagine di Copertina

Le Pagine di Copertina si adattano ai dispositivi mobili in base al tuo layout. Per ulteriori informazioni, visita Stili per dispositivi mobili della Pagina di Copertina.

Font

I font solitamente mantengono lo stesso stile su dispositivi mobili, ma font grandi, come le intestazioni, possono essere ridotti in base alla larghezza del browser.

Alcuni template utilizzano font ridimensionabili che permettono di impostare manualmente la dimensione massima e minima di titoli, intestazioni e altro testo chiave.

Nota: in caso di testo sovrapposto su dispositivi mobili, modifica l'altezza della linea dei tipi di carattere  nel riquadro Stili sito.

Padding (Spaziatura)

I template spesso dispongono di una spaziatura mobile integrata, che aiuta a ottimizzare il sito per i browser più piccoli e il responsive design. In pratica, le opzioni di spaziatura che incidono sulla versione desktop del sito, non sempre influiscono sul suo aspetto su dispositivi mobili.

Gallerie

La visualizzazione di Pagina Galleria o Blocco Galleria su dispositivo mobile dipende dal relativo formato.

Suggerimento: File immagine di grande dimensione o troppe immagini possono causare un rallentamento del caricamento del sito su dispositivo mobile. Per ulteriori informazioni, visita Come mantenere mobile-friendly il tuo sito Squarespace.

Blocchi Galleria

  • Griglia - Visualizzazione a griglia, con due colonne.
  • Slideshow - Rimangono in forma di presentazione. 
  • Carosello - Visualizzazione a carosello, mostra un'immagine alla volta.
  • A colonna - Rimangono impilati.

Per maggiori informazioni, visita Usare i Blocchi galleria.

Nota: Nella maggior parte dei casi, le didascalie delle immagini vengono visualizzate sui dispositivi mobili come su desktop. Per Blocchi Galleria Slideshow, le didascalie non vengono visualizzate su browser più stretti di 480 pixel.

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

Menu di navigazione

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 template supporta la Navigazione a Piè di pagina, viene visualizzata nella parte inferiore della pagina, in un'unica colonna. Per informazioni specifiche sul tuo template, visita Icone di menu di navigazione

Di seguito un esempio di come appare la navigazione su dispositivi mobili nel template Supply:

Intestazioni e piè di pagina specifici

Per template che supportano intestazioni e piè di pagina specifici per ogni pagina, il contenuto verrà visualizzato su dispositivo mobile.

Pagine Prodotto ed eCommerce

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.

Nella versione 7.0, le varie immagini del prodotto vengono visualizzate sotto forma di miniature nelle pagine dei dettagli del prodotto. Nella versione 7.1, vengono invece visualizzate come uno slideshow.

Navigazione per Categoria: solitamente viene visualizzata come un menu a discesa Filter (Filtro). In Supply, la navigazione per categoria viene visualizzata nel menu di navigazione.

Il carrello verrà visualizzato dopo che il cliente avrà aggiunto almeno un articolo. Toccando il carrello potrai procedere al pagamento. Nella maggior parte dei modelli, il carrello viene visualizzato in una barra mobile di colore nero nella parte inferiore del sito.

Le Pagine Prodotto avanzate presentano caratteristiche speciali per i prodotti. Al momento Anteprima prodotto  e Zoom immagine prodotto non sono disponibili sui dispositivi mobili. In alcuni modelli puoi anche modificare gli stili del carrello per i dispositivi mobili.

Pagina di layout e blocchi

I blocchi aggiungono contenuto alle Pagine di layout e a qualsiasi area modificabile del tuo sito, come barre laterali, piè di pagina e post. 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 sono automaticamente nascosti su dispositivo mobile per la maggior parte dei template,

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

Didascalie delle immagini

  • Pagine Galleria - La visualizzazione su dispositivi mobili dipende dal tuo template
  • 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.

Barre laterali

Le barre laterali sono visualizzate nella parte inferiore della pagina su dispositivo mobile. Nel template Ishimoto, le barre laterali non sono visualizzate sui dispositivi mobili.

Titolo del sito e logo

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 informazioni dettagliate su come viene visualizzato il titolo del sito su dispositivi mobili a seconda del template, visita Aggiungere un titolo al 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. 

Stili mobile specifici per template

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

Disabilitare gli stili per 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. Per maggiori informazioni, visita Disabilitare gli stili per dispositivi mobili.

Nota: Il Responsive Design è integrato in ogni sito Squarespace e non può essere disabilitato.

Domini

domini integrati e personalizzati del tuo sito funzionano sia su desktop che su mobile; non avrai bisogno di un URL diverso da utilizzare sui dispositivi mobili.

Nota: In caso di problemi di connessione a un dominio di terze parti su dispositivi mobili, verifica di aver collegato correttamente il dominio al tuo sito

Lightbox

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

  • La funzionalità di zoom mediante avvicinamento delle dita non è supportata.
  • Le lightbox sono disabilitate nella Pagina Galleria del template Wexley.
  • Se l'immagine è dotata di una didascalia, un punto bianco appare in basso a destra della lightbox. Tocca il punto per visualizzare la didascalia.

lightbox-caption-mobile.png

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.

Domande Frequenti

Qual è la differenza tra Responsive Design e stili per dispositivi mobili?

Il responsive design ridimensiona automaticamente il contenuto del tuo del tuo sito per visualizzarlo al meglio a seconda della risoluzione e della dimensione dello schermo utilizzato. Tutti i siti Squarespace sono creati con un responsive design.

Gli stili per dispositivi mobili sono regole di stile integrate in ciascun modello in base alle quali il contenuto viene riorganizzato e visualizzato sui dispositivi mobili. Questi stili permettono di visualizzare il contenuto di un sito in modo ottimale su schermi più piccoli Un sito con stili per dispositivi mobili sarà visualizzato diversamente rispetto a un sito visualizzato su un browser desktop.

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

Quando visiti un sito da un dispositivo mobile, Squarespace ne rileva automaticamente il sistema operativo. Questo invia un segnale per utilizzare stili per dispositivi mobili. Ciò non accade, se hai disabilitato gli stili per dispositivi mobili nelle impostazioni.

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

Sì, è possibile aggiungere codice personalizzato, ma questa è considerata un'operazione di modifica avanzata. Non offriamo supporto per questa operazione o qualsiasi altra modifica o utilizzo di codice di terze parti. Consigliamo di visitare il Forum Squarespace per domande relative al codice. Per maggiori informazioni sull'aggiunta di codice CSS personalizzato, visita Usare l'Editor CSS.

Posso modificare il mio sito da un dispositivo mobile?

Puoi collegarti e gestire alcuni aspetti del tuo sito Squarespace sul tuo dispositivo mobile, ma altri sono disponibili solo su desktop o laptop.

Puoi anche gestire determinati aspetti del tuo sito su mobile utilizzando le nostre app mobili.

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