Hett førjulstips: Tilpass nettsidene dine for utskrift
Av Bjørn Bergslien, 15. desember 2011
Har du noen gang opplevd å printe ut en artikkel fra et nettsted, og da du hentet utskriften var det 14 sider med menyer, bokser, relaterte lenker og whitespace som egentlig ikke trengte å være med på utskriften? Sørg for at brukerne slipper nettopp dette på ditt nettsted – opprett et eget stilark (CSS) for print og tilpass sidene for utskrift. Hetere førjulstips finner du ikke.

Mye arbeid, tenker du kanskje. Men det er såre enkelt. Du oppretter bare en egen CSS som slår inn når brukerne printer siden. Et enkelt grep som gir brukerne en bedre opplevelse, sparer miljøet og som gir deg nye muligheter for markedsføring – hvis du tenker at hver utskrift potensielt er en brosjyre.
Slik gjør du det på 1-2-3
- Opprett et eget stilsett og lenk til det fra HTML-kildekoden.
- Fjern elementer som for eksempel menyer, faktabokser og søkeboks.
- Juster bredde, fonter, farger, lenker med mer.
For mer informasjon om hvordan du gjør dette helt konkret:
CSS Design: Going to Print
Print stylesheet: The definitive guide
Et par gode eksempler
Det finnes flere eksempler på nettsteder som har laget gode stilsett for utskrift. Et stjerneeksepler er A List Apart, en online journal med artikler om temaer som usability, design, innhold og mobil. Slik ser en artikkel ut på nettstedet:

Dersom du skriver ut den samme artikkelen ser den ganske så annerledes ut. Legg merke til at designet er tilpasset utskrift, med større skrift og full bredde. Menyer og logoen, som egentlig bare tar opp plass og som ikke er hensiktmessig på papir, er borte vekk. Legg også merke til lenken som synliggjør URL-en.

Et annet godt eksempel er fra 24ways.org:


Eller dette, fra nsb.no:


Husk at du kan tilpasse andre typer sider enn journalartikler, blogginnlegg og pressemeldinger. Tilpasing for utskrift kan være like aktuelt på produktsider, temasider eller Om oss-sider. Det er heller ikke sikkert at du skal tilpasse alt. Noen sider, som printes mye, er et godt utgangspunkt.
Tenk over hvilket innhold du bør inkludere i utskriftsversjonen, og fjern det som ikke gir mening på print. Om ikke annet: Tenk på hvor mye papir brukerne sparer ved at du komprimerer innholdet ned på færre sider.
Har du tilpasset nettsidene dine for utskrift? Eller kjenner du til nettsteder som gjør en god jobb med akkurat dette? Please let us know in the comments.
Bjørn Bergslien jobber med analyse, innhold og prototyping i Netlife Research. Han er tilhenger av å gjøre ting enkelt.
Skriv en kommentar
Jostein Mangussen, 15.12.2011 13:03
En uformell test av våre konkurrenter viser at Making Waves har et stort forbedringspotensiale http://www.makingwaves.no/Referanser/Selvaag-Bolig/ mens Bekk gjør det bra http://www.bekk.no/Technology-Consulting/ (Den flotte Flash-menyen kommer ikke med ;) Selv gjør vi det gjør det passe bra, men har forbedringspotensiale http://netliferesearch.com/tjenester/nettsted/ Merk: Halogen ble ikke testet på grunn av manglende nettsted ;)
Stine A Skullerud, 15.12.2011 14:01
Bra artikkel! :-) Produktpushing: Vi som kjører eZ Publish kan lene oss tilbake og si at dette har vi hatt, ut-av-boksen, i alle år :-) #løpogkjøp
Bjørn B., 15.12.2011 14:17
Takk, Stine! Ut-av-boksen høres ut som magi. Tror det ikke før jeg får se det. Har du noen eksempler på sider som bruker løsningen? :)
Frekke smilefjes, Jostein ;)
Kjartan, 15.12.2011 16:26
I utgangspunktet er dette fint, og et enkelt alternativ til å lage en egen knapp for å åpne artikkelen i en ny side med utskriftsvennlig format (en løsning som i seg selv byr på enkelte utfordringer).
Men hva med å styre brukernes forventninger – kan det hende de blir irriterte fordi utskriften ikke ser ut som siden som skulle printes ut? Kanskje de ville ha med logoen eller noen av de omkringliggende elementene?
Bjørn B., 15.12.2011 16:30
Bruk skjønn i forhold til hva du inkluderer og ikke inkluderer. Finnes ingen fasit. I noen tilfeller er det smart å inkludere logo og i andre tilfeller er det kanskje ikke nødvendig. Her tenker jeg at vi uansett må ta noen valg for brukerne – hva trenger de dersom de printer ut akkurat denne siden? Noen kan selvfølgelig bli irritert, men de fleste vil nok sette pris på sider som er tilpasset papirmediet.
Stine A Skullerud, 17.12.2011 16:47
Bjørn, her er eksempel! Printerikonet i hjørnet tar deg til utskriftsvennlig css samme hvor du befinner deg. Stort sett går det fint (og noen ganger blir det litt snodig) ;-)
Stine A Skullerud, 17.12.2011 16:53
Øh. Lenken til vps.no gjemmes bak navnet mitt. Ikke brukervennlig. Fy på lanken :-) Her er lenke i klartekst: http://www.vps.no/
Bjørn B., 17.12.2011 17:01
Kult! Da er dere på god vei :)
Kjartan, 04.01.2012 12:30
@stine printfunksjonen deres viser en av utfordringene printvennlige sider kan ha:
samme artikkel blir registrert som to ulike sider av google fordi printknappen er en vanlig lenke googles robot følger. her kan du se et eksempel: oppgjørssyklus, som finnes i to versjoner (http://bit.ly/zkWtah).
heldigvis kan rette løses gjennom ulike tiltak (canonical-taggen, robots.txt, nofollow eller rett og slett en annen type lenke). men uansett er det et poeng å unngå duplicate content som google kaller det http://www.seomoz.org/learn-seo/duplicate-content