Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Comment mon site s’affichera-t-il sur les appareils mobiles ?

Les sites Squarespace sont conçus pour garantir aux visiteurs une navigation simple sur votre site avec nʼimporte quel appareil de leur choix, quʼil sʼagisse dʼun ordinateur, dʼune tablette ou dʼun smartphone.

Tous les sites Squarespace sʼadaptent aux plus petits navigateurs et au format de lʼappareil. Pour cela, nous avons recours à un design adaptatif, qui redimensionne automatiquement votre contenu en fonction de la taille de fenêtre du navigateur sur laquelle votre site sʼaffiche. En général, le contenu est empilé verticalement sur mobile. Cela signifie que les visiteurs font défiler pour consulter tout votre contenu plutôt que de devoir pincer, zoomer et faire défiler dans de nombreuses directions.

Si votre site est sur la version 7.0 de Squarespace, votre template propose peut-être également des styles mobiles intégrés supplémentaires qui sʼactivent lorsque votre site détecte un affichage sur appareil mobile. Pour en savoir plus, consultez la section « Styles mobiles de la version 7.0 » ci-dessous.

Sur la version 7.1, les sites s'adaptent automatiquement à l'affichage mobile, mais certaines zones, telles que les en-têtes, ont des options de style spécifiques aux mobiles.

Ce guide explique comment certains éléments du site apparaissent sur les appareils mobiles et propose des conseils pour modifier vos styles mobiles.

Apprendre à connaître votre site mobile

La meilleure manière de découvrir comment votre site fonctionne sur mobile est de le tester par vous-même. Nous vous recommandons dʼutiliser la vue intégrée par appareil et de le tester sur un appareil mobile.

Vue par appareil

L'outil Vue par appareil vous permet de voir comment sʼaffiche votre site sur différents appareils mobiles. Cʼest un bon moyen de tester le design adaptatif de votre site au cours de vos modifications sur ordinateur. Pour obtenir des instructions détaillées, consultez l'article Vue par appareil.

Utiliser vos appareils mobiles

La taille des fenêtres varie selon les appareils, et certaines fonctionnalités mobiles n’auront pas le même aspect sur un véritable appareil mobile que dans la vue par appareil. Nous vous recommandons donc de vérifier votre sur autant dʼappareils différents que possible.

Pour naviguer sur votre site à partir dʼun appareil mobile, saisissez lʼURL de votre site dans la barre de navigation du moteur de recherche de votre appareil mobile.

Astuce : si, au cours de la période d’essai, vous souhaitez consulter votre site sur un appareil mobile comme si vous étiez un visiteur, n’utilisez pas la connexion propriétaire, mais ajoutez un mot de passe de site.

SEO et optimisation du site pour les mobiles

Google accorde une priorité plus élevée aux sites optimisés pour appareils mobiles. Grâce à leurs styles mobiles uniques, les sites Squarespace sont compatibles avec les moteurs de recherche et peuvent être trouvés via une recherche sur mobile. Pour en savoir plus, consultez Comment Squarespace optimise le SEO.

En plus des designs optimisés, il existe différentes techniques pour vous assurer que votre site sʼaffiche correctement sur les appareils mobiles. Vous pouvez par exemple limiter le contenu dʼune page Portfolio ou Index, utiliser des extraits de blog, réduire la taille des images et diminuer le nombre dʼimages sur une même page. Pour en savoir plus, consultez la page Optimisation de votre site pour les appareils mobiles.

Barre d'annonce

La barre dʼannonce apparaît en haut de la page sur votre appareil mobile.

Dans ces familles de templates de la version 7.0, la barre dʼannonce apparaît sous la superposition dʼen-tête et au-dessus du contenu de la page :

  • Brine
  • York

Fichiers audio et vidéo

L’ouverture et la lecture des fichiers audio et vidéo dépendent de l’appareil et du navigateur. Sur certains appareils, notamment les appareils iOS, les fichiers audio s’ouvrent dans le lecteur multimédia de l’appareil.

Les fichiers vidéo sont lus sur la même page pour les quatre navigateurs pris en charge sur les appareils mobiles. Si vous avez ajouté une miniature personnalisée comme superposition d’image, appuyez deux fois pour lire la vidéo.

