Lors de la création d'un site web d'entreprise, le problème le plus fréquent avec le responsive n'est pas la faisabilité technique, mais la réflexion en amont sur l'organisation du contenu. Beaucoup de pages paraissent complètes sur ordinateur, mais deviennent une longue succession de modules empilés sur mobile, obligeant le visiteur à faire défiler longtemps avant de trouver les coordonnées. Pour éviter cela, il faut d'abord définir les points de rupture, puis organiser l'ordre des modules, et enfin vérifier écran par écran sur des appareils réels.
Définir les points de rupture avant de dessiner la version mobile
Un point de rupture est une largeur d'écran à laquelle la mise en page change. Pour un site d'entreprise, la pratique courante consiste à définir quelques points de rupture principaux pour le mobile, la tablette et le bureau, puis à ajouter un ou deux points de transition selon le contenu réel. Le nombre de points de rupture ne doit pas être excessif : chaque point supplémentaire augmente le coût de maintenance et de vérification.
Pour déterminer les points de rupture, il est conseillé de consulter d'abord les données de fréquentation : si vous pouvez voir la répartition des appareils des visiteurs, privilégiez l'expérience du type d'appareil le plus utilisé. En l'absence de données, commencez par une approche mobile-first, puis adaptez pour le bureau. Une fois les points de rupture fixés, intégrez-les dans les spécifications de design ou la documentation de développement pour éviter que chaque page n'utilise ses propres standards.
Organiser les modules par priorité de contenu, pas selon l'ordre visuel du bureau
Une page bureau est souvent organisée en colonnes ou en plusieurs colonnes côte à côte, alors que sur mobile, elle ne peut être que verticale. La vraie question est donc : quel contenu doit apparaître en premier ? Une méthode pratique consiste à lister les modules de la page, puis à se demander : que veut voir le visiteur en premier en ouvrant cette page ?
Voici comment organiser quelques types de pages courantes d'un site d'entreprise :
- Page d'accueil : une phrase de présentation de la marque ou de l'activité, l'accès aux produits ou services principaux, les coordonnées ou un point de contact, placés en haut ; la présentation de l'entreprise, les actualités, etc., peuvent venir après.
- Page produit ou service : nom du produit et informations clés, cas d'usage ou spécifications, point de contact ; le tableau détaillé des caractéristiques peut être placé plus bas, éventuellement sous forme dépliable.
- Page réalisations : secteur ou type de projet, problématique du client, points clés de la solution, puis les images et détails.
- Page à propos : positionnement de l'entreprise, activités principales, informations sur l'équipe ou les certifications, avec les coordonnées à un endroit facile à trouver.
Ces ordres ne sont pas des modèles figés, mais le critère de décision reste le même : le premier écran sur mobile doit permettre au visiteur de comprendre ce que propose la page et ce qu'il peut faire ensuite.
Gérer les images, les tableaux et les longs textes, sources fréquentes de problèmes
Les problèmes de responsive se concentrent souvent sur trois types de contenu.
Pour les images, une même image peut avoir des dimensions très différentes sur mobile et sur bureau. Il faut vérifier si les parties essentielles sont coupées sur petit écran, en particulier les bannières contenant du texte. Si l'image contient du texte important, il est préférable de le remplacer par du vrai texte dans la page plutôt que de l'intégrer dans l'image.
Pour les tableaux, les tableaux larges sont difficiles à afficher entièrement sur mobile. Il faut décider à l'avance : soit permettre un défilement horizontal, soit transformer les colonnes en lignes empilées. Si le tableau a beaucoup de colonnes, la transformation en lignes est généralement plus lisible. Cette décision doit être confirmée avec le développeur avant la mise en ligne, pas après.
Pour les longs textes, une ligne sur bureau peut contenir beaucoup de caractères, alors que sur mobile, une ligne en contient moins et les paragraphes s'allongent. Il est conseillé de contrôler la longueur des paragraphes, de diviser les longues explications en plusieurs petits paragraphes et, si nécessaire, d'utiliser des sous-titres pour réduire la charge de lecture sur mobile.
Organiser la navigation et les points d'action sur petit écran
La navigation horizontale sur bureau est généralement regroupée dans un menu sur mobile. Il faut vérifier que, une fois le menu déplié, la hiérarchie des rubriques est claire et que le visiteur peut trouver la page cible sans revenir en arrière. Si la hiérarchie est profonde, on peut envisager de réduire les niveaux dans le menu mobile et de placer les entrées fréquentes en premier.
Les points d'action incluent les boutons de contact, le téléphone, l'envoi de formulaire, etc. Sur mobile, ces éléments doivent rester cliquables et ne pas être masqués par d'autres éléments. La zone de clic des boutons doit être suffisamment grande pour éviter les erreurs de toucher entre boutons voisins.
Vérifier écran par écran sur appareils réels avant la mise en ligne
Une fois la page terminée, il est recommandé de vérifier dans l'ordre suivant :
- Ouvrir la page sur mobile, tablette et bureau, faire défiler du début à la fin et noter le contenu affiché à chaque écran.
- Vérifier que le premier écran indique le sujet de la page et propose un point d'action.
- Vérifier que les images ne coupent pas d'informations clés et que les tableaux sont consultables.
- Vérifier que le menu de navigation déplié est complet et que les noms des rubriques correspondent au contenu de la page.
- Vérifier que les points de contact, téléphone, formulaire, etc., sont utilisables sur petit écran.
- Noter les problèmes par page, les corriger, puis vérifier à nouveau sur les mêmes appareils.
Si le site comporte plusieurs modèles de pages, comme la page d'accueil, les pages de rubrique et les pages de détail, il est conseillé de vérifier au moins une page représentative de chaque modèle, et pas seulement la page d'accueil.
Intégrer l'organisation responsive dans les habitudes de maintenance
Une page responsive n'est pas figée au moment de la mise en ligne. Lors des mises à jour de contenu, les nouvelles images, tableaux et textes doivent également être vérifiés selon les critères ci-dessus. Une méthode simple consiste à ajouter une étape dans le processus de publication : avant de publier un nouveau module, le visualiser en largeur mobile pour vérifier qu'il n'y a pas de débordement, de masquage ou d'ordre incorrect. Cela permet d'éviter la plupart des problèmes avant la publication et de réduire les retouches ultérieures.
