Hur du utformar en utskriftsmall

Du har nyss utformat en ny snygg webbsajt och den ser korrekt ut i samtliga webbläsare. Du är nöjd med ditt alster och lämnar CSS utvecklingen. Men lugn du har glömt en viktig aspekt i designen. Nämligen hur din webbsida ser ut när användaren printar den i en skrivare. Här går jag igenom hur man skapar en utskriftsmall i CSS och ger tips och råd på vad du bör tänka på när du utformar.

Vad bör man tänka på?

En användare som skriver ut en av dina webbsidor vill allt som oftast bara ha informationen på papper. Ingen flashig design, inga stora bilder och inget krimskrams som tömmer användarens färgpatroner. Mitt tips är att skala bort i princip all design och överflödigt material och endast behålla det viktiga: informationen. Menyer och logotyper behöver heller inte printas. En annan viktig aspekt att ta hänsyn till är dina länkar. Kom ihåg att ett papper inte är interaktivt, därför är det viktigt att hela url:en till länkarna skrivs ut i klartext.

Att skapa mallen

Börja med att skapa en fil och döp den till print.css eller liknande. Precis som du länkar in din vanliga CSS-mall länkar du även in printmallen, enda skilladen är att attributet media ska sättas till print, alltså:

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

Vad bör finnas i mallen?

Det första du bör göra är att sätta { display:none; } på alla element som inte ska printas. Det här kan tex vara menyer, logotyper och annonser. Sedan fungerar typografi på ett papper lite annorlunda än på en skärm. Du bör använda ett typsnitt med seriffer i brödtexten för att öka läsbarheten, ta tex Times New Roman eller Georgia. Rubriker bör sedan vara utan seriffer för att bli så tydliga som möjligt, här fungerar tex Arial utmärkt. Tänk också på att sätta fontstorlekar i punkter som enhet istället för pixlar eftersom det används för pappersformat.

Glöm inte heller att ta bort den blåa borderna runt bilder som är länkade. Detta gäller alltså för bilder som är viktiga och tillför information till innehållet, övriga bilder bör tas bort helt. Tidigare pratade jag också om att skriva ut url:en till länkarna i klartext, så hur gör vi detta då? Genom att använda följande css-kod i mallen:

a:after  { content: " (" attr(href)  ") ";

Det här lägger till url-adressen efter våran länk när den skrivs ut. Precis vad vi vill eller hur. Sedan kan du själv utforska vad som kan vara bra att ha i printmallen, men ha alltid i åtanke att informationen är den viktiga och allt krimskrams ska skalas bort så långt det går.

Har du tips, råd eller kanske funderingar om vad som ska finnas i en utskriftsmall? Kommentera gärna.

Du har kommit till slutet av inlägget

Tyckte du inlägget var intressant? Läs dessa också:

Nyheter i CSS3

Introduktion i hur man utvecklar en webbplats

Skriv över inline styles med CSS

Skrivet 10 oktober - 2009 Postat i: Tutorials