Images de bannière

Les images de bannière seront toujours recadrées sur les appareils mobiles. Voici quelques astuces pour éviter tout problème :

  • Modifiez les styles de votre site pour changer la position ou la taille dʼune bannière.
  • Préférez les motifs abstraits et les images sans texte ni bordure.
  • Sur la plupart des images de bannière, vous pouvez ajuster le point focal de lʼimage pour gérer comment celle-ci sera centrée.

Blocs

Les blocs permettent dʼajouter du contenu aux sections, aux pages de disposition et à toute autre zone modifiable comme les articles de blog. Sur les appareils mobiles, le design adaptatif de Squarespace empile automatiquement les blocs à la verticale.

Pour obtenir plus d'informations et voir une vidéo sur ce fonctionnement, consultez la page Changements de la mise en page sur les appareils mobiles.

  • Une seule colonne - Sur les appareils mobiles, les blocs occupant toute la largeur s'empilent verticalement, en conservant la mise en page habituelle de la page.
  • Plusieurs colonnes - Sur les appareils mobiles, la deuxième, la troisième, ainsi que les colonnes suivantes, viennent se placer sous la première, regroupées verticalement et non pas horizontalement.
  • Les Blocs flottants s'affichent, sur les mobiles, au dessus de leurs Blocs Texte.

Les blocs Espaceur sont automatiquement masqués sur appareils mobiles, sauf pour certains templates de la version 7.0.

Noms de Domaine

Les domaines intégrés et personnalisés de votre site fonctionnent à la fois sur ordinateur et sur appareil mobile. Vous nʼavez pas besoin dʼune URL mobile distincte.

En cas de problème pour vous connecter à un domaine externe sur un appareil mobile, assurez-vous que vous lʼavez correctement lié à votre site.

Favicon ou icône de navigateur

Sur les appareils mobiles, l'affichage de la favicon, ou icône de navigateur, dépend de votre navigateur mobile. Dans certains cas, la favicon peut ne pas s'afficher du tout. 

Galeries

Lʼaffichage de votre galerie sur appareil mobile dépend de la version de votre site et du format de la galerie.

Remarque : si votre site comporte des fichiers image volumineux ou un trop grand nombre dʼimages, cela peut ralentir son chargement sur mobile. Pour en savoir plus, visitez Optimisation de votre site pour les appareils mobiles.

Sections de galerie

Lʼaffichage des sections de galerie sur les appareils mobiles dépend de la disposition : 

  • Grille : Simple : sʼaffichent sous forme de grille. Les sections définies sur une colonne sont affichées sur une seule colonne. Les sections définies sur deux colonnes ou plus sont affichées sur deux colonnes.
  • Grille : bandeaux : affichage empilé en une colonne.
  • Grille : Mosaïque : les sections définies sur une colonne sont affichées sur une seule colonne. Les sections définies sur deux colonnes ou plus sont affichées sur deux colonnes. 
  • Toutes les dispositions Diaporama : affichage sous forme de diaporama.

Les légendes ne s'affichent pas avec un effet Lightbox. 

Pages Galerie

De nombreux templates utilisent la page Galerie standard. Avec ces templates, sur des appareils mobiles :

  • Grille ‑ Les pages Galerie sont empilées verticalement. Appuyez sur une image pour l’afficher dans une lightbox. Dans la lightbox, appuyez sur le point situé en bas à droite afin d’afficher le titre et la description des images.
  • Diaporama ‑ Les pages Galerie s’affichent sous forme de diaporama. Appuyez pour naviguer. Le titre et la description des images ne s’affichent pas dans les navigateurs dont la largeur est inférieure à 480 pixels.

Si votre template prend en charge les URL de destination ou les URL de liens profonds, celles-ci fonctionneront aussi sur les appareils mobiles.

