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 navigateurs de petite taille 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 est consulté. En règle générale, le contenu est empilé verticalement sur les appareils mobiles. Les visiteurs peuvent ainsi faire défiler l’écran pour consulter tout votre contenu plutôt que de devoir pincer, zoomer et faire défiler dans plusieurs directions.

Si votre site utilise la version 7.0 de Squarespace, votre template propose peut-être 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 votre site s’affiche sur différents appareils mobiles. C’est un bon moyen de tester le design adaptatif de votre site, depuis un ordinateur, lorsque vous êtes en train de le modifier. 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 consulter votre site sur autant dʼappareils 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 les 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 l’article 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

Audio et vidéo

Les fichiers audio et les vidéos s'ouvrent et sont lus en fonction des fonctionnalités de chaque appareil ou navigateur. Sur certains appareils, notamment les appareils iOS, les fichiers audio s'ouvrent dans le lecteur multimédia de l'appareil.

Les vidéos sont lues sur la page dans tous les navigateurs que nous prenons en charge pour les mobiles. Si vous avez ajouté une miniature personnalisée en superposition d'image, appuyez deux fois pour lire la vidéo. Découvrez comment les bannières vidéo fonctionnent sur mobile dans la section suivante.

Images de bannière ou d’arrière-plan de section

Les bannières et les images d'arrière-plan de section sont toujours recadrées sur les appareils mobiles. Suivez nos conseils de formatage d'image de bannière et nos meilleures pratiques en matière d'images avec design adaptatif avant de télécharger des images. Lorsque vous visualisez votre site sur des appareils mobiles, gardez à l'esprit :

  • Le degré de recadrage dépend de la hauteur de la bannière et de la largeur du navigateur.
  • Les paramètres de hauteur de la bannière ne sont pas toujours applicables sur mobile.
  • Les bannières vidéo ne se chargeront pas sur mobile si la vitesse de connexion est lente ou si le navigateur ne l'autorise pas. Définissez une image de remplacement pour appareil mobile pour qu'elle apparaisse lorsque la vidéo ne peut pas être chargée.
  • Concernant les bannières de site, le paramètre Position fixe n’apparaîtra pas sur certains appareils mobiles, dont les appareils iOS. Pour en savoir plus, consultez l’article Ajouter des images d’arrière-plan à l’ensemble du site.

Pour minimiser les effets du recadrage pour les images de vos bannières, consultez Dépannage des problèmes de recadrage.

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.

  • Colonnes simples - Les blocs pleine largeur s'empilent verticalement sur les appareils mobiles, conservant ainsi la disposition sur ordinateur 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 au-dessus de leur bloc Texte sur mobile.

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 les ordinateurs et les appareils mobiles. Vous n'avez pas besoin d'une URL mobile distincte.

En cas de problème pour vous connecter à un domaine tiers sur un appareil mobile, assurez-vous que vous l’avez correctement connecté à 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 : affichage sous forme de grille. Les sections définies sur une colonne sont affichées sur une seule colonne. Les sections définies sur plusieurs colonnes 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 plusieurs colonnes sont affichées sur deux colonnes.
  • Toutes les dispositions en Diaporama - Restent en diaporamas. La disposition Diaporama : Moulinet recadre les images sur mobile pour s'adapter à la section, en fonction de la hauteur de celle-ci. La disposition Diaporama : Complet permet également de recadrer les images sur mobile. Pour ajuster l'image, utilisez le point focal. Si vous souhaitez que l'image entière apparaisse sur mobile, choisissez la disposition Diaporama : Simple.

