CercaEsegui ricerca
Web Design e UXD
Rendi stampabile il tuo sito con i CSS

Rendi stampabile il tuo sito con i CSS

6 febbraio 2014
Rendi stampabile il tuo sito con i CSS

Non tutti lo sanno ma utilizzando i fogli di stile (CSS) si può rendere un sito stampabile, ottimizzandone la visualizzazione anche sul mezzo stampa, in pochi e semplici passaggi.

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.

printer_coupon

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!

Fonte: Addthis

Stampa

2014 Img Internet srl,  via Moretto da Brescia 22 - 20133 Milano tel +39 02 700251 - fax +39 02 7002540
Privacy Policy