Som webdesigner i dag skal du tage hensyn til, at dine besøgende både kommer fra en desktop-computer, fra en tablet-enhed og fra en smartphone.
Men du skal også have det in mente at nogle af dine besøgende vil printe og læse din side.
Dette indlæg er sponsoreret af Tonerland.dk, hvor du bl.a. kan købe Epson printerpatroner og Brother toner.
Ny CSS til print
Måden hvorpå du tager hensyn til de af dine besøgende der ønsker at printe er ved hjælp af et separat stylesheet.
Dette stylesheet fjerner nogle af de elementer, brugeren næppe ønsker med på sit print. Det er elementer som:
- Menu
- Baggrundsfarver
- Billeder i en karrusel (hvis du bruger sådan en?)
- Social media-ikoner
- Søgeknappen
Og mange flere.
De fleste interaktive elementer bør også fjernes, da brugeren i sagens natur ikke længere kan interagere med dem.
Du kan enten kalde dit printer-stylesheet i headeren med et almindelig <link>-tag – præcis som du ville med dit almindelige stylesheet og som du ville kalde det framework, du eventuelt bruger. Vi anbefaler her på siden at bruge Twitter Bootstrap som framework til al den CSS, du laver. Det gør din dag meget nemmere.
Du kan også bruge ”@media print {”-tilgangen. På denne måde har du ikke behov for at lave et ekstra stylesheet og derved lave et ekstra kald på serveren. Den dygtige webdesigner og programmør bruger også @media-tilgangen, den knap så dygtige kalder i et separat stylesheet.
Du kan overveje at skrive en speciel besked ind i en div, der alene vises, hvis der er tale om print. På den måde kan du ”tale” til den printende bruger. Hvis du er fræk indsætter du en besked om, at print ikke er godt for miljøet og om denne mail virkeligt behøver at blive printet? 🙂
