Découvrez à quoi ressemblent les différents éléments du site pour les visiteurs utilisant un appareil mobile.

Les sites Squarespace sont conçus pour garantir aux visiteurs de pouvoir naviguer 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.

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

Regarder une vidéo explicative

Optimiser votre site pour les appareils mobiles

Tous les sites Squarespace sʼadaptent aux navigateurs de petite taille selon le format de lʼappareil. Pour cela, nous avons recours à un design réactif, 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.

Dans la version 7.1, les sites s’adaptent automatiquement aux vues mobiles, mais certaines zones, telles que les sections ou les en-têtes de l’Éditeur intuitif, proposent des options spécifiques aux mobiles.

SEO pour mobile

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.

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 affiche les différentes vues mobiles de votre site. Il s’agit un bon moyen de tester le design réactif 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. Dans les zones qui utilisent l’Éditeur intuitif, utilisez la vue par appareil pour modifier la disposition mobile indépendamment de la disposition pour ordinateur.

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.

Audio et vidéo

L’ouverture et la lecture des fichiers audio et des vidéos dépendent de l’appareil et des fonctions du 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 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. Découvrez comment les bannières vidéo fonctionnent sur les appareils mobiles dans la section suivante.

Blocs

Les blocs ajoutent du contenu aux sections, aux pages et aux autres zones modifiables, comme les billets de blog. La façon dont les blocs apparaissent sur mobile dépend de la version de votre site et de l’endroit où les blocs sont ajoutés.

Dans les zones des sites de la version 7.1 qui utilisent l’Éditeur intuitif, organisez votre disposition mobile indépendamment de celle pour ordinateur.

Dans les sites de la version 7.0 et les zones des sites de la version 7.1 qui utilisent l’éditeur classique, le design réactif de Squarespace empile automatiquement les blocs à la verticale sur les appareils mobiles. Pour en savoir plus et pour regarder une vidéo expliquant le fonctionnement, consultez l’article Empilement des blocs sur mobile dans l’éditeur classique.

• Colonnes simples - Sur les appareils mobiles, les blocs pleine largeur s’empilent verticalement, 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.

Blocs Galerie

Dans l’Éditeur intuitif, les blocs Galerie s’affichent de la même manière sur mobile que sur un ordinateur, mais vous pouvez modifier leur taille et leur emplacement. Dans l’éditeur classique, l’affichage des blocs Galerie sur mobile 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.

Pour en savoir plus, consultez la page Blocs Galerie.

Éléments de l’en-tête

La barre d’annonce, les menus de navigation, le titre et le logo de votre site peuvent changer sur 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

Menus de navigation

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

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

Titre du site et logo

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

Images

Pour s’adapter la faible largeur des appareils mobiles, certaines images et fonctionnalités d’image sont modifiées sur les versions mobiles.

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

Les images de bannière et les images d’arrière-plan de section sont toujours recadrées sur les appareils mobiles. Ce recadrage est dû au fait que les vidéos et les images de bannière sont larges et horizontales, tandis que les écrans des appareils mobiles sont étroits et verticaux.

Avant de charger des images, consultez nos conseils de formatage d’image de bannière et nos bonnes pratiques en matière d’images avec design réactif. Lorsque vous consultez votre site sur un appareil mobile, gardez à l’esprit que :

• 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 dans la version 7.0.

Pour minimiser les effets du recadrage sur vos images de bannière, consultez l’article Résoudre les problèmes de recadrage.

Légendes d'image

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

Blocs Instagram et Flickr

Les blocs qui affichent des images provenant de réseaux sociaux comme Instagram et Flickr 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 cas de survol, un point blanc apparaît en bas à droite de la lightbox. 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.

Éléments de page

Les effets de survol et la marge intérieure sont modifiés en version mobile pour que votre site soit optimisé pour les appareils mobiles.

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 s’affichent lorsque vous appuyez dessus.
• 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.
• Les titres des sous-pages du portfolio et les images mises en avant peuvent ne jamais s’afficher. 

Marge intérieure

Les sites Squarespace ont souvent une fonction de marge intérieure mobile intégrée, qui contribue à l’optimisation de votre site pour de plus petits navigateurs et pour le design réactif. 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.

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.

Texte et polices

Les polices conservent généralement le même style sur mobile, mais les grandes polices, telles que celles des titres, sont parfois réduites pour s’adapter à la largeur du navigateur. Si les textes se chevauchent 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 templates 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 appliquées à l’ensemble du 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.

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 :

• Si vous désactivez les styles mobiles, votre site s’affiche 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 celle du navigateur d’un 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. Ouvrez le panneau Design, puis cliquez 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 réactif ?

Les styles mobiles sur la version 7.0 et le design réactif 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 réactif désigne la capacité de votre site et de son contenu à changer de taille afin de s’adapter à la fenêtre du navigateur du visiteur. Le design réactif s’applique à tous les sites Squarespace, même si les styles mobiles 7.0 sont désactivés. Ainsi, l’ensemble du site web est toujours 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 réactif.

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 réactif 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 :

• Découvrez les bonnes pratiques pour ajouter un code personnalisé.
• Consultez notre guide général sur les personnalisations tierces.
• Visitez le Squarespace Forum, notre communauté de clients et de développeurs.
• Trouvez un Squarespace Expert qui vous aidera à créer du code personnalisé pour votre site. Découvrez les services d’expert proposés sur Squarespace Marketplace.