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 recommandations 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.

Message d’erreur : un problème est survenu à plusieurs reprises

Si vous utilisez le navigateur mobile Safari sur un appareil iOS, ce message d’erreur peut s’afficher si la taille de la page est trop grande. Suivez ces astuces pour réduire la taille de la page.

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 connaître la taille d’une page, consultez l’article Vérifier la taille du contenu d’une page. Si la taille d’une page est trop grande, suivez ces astuces pour la réduire.

Conseil : si votre modèle prend en charge cette fonction, activez le chargement Ajax pour que les navigateurs chargent votre contenu page par page.

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 une fois le site affiché sur un appareil mobile. Dans le panneau Styles du site, vérifiez que l’option Espacement des lettres est définie sur 0 px ou sur une valeur supérieure pour toutes les 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, les blocs Espaceur sont masqués pour la plupart des modèles une fois le site affiché sur un appareil mobile, ce qui peut altérer votre disposition d'une 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. Vous pouvez aussi essayer la fonctionnalité d’insertion de contenu qui est disponible sur certains modèles.

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

Avec la majorité des modèles 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 modèle.
  2. Vérifiez que l’option Désactiver les styles mobiles est décochée.

Ce paramètre n’apparaît que si votre modèle 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 y trouverez des informations sur l’affichage sur appareil mobile par modèle et vous découvrirez comment optimiser certains types de contenu afin de garantir la compatibilité avec les appareils mobiles.

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