Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
À quoi ressemblera mon site sur un appareil mobile ?

Les templates 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 de bureau, d'une tablette ou d'un smartphone.

Tous les sites Squarespace s'adaptent aux navigateurs réduits et au format de vos appareils. Voici comment nous y parvenons :

  • Un design adaptatif - Votre contenu sera automatiquement redimensionné pour correspondre à la taille de la fenêtre du navigateur affichant votre site.
  • Design mobile - La plupart des templates Squarespace possèdent des réglages de design mobile supplémentaires intégrés qui s'activent lorsque la plateforme détecte que le site est affiché sur un appareil mobile. Les réglages de design mobile modifient la navigation et les éléments de design afin de vous offrir un site adapté aux mobiles et aux commandes tactiles.

Bien que votre site s'affiche différemment sur les mobiles selon votre template, la majorité de ceux-ci possèdent les mêmes fonctionnalités. Ce guide propose un aperçu de ce que vous pouvez attendre de votre site mobile et vous offre des astuces pour adapter votre design mobile.

Apprendre à connaître votre site mobile

La meilleure manière de voir comment fonctionne votre site sur les appareils mobiles est de le tester par vous-même. Il existe deux méthodes pour visualiser les fonctionnalités mobiles de votre site : utiliser la Vue Mobile, et naviguer sur votre site à l'aide d'un appareil mobile et de navigateurs plus petits. Nous vous conseillons d'essayer les deux méthodes.

Vue Mobile

La Vue Mobile est un bon outil vous permettant de tester le design adaptatif de votre site, depuis un ordinateur de bureau, lorsque vous êtes en train de le modifier. Pour ouvrir la Vue Mobile, connectez-vous à votre site et survolez la page en haut du navigateur. Cliquez sur la flèche qui apparaît et choisissez un type d'appareil. Pour obtenir des instructions détaillées, consultez la page Vue Mobile.

Utiliser vos appareils mobiles

La Vue Mobile vous donne une idée générale de la façon dont votre site s'affiche dans un navigateur mobile classique, mais elle n'est pas infaillible et ne reflète pas exactement l'affichage sur chaque téléphone ou tablette. La taille des fenêtres varie selon les appareils, et les fonctionnalités mobiles de certains templates n'auront pas le même aspect sur un véritable appareil mobile que dans la Vue Mobile. C'est pourquoi nous vous invitons à 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 navigateur de votre mobile. Votre site possède la même adresse pour les appareils mobiles.

Conseil 1 : pendant votre essai, utilisez l' Accès visiteur  (pas l'Identifiant du propriétaire) pour prévisualiser votre Site en tant que visiteur sur mobile.

SEO et optimisation du site pour les mobiles

Google accorde aux sites optimisés pour les appareils mobiles une priorité plus importante. Grâce aux réglages de design mobile uniques des templates Squarespace, les sites sont compatibles avec les moteurs de recherche et peuvent être trouvés via une recherche sur mobile. Pour en savoir plus, consultez la page Aperçu SEO et Squarespace.  

En plus des templates optimisés pour les appareils mobiles d'autres mesures vous permettent d'assurer un affichage facile sur ces supports. Par exemple : limiter le contenu d'une Page 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 Assurer la compatibilité de votre site sur les appareils mobiles.

Règles d'ordre général

En général, le contenu s'empile verticalement sur les appareils mobiles. Autrement dit, les visiteurs peuvent faire défiler tout votre contenu verticalement, au lieu d'avoir à pincer, zoomer ou faire défiler dans de nombreuses directions.

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

Les informations suivantes rassemblent les règles générales à suivre pour certains éléments du site sur les appareils mobiles.

Remarque : certains templates disposent d'options de styles dédiés aux appareils mobiles dans l'Éditeur de Style. Comme vous ne pouvez pas éditer votre site sur un appareil mobile, vous pouvez effectuer ces modifications sur un ordinateur de bureau. Pour en savoir plus, rendez-vous sur Réalisation de changements de style.

Fichiers audio et vidéo

Les fichiers audio et vidéo s'ouvrent et se lisent différemment selon l'appareil ou le navigateur. Sur certains appareils, notamment iOS, les fichiers audio s'ouvrent dans le lecteur multimédia de votre appareil.

Les fichiers vidéo se lisent sur la même page pour les quatre navigateurs supportés sur les appareils mobiles. Si vous avez ajouté une vignette personnalisée sous forme d' image en filigrane, tapotez deux fois dessus pour lire la vidéo.

Images d'arrière-plan

Les images d'arrière-plan sont prises en charge sur les appareils mobiles. Sur certains templates, vous devrez peut-être rendre la zone de contenu transparente afin de faire apparaître l'image d'arrière-plan. Pour savoir comment procéder, consultez la page Modifier les couleurs.

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 conseils pratiques sur les ajustements de l'Éditeur de Style adaptés aux mobiles.
  • Lorsque vous ajoutez une image d'arrière-plan, vérifiez son aspect sur un appareil mobile ou passez en mode Vue Mobile pour avoir un aperçu.

Images de bannière et effet parallaxe

Les images de bannière seront toujours recadrées sur les appareils mobiles. Voici quelques solutions pour limiter ce problème :

  • Utilisez l'Éditeur de Style pour modifier la position d'une bannière, changer la taille de l'image ou la fixer sur la page.
  • Choisissez des motifs et des paysages, plus adaptés que des mots et des portraits pour l'écran d'un mobile.
  • Vous pouvez, sur les images de bannière de page, ajuster le point de centrage de l'image afin de contrôler la façon dont celle-ci sera recadrée.

L'effet parallaxe est un effet spécial disponible sur certains templates grâce auquel l'image d'arrière-plan semble se déplacer plus lentement que le contenu au premier plan. Cet effet est disponible sur mobile dans ces templates :

  • Famille Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Pages de Couverture

Les Pages de Couverture s'adaptent aux mobiles en fonction du modèle de la Page de Couverture. Pour en savoir plus, consultez la page Le design mobile de la Page de Couverture.

Polices

Les polices restent habituellement identiques sur les appareils mobiles, mais les grandes polices, telles que celles des titres, peuvent être réduites pour tenir en largeur dans la fenêtre du navigateur.

Certains templates utilisent des polices dimensionnables afin que vous puissiez définir manuellement les tailles maximale et minimale des titres, des en-têtes et des autres textes clés.

Remarque : si vous voyez, sur les appareils mobiles, du texte qui se chevauche, ajustez la hauteur de ligne de la police dans l’Éditeur de Style.

Étalonnage

Les templates ont souvent une fonction d'étalonnage mobile intégrée, qui contribue à l'optimisation de votre site pour de plus petits navigateurs et designs adaptatifs. Cela signifie que les modifications d'étalonnage et d'espacement qui affectent la version bureau de votre site ne modifieront pas toujours l'apparence sur mobile.

Galeries

La façon dont votre Page Galerie ou votre Bloc Galerie s'affiche sur les appareils mobiles dépend de leur format.

Astuce : des fichiers d'images de grande taille ou de trop nombreuses images peuvent ralentir le chargement de votre site sur les appareils mobiles. Pour en savoir plus, rendez-vous sur Optimiser l'affichage mobile de votre site Squarespace..

Blocs Galerie

  • Grille - S'affiche sous forme de grille avec une largeur allant jusqu'à deux colonnes.
  • Diaporama - Reste affiché sous la forme d'un diaporama. 
  • Carousel - S'affiche comme un carousel, en ne montrant qu'une image à la fois.
  • Pile - Reste affiché sous forme d'images empilées.
Remarque : 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.

Pages Galerie

Chaque template possède ses propres règles quant à l'affichage des Pages Galerie sur les appareils mobiles. En règle générale :

  • Grille - Les Pages Galerie s'empilent verticalement. Touchez une image pour l'afficher dans une lightbox. Les titres et descriptions des images ne s'affichent pas.
  • Diaporama - Les Pages Galerie s'affichent sous forme de diaporama. Appuyez pour naviguer.
  • 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 des templates suivants possèdent des propriétés uniques sur les appareils mobiles. Cette liste regroupe les templates par famille.