Les pages Galerie ont des propriétés spécifiques sur mobile dans ces familles de templates :

  • Avenue : les images sont empilées verticalement.
  • Flatiron – Les images sont empilées en dessous du titre et de la description de la page
  • Forte – Les images sont empilées verticalement. Le titre et la description de chaque image s’affichent sous celle-ci. Le diaporama lightbox est désactivé
  • Ishimoto – Les images sont empilées verticalement
  • Momentum – Les flèches de navigation disparaissent après la première diapositive
  • Montauk – Les images sont empilées en dessous de la description de la page. Le titre et la description de chaque image s’affichent sous celle-ci
  • Supply – Les pages Galerie sont empilées en dessous du titre et de la description de la page. Le titre et la description de chaque image s’affichent sous celle-ci
  • Tremont – Les images de la galerie sont empilées verticalement sur la plupart des smartphones. Les smartphones et les tablettes de grande taille affichent la disposition standard

Blocs Galerie

Lʼaffichage des blocs Galerie sur les appareils mobiles dépend de leur disposition : 

  • Grille : s’affiche sous forme de grille d’une largeur de deux colonnes
  • Diaporama : reste affiché sous forme de diaporama.
  • Carrousel : s’affiche comme un carrousel, une seule image à la fois
  • Pile : reste empilé

Dans la plupart des cas, les légendes dʼimage sʼaffichent de la même façon sur les appareils mobiles que sur un ordinateur. Pour les blocs Galerie en diaporama, les légendes ne sʼaffichent pas dans les navigateurs dont la largeur est inférieure à 480 pixels.

Effets de Survol

Les appareils à écran tactile, tels que les smartphones, les tablettes et les ordinateurs portables à écran tactile, ne sont pas compatibles avec les effets de survol. Les effets ne pourront s’afficher qu’au moment d’appuyer sur les éléments de votre site ayant des effets de survol. Par exemple : 

  • Les menus déroulants des dossiers s'affichent dès que l'on appuie.
  • Les noms des produits et les prix s'affichent sous l'image.
  • Les légendes d'image peuvent s'afficher tout le temps, au moment d'appuyer, ou ne jamais s'afficher, en fonction du type d'appareil et de la largeur de la fenêtre du navigateur.

Légendes d'image

Les légendes que vous pouvez utiliser dépendent de la version de votre site.

  • Sections Galerie : les légendes sʼaffichent généralement de la même manière sur les appareils mobiles que sur un ordinateur de bureau. Cependant, les légendes ne sʼaffichent pas dans la disposition Diaporama : simple .
  • Blocs Image et blocs Galerie ‑ Les légendes sʼaffichent généralement de la même façon sur les appareils mobiles que sur un ordinateur. Les légendes qui apparaissent en survolant l’image peuvent s’afficher tout le temps, uniquement lorsqu’elles sont sélectionnées ou jamais, en fonction du type d’appareil mobile et de la largeur de la fenêtre du navigateur.
  • Blocs Image et blocs Galerie ‑ Les légendes sʼaffichent généralement de la même façon sur les appareils mobiles que sur un ordinateur. Les légendes qui apparaissent en survolant l’image peuvent s’afficher tout le temps, uniquement lorsqu’elles sont sélectionnées ou jamais, en fonction du type d’appareil mobile et de la largeur de la fenêtre du navigateur.
  • Pages Galerie ‑ L’affichage sur appareil mobile dépend de votre template.

Blocs Instagram, Flickr et 500px

Les blocs qui affichent des images provenant de réseaux sociaux comme Instagram, Flickr et 500px utilisent une grille à deux colonnes pour les présenter. 

Lightbox

En général, les appareils mobiles prennent en charge les effets lightbox. Il existe toutefois certaines restrictions :

  • Vous ne pouvez pas zoomer en « pinçant » l'écran avec vos doigts.
  • Si votre image comporte une légende qui apparaît en survol, un point blanc apparaît en bas à droite de la fenêtre. Appuyez sur le point pour afficher la légende.
  • Sur la version 7.0, les lightbox sont désactivées sur les pages de galerie Wexley.

Menus de navigation

Lʼaffichage de votre menu de navigation dépend de la version de votre site.

Lʼapparence de votre navigation sur appareil mobile dépend de la disposition de lʼen-tête. La navigation principale est toujours réduite derrière une icône de menu, mais vous pouvez définir la disposition de navigation et le type dʼicône dans les paramètres dʼen-tête.