Important :

  • Les légendes ne s’affichent pas avec un effet lightbox.
  • Les images miniatures de diaporama n'apparaissent pas sur mobile. Vous pouvez activer les miniatures uniquement dans la disposition Diaporama : simple.

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 de bureau. Pour les blocs Galerie en diaporama, les légendes ne sʼafficheront pas dans les navigateurs plus étroits que 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 mobile que sur un ordinateur.
  • 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 500 px

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

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 de votre site. La navigation principale est toujours réduite derrière une icône de menu, mais vous pouvez configurer la disposition de la navigation, le type d’icône et la couleur de la superposition dans les paramètres de l’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'affichera en bas de la page, 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 changer de 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 sur un ordinateur. 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 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.
  • Les produits sʼaffichent dans une seule colonne.
  • 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 Informations sur le produit.
  • Les produits sʼaffichent dans deux colonnes ou plus.
  • La navigation par catégorie sʼaffiche généralement sous forme de menu déroulant avec filtres. Dans le template 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.
  • Actuellement, 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 celle des titres, 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 :

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

La plupart des templates Squarespace possèdent un design unique, optimisé pour les appareils mobiles, ce qui permet à vos visiteurs de visualiser et de naviguer sur votre site depuis n’importe quel appareil. Si certains templates vous permettent de désactiver cette fonctionnalité, nous vous conseillons fortement de conserver les styles mobiles activés.

Important :

  • La désactivation des styles mobiles fait apparaître votre site de la même manière sur un appareil mobile que sur un ordinateur. Au lieu d'empiler le contenu du site dans une colonne verticale, les blocs et autres contenus apparaissent dans la même disposition que sur un navigateur d'ordinateur.
  • La désactivation des styles mobiles peut affecter votre SEO. En avril 2015, Google a commencé à tenir compte de la « convivialité mobile » dans le cadre du classement des sites pour les recherches effectuées sur appareils mobiles. Les sites Squarespace ne sont conformes aux exigences de Google que lorsque les styles mobiles sont activés.
  • Lorsque vous désactivez les styles mobiles, vous désactivez la navigation mobile.
  • Il est impossible de désactiver les styles mobiles pour les pages de couverture.

Pour désactiver les styles mobiles :

  1. Dans le Menu principal, cliquez sur Design, puis sur Paramètres du template.
  2. Cochez Désactiver les styles mobiles.
  3. Cliquez sur Enregistrer.

Cette option n’apparaîtra pas si votre template ne prend pas en charge la désactivation des styles mobiles. Les styles mobiles ne peuvent pas être désactivés dans ces familles de templates :

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

FAQ

Comment Squarespace décide-t-il quand afficher les styles pour mobiles ou pour ordinateur ?

Lorsque vous visitez un site sur un appareil mobile, Squarespace détecte automatiquement un système d’exploitation mobile. Un signal est alors envoyé et les styles mobiles sont affichés, 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.

Quelle est la différence entre les styles mobiles et le design adaptatif ?

Les styles mobiles sur la version 7.0 et le design adaptatif sont des concepts différents, mais liés.

  • Les styles mobiles sont propres aux templates de la version 7.0. Ces styles affectent uniquement la navigation spécifique à un mobile, les restrictions concernant le chargement des arrière-plans de contenu et d’autres éléments de design qui peuvent s’avérer peu maniables sur les appareils mobiles. Ces éléments sont désactivés lorsque vous désactivez les styles mobiles pour présenter une version de votre site similaire à celle sur ordinateur.
  • Le design adaptatif désigne la capacité de votre site et de son contenu à ajuster leur taille pour s’adapter à la fenêtre du navigateur du visiteur. Le design adaptatif s’applique à tous les sites Squarespace, même si les styles mobiles 7.0 sont désactivés. En d’autres termes, le site web est toujours entièrement dimensionné pour s’adapter à des appareils plus petits, mais si les styles mobiles sont désactivés, le contenu ne sera pas réorganisé pour faciliter la navigation. Les styles mobiles ne peuvent pas être désactivés sur la version 7.1, de sorte que le contenu sera toujours réorganisé et redimensionné. Pour en savoir plus, consultez l’article Design adaptatif.

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 :

Conseil : Employez un expert Squarespace pour vous aider à créer un code personnalisé pour votre site. En savoir plus sur les services experts disponibles sur Squarespace Marketplace.

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