Découvrez comment Squarespace adapte le contenu de votre site à n’importe quel appareil.

Le design réactif intégré de Squarespace redimensionne votre contenu et vos images pour s'adapter à différents appareils et largeurs d'écran. Grâce au design réactif, les visiteurs peuvent visualiser automatiquement votre site de plusieurs façons, de sorte que vous n'avez pas besoin de créer et de maintenir des sites distincts pour chaque périphérique, navigateur et largeur d'affichage potentiels.

La réponse aux questions courantes comme « Pourquoi ma bannière est-elle recadrée pour la vue sur mobile ? » ou « Mon image d'arrière-plan est déformée. Comment puis-je y remédier ? » consiste à comprendre le design réactif et à choisir des images qui peuvent s'adapter à la forme des différents navigateurs et appareils.

Conseil : Pour en savoir plus sur la façon dont certains éléments du site apparaissent sur les appareils mobiles, consultez Comment mon site apparaît-il sur les appareils mobiles ?

Bonnes pratiques relatives aux images

Imaginez un tapis étroit qui s’adapte parfaitement sur le sol d’une pièce étroite. Si vous déplacez le tapis dans une pièce plus petite, ou même simplement si vous le tournez latéralement, il ne s’adaptera pas correctement.

Les images, en particulier les bannières et les images d'arrière-plan, fonctionnent de la même manière. Le design réactif aide votre « tapis » à changer de taille et de forme. Pour le meilleur effet, sélectionnez et configurez chaque image afin qu'elle soit esthétique dans autant d'« emplacements » que possible.

Lorsque vous choisissez une image à télécharger, gardez à l'esprit :

Taille de l'image

• Pour obtenir des recommandations sur la taille et la largeur du fichier image, suivez nos bonnes pratiques en matière d'image.
• Pour en savoir plus sur les bonnes pratiques pour les images de bannières, consultez la page Ajout d'images de bannières.
• Choisissez des images ayant à peu près la même forme que l'emplacement où elles doivent apparaître. Par exemple, utilisez une image large pour une bannière. Pour comprendre le fonctionnement du recadrage, consultez Dépannage des problèmes de recadrage.

Contenu de l'image

• Préférez les motifs abstraits et les images sans texte ni bordure.
• Pour les images d'arrière-plan, les motifs répétés offrent une plus grande flexibilité.
• Changez le point focal pour contrôler la façon dont l'image se centre.
• S'il est important qu'une zone spécifique de l'image (comme une personne ou un objet) ne soit pas recadrée, cela peut aider à ajouter une zone « perdue » autour des bords, de sorte que le recadrage soit moins perceptible.

Bonnes pratiques en matière de texte

Le texte se redimensionne automatiquement pour s'adapter à l'écran.

Astuces :

• Ajoutez du texte sous la forme d'une légende, d'une superposition ou directement sur la page, plutôt que d'utiliser des images contenant du texte. Cela permettra de réduire les problèmes de recadrage à mesure que les polices évoluent avec la largeur du navigateur. Les moteurs de recherche peuvent également l'indexer pour les résultats.
• Certains templates de la version 7.0 permettent d’ajuster la manière dont le texte est redimensionné sur les appareils mobiles.

Le contenu se réorganise sur les appareils mobiles

Dans l’Éditeur intuitif, vous pouvez réorganiser le contenu de votre disposition mobile indépendamment de la disposition pour ordinateur.

Dans l’éditeur classique, le contenu est empilé verticalement sur les appareils mobiles. Cela facilite la navigation de votre site et aide les images et le texte à rester visibles dans un navigateur plus petit et plus étroit.

Pour en savoir plus :

• Consultez nos règles générales pour savoir comment apparaît votre site sur un appareil mobile.
• Découvrez ce qui change au niveau des pages et de la disposition des blocs sur mobile dans l’éditeur classique.

Remarque : si votre site est sur la version 7.0 et que vous avez désactivé les styles mobiles, le contenu de votre site ne sera pas réorganisé ou empilé sur mobile.

Le contenu répond différemment sur les écrans Retina

L'apparence de votre site sur les écrans Retina et HD dépend de la taille originale des images que vous avez téléchargées sur votre site.

Lorsque vous téléchargez une image, nous stockons jusqu'à sept versions de celle-ci, chacune d'une largeur différente. Notre design réactif intégré détecte automatiquement l'écran du visiteur et choisit la meilleure taille d'image pour s'y adapter. Sur les écrans Retina, nous montrerons une image deux fois plus grande que nécessaire.

Remarque : Les images chargées via Styles de site sur la version 7.0, telles que les images d'arrière-plan, sont l'exception à cette règle. Pour ces images, nous montrons toujours l'image originale en taille réelle.

Voici d'autres types d'images à considérer :

• Logos : le chargement d’un fichier image volumineux (deux fois la taille requise) pour votre logo peut améliorer son apparence sur les écrans HD et Retina. Cependant, cela peut provoquer un flou sur d’autres écrans et dans certains navigateurs. Prenez en compte l’audience de votre site et utilisez une taille de logo adaptée à la majorité des écrans de vos visiteurs. Vous pouvez modifier la hauteur du logo dans la plupart des templates.
• Icônes : la plupart des icônes de nos templates, telles que les icônes de menu et les icônes sociales, évoluent sans perte de qualité d’image, car elles sont basées sur des polices web ou SVG. Certains templates plus anciens ou abandonnés ont des icônes basées sur des images qui ne s’adaptent pas sur les écrans Retina.
• Texte : Tout texte ajouté à votre site s'adaptera aux écrans Retina sans perte de qualité.

Pour plus de conseils sur l'optimisation des images, consultez Formatage de vos images pour les afficher sur le web.

Comparer sur différents appareils

Comparer votre site sur mobile et sur ordinateur est un bon moyen de savoir comment votre site s’adapte aux différentes formes de navigateur. Au fur et à mesure que vous apportez des modifications majeures sur votre site, il est conseillé de garder votre téléphone à proximité, avec votre site ouvert dans son navigateur. Lorsque vous enregistrez des modifications importantes sur un ordinateur, actualisez le navigateur de votre smartphone pour voir l’effet.

Tester les modifications sur votre appareil mobile donne l'affichage le plus précis et constitue le seul moyen d'explorer les orientations portrait et paysage. Pour obtenir un aperçu rapide lorsque vous modifiez sur un ordinateur, utilisez la fonction Vue par appareil.

Pour en savoir plus sur l’impact que la taille de la fenêtre de votre navigateur peut avoir sur la mise en forme du contenu de votre site, consultez l’article Navigateurs pris en charge.