Een statuspagina indelen in twee kolommen voor betere leesbaarheid

Een statuspagina met een tiental services, een onderhoudsschema en een incidentgeschiedenis kan uitgroeien tot een pagina waar bezoekers eindeloos doorheen scrollen voordat ze iets vinden waar ze mee aan de slag kunnen. Door een statuspagina in twee kolommen in te delen, staat je lijst met services links en staan gepland onderhoud en het inschrijfformulier rechts. Zo blijven de onderdelen waar mensen iets mee doen zichtbaar, zonder dat er ook maar één stukje informatie wordt verborgen of van volgorde verandert.

Wanneer heeft een statuspagina echt twee kolommen nodig?

Eén kolom werkt prima voor een kleine pagina: vijf of zes services, misschien één gepland onderhoudsvenster, onderaan een inschrijfvak. Alles wat een bezoeker nodig heeft, staat een of twee keer scrollen verderop.

Het probleem ontstaat zodra de lijst met services groeit. Voeg een tiental services toe, verdeeld over een paar groepen – Website, API, E-mail, Mobiel – en de pagina wordt al lang voordat het onderhoudsgedeelte of het inschrijfformulier in beeld komt. Het formulier dat juist tijdens een storing abonnees moet binnenhalen, belandt duizenden pixels naar beneden, voorbij content die de meeste bezoekers nooit bereiken. Dat is het echte leesbaarheidsprobleem dat een indeling in twee kolommen oplost: niet dat één kolom er verkeerd uitziet, maar dat de pagina niet meer snel te scannen is zodra de lijst lang genoeg wordt.

Is je pagina nog kort, dan blijft één kolom de juiste keuze. Het is niet voor niets de standaard, en een korte pagina omzetten naar twee kolommen levert alleen een halflege kolom op.

Wat een indeling in twee kolommen verandert

In InfraNest hebben statuspagina's een instelling Layout met twee opties: één kolom of twee. Elke pagina begint met één kolom, en dat blijft de standaard. Schakel je over naar twee kolommen, dan verhuizen je services naar een bredere linkerkolom en komen gepland onderhoud en het inschrijfformulier in een smallere kolom ernaast te staan – zichtbaar zodra de pagina laadt, niet pas na lang scrollen.

Dat is de hele verandering. Het is een herschikking, geen herontwerp: dezelfde groepen, dezelfde servicenamen, dezelfde onderhoudsvensters, alleen zo geplaatst dat je de pagina in twee blikken leest in plaats van in één lange.

Wat precies hetzelfde blijft

Het loont om hier expliciet over te zijn, want bij een wijziging in de indeling raak je makkelijk per ongeluk iets kwijt. Beide indelingen tonen precies dezelfde informatie – er wordt niets toegevoegd, verborgen of anders geformuleerd, alleen verplaatst:

• Elke service, groep en uptimebalk die je in één kolom ziet, staat er in twee kolommen nog steeds.
• Gepland onderhoud wordt nog steeds als gepland getoond en telt nooit als downtime.
• Het inschrijfformulier is hetzelfde formulier, alleen op een andere plek.
• Incidentgeschiedenis, services van derden en aankondigingen verschijnen in beide indelingen als je ze hebt ingeschakeld.

NoteAlles wat op dit moment misgaat, blijft in beide indelingen over de volle breedte bovenaan staan. Een indelingsinstelling kan een pagina herschikken, maar kan een actieve storing niet wegzetten in een zijkolom waar je hem makkelijk over het hoofd ziet.

Dat laatste punt is belangrijker dan het klinkt. Een indeling in twee kolommen is een gemak voor rustige dagen – services bekijken, onderhoud checken, je inschrijven. Zodra er iets kapotgaat, gedraagt de pagina zich weer naar het allerbelangrijkste wat erop staat: de storingsbanner, over de volle breedte, bovenaan, ongeacht welke indeling je hebt gekozen.

Waar onderhoud en het inschrijfformulier precies staan

In de indeling met twee kolommen bevat de rechterkolom gepland onderhoud en het inschrijfformulier samen, naast de services in plaats van eronder. Dat is bewust zo: dit zijn de twee dingen die op een lange pagina met één kolom het vaakst wegzakken. Onderhoudsmeldingen die bezoekers zouden moeten zien voordat ze een ticket aanmaken, en het formulier dat een eenmalige bezoeker verandert in iemand die een e-mail krijgt zodra er iets verandert. Door ze naast de lijst met services te houden in plaats van eronder, zijn ze zichtbaar zonder dat een bezoeker hoeft te weten dat ze bestaan en ernaar moet gaan scrollen.

Wat er op een telefoon gebeurt

Op een telefoonscherm is geen ruimte voor twee kolommen, dus een pagina met twee kolommen valt daar automatisch terug naar één kolom. Daarbij gaat niets verloren: de zijkolom (onderhoud en inschrijven) komt onder de services te staan, in dezelfde volgorde als wanneer de pagina vanaf het begin uit één kolom had bestaan. Je hoeft geen aparte keuze te maken voor een mobiele indeling; dat wordt voor je geregeld.

De indeling combineren met andere weergave-instellingen

De indeling is een van meerdere instellingen die je het best samen bekijkt als je statuspagina is gegroeid. Spacing kun je op Compact zetten om meer services op het scherm te krijgen zonder iets te verbergen – het maakt alleen de rijen strakker en verwijdert nooit een sectie. Het kleurenschema kan Auto volgen, zodat het blijft aansluiten op het apparaat van de bezoeker, ook als die midden in een incident van licht naar donker overschakelt. En History shown (30, 60 of 90 dagen) bepaalt hoe ver de uptimebalken en de incidentenlijst teruggaan. Dat heeft ook invloed op hoe lang de versie met één kolom wordt voordat je überhaupt twee kolommen nodig hebt.

Denk je ook na over hoe incidenten op de pagina aansluiten op je supportworkflow? Lees dan incidenten op je statuspagina koppelen aan supportgesprekken – een permanente incident-URL is nuttig, hoe de pagina ook is ingedeeld.

Zo zet je je statuspagina om naar twee kolommen

1. Open je statuspagina en ga naar Settings → Appearance.
2. Kies onder Layout voor Two columns. Een kleine preview laat het verschil zien voordat je de keuze vastlegt.
3. Bekijk de live preview naast de instellingen – die toont je echte services, geen voorbeeldcontent.
4. Sla op. De wijziging gaat direct in, zowel op je eigen domein als op de gehoste URL.

Er hoeft niets gemigreerd te worden en je hoeft geen content opnieuw in te voeren: de indeling verplaatst alleen wat al op de pagina staat. Voelt een pagina met twee kolommen later niet meer goed voor een kleinere lijst met services, dan schakel je met dezelfde twee klikken terug naar één kolom.

Een statuspagina bestaat zodat mensen de vraag "is dit kapot?" kunnen beantwoorden zonder een ticket aan te maken. De lijst met services, het onderhoud en het inschrijfformulier allemaal zichtbaar houden zonder onnodig scrollen is een kleinigheid, maar het maakt het verschil tussen een pagina die wordt gebruikt en een die wordt genegeerd. Bekijk alle indelings- en brandingopties op de featurepagina over statuspagina's.