I tuoi visitatori potrebbero avere la necessità di stampare la tua home page per i più svariati motivi. Creare un CSS apposito per soddisfare quest’eventualità ti permetterà di ottenere un’ottima resa sul supporto cartaceo, quasi al livello della visualizzazione su schermo.
Potrai anche utilizzare i CSS per creare coupon stampabili personalizzati per i tuoi clienti con offerte ad hoc.
media=”print”
Per prima cosa dobbiamo definire un foglio di stile esclusivo per la stampa. Ci sono due modi per farlo:
1- Creare un foglio di stile esterno contenente unicamente le regole per stampare la pagina e collegarlo alla pagina da stampare mediante questo codice HTML, in cui verrà indicato l’attributo media="print"
<link rel="stylesheet" media="print" src="my_print_stylesheet.css" />
2- Specificare le regole per la stampa direttamente nel fogli di stile originale della pagina, utilizzando la regola @media print
@media print {
/* Qui le regole CSS per la stampa */
/* Nota: Ti serve una regola @media screen separata per
dichiarare gli attributi per la visualizzazione su schermo */
}
Consigli pratici
Ora che abbiamo visto questi semplici codici CSS, forniamo alcuni consigli per migliorare la resa su carta stampata del tuo sito:
- Rimuovi gli elementi superflui – banner, menu di navigazione, pulsanti di condivisione, ecc... Utilizza l’attributo
'display:none;' per nasconderli. - Valorizza i contenuti – Molti articoli presentano infografiche e altri tipi di contenuti che spesso vengono rimossi in fase di stampa, assicurati di includerli per ottimizzare l’esperienza dell’utente su carta stampata.
- Cambia il font – Per alcuni tipi di contenuti, come le ricette, conviene utilizzare un font che sia leggibile anche da una certa distanza, quindi un carattere più largo e leggibile può essere d’aiuto. I font serif(graziati) come il Times New roman sono più leggibili su carta rispetto ai Sans-serif(senza le grazie) come l’Helvetica, i quali sono più leggibili in contesto web.
- Rimuovi i colori – l’inchiostro colorato è molto costoso e gli utenti raramente lo utilizzeranno per stampare il tuo sito. Utilizzando le proprietà dei CSS, togli i colori dai link, dalle intestazioni, e anche dalle immagini in bianco e nero, in questo modo aiuterai i tuoi clienti a risparmiare denaro, soprattutto se hai molti contenuti visivi nelle tue pagine.
Tramite questi piccoli accorgimenti potrai assicurarti che gli utenti intenzionati a stampare il tuo sito otterranno degli ottimi risultati con il minimo sforzo!