Template Remarques
Avenue

Les images s'empilent verticalement.

Flatiron Les images s'empilent en dessous du titre de la page et du texte de description.
Forte Les images s'empilent verticalement. Le titre et la description de chaque image s'affichent sous celle-ci. Le diaporama lightbox est désactivé.
Galapagos Pour les images de grille s'affichant en lightbox, touchez le point situé en bas à droite afin d'afficher le titre et la description des images.
Ishimoto Les images s'empilent verticalement.
Momentum Les flèches de navigation disparaissent après la première diapositive.

Famille Montauk

Julia, Kent, Montauk, Om

Les images s'empilent 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 s'empilent en dessous du titre et de la description de la page. Le titre et la description de chaque image s'affichent sous celle-ci.

Famille Tremont

Camino, Carson, Henson, Tremont

Les images Galerie s'empilent verticalement sur la plupart des smartphones. Les smartphones et tablettes de plus grande taille afficheront la mise en page d'origine. 
Wells  Les images s'empilent verticalement. Le titre et la description de chaque image s'affichent sous celle-ci.
Wexley Les images s'empilent verticalement. L'effet lightbox est désactivé.

 

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. 

Menus de navigation

L'apparence de votre navigation sur mobile dépend de votre template, cependant, 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 obtenir des informations spécifiques sur votre template, visitez la page Icônes du menu Navigation

Voici un exemple de navigation mobile avec le template Supply :

En-têtes et pieds de page spécifiques à certaines pages

Pour les templates prenant en charge les en-têtes et pieds de page, le contenu s'affichera sur les appareils mobiles.

Pages Produit et eCommerce

Vos clients peuvent faire des achats sur votre site à partir d'un appareil mobile aussi bien qu'à partir d'un ordinateur de bureau. Tout comme le reste de votre site, votre boutique Squarespace s'adapte à un petit écran et à la navigation sur les appareils mobiles. Les produits s'affichent les uns au dessus des autres, verticalement et sur une ou deux colonnes. Sur les pages de produit individuelles, l'image du produit est affichée au-dessus de la description, du prix et du bouton Ajouter au panier .

La navigation par catégorie s'affiche habituellement sous forme de menu déroulant par Filtres. Dans le template Supply, la navigation par catégorie s'affiche dans le menu de navigation.

Dès que le client a ajouté au moins un élément à son panier, celui-ci s'affiche. Touchez le panier pour procéder au paiement. Dans la plupart des templates, le panier s'affiche dans une barre mobile noire au bas du site. Il y a quelques exceptions, listées ci-dessous ; cette liste regroupe les templates par famille.

Template Remarques

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

S'affiche dans la barre mobile supérieure ou inférieure. Peut être masqué.

Famille Farro

Farro, Haute

S'affiche dans la barre mobile supérieure ou inférieure. Peut être masqué.

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

S'affiche sous forme de bouton.

Famille Tremont

Camino, Carson, Henson, Tremont

S'affiche dans le filtre de navigation ou dans l'en-tête. Peut être masqué.

Famille York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

S'affiche dans le filtre de navigation.

Les Pages Produits Avancées et Uniques possèdent des caractéristiques produit particulières. Pour le moment, l'Aperçu rapide et le Zoom ne sont pas disponibles sur mobile. Sur certains templates, vous pouvez adapter l'aspect de votre panier pour l'affichage mobile.

Pages Normales et blocs

Les blocs ajoutent du contenu aux Pages Normales et à toutes les zones modifiables telles que les barres latérales, les pieds de page et les articles de blog. Sur les appareils mobiles, le design adaptatif de Squarespace empile automatiquement les blocs verticalement. 

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 Séparateurs sont automatiquement masqués sur les appareils mobiles pour la plupart des templates.

