Design adaptatif et visibilité selon l'appareil
Avec plus de 60 % du trafic web provenant d'appareils mobiles, il est essentiel que votre site web s'affiche parfaitement sur toutes les tailles d'écran. Le constructeur de site web fournit des outils puissants pour contrôler l'affichage du contenu sur différents appareils et créer des expériences optimisées pour chaque visiteur.
Aperçu des appareils : En mode Édition, utilisez les icônes d'appareils dans la barre d'outils supérieure pour prévisualiser l'apparence de votre page sur ordinateur, tablette et mobile.
Comprendre le design adaptatif
Le design adaptatif signifie que votre site web s'adapte automatiquement à la taille de l'écran de l'appareil qui le consulte :
| Appareil | Largeur d'écran | Comportement typique |
|---|---|---|
| Ordinateur | 1200px+ | Mise en page complète, toutes les fonctionnalités visibles |
| Portable | 992px - 1199px | Mise en page légèrement condensée |
| Tablette | 768px - 991px | Les colonnes peuvent s'empiler, espacement réduit |
| Mobile | Moins de 768px | Colonne unique, menu hamburger, zones tactiles plus grandes |
Visibilité spécifique par appareil
Contrôlez quels éléments apparaissent sur différents appareils :
Définir la visibilité
- Sélectionnez n'importe quel élément sur votre page
- Ouvrez le panneau Options à droite
- Trouvez la section Visibilité
- Activez ou désactivez la visibilité pour chaque type d'appareil
Options de visibilité
| Option | Effet | Cas d'utilisation |
|---|---|---|
| Afficher sur ordinateur | Élément visible uniquement sur grands écrans | Mises en page complexes, grandes images, tableaux détaillés |
| Afficher sur tablette | Élément visible sur écrans moyens | Contenu spécifique aux tablettes |
| Afficher sur mobile | Élément visible sur petits écrans | Navigation simplifiée, boutons adaptés au tactile |
| Afficher partout | Élément visible partout (par défaut) | Contenu essentiel comme les logos, le texte principal |
| Masquer sur mobile | Masqué uniquement sur petits écrans | Images secondaires, éléments décoratifs |
Optimisations courantes pour mobile
Navigation
- Ordinateur : barre de menu horizontale complète avec menus déroulants
- Mobile : menu hamburger (trois lignes) qui s'ouvre en menu vertical
- Envisagez d'ajouter un en-tête mobile fixe pour un accès facile
Images
- Masquez les grandes images décoratives sur mobile pour accélérer le chargement
- Utilisez des versions plus petites et optimisées pour les appareils mobiles
- Assurez-vous que les images s'adaptent proportionnellement (ne jamais étirer)
Colonnes
- Les mises en page multi-colonnes s'empilent automatiquement verticalement sur mobile
- Contrôlez l'ordre d'empilement (quelle colonne apparaît en premier)
- Ajustez l'espacement entre les sections empilées
Texte
- Assurez-vous que la taille de police de base est d'au moins 16px pour la lisibilité mobile
- Réduisez proportionnellement la taille des titres sur petits écrans
- Gardez une longueur de ligne confortable (45-75 caractères)
Boutons et liens
- Taille minimale de zone tactile : 44x44 pixels
- Ajoutez un espacement adéquat entre les éléments cliquables
- Envisagez des boutons pleine largeur sur mobile pour faciliter l'appui
Visibilité conditionnelle
Au-delà de la visibilité par appareil, affichez ou masquez du contenu selon des conditions :
Visibilité basée sur l'utilisateur
| Condition | Description | Cas d'utilisation |
|---|---|---|
| Utilisateurs connectés | Visible uniquement pour les visiteurs authentifiés | Liens de compte, contenu personnalisé, accès au portail |
| Visiteurs invités | Visible uniquement pour les visiteurs non connectés | Invites de connexion, appels à l'inscription, bannières promotionnelles |
| Groupes spécifiques | Visible pour les utilisateurs de certains groupes | Outils d'administration, contenu partenaire, fonctionnalités premium |
Définir la visibilité conditionnelle
- Sélectionnez l'élément
- Ouvrez Options → Visibilité
- Trouvez Visibilité conditionnelle
- Sélectionnez la condition à appliquer
Éléments masqués
Vous pouvez masquer des éléments tout en les conservant dans la structure de votre page :
- Temporairement masqué : Pour du contenu pas encore prêt à publier
- Contenu programmé : Promotions saisonnières en attente de mise en ligne
- Tests A/B : Testez différentes versions
- Espace réservé : Emplacement pour du contenu futur
Gérer les éléments masqués
- Les éléments masqués s'affichent avec une superposition rayée en mode Édition
- Basculez la visibilité en un seul clic
- Les éléments masqués ne se chargent pas pour les visiteurs (aucun impact sur les performances)
Tester le design adaptatif
Dans le constructeur de site web
- Cliquez sur l'icône Mobile dans la barre d'outils supérieure
- Visualisez votre page en mode aperçu mobile
- Basculez entre les vues Ordinateur, Tablette et Mobile
- Effectuez des ajustements directement dans chaque vue
Outils de développement du navigateur
- Appuyez sur F12 pour ouvrir les outils de développement
- Cliquez sur l'icône de basculement d'appareil (téléphone/tablette)
- Sélectionnez des appareils spécifiques (iPhone, iPad, etc.)
- Testez les interactions et le défilement
Tests sur appareils réels
Testez toujours sur de vrais appareils lorsque c'est possible :
- Les interactions tactiles sont différentes des clics de souris
- Le rendu des polices varie selon les appareils
- Les performances diffèrent considérablement
- Testez en orientation portrait et paysage
Optimisation des performances pour mobile
Les utilisateurs mobiles ont souvent des connexions plus lentes. Optimisez la vitesse :
- Images : Utilisez des images de taille adaptée, activez le chargement différé
- Polices : Limitez les polices personnalisées (chacune ajoute du temps de chargement)
- Vidéos : Utilisez des images d'aperçu, évitez la lecture automatique sur mobile
- Contenu masqué : Les éléments masqués sur mobile se chargent quand même sauf configuration adéquate
- Animations : Réduisez ou désactivez les animations complexes sur mobile
Considérations d'accessibilité
Assurez-vous que votre site mobile est accessible :
- Les zones tactiles sont suffisamment grandes (minimum 44x44px)
- Contraste de couleurs suffisant (4.5:1 pour le texte)
- Le texte est lisible sans zoom (min 16px)
- Les formulaires ont des libellés visibles
- Les indicateurs de focus sont visibles pour la navigation au clavier
- Les images ont un texte alternatif
Bonnes pratiques spécifiques au mobile
| À faire | À éviter |
|---|---|
| Empiler les colonnes verticalement | Forcer le défilement horizontal |
| Utiliser des boutons pleine largeur | Placer de petits liens proches les uns des autres |
| Simplifier la navigation | Garder des méga-menus complexes sur mobile |
| Prioriser le contenu essentiel | Afficher tout le contenu du bureau |
| Tester sur de vrais appareils | Utiliser uniquement l'émulation du navigateur |
| Optimiser les images pour mobile | Charger des images de taille bureau |