Hett førjulstips: Tilpass nettsidene dine for utskrift 9

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.

Superduper-illustrasjon av Will Hindson.

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

  1. Opprett et eget stilsett og lenk til det fra HTML-kildekoden.
  2. Fjern elementer som for eksempel menyer, faktabokser og søkeboks.
  3. 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.

Flere artikler av Bjørn CV

9 kommentarer

  1. 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 ;)

  2. 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

  3. 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 ;)

  4. 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?

  5. 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.

  6. 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) ;-)

  7. Øh. Lenken til vps.no gjemmes bak navnet mitt. Ikke brukervennlig. Fy på lanken :-) Her er lenke i klartekst: http://www.vps.no/

  8. Kult! Da er dere på god vei :)

  9. @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

Skriv en kommentar

  • *
  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Mest lest

Ett år og fortsatt grønnskollinger

For et drøyt år siden skrudde vi opp volumet på vår egen visuelle kommunikasjon. Siden vi var våre egne oppdragsgivere kunne vi teste ut noen hypoteser på hvordan en visuell identitet kan gjøres mer effektiv på nett. Her er noe av det vi fant ut.

  1. Tid for ømhet
  2. Prototyping i Xcode
  3. 3 myter om mobil
  4. Slik jobber du strategisk med innhold

Sist kommentert

Slik jobber du strategisk med innhold

Netlife Research får ofte spørsmål relatert til innholdsstrategi: Hvem kan gjøre det? Hvordan lage en innholdsstrategi? Hvordan jobbe strategisk med innhold? Hvordan komme i gang? For å svare på disse spørsmålene inviterte vi Kristina Halvorson til å holde en Masterclass i innholdsstrategi. Følgende er en tekstlig oppsummering, samt et utvalg av mine visuelle notater.

  1. Prototyping i Xcode 1
  2. Slik jobber vi i Netlife 2
  3. Kundene skyr trøblete nettbutikker - se statistikken som viser hvorfor 13
  4. 3 myter om mobil 5