Pop-ups publicitaires

Si vous avez opté pour des pop-ups publicitaires dans votre site, vous pouvez les conserver active sur appareil mobile. Tous les pop-ups sur mobile sont paramétrés par défaut au style demi-page standard pour faciliter le classement des sites dans les résultats de recherche Google.

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

Légendes d'image

  • Pages Galerie - L'affichage mobile dépend de votre template.
  • Blocs Image et Blocs Galerie - L'affichage des légendes est généralement le même sur appareil mobile que sur ordinateur de bureau. Les légendes apparaissant 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

Barres latérales

Les barres latérales s'affichent en bas de page sur les appareils mobiles. Dans Ishimoto, les barres latérales ne s'affichent pas sur les appareils mobiles.

Titre du site et logo

En général, 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 s'affiche dans le coin supérieur droit sur un ordinateur de bureau, il s'affichera généralement dans le coin supérieur droit sur les appareils mobiles.

Pour en savoir plus sur le mode d'affichage du titre de votre site sur les appareils mobiles et pour chaque template, rendez-vous sur Ajout d'un titre de site.

Favicon ou icône de navigateur

Sur les appareils mobiles, 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. 

Templates disposant de styles mobiles spécifiques

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ésactivation des styles mobiles

Les styles mobiles transposent les fonctionnalités des templates en une interface mobile-friendly répondant aux gestes de toucher, notamment grâce à 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 dans la Section Design Avancé. Pour en savoir plus, consultez la page Désactivation des styles mobiles.

Remarque : Le design adaptatif est intégré à chaque site Squarespace et ne peut être désactivé.

Noms de Domaine

Les noms de domaines intégrés et personnalisés de votre site fonctionnent à la fois sur les ordinateurs de bureau et sur les appareils mobiles ; vous n'avez pas besoin d'une URL mobile distincte.

Remarque : en cas de problème pour vous connecter à un domaine externe sur un appareil mobile, assurez-vous de l'avoir correctement mappé à votre site

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.
  • Les Lightboxes sont désactivées sur la page Galerie du template de Wexley.
  • Si votre image comporte une légende, un point blanc apparaît en bas à droite de la lightbox. Appuyez sur le point pour afficher la légende.

lightbox-caption-mobile.png

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.

FAQ

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

Le design adaptatif permet au contenu de votre site de se dimensionner automatiquement afin d'optimiser son affichage en fonction de la résolution et de la taille de l'écran concerné. Tous les sites Squarespace bénéficient du design adaptatif.

Les styles mobiles sont des règles de style intégrées à chaque template qui réorganisent le mode d'affichage du contenu d'un site sur les appareils mobiles. Ces styles permettent d'optimiser l'affichage du contenu d'un site sur des écrans de plus petite taille. Un site Web avec des styles mobiles aura un look différent de celui d'un site Web consulté sur un navigateur de bureau.

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

Lorsque vous consulterez un site sur un appareil mobile, Squarespace détectera automatiquement un système d'exploitation mobile, ce qui enverra un signal pour afficher les styles mobiles, sauf si vous les avez désactivés dans les paramètres.

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

Oui, vous pouvez le faire grâce à du code personnalisé, mais il s'agit d'une modification avancée. Nous ne prenons en charge ni cette configuration, ni les modifications ou ajouts de code personnalisé. Nous vous recommandons de consulter notre forum communautaire (answers.squarespace.com) en cas de questions sur le codage. Pour en savoir plus sur l'ajout de code CSS personnalisé, consultez la page Utilisation de l'Éditeur CSS.

Puis-je éditer mon site sur un appareil mobile ?

Vous pouvez vous connecter et gérer certains aspects de votre site Squarespace sur votre appareil mobile, mais certaines fonctionnalités sont uniquement disponibles sur un ordinateur de bureau ou un ordinateur portable.

Il vous est aussi possible de gérer certains aspects de votre site à l'aide de nos applications mobiles.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 27 sur 82
À quoi ressemblera mon site sur un appareil mobile ?