Organiser une page de statut sur deux colonnes pour une meilleure lisibilité

Une page de statut qui affiche une douzaine de services, un calendrier de maintenance et un historique d'incidents peut vite obliger les visiteurs à faire défiler longuement la page avant de trouver quoi que ce soit d'utile. Organiser une page de statut sur deux colonnes place la liste de vos services à gauche, et la maintenance planifiée ainsi que le formulaire d'abonnement à droite : les éléments sur lesquels les visiteurs agissent restent visibles, sans masquer ni réordonner la moindre information.

Quand une page de statut a-t-elle vraiment besoin de deux colonnes ?

Une seule colonne convient parfaitement à une petite page : cinq ou six services, éventuellement une fenêtre de maintenance à venir et un encadré d'abonnement en bas. Tout ce dont le visiteur a besoin se trouve à un ou deux défilements.

Le problème apparaît lorsque la liste de services s'allonge. Ajoutez une douzaine de services répartis en quelques groupes (Site web, API, E-mail, Mobile) et la page devient longue bien avant que la section maintenance ou le formulaire d'abonnement n'apparaisse. Le formulaire censé recueillir des abonnés pendant une panne se retrouve des milliers de pixels plus bas, au-delà d'un contenu que la plupart des visiteurs n'atteignent jamais. C'est là le véritable problème de lisibilité que résout une mise en page sur deux colonnes : non pas qu'une seule colonne soit mal présentée, mais qu'elle cesse d'être lisible d'un coup d'œil dès que la liste devient trop longue.

Si votre page reste courte, une seule colonne demeure le bon choix : c'est l'option par défaut pour une bonne raison, et passer une page courte sur deux colonnes ne fait que laisser une colonne à moitié vide.

Ce que change une mise en page sur deux colonnes

Sur InfraNest, les pages de statut disposent d'un réglage Mise en page proposant deux options : une colonne ou deux. Une colonne est le réglage de départ de chaque page et reste l'option par défaut. En passant à deux colonnes, vos services se placent dans une colonne de gauche plus large, tandis que la maintenance planifiée et le formulaire d'abonnement occupent une colonne plus étroite à côté, visibles dès le chargement de la page, et non après un long défilement.

C'est tout ce qui change. Il s'agit d'une réorganisation, pas d'une refonte : les mêmes groupes, les mêmes noms de services, les mêmes fenêtres de maintenance, simplement positionnés pour que la page se lise en deux coups d'œil plutôt qu'en un long parcours.

Ce qui reste strictement identique

Cela mérite d'être précisé, car un changement de mise en page est une occasion facile de perdre quelque chose par inadvertance. Les deux mises en page affichent exactement les mêmes informations : rien n'est ajouté, masqué ni reformulé, seulement déplacé.

• Chaque service, groupe et barre d'uptime visible sur une colonne est toujours présent sur deux.
• La maintenance planifiée reste affichée comme planifiée et n'est jamais comptée comme une indisponibilité.
• Le formulaire d'abonnement est le même, simplement positionné différemment.
• L'historique des incidents, les services tiers et les annonces apparaissent dans les deux mises en page si vous les avez activés.

NoteTout ce qui pose problème en ce moment reste affiché sur toute la largeur en haut de la page, dans les deux mises en page. Un réglage de mise en page peut réorganiser une page ; il ne peut pas reléguer une panne en cours dans une colonne latérale où elle passerait facilement inaperçue.

Ce dernier point compte plus qu'il n'y paraît. Une mise en page sur deux colonnes est un confort pour les jours calmes : parcourir les services, consulter la maintenance, s'abonner. Dès que quelque chose tombe en panne, la page remet au premier plan l'élément le plus important : le bandeau de panne, sur toute la largeur, en haut, quelle que soit la mise en page choisie.

Où se placent la maintenance et le formulaire d'abonnement

Dans la mise en page sur deux colonnes, la colonne de droite regroupe la maintenance planifiée et le formulaire d'abonnement, à côté des services plutôt qu'en dessous. C'est volontaire : ce sont les deux éléments qu'une longue page sur une seule colonne enterre le plus souvent. D'un côté, les avis de maintenance que les visiteurs devraient voir avant d'ouvrir un ticket ; de l'autre, le formulaire qui transforme un visiteur ponctuel en abonné prévenu par e-mail dès qu'un changement survient. Les placer à côté de la liste de services plutôt qu'en dessous les rend visibles sans que le visiteur ait besoin de savoir qu'ils existent et de faire défiler la page pour les chercher.

Que se passe-t-il sur mobile ?

L'écran d'un téléphone n'a pas la place pour deux colonnes : une page sur deux colonnes repasse donc automatiquement sur une seule. Rien ne se perd au passage : la colonne latérale (maintenance et abonnement) se place sous les services, dans le même ordre que si la page avait été sur une seule colonne dès le départ. Vous n'avez pas à prévoir de mise en page mobile distincte ; tout est géré pour vous.

Associer la mise en page à d'autres réglages d'apparence

La mise en page n'est qu'un réglage parmi d'autres qu'il vaut la peine d'examiner ensemble si votre page de statut s'est étoffée. L'espacement peut être réglé sur Compact pour afficher davantage de services à l'écran sans rien masquer : il resserre seulement les lignes et ne supprime jamais de section. Le jeu de couleurs peut suivre le mode Auto, qui reste aligné sur l'appareil du visiteur même s'il passe du clair au sombre en plein incident. Enfin, Historique affiché (30, 60 ou 90 jours) détermine jusqu'où remontent les barres d'uptime et la liste des incidents, ce qui influe aussi sur la longueur de la version à une colonne avant même qu'elle ait besoin de deux colonnes.

Si vous réfléchissez également à la manière de relier les incidents de la page à votre processus de support, consultez relier les incidents de la page de statut aux conversations de support : une URL d'incident permanente est utile quelle que soit la mise en page.

Comment passer votre page de statut sur deux colonnes

1. Ouvrez votre page de statut et accédez à Paramètres → Apparence.
2. Sous Mise en page, choisissez Deux colonnes. Un petit aperçu montre la différence avant de valider.
3. Vérifiez l'aperçu en direct à côté des paramètres : il affiche vos vrais services, et non un contenu factice.
4. Enregistrez. Le changement s'applique immédiatement, aussi bien sur votre domaine personnalisé que sur l'URL hébergée.

Il n'y a rien à migrer ni aucun contenu à ressaisir : la mise en page se contente de déplacer ce qui figure déjà sur la page. Si une page sur deux colonnes ne convient plus par la suite à une liste de services plus réduite, revenir à une colonne se fait en deux clics également.

Une page de statut existe pour que chacun puisse répondre à la question « est-ce que c'est en panne ? » sans ouvrir de ticket. Garder la liste des services, la maintenance et le formulaire d'abonnement visibles sans défilement inutile est un détail, mais c'est ce qui distingue une page consultée d'une page ignorée. Découvrez l'ensemble des options de mise en page et de personnalisation sur la page de la fonctionnalité pages de statut.