Prilagodba web stranica za ispis

Prilikom kvalitetne izrade stranice, osim prilagođavanja web stranica za mobitele i druge uređaje (tzv. responzivnost), ovisno o tipu web stranice i ciljanoj publici, omogućujemo dodatno optimizirane strane za ispis (print). Stranice koje su prilagođene za ispis, definirane su tako da se prikladno prikazuju na papiru veličine A4 a uključuju samo stvaran sadržaj stranice, zajedno s nekim manjim potrebnim informacijama.

U današnje vrijeme internetu možemo pristupiti s bilokoje lokacije i s različitih uređaja. Preko mobitela koje svi imamo uza sebe i tableta ili laptopa koje obično nosimo prema potrebi. Zbog toga se ispis web stranice može činiti nepotrebno radnjom, ali ipak postoje razni razlozi zbog kojih bi korisnicima bilo od koristi imati tiskanu verziju stranice.

Pogledajmo razloge zašto je optimizacija web stranica za ispis važna, kako je postaviti, koje su najbolje prakse i alternative.

Web stranice mogu biti usmjerene na korisnike zbog različitih razloga. Možda se radi o portalu s dnevnim novostima, stranici koja objavljuje znanstvene članke i studije, oglednoj stranici za tvrtke koje prezentiraju svoje proizvode i usluge, web trgovini koja prodaje proizvode, web stranici koja nude gastronomske recepte i opisuju načine kuhanja, online platformi za edukaciju itd. Shodno tome, različiti tipovi sadržaja imaju različitu publiku i potrebe korisnika.

Korisnici bi možda htjeli ispisati:

• upute
• kontakt podatke
• pojedinosti o narudžbi i račune u web trgovini
• recepte
• ulaznice za događaje
• resurse za edukacije

i puno drugih stvari.

Ali i bez obzira na vrstu sadržaja, ako korisnici pokušaju nešto ispisati na papir i kao ishod ispisa imaju brdo nepotrebnih elemenata bit će nezadovoljni s web stranicom. Stoga, kvalitetna web stranica je između ostalog optimizirana stranica i za ispis.

Ako se neoptimalna stranica ispiše:

• Nepotrebno se troši tinta na ispis elemenata koji nisu potrebni, pogotovo ako su to grafički elementi
• Previše se papira potroši jer se često ispiše tek dio nekog nebitnog elementa na vrhu papira a cijeli ostatak papira je prazan
• Stranice izgledaju nepregledno, tj. vizualno se raspadaju
• Sadržaj je nezgrapan jer je neprikladno formatiran

Optimizacijom ispisa postižemo bolje korisničko iskustvo. Tisak treba biti čitljiv, jednostavan, na jednom mjestu i bez nepotrebnih elemenata.

Prilagodbu za ispis postižemo na nekoliko načina pomoću CSS stilova. CSS datoteke su specijalizirane naredbe kojom definiramo izgled uobičajene web stranice. Struktura web stranice, pozicije elemenata, boje, veličina slova i njihovo prlagođavanje po veličinama ekrana… sve se to definira pomoću CSS-a.

Jedan način je pomoću definicija unutar postojeće CSS datoteke kojom definiramo izgled uobičajene web stranice. Potrebno je postaviti definiciju koja će sve unutar nje zrcaliti na stilove za ispis.

@media print {
// Ovdje definiramo sve što trebamo za svaki ciljani element
}

Drugi način je korištenje zasebnih definicija koje postavljamo kao zaseban element

<link media=”print” href=”print.css” />

Kako moderni sustavi koriste noviji HTTP/2 protokol koji preferira da se više datoteka koristi odvojeno i poziva na stranici, za razliku od prijašnjeg načina gdje su se svi zapisi spajali u jednu veću datoteku, ovo je bolji pristup. S obzirom na to da je standard industrije koristiti SCSS ili drugu srodnu tehnologiju, ionako ćemo imati različite datoteke za takve specijalizirane potrebe.

Treći način je također pomoću CSS klasa, tako da samo definiramo klasu koja će sakriti nepotrebni element kada se ispisuje a klasa prethodno sadrži svu potrebnu definiciju kako se treba ponašati.

.noprint {
display: none;
}

Tada na svaki HTML element koji želimo sakriti samo dodamo klasu “noprint” i element se neće ispisati na papir.

U najčešće slučajevima kombiniramo prvu ili drugu metoda s trećom.

