Printversie maken

Normaal gesproken wordt een website op het scherm bekeken. Het komt echter regelmatig voor dat iemand een pagina wil printen (om bijvoorbeeld aan iemand anders te laten zien waar geen internet is, makkelijker lezen of referentie). Standaard wordt alles (behalve achtergrondkleuren en -afbeeldingen) op de pagina meegeprint, maar veel elementen op de pagina zijn niet van belang wanneer deze geprint worden.

Om een printversie te maken kan er een aparte stylesheet toegevoegd worden die specifiek voor de printversie.

Kenmerken printversie

Verwijder navigatie

Op een website dient de navigatie om naar andere pagina's te navigeren. Wanneer een pagina geprint wordt, verliest de navigatie zijn functie, aangezien de links niet meer te volgen zijn. De gebruiker is daarnaast op het moment hij de pagina print juist op zoek naar de informatie op deze pagina, anders zou hij deze niet uitprinten.

Verwijder eventuele lay-outafbeeldingen

Lay-outafbeeldingen horen eigenlijk al niet in de pagina voor te komen, maar moeten als achtergrondafbeeldingen in de css opgenomen worden. Wanneer ze er wel moeten staan, verberg ze dan in print om te voorkomen dat de gebruiker de helft van de pagina’s weg kan gooien vanwege een schaduwtje langs je website.

Maak de standaardtekst zwart

Zwarte tekst scheelt dure kleureninkt voor de gebruiker en voorkomt dat de tekst slecht leesbaar wordt op zwart-wit laserprinters. Zorg voor de overige teksten dat ze goed leesbaar zijn op een witte achtergrond (zeker wanneer op de website een achtergrondkleur is gebruikt en op basis daarvan een lichte tekstkleur gekozen is).

Toon het webadres van een link

Als je in je website links naar andere websites hebt geplaatst is dat meestal omdat hier extra informatie te vinden is. De gebruiker heeft deze links bij het printen waarschijnlijk nog niet gezien, gelezen en gevolgd. Omdat het hierbij als het goed is om aanvullende informatie gaat is het nu wel nuttig om de link te printen. De gebruiker heeft echter niets aan de link wanneer er niet bij staat welk webadres het om gaat. Voeg daarvoor een extra css-class (werkt enkel in moderne browsers met ondersteuning voor css 2) toe zodat mensen de link alsnog kunnen lezen en intypen in de browser.

CSS printversie

Voor een website kan een speciale stylesheet voor de printversie opgenomen worden. Bij een website met een zeer krap budget kan je dit achterwege laten, maar een stylesheet voor de printversie kost weinig tijd en levert voor de gebruiker nette prints op, en dus een betere ervaring met de website en het bedrijf.

Print stylesheet opnemen in de head

<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />

Navigatie en online functionaliteit verbergen

#zoeken, #navigatie, #artwork-links, #artwork-rechts, #artwork-linksonder  {
display:none;
}

De url tussen haakjes tonen bij print

a:after {
    content: “ (“ attr(href) “) “;
}

Trackback URL for this post:

http://webbl.nl/trackback/126
| Meer