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

Optimisation de votre site pour les appareils mobiles

À 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 savoir comment votre site s’affichera sur un appareil mobile, consultez-le sur un tel appareil ou utilisez la fonction Vue par appareil pour simuler un rendu sur un écran plus petit. 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, sous Styles de texte généraux, 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

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.

Activez l’option AMP pour les pages de blog

Si vous utilisez Squarespace pour gérer votre blog, activez l’option AMP (Accelerated Mobile Pages) afin d’améliorer la vitesse de chargement.

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

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. Dans le Menu principal, cliquez sur Design, puis 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.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 136 sur 327
Optimisation de votre site pour les appareils mobiles