Optimizarea CSS pentru print
Experienta pe care o au userii atunci cand folosesc un produs web pe care l-ai creat este extrem de importanta. Partea de printing, desi nu pare populara, este destul de importanta chiar si in ziua de azi. Optimizarea unei pagini web pentru print nu este complicata, deci iti recomand sa aloci cateva zeci de minute pentru asta.
Cand folosim CSS pentru print?
Optimizarea paginilor pentru print face parte din ramura accesibilitatii si se aplica in general doar unor pagini dintr-un website. Am putea printa de exemplu pagina pe care ne este afisata o factura, un bilet de avion sau o lista de acte pe care trebuie sa le adaugam intr-un dosar. De obicei vom targheta paginile care au o utilitate exacta si in realitate sau offline. Un homepage sau un login page nu ar avea vreo utilitate in offline, deci nu o sa fie nevoie sa le optimizam pentru print.
Best Practices
Ascunderea continutului – este cea mai comuna metoda de optimizare a unei pagini web pentru print. Folosind un simplu display: none; scoti de pe pagina tot ce nu e necesar sa apara pe foaia de hartie. Se pot ascunde atat elemente mici de design (fara rol in content) dar si componente mai mari care doar ocupa mult spatiu precum footer-ul sau meniul.
header, footer{ display:none; }
Adaugarea de content – presupune inserarea unor informatii mici si utile in pagina sau convertirea unor componente din pagina intr-unele mai simple. De exemplu link-urile se pot pune in paranteza pentru a se evidentia de textul static, butoanele se pot simplifica sau elementele cu multe gradiente sau bordere se pot ajusta pentru o experienta mai buna pe hartie.
body:before{
content: "\ This is a printed version and is not valid.";
color: #f00;
font-size: 30px;
}
Ajustarea marginilor paginii – ajuta mai mult decat crezi pentru lizibilitate si asigurarea integritatii continutului. Multe imprimante printeaza usor in diagonala sau cu un offset destul de mare. Pentru a te asigura ca informatia e completa, adauga niste pagini.
@page{ margin: 2cm; }
Dimensiunea hartiei – este extrem de importanta pentru a avea niste print-uri utile. In functie de targhet-ul geografic al website-ului, adapteaza interfata si testeaza-o cu dimensiunile standard. De exemplu in Romania folosim cel mai mult hartia A4 pentru print care este mai “inalta” decat varianta Letter utilizata in SUA/Canada.
Resurse extra:
