Optimisation de votre site pour les appareils mobiles

Les bonnes pratiques pour vous assurer que vos visiteurs mobiles peuvent facilement utiliser votre site.

Dernière mise à jour le 21 février 2025

À la base, tous les sites Squarespace sont conçus pour s’afficher de manière optimale sur les appareils mobiles. Cependant, lorsque vous ajoutez par exemple des fichiers multimédias volumineux ou de nombreux contenus sur une page, ou lorsque vous réduisez l’espacement entre les lettres, le chargement du site et son affichage sur les appareils mobiles peuvent être affectés. Vous trouverez dans ce guide des bonnes pratiques qui vous aideront à optimiser votre site pour les appareils mobiles.

Testez la compatibilité de votre site avec les appareils mobiles

Pour voir comment votre site s’affiche sur les appareils mobiles, consultez-le sur un tel appareil ou utilisez la vue par appareil pour simuler un rendu sur un écran plus petit.Si votre site utilise l’Éditeur intuitif, assurez-vous d’organiser le contenu de la disposition mobile tel que vous souhaitez qu’il apparaisse.

Vous pouvez également découvrir comment les différentes fonctionnalités s’afficheront sur un appareil mobile en consultant l’article Comment mon site s’affichera-t-il sur les appareils mobiles ?

Le test d’optimisation mobile de Google vous permet d’évaluer rapidement la compatibilité de votre site avec les appareils mobiles. Si le test indique que votre site n’est pas adapté pour les appareils mobiles ou si vous rencontrez des difficultés lorsque vous testez votre site sur un appareil mobile, suivez les conseils de ce guide.

Remarque

le test d’optimisation mobile de Google est un outil tiers qui n’est pas pris en charge par notre service d’assistance.

Chaque appareil mobile gère les sites web différemment

Par exemple, les nouveaux téléphones prennent plus facilement en charge les sites qui contiennent un grand nombre de pages ou de contenus, et le chargement est généralement plus rapide sur un réseau sans fil qu’avec une connexion cellulaire.

Certains navigateurs mobiles affichent un message d’erreur si la taille de votre page est trop grande. Suivez ces recommandations pour réduire la taille de vos pages.

Maintenez la taille de vos pages en dessous de 5 Mo

Lorsqu’un visiteur charge une page, l’ensemble de son contenu est téléchargé sur l’appareil. La technologie équipant les appareils mobiles est élémentaire, et ceux-ci dépendent des réseaux cellulaires pour accéder à Internet. Par conséquent, certains peuvent ne pas être en mesure de charger des grandes quantités de données. Pour éviter les problèmes, réduisez au maximum la quantité de contenu sur chaque page.

Étant donné que le temps de chargement dépend de l’appareil et de la connexion, il n’existe pas de limite précise. Toutefois, les pages dont le contenu dépasse 5 Mo peuvent prendre du temps à charger sur des connexions cellulaires. Il est donc préférable que la taille de la page soit la plus petite possible.

Pour vérifier la taille de la page ou pour obtenir des conseils pour réduire la taille de la page, reportez-vous à Réduire la taille de la page pour un chargement plus rapide.

Définissez l’espacement entre les lettres sur une valeur supérieure ou égale à 0 px

Si l’espacement entre les lettres est défini sur une valeur inférieure à 0 px, il est possible que celles-ci se chevauchent quand le site s’affiche sur un appareil mobile.

Dans le panneau Polices, cliquez sur le format de police que vous souhaitez personnaliser. Vérifiez que l’espacement entre les lettres est défini sur une valeur supérieure ou égale à 0 px. Pour en savoir plus, consultez l’article Modifier les polices de caractères.

Dans le panneau Styles du site, assurez-vous que lʼespacement entre les lettres est défini sur une valeur supérieure ou égale à 0 px pour toutes vos polices.

image2.jpg

Utilisez les blocs Espaceur avec parcimonie

Accéder à cette fonctionnalité

Les blocs espaceurs ne sont pas pris en charge dans l’Éditeur intuitif. Concevez plutôt votre disposition mobile indépendamment de la disposition pour ordinateur.

Les blocs Espaceur ajoutent un espace vide sur une page, ce qui permet de créer des dispositions minimalistes lorsque le site est consulté sur un ordinateur. Cependant, sur mobile, les blocs Espaceur sont généralement masqués. Cela peut donc changer l’apparence de la disposition de votre site mobile de manière imprévue. Pour ajouter plus d’espace vide, nous vous suggérons de modifier la marge intérieure plutôt que d’utiliser de nombreux blocs Espaceur.

Vérifiez que les styles mobiles sont activés (version 7.0)

Accéder à cette fonctionnalité

Les styles mobiles sont toujours activés sur la version 7.1. Pour en savoir plus, consultez l’article Comment mon site s’affichera-t-il sur les appareils mobiles ?

Avec la majorité des templates Squarespace, le contenu est affiché sur les appareils mobiles dans une disposition unique, et organisé afin que les visiteurs puissent facilement faire défiler le contenu. Lorsque les styles mobiles sont désactivés, les visiteurs doivent pincer leurs doigts sur l'écran et zoomer pour parcourir votre site.

Pour vérifier que les styles mobiles sont activés :

  1. Ouvrez le panneau Design et cliquez sur Paramètres du template.
  2. Vérifiez que l’option Désactiver les styles mobiles est décochée.

Ce paramètre n’apparaît que si votre template prend en charge la désactivation des styles mobiles.

Autres conseils de mise en forme

Pour obtenir d’autres conseils sur la mise en forme pour les appareils mobiles, consultez l’article Comment mon site s’affichera-t-il sur les appareils mobiles ?. Vous découvrirez comment le contenu s’affiche sur des écrans plus petits et comment optimiser certains types de contenus afin de garantir la compatibilité avec les appareils mobiles.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.

Optimisation de votre site pour les appareils mobiles