10 tips för bättre utskriftsstilarketter
Utskriftsstilark har blivit något bortglömd, men ändå är de fortfarande viktiga. Många skriver ut artiklar att läsa under resan eller när de inte har tillgång till Internet.
Skriv ut stilark har tydliga fördelar . Till exempel är läsning på papper mindre trött på ögonen än att läsa på skärmen.
Dessutom är följande handledning enklare om du har en bredvid dig, med kodredigeraren öppen på skärmen. På så sätt behöver du inte byta fönster varje gång för att leta upp något.
I den här artikeln påpekar vi 10 enkla tips som hjälper dig att skapa bättre utskriftsformatark .
Om du har glömt, här är hur du ställer in ett utskriftsformat:
De media="print" attribut garanterar att användarna inte ser någon av de stilar som definieras i filen print.css .
Viss uppmärksamhet krävs dock: Om ditt huvudsakliga stilark inte har någon medieattribut, kommer utskriftsstilbladet att ärva sin stil. För att skilja dem, ange ditt huvudsakliga stilark enligt följande:
Här är 10 tips för att komma igång med utskriftsformatarket.
1. Ta bort navigeringen
Vad är den största skillnaden mellan papper och dator? Papper är statiskt, medan en dator är interaktiv. Och för att underlätta den interaktionen har webbplatser navigering, vilket blir värdelöst på papper.
Dölj navigering och andra delar av din webbplats som blir meningslösa på papper, till exempel sidfält som länkar till andra inlägg. Koden för detta är väldigt enkelt: sätt bara in elementets display till none .
2. Förstora innehållsområdet
Med navigering och sidofältet raderas vårt innehåll nu över sidan. Detta gör utskriftstilarket mer likt ett vanligt dokument istället för en pappersversion av webbplatsen.
Allt vi behöver göra för att expandera innehållet återställs flottören, ta bort eventuella marginaler och ställ in bredden till 100%.
[css] #content {width: 100%; margin: 0; float: none;} [/ css]3. Återställ bakgrundsfärgerna
De flesta webbläsare ignorerar redan bakgrundsegenskaper för att bevara bläck. Men för att se till att hela bakgrunden är vit kan vi ställa kroppen till vit och ge sedan varje barnelement på sidan en vit bakgrund.
[css] kropp {bakgrund: vit;} # innehåll {bakgrund: transparent;} [/ css]4. Återställ textfärger
Genom att återställa bakgrunden dyker ett annat problem upp. Vad händer om du har en mörkgrå "Författarinformation" rutan i slutet av dina inlägg, med texten i ljusgrå eller vit? Med bakgrunden nu inställd på vit kommer denna information att vara osynlig.
För att åtgärda detta ändrar du någon ljusfärgad text till något mörkare: svart eller, helst, mörkgrå.
[css] #author {färg: # 111;} [/ css]
Ta Sam Brown s blogg ovan. Kan du föreställa dig hur det här skulle se ut om han inte återställde textens färger? Olesbart verkligen.
5. Visa länkens destination
Eftersom papper inte är ett interaktivt medium kan läsarna naturligtvis inte klicka på länkarna för att samla mer information.
Säg att någon läser en utskrift om en snygg ny produkt. Att se "Klicka här för mer information" skulle plötsligt vara ganska irriterande för dem, eller hur? Det här kan enkelt lösas genom att lägga till länkdestinationen efter länktexten själv, vilket ger dig något så här: "Klicka här för mer information (http://hereismore.com/information)."
Dessutom kan CSS 2-klara webbläsare göra det med vanlig gammal CSS. Här är koden:
[css] a: länk: efter {innehåll: "(" attr (href) ")";} [/ css]Du kan krydda saker med en mindre teckenstorlek, kursiv eller något annat.
6. Gör Länkar sticka ut från vanlig text
Läsare måste kunna skilja länkar från vanlig text. Grundläggande användbarhetsregler gäller här: Blått och understrykning är att föredra, men jag föredrar att lägga till fetstil också.
Kom ihåg att dokument ofta skrivs ut i svartvitt. Beror inte bara på färgskillnad. Här är koden för förnuftiga tryckta länkar:
[css] a: länk {font-weight: bold; text-decoration: understrykning; färg: # 06c;} [/ css]# 0066cc är en ny blå färg och det ser ut som # 999999 när den skrivs ut i gråskala. Med detta kommer länkarna att se bra ut, antingen i färg eller i svartvitt. De kommer också att sticka ut från vanlig text.
7. Vad om typsnittstyp?
I tryck är 12 poäng standard. Men hur översätter vi det till CSS? Vissa säger att ställa in teckenstorleken till 12 poäng (pt) är tillräckligt bra. Andra rekommenderar att du ställer in det till 100%. Fortfarande säger andra att inte deklarera någon typ av teckensnitt i ditt utskriftsformat, eftersom det skulle göra att användarens preferenser skulle åsidosättas.
Personligen går jag med en 12-punkts skriftstorlek för det mesta:
[css] p {font-size: 12pt;} [/ css]8. Vad om typsnitt?
De flesta föredrar serif typsnitt eftersom de är mindre trötta på ögonen, de leder bättre läsaren genom texten, och så vidare. Ställa in font-family till serif i ditt utskriftsstilark är troligen en bra idé, även om vissa läsare kan bli förvånade över att finna att teckensnittet i utskriften inte är detsamma som det som finns på din webbplats.
Här är koden för en bra typsnittstapel:
[css] kropp {font-family: Georgia, "Times New Roman", serif;} [/ css]
En av fördelarna med CSS 3: s @ font-face-egenskap är att dina speciella typsnitt kan skrivas ut och att utskrifterna ser mycket mer ut som din webbplats!
9. Min blogg har många kommentarer. Vad ska jag göra?
Tja, det här är verkligen ditt val. Å ena sidan, tänk på alla träd du skulle spara, bara genom att lägga till #comments { display: none; } till ditt utskrifts stilark. Å andra sidan är kommentarer av stort värde på vissa bloggar och innehåller en bra diskussion.
Genom att flytta kommentarerna till sin egen sida ger du användarna möjlighet att skriva ut dem. CSS har en egenskap som gör det här mycket enkelt:
[css] #comments {page-break-before: alltid;} [/ css]Om din artikel exempelvis är två och en halv sid lång, kommer kommentarerna att gå från sida 4 till, till exempel, 6. Användarna skulle kunna välja vilka sidor som ska skrivas ut utan att förlora någon information.
10. Visa ett utskriftsmeddelande
" Tack för att du skriver ut den här artikeln! Glöm inte att komma tillbaka till mysite.com för friska artiklar. "Varför inte visa ett vänligt meddelande så här i utskriften? Eller fråga kanske läsarna om att återvinna papperet som de har använt för att bevara miljön.
Här är det som skulle se ut:
Tack för att du skrivit ut den här artikeln. Glöm inte att komma tillbaka till mysite.com för friska artiklar.
[css] #printMsg {display: block;} [/ css] Du kan också lägga till lite styling, som en 1-pixelgräns. Glöm inte att lägga till #printMsg { display: none; } till ditt vanliga stilark, för att undvika förvirrande besökare.
Monter
Här är några exempel från välkända webbplatser som har tänkt (eller glömt) om utskriftsformatarket. Känn dig fri att bli inspirerad.
Ser bra ut:
Här är några webbplatser som gör ett bra jobb med sina utskriftsformatark:
24 sätt : Webbplatsen för denna "adventskalender för webbgeeks" har en snygg design, men jag undrade hur det skulle se ut på skrivbordet. Resultatet är riktigt fint. Den smarta CSS 3-grejen har tagits bort. Layouten är ren och ändå slick. Den stora brandningen har tagits bort, ersatt av en enkel högerjusterad "24 sätt" bredvid postens titel.
ThinkVitamin : Carsonifieds blogg är ett bra exempel på hur man gör utskriftsstilark. Inga riktiga svaga ställen förutom att webbadressens destination inte visas.
CSS-Tricks : Chris Coyier av CSS-Tricks.com har gjort ett bra jobb med sin stilblankett. Han har tagit bort alla röran och flyttat kommentarer till en ny sida, så användarna kan välja att inte skriva ut dem.
Kunde använda lite arbete
Här är några webbplatser som redan är bra men vars utskriftsformatark kan använda lite polskt. Inga brott mot någon i det här avsnittet.
Webdesign Ledger : Webdesign Ledger verkar ha försummat sitt utskriftsstilblad. När du klickar på "Skriv ut" slutar du med tre sidor av annonser och relaterade länkar.
Design Cubicle : Brian Hoff verkar ha glömt bort sin skrivstilstil. När du skriver ut en artikel får du också formuläret.
Flickr : Att kunna skriva ut foton för att visa till vänner skulle vara trevligt. Flickr kunde ha tagit bort allt utom själva bilden och upphovsrättsinformationen i utskrifter. Men allt visas i vanligt ostylat HTML.
Medel
- Praktiska tips för att skapa ett CSS-stilark av Line25
- Skriv ut stilark: Den slutgiltiga guiden
- CSS Design: Kommer att skriva ut
- CSS-Tricks får äntligen ett utskriftsstilblad
Skriven uteslutande för WDD av Pieter Beulque. Han är en student och webbutvecklare , bosatt i Belgien. Du kan följa honom på Twitter för.