Printvriendelijke pagina's op je website: klein detail, groot gemak

Wat een klant ziet als hij op 'afdrukken' klikt

Een hypotheekadviseur stuurt een link naar de dienstenpagina, en de klant print 'm uit om rustig door te nemen. Dat gebeurt vaker dan je denkt, zeker bij oudere klanten en bij stukken die ze willen bewaren bij hun dossier. Print die pagina zelf eens uit. De navigatiebalk loopt vaak dwars over de tekst, een knop met witte letters op een gekleurde achtergrond wordt op papier onleesbaar, en de koptekst met het menu neemt een kwart van de pagina in. Links staan er blauw en onderstreept bij, zonder dat duidelijk is waar ze naartoe gaan. Op papier kun je nergens op klikken.

Bij een veelgestelde-vragen-pagina met inklapbare antwoorden gaat het vaak nog verder mis: alleen de vragen komen op papier terecht, want de antwoorden zitten verborgen achter een klik die op papier niet bestaat. Een tabel met tarieven breekt op de verkeerde plek af tussen twee pagina's, en een rekentool of widget met een grafiek print als een leeg grijs vlak. Een klant die dit meeneemt naar een gesprek met de notaris of de bank, overhandigt dan een half leesbaar document met het logo van jouw kantoor erop.

Niemand test dit, omdat niemand het zelf doet. Je browser toont de site altijd op een scherm. De printversie is een blinde vlek. En precies daarom valt hij op bij de klant die het wel probeert.

Dat eerste oordeel telt mee. Een klant die net een adviesrapport heeft gekregen en de bijbehorende webpagina uitprint om te vergelijken, verwacht een document dat net zo verzorgd oogt als het rapport zelf. Een afgesneden tabel of een onleesbare knop doet dan afbreuk aan een indruk die je met de rest van je dienstverlening juist zorgvuldig hebt opgebouwd.

Een losse stylesheet lost het op

De ingreep zit in een apart stuk CSS dat alleen actief wordt bij het afdrukken: een @media print-regel. Daarin verberg je de navigatie, de footer met social-iconen en de call-to-action-knoppen, want niemand klikt op papier. Tekst zet je op zwart tegen een witte achtergrond, ook als de pagina op het scherm een donkere sectie heeft. Een ingeklapte FAQ-antwoord dwing je open met dezelfde regel, zodat de volledige inhoud op papier staat in plaats van alleen de vraag. Bij een dienstenpagina per product geldt dat extra: juist die pagina's worden het vaakst uitgeprint, omdat een klant ze erbij pakt tijdens een adviesgesprek.

Tabellen en lijsten krijgen een instructie om niet halverwege af te breken tussen twee pagina's, zodat een tarievenoverzicht in één stuk leesbaar blijft. Het logo en de kantoornaam blijven bovenaan staan, zodat een losse pagina bij de klant thuis nog herkenbaar is als afkomstig van jouw kantoor. Een paar regels styling. Geen aparte pagina om bij te houden, geen tweede versie om te onderhouden als de tekst verandert.

Voeg bij een link die niet voor zich spreekt het webadres zelf toe, tussen haakjes achter de tekst. Dat kan automatisch via CSS, zonder dat je iets aan de zichtbare tekst op het scherm verandert. Zo blijft een verwijzing bruikbaar, ook als het papier los van het scherm rondgaat op kantoor of bij de klant thuis.

Welke pagina's het verdienen

Niet elke pagina heeft dit nodig. De homepage print bijna niemand uit, en een nieuwsoverzicht of een blogarchief evenmin. Pagina's die wel vaak op papier eindigen: de pagina met tarieven, de privacyverklaring, een stappenplan voor een hypotheekaanvraag, een checklist voor een eerste gesprek, of een uitleg die een klant meeneemt naar de notaris. Begin daar. De rest van de site houdt zijn huidige printversie; de meerwaarde zit in de pagina's die een klant daadwerkelijk vasthoudt.

Controleer het resultaat met de printvoorbeeldfunctie van de browser, niet pas als iemand erover belt. Dat kost een paar minuten per pagina en voorkomt dat een klant een onleesbaar document meeneemt naar precies het gesprek waarvoor hij die pagina nodig had.

Contaqt Website houdt bij de bouw van een kantoorsite ook met dit soort details rekening, zodat een pagina er verzorgd uitziet — op het scherm en op papier.