Skriva stilark kan vara en smärta om du inte vet vad du gör. Innan du ens närmar dig en måste du se till att du gör en del gedigen forskning om hur du ska hantera det.
Idag ska vi hjälpa dig genom att först diskutera de konceptuella överväganden som du behöver tänka på när du skapar ett utskriftsformat. Därefter dyker vi in i någon kod från den kända HTML5 Boilerplate för att se några moderna lösningar för att lösa problemen som uppkommer vid utskrift från webben.
Där webbdesign mäter utskrift
Webben och trycket är två fundamentalt olika djur. De är så olika att du ofta hittar designers som arbetar heltid i ett medium eller det andra med nästan ingen korsning. Som ett resultat vet utskriftsledare ofta mycket lite om webbdesign och webbdesigners vet väldigt lite om tryckdesign.
Men intressant nog kräver de flesta experter lite överlappning i varje enskilt webbprojekt du skapar. Vi pratar naturligtvis om utskriftsformatark, vilket resulterar i en slags bizarrovärld där CSS används för att designa för utskrift! Det är ett galet scenario, men du förväntas planera för det ändå.
Tyvärr, även om du känner dig väldigt bra på CSS, kan utskriftsformatarket kasta dig några kurvbollar. Det finns en hel del quirky tricks som du måste genomföra förutom mycket konceptuell planering.
Låt oss se hur du startar processen genom att ställa några nyckelfrågor.
Skriv ut vs Web: Vad är de grundläggande skillnaderna?
Det här är en viktig fråga att fråga dig själv när du skapar ett utskriftsformatark. När allt kommer omkring konverterar du en design från ett medium till ett annat, så det lönar sig att tänka på hur de skiljer sig åt.
? Du konverterar en design från ett medium till en annan så det lönar sig att tänka på hur de skiljer sig åt?Låt oss tänka på de uppenbara områdena. Först och främst är en sida en mycket begränsad duk. Webbplatser representerar ett ganska oändligt utrymme som kan rulla så långt du vill i vilken riktning som helst. Fysiska sidor fastnar dock vid 8,5 "vid 11" med ett utskriftsområde som är lika med det.
Detta har stora konsekvenser. Det betyder att det långa innehållet kommer att äta upp massor av papper. Detta leder oss att tänka på var vi kan klippa tillbaka. Till exempel, om vi skriver ut artiklar med hundratals kommentarer, kanske vi borde stänga av dem. Det finns också en uppenbar förändring som måste göras på bredden av vårt innehåll. Både kopia och bilder måste formas på lämpligt sätt.
Interaktion
En annan stor skillnad mellan tryck och webben är kapaciteten för interaktion. Webben representerar ett rikt interaktivt dynamiskt medium medan utskriften är statisk; Vad står på pappret är fast där!
Det betyder att du måste ompröva några interaktiva element på sidan. Navigationsmenyer är till exempel vanligtvis en av de första sakerna att gå. En tryckt sida har ingen användning för dem och de kan verkligen äta upp utrymme om de konverteras till enkla oordnade listor.
? Du behöver ett bra sätt att ta alla dessa inline länkar och visa läsaren där de leder?Du måste också överväga vad som ska hända med bildreglage och liknande. Om din sida har ett bildspel med tio bilder överst, kommer det inte att översättas väl till papper.
Den mest grundläggande interaktionsnivån på webben är en länk. Även detta blir problematiskt. På din dator kan du helt enkelt klicka på en länk för att se var den går. På papper är denna funktionalitet förlorad så att du behöver ett bra sätt att ta alla inline länkar och visa läsaren där de leder.
Vem skriver ut den här sidan och varför?
Den andra viktiga frågan som behöver ställas beror på varför sidan skrivs ut i första hand. En bra formgivare ställer inte bara ut för att få saker att se bra ut, designen måste maximera användbarheten för användaren.
? En bra formgivare ställer sig inte bara för att få saker att se bra ut, designen måste maximera användbarheten för användaren.?Det betyder givetvis att du måste överväga vad den typiska användaren vill ha. Detta kommer inte att vara ett universellt svar. Varje typ av projekt kommer att ha en unik användning för den tryckta sidan.
Till exempel vill Google Maps-användare nästan allt borttagna på sidan för utskrift: annonser, den stora interaktiva kartan, Googles sökfält, allt detta och mer måste dras för en ren lista med läsningsriktningar.
Dessa mål är uppenbarligen ganska annorlunda än någon som skriver ut ett designbloggkonto för att cirkulera runt på ett möte som en diskussionspunkt. Här läggs tonvikten på att presentera mycket text istället för väldigt lite.
Lärande genom exempel: HTML5 Boilerplate
När du arbetar med typer av CSS som du aldrig har kontaktat tidigare är ett av de bästa sätten att lära sig att helt enkelt titta och se vad andra gör.
Den första platsen som jag vanligtvis börjar i sådana fall är Paul Irlands HTML5 Boilterplate. Detta projekt är ett solidartat samarbete från ledande branschpersonal. Det är inte på något sätt ofelbart men det är fortfarande ett bra exempel att lära av.
Om vi laddar ner Boilerplate och sprickar öppna CSS-filen hittar vi utskriftsformat längst ner:
Denna ganska små bit av kod har mycket på gång, vilket betyder att det finns mycket att lära av. Låt oss dyka in och se vad vi kan hitta.
Utskriftsmediafråga
Det allra första du bör märka är att använda en mediafråga för att ange utskriftsformat. Detta berättar för webbläsaren att alla stilar som ingår i det här blocket endast ska tillämpas under en speciell omständighet, i det här fallet en användare som skriver ut sidan (det här hjälper till att avsluta den gamla? Klicka för skrivvänlig version? Teknik).
Universal Väljare och Blankett Styles
Nästa sak jag märker är att universell väljaren (*) omedelbart piskas ut för att tillämpa några ändringar på filtstilen på sidan.
Resultatet här är en drastisk förenkling av de visuella stilarna på sidan. Varje bakgrundsbild eller färg är avstängd, textfärgen vänds till svart, textskuggor är inaktiverade etc. Allt detta förbättrar både läsbarheten och sparar på bläck.
Utskriftsvänliga länkar
Kom ihåg att vi sa att det skulle behövas något om tryckta länkar? Det visar sig att du kan hantera denna uppgift med ren CSS, en imponerande prestation! Bra gammal Eric Meyer gjorde det här sättet tillbaka 2002 på A List Aparts CSS Design: Going to Print.
Efter att du först tillämpat en underlinje på alla länkar på sidan för att hjälpa dem att sticka ut (lite ändrar färgen också), finns det ett koduttag som faktiskt skriver ut länken efter texten:
Resultatet är att en typisk länk kommer att ändras till länk (http://goo.gl/CWGL4). Som du kan se är det perfekt för en utskrift. Som en sidnot kan inte alla webbläsare stödja CSS ovan, men de som inte kommer att skriva ut bara bra, bara utan att den parentesiska länktexten kastas in.
Observera att Boilerplate går ett steg längre genom att inaktivera den här åtgärden på bilder och JavaScript som innehåller länkar.
Optimera sidbrytningar
Du märker mycket kod för att hantera sidbrytningar: Sidbrytning: Undvik; och p, h2, h3 {orphans: 3; änkor: 3; } båda syftar till att hjälpa sidorna att flöda bättre. Den förra förbjuder en sidbrytning direkt efter rubriker och stycken där det är möjligt, sistnämnden säkerställer att inte mindre än tre rader kan vara föräldralösa eller änkade på en sida.
Vad är föräldralösa och änkor? När du har den första raden i ett stycke som stränger ensam längst ned på en sida, är det en föräldralös. På samma sätt kan den sista raden i ett stycke överföras till sig själv till nästa sida, det här är en änka. Koden ovan säkerställer att, om möjligt, minst tre rader text kommer att visas.
Bildstorlek
Inställning av bildens maximala bredd till 100% säkerställer att du inte har några konstiga blödande bilder. Du har förmodligen kommit in i det här som en användare: du går ut för att skriva ut en webbsida och slutar med flera sidor som bara innehåller partiella bilder som avklippades från huvudsidan. Detta är lätt att förhindra med den enda raden av kod ovan!
Sidmarginaler
Det sätt på vilket HTML5 Boilerplate definierar sidmarginaler är mycket intressant. De flesta äldre artiklar om utskriftsformatark inkluderar mycket olika metoder. Faktum är att jag inte ens kände till den här metoden förrän jag skrev den här artikeln.
Det visar sig att du kan använda @page för att helt enkelt tillämpa en marginal hela vägen runt sidan. Koden ovan gäller en marginal på 0,5cm (centimeter är CSS? Oh my!) Till alla sidor enhetligt.
Om du vill bli knepig kan du ändra detta för att justera inställningarna för varje annan sida. Följande kod anger oberoende av vänster sida (1, 3, 5, etc.) och höger sida (2, 4, 6, etc.).
Det är en enkel och elegant lösning som är överraskande nog, CSS2.
Vidare läsning
Eftersom HTML5 Boilerplate är en generisk mall innehåller den inte många av kodproverna som är typiska för mycket specifika typer av webbplatser som bloggar. Innan du attackerar ditt eget utskriftsformatark, går du igenom några av följande artiklar för att se till att du är snabb.
- 10 Tips för Better Print Style Sheets från Web Designer Depot
- Hur man gör ett bra utskriftsformat från Aliso the Geek
- Print Style Sheets: Grunderna (för några ursäkter) av Jens Meiert
- Skriv ut stilark - den slutgiltiga guiden från Webcredible
Slutsats
Skriva stilark är ett helt annat sätt att tänka på och använda CSS. De är inte alltid de mest intuitiva uppgifterna, så förvänta dig inte att intuitivt landa på rätt svar. Var noga med att göra dina läxor och testa i stor utsträckning.
Har du några knep eller bästa praxis när det gäller utskriftsformat? Låt oss veta i kommentarerna nedan!