Mise en page responsive
WebAcappella permet de créer des sites adaptatifs (responsive), capables de s’ajuster automatiquement aux différentes tailles d’écrans : ordinateur, tablette et mobile.
Le logiciel fonctionne comme un système modulaire basé sur des boîtes, lignes et colonnes.
Comprendre le mode responsive
- Un site responsive doit s’adapter sans perdre en lisibilité ni en ergonomie.
- WebAcappella inclut plusieurs points de rupture (breakpoints) permettant d’ajuster la mise en page selon la taille d’écran.
- Les trois principaux modes d’affichage disponibles sont :
✔ Mode Desktop : Affichage sur grand écran (PC, Mac).
✔ Mode Tablette : Adaptation aux écrans intermédiaires.
✔ Mode Mobile : Optimisation pour smartphones.
Accéder aux choix d'écran
- Repérer les icônes correspondant aux différentes tailles d’écran au-dessus du plan de travail.
- Cliquer sur l'icône pour afficher l’aperçu du site à tout moment.
Propriétés responsives
- Certaines propriétés peuvent être adaptées selon le mode d’affichage (Desktop, Tablette, Mobile).
- Lorsqu’un réglage est modifiable pour un écran spécifique, une icône de mode responsive s’affiche à côté du paramètre.
En activant ces options, chaque mode d'affichage aura son propre réglage, sans impacter les autres.
Autre exemple d'utilisation : adapter la taille des polices. Un texte trop grand peut être difficile à lire sur mobile.
Redimensionner les colonnes
Chaque ligne comporte une ou plusieurs colonnes, dont la largeur varie de 1 à 12 unités.
Activer le mode colonnes en maintenant la touche Option (Mac) / Alt (Windows) permet de sélectionner plus facilement les colonnes.
Lorsqu'une colonne est sélectionnée, vous pouvez :
- La déplacer pour réorganiser la structure.
- La redimensionner afin d’ajuster son occupation dans la ligne.
- Utiliser un agencement fluide : Les colonnes se réorganisent automatiquement en fonction de l’écran.
- Vérifier le redimensionnement des colonnes : Elles doivent être adaptées pour éviter un affichage trop serré sur mobile.
Mode Cascade : Empiler les éléments dans une colonne
Le mode Cascade permet de forcer l’empilement vertical des éléments contenus dans une colonne sur un écran donné.
Il est particulièrement utile sur mobile pour éviter une disposition horizontale trop serrée et améliorer la lisibilité.
- Sélectionner une ligne.
- Accéder aux paramètres de la ligne (panneau de droite).
- Activer le mode "Cascade" pour l’écran actuellement sélectionné.
- Les éléments de chaque colonne sont automatiquement empilés verticalement.
Utiliser un "Break" pour forcer un retour à la ligne
L’élément Break permet de forcer une ligne à passer en dessous de la précédente sur un écran donné. Ce réglage est hérité sur les écrans de tailles inférieures, garantissant une meilleure adaptation du contenu.
- Il est nécessaire de sélectionner une ligne.
- Ouvrir la barre d'outils des éléments.
- Sélectionner l'élément Break.
- Glisser-déposer le Break dans une ligne où l'on souhaite forcer un retour à la ligne.
⚠ Un Break inséré dans une ligne sera actif sur cet écran et les tailles inférieures.
Masquer des éléments selon l’écran
Si un élément est trop complexe pour un petit écran, il peut être masqué selon la taille d’écran.
- Sélectionner un élément.
- Accéder aux options de visibilité (dans les propriétés à droite).
- Cocher ou décocher les options pour afficher ou masquer l’élément sur Desktop, Tablette ou Mobile.
Tester et finaliser l’affichage
- Passer en mode mobile régulièrement pour vérifier le rendu.
- Ajuster les marges et espacements pour éviter des éléments trop serrés.
- Utiliser l’aperçu (Cmd + T / Ctrl + T) pour voir le rendu en conditions réelles.
Bonnes pratiques
- Utiliser une structure en colonnes flexibles pour une meilleure adaptabilité.
- Activer le mode Cascade sur certaines lignes pour éviter d’avoir des éléments mal alignés sur mobile.
- Utiliser un Break dans une ligne si elle doit passer en dessous des autres à partir d’un écran donné.
- Tester chaque mode d’affichage avant la publication.
- Optimiser les images et textes pour garantir une bonne lisibilité sur tous les écrans.