Gérer le responsive du site web

Importance d'un design Responsive

Pour visiter un site web, les utilisateurs naviguent sur une multitude d’appareils : smartphones, tablettes, ordinateurs…

Un design responsive garantit une expérience fluide et optimisée, quelle que soit la taille de l’écran. Il améliore l’accessibilité, réduit le taux de rebond et favorise un meilleur référencement sur les moteurs de recherche. Adopter une approche responsive, c’est s’assurer que chaque visiteur profite d’une interface ergonomique et agréable, renforçant ainsi l’engagement et la satisfaction des utilisateurs.

Afficher dans différentes tailles d'écran

Pour visualiser le site sur différents types d'appareil, utiliser les icônes suivantes dans la barre d'outils principale :

Cliquer sur l'icône Mobile :

Affichage obtenu :

Adapter le site

Le panneau d'édition, sur la droite de l'écran, permet de d'adapter certains éléments au mode responsive.

Section

Elle peut être masquée pour certaines tailles :

Box

La largeur du contenu peut être adaptée :

La hauteur également :

Cliquer Stack Background on Mobile pour afficher le contenu après l'image de fond :

La ligne

Cliquer dans la ligne et ouvrir la zone Paramètres de la grille dans le panneau d'édition :

Comme pour la Box, la ligne peut être affichée ou cachée selon le type d'écran.

La colonne

Les espacements de colonne peuvent être régler différemment selon les écrans. Cliquer dans la colonne puis sur le bouton Espacement :

La tailles des polices de caractères peut aussi être adaptée. Cliquer dans la colonne, puis sur Paramètres de police :