L’apparence de votre navigation sur mobile dépend de votre template, mais la navigation principale est habituellement réduite derrière une icône de menu (connue sous le nom d’icône hamburger) ou un lien. 

Si votre template prend en charge la navigation en pied de page, celle-ci s’affiche en bas de la page, empilée verticalement. 

Pour en savoir plus, consultez Mise en forme de votre navigation.

Marge intérieure

Les sites Squarespace ont souvent une fonction de marge intérieure mobile intégrée, ce qui contribue à l’optimisation de votre site pour de plus petits navigateurs et pour le design adaptatif. Cela signifie que les modifications de marge intérieure et d’espacement qui affectent votre site sur ordinateur ne sʼappliqueront pas nécessairement sur appareil mobile.

Pop-ups promotionnels

Si votre site utilise des pop-ups promotionnels, ces dernières peuvent rester actives sur les appareils mobiles. Toutes les fenêtres pop-up sur mobile sont paramétrées par défaut sur le style demi-page standard pour faciliter le classement des sites dans les résultats de recherche Google.

Utilisez le panneau de style pour personnaliser le design mobile ou désactivez les pop-ups mobiles dans le panneau Affichage et durée.

Titre du site et logo

Lʼaffichage du titre ou du logo de votre site dépend de la version de votre site.

Le style du titre ou du logo de votre site dépend de la disposition de votre en-tête de site. Dans lʼéditeur dʼen-tête, cliquez sur lʼicône Mobile pour modifier la disposition.

En règle générale, le titre de votre site ou votre logo restera dans une position similaire sur les appareils mobiles. Par exemple, si le titre de votre site est affiché dans le coin supérieur droit sur un ordinateur, il s’affichera généralement dans le coin supérieur droit sur les appareils mobiles.

Pour découvrir lʼaffichage des titres sur mobile pour chaque template, consultez Affichage du titre et du logo de votre site.

Pages Boutique et Commerce

Vos clients peuvent effectuer leurs achats sur votre site à partir de leur appareil mobile. L’expérience est très similaire à celle proposée par la version de bureau. Tout comme le reste de votre site, votre boutique Squarespace s’adapte aux petits écrans et peut être visitée sur les appareils mobiles. Les produits sont empilés verticalement sur une ou deux colonnes. Sur les pages Informations sur le produit, l’image du produit est affichée au-dessus de la description, du prix et du bouton Ajouter au panier.

Les autres styles dépendent de la version de votre site.

  • Plusieurs images de produits sʼaffichent dans un diaporama que les acheteurs peuvent parcourir.
  • La navigation par catégorie sʼaffiche horizontalement pour que les acheteurs puissent faire défiler.
  • Lorsque le panier est activé dans les paramètres dʼen-tête, il apparaît toujours en haut de la page. Si vous désactivez lʼicône du panier, il apparaît alors uniquement en bas de la page, lorsque le client ajoute un produit à son panier.
  • Actuellement, l’Aperçu rapide et le Zoom d’image produit ne sont pas disponibles sur mobile.
  • Plusieurs images de produit sʼaffichent sous forme de petites miniatures ou sont empilées sur les pages dʼinformations du produit.
  • La navigation par catégorie sʼaffiche généralement sous forme de menu déroulant avec filtres. Dans Supply, il sʼaffiche dans le menu de navigation.
  • Le panier apparaît une fois que le client a ajouté au moins un article. Dans la plupart des templates, il apparaît dans une barre mobile noire en bas du site.
  • À lʼheure actuelle, lʼaperçu rapide et le zoom dʼimage produit ne sont pas disponibles sur mobile.
  • Les pages Boutique avancées et uniques possèdent des caractéristiques produit particulières. Sur certains templates, vous pouvez adapter le style de votre panier pour l’affichage mobile.

Texte et polices

Les polices conservent généralement le même style sur mobile, mais les grandes polices, telles que celles des en-têtes, sont parfois réduites pour sʼadapter à la largeur du navigateur. Si vous remarquez un chevauchement de texte sur mobile, modifiez la hauteur de ligne de la police.

Les numéros de téléphone ajoutés au corps ou au pied de page de votre site s'affichent sous forme de liens sur le navigateur mobile Safari.

Certains templates de la version 7.0 utilisent des polices dimensionnables afin que vous puissiez définir manuellement les tailles maximales et minimales des titres, des en-têtes et des autres textes clés.

Styles mobiles de la version 7.0

Ces fonctionnalités sont uniques aux sites de la version 7.0 :

  • Pages de couverture : les pages de couverture s'adaptent aux appareils mobiles en fonction de leur disposition.
  • En-têtes et pieds de page spécifiques à la page : pour les modèles prenant en charge les en-têtes ou pieds de page, le contenu s'affichera sur mobile.
  • Défilement avec effet parallaxe : le parallaxe est un effet spécial disponible dans certains templates, qui permet de donner l’impression que l’image d’arrière-plan bouge plus lentement que le contenu du premier plan. Cet effet est disponible sur mobile dans la famille Brine.
  • Barres latérales : les barres latérales sʼaffichent en bas de la page sur les appareils mobiles. Dans le template Ishimoto, les barres latérales ne sʼaffichent pas sur les appareils mobiles.

Images d’arrière-plan appliquées à l’ensemble du site

Les images dʼarrière-plan sur tout le site sont prises en charge sur les appareils mobiles. Vous devrez peut-être rendre la zone de contenu transparente pour que lʼimage dʼarrière-plan sʼaffiche.

La même image d'arrière-plan s'affiche sur ordinateur de bureau et mobile. En s'adaptant aux écran plus étroits des navigateurs sur mobile, ces images d'arrière-plan peuvent être recadrées ou déformées. Voici quelques idées pour éviter ce problème :

  • Le format d'une image d'arrière plan est déterminant pour prévoir son affichage sur mobile.
  • Consultez nos astuces pour la résolution des problèmes afin de découvrir les paramètres de style adaptés aux appareils mobiles.
  • Utilisez un appareil mobile ou la vue par appareil pour tester lʼapparence de lʼimage dʼarrière-plan sur mobile.

Styles spécifiques au template

Pour en savoir plus sur les options mobiles d'un template spécifique, consultez nos guides spécifiques dédiés aux templates.

Pour accéder à une liste de l'ensemble des templates avec options spécifiques pour les appareils mobiles, consultez la page Styles mobiles avancés.

Désactiver les styles mobiles

Les styles mobiles traduisent les fonctionnalités des templates en une interface mobile adaptée à une utilisation tactile, tels que des menus de navigation rétractables et des polices lisibles. Les styles mobiles sont activés par défaut, mais vous pouvez les désactiver sur la plupart des templates. 

Astuce : le design réactif est intégré à tous les sites Squarespace et ne peut pas être désactivé.

FAQ

Sur quoi se base Squarespace pour décider d'afficher des styles mobiles ou de bureau ?

Lorsque vous visitez un site sur un appareil mobile, Squarespace détecte automatiquement un système dʼexploitation mobile. Cela envoie un signal et indique dʼafficher les styles mobiles, sauf si votre site utilise la version 7.0 et que vous les avez désactivés.

Puis-je modifier mon site sur mobile ?

Vous pouvez modifier votre site sur mobile à lʼaide de lʼapplication Squarespace pour iOS ou Android.

Vous pouvez également vous connecter via votre navigateur mobile et gérer certains aspects de votre site Squarespace sur appareil mobile. Cependant, veuillez noter que certaines fonctionnalités ne sont disponibles que sur ordinateur.

Puis-je ajouter du code CSS personnalisé pour changer la mise en page mobile de mon site ?

Oui, mais les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes pas en mesure de vous aider ni pour leur configuration ni pour leur dépannage. En outre, si vous utilisez une solution basée sur du code, nous ne pouvons garantir sa fonctionnalité ni son entière compatibilité avec Squarespace, c’est-à-dire son fonctionnement avec notre design adaptatif et plus particulièrement son affichage sur les appareils mobiles, ainsi que son fonctionnement sur l’ensemble des templates. Le code personnalisé peut également causer des problèmes d’affichage lors des futures mises à jour de notre plateforme. À défaut de pouvoir vous assister pour ces éventuels problèmes, nous vous recommandons les ressources suivantes :

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 44 sur 122
Comment mon site s’affichera-t-il sur les appareils mobiles ?