design mobile sur Squarespace Fluid Engine : trois erreurs à éviter

Fluid Engine est le nouvel éditeur de création de site web de Squarespace, sorti en 2022 - fin 2022 pour les clients français - et ça a vraiment changé la façon de construire un site avec Squarespace. Et pour moi, la grande amélioration, c'est la possibilité d'optimiser le design spécifiquement sur mobile ! 

Auparavant, Squarespace gérait automatiquement l'optimisation mobile, mais c'était très loin d'être parfait : pour obtenir un résultat plus propre, plus professionnel, il était indispensable de passer par le code CSS. Mais coder en CSS, lorsque l’on n’est pas développeur, ça pose rapidement problème ! 

L'avantage désormais, c'est que l'on a la main sur le design mobile, mais l'inconvénient, c'est qu'il faut refaire, et surtout repenser le design. 

👉 Nous allons voir ensemble comment fonctionne l’optimisation mobile, et quelles sont les trois erreurs principales à éviter !

Avant de regarder de lire cet article (ou regarder cette vidéo), je vous conseille d’avoir déjà mis les mains dans Fluid Engine, ou d’avoir regardé la vidéo d'introduction.

[ L’article qui suit est une transcription arrangée de la vidéo ! ]

optimiser votre site Internet sur mobile et tablette avec Squarespace

Lorsque nous travaillons nos sections, on voit en haut à droite les icônes pour basculer d’une vue à une autre (bureau et mobile). Lorsque je rajoute un nouvel élément (une photo, un bouton…) sur mon site, Fluid Engine va me rappeler, par cette pastille bleue, que je dois basculer en vue mobile et retravailler le design.

Par défaut, les boutons, images, etc, seront empilés, sans forcément de sens. Premier point d’attention : pensez à prendre en compte tous les éléments, dont certains auraient glissé en en bas de page !

Certains blocs seront peut-être positionnés correctement ; pour les autres, on vient en modifier l’ordre et la position par le système de glisser-déposer classique de Squarespace.

💡 l’astuce : faîtes attention à conserver de la cohérence visuelle, esthétique et stratégique entre votre design de bureau et votre design mobile. Pensez à aérez votre design - surtout sur mobile !

un site Internet mobile rapide

On dit souvent que la vitesse d’un site, c’est le nerf de la guerre. Personnellement, je dirais plutôt que c’est la stratégie et le parcours visiteur, mais la vitesse a aussi son importance !

La nouveauté avec Fluid Engine, c’est que l’on voit le nombre de lignes dont est composée chaque section. Dans l’exemple ici, la section fait 35 lignes, qui correspondent au quadrillage de la section.

Lorsque l’on bascule en vue mobile, avec l’optimisation automatique, on est désormais à 53 lignes : c’est normal ! Vous allez avoir besoin de plus d'espace sur mobile pour l’optimisation, puisque la largeur de la page est réduite.

Point d’alerte : Squarespace Fluid Engine ne gère pas encore très bien (en 2023 à la date où est rédigé cet article) les sections de plus de 100 lignes, que ce soit sur bureau ou mobile. Lorsque l’on dépasse ces 100 lignes, l’éditeur commence à “ramer” un peu, ainsi que le chargement des sections. Très désagréable lorsque l’on travaille sur son site !

Conservez donc un nombre de lignes inférieur à 100, par section. Je vous recommande de construire plusieurs sections, plutôt que de tout “balancer” dans une seule et unique section : pensez légèreté et fluidité !

💡 l’astuce : pour travailler l’optimisation mobile et gagner du temps, vous pouvez utiliser les flèches de votre clavier pour déplacer vos éléments à gauche, à droite, en haut ou en bas !

le point technique : vérifiez tout, deux fois !

Vous l’aurez compris au titre. Soyez très attentif à ce troisième point, car ça arrive, et ça m’est arrivé plusieurs fois ! 

Parfois, lorsque vous touchez au design mobile, il est possible que le design “bureau” en soit modifié : boutons décalés, photos rétrécies, trop ou pas assez d’espace... Ce n’est pas systématique, mais ça arrive ! Donc faites très, très, très attention à vérifier toutes vos sections avant de les enregistrer, et publier votre site ! 

Pensez bien à basculer de la vue mobile à bureau, et vice versa, lorsque vous optimisez sur mobile.

💡 l’astuce : soyez logiques et cohérents avec les hauteurs d’image. Si vous choisissez une hauteur de 9 lignes, conservez une hauteur de 9 lignes pour toutes vos images sur mobile - dans le respect du bon sens et de la cohérence, bien entendu !

💡 l’astuce bis : vous pouvez utiliser Ctrl + C et Ctrl + V pour copier et coller des blocs dans une même section ! Parfait pour les boutons, les images, et s’assurer que les dimensions restent parfaitement les mêmes, sans avoir à compter les lignes (ce qui n’est pas franchement pratique, admettons-le !). 

Webdesigner et consultante Squarespace, j’accompagne et je crée pour mes clients des sites intelligents, stratégiques et haut de gamme. On travaille ensemble ?

Personnalisez en quelques clics et copier-coller votre site Squarespace : intégrer votre police, personnaliser les cookies… sans apprendre à coder !