Sve ono što treba prilagoditi za ispis ovisi o vizualnom izgledu web stranice i ciljevima koje želimo postići. Ipak, postoje neki uobičajeni zahtjevi koji se rade uvijek.

Web stranice mogu imati na sebu definiranu neku boju koja nije bijela. Čak i kada se stranica naizgled čini bijelom, moguće je da je podešena vrlo svijetla boja koja nije potpuno bijela (točnije, nije heksadecimalnog kôda “#fff”) te će ispis takve boje nepotrebno trošiti tintu pisaču. Također, bilokakve pozadinske slike potrebno je ukloniti.

Čitljiv tekst bitan je za dobru optimizaciju za ispis. Potrebno je podesiti dovoljno visok kontrast između pozadine i teksta radi dobre čitljivosti. Idealno se radi o crnom tekstu na bijeloj pozadini a kontrast zadovoljava AAA standarde digitalne pristupačnosti 7:1 za paragrafe i 4.5:1 za veliki tekst.

Veličinu teksta također treba prilagoditi da ne bude presitan a po pitanju odabira fonta, obično je korištenje serif fontova bolje za tisak. Više o tome pročitajte u članku koliko je bitna kvalitetna tipografija.

Možemo korigirati razbijanje sadržaja, primjerice da se glavni naslovi uvijek prikazuju na vrhu nove stranice, da se određene sekcije prikažu na idućoj stranici ili da izbjegnemo lomljenje sadržaja, što je većinom nepoželjno kod tablice s podacima.

Prema potrebi, mogu se prilagoditi margine stranica pomoću @page definicija, za slučajeve kada teksta ima puno i želimo da bolje ispuni prostor na papiru.

Prostor između naslova i razmak nakon elemenata poželjno je smanjiti ako je on narušen.

Određenu vrsta sadržaja nema smisla ispisivati. Primjerice, navigacija, kontakt obrasci, pozivi za akciju i slične komponente ne trebaju jer papir ne može biti interaktivan.

Slike su često najveći problem jer nepotrebno zauzimaju prostor na stranici a korisnici će jako puno tinte trošiti na njihov ispis. Ako se radi o grafici koja je isključivo kozmetičke namjene, mičemo je iz ispisa. Ako se radi o slici koja je važan za kontekst, možemo je ostaviti. Također, ovisi koliko je slika velika, zauzima li punu širinu ili je tek manja. Slike, ukoliko je potrebno, možemo smanjiti isključivo radi ispisa ne dirajući uobičajeni prikaz web stranice.

Linkove je potrebno odstraniti i prebaciti ih u običan tekst, da nisu podcrtani i da nemaju boju koja odskače od drugih riječi. Postoji i druga mogućnost, da linkove definiramo kao tekst, tako da korisnik ipak može vidjeti na koju adresu se link odnosi, da je pronađe i pogleda o kakvoj web stranici je riječ. Ovo ćemo postići pomoću pseudoelemenata a link stavljamo unutar zagrade iza ključnih pojmova. Za primjer kako to funkcionira slobodno pogledajte ovu stranicu na ispisu. 🙂 Također, ako postoji veći broj linkova, možemo ih prikazati sve na jednom mjestu, obično na dnu stranice.

Inače, web stranice koje su prilagođene za ispis ne moraju služiti isključivo za ispis, one se mogu spremiti u tom obliku na računalu i potom se koristiti kao uobičajene datoteke za čitanje.

Kao alternativa ili kao dodatna opcija korisnicima, možemo podesiti generiranje tekstualnog sadržaja u PDF format datoteke. Takvim zasebnim generiranjem web stranice nudimo korisnicima profesionalniji pristup za ispis i jednostavnije korištenje web stranice izvan preglednika.

Premda tijekom izrade web stranice nije glavni prioritet prilagoditi ih tisku, poželjno je da mislimo na pozitivno korisničko iskustvo i maksimalno obratimo pažnju na kvalitetu. Integriranjem stilova za ispis u svakodnevni rad prilikom održavanja web stranica, činimo sadržaj pristupačnijim i jednostavnijim za upotrebu.

Jesu li vam web stranice prilagođene za ispis pisačem? Naše jesu, u što se možete uvjeriti ako poželite ispisati ovaj članak. 🙂 Ako vam je potrebno podesiti ih, slobodno nam se javite!