10 suggerimenti per fogli di stile di stampa migliori
I fogli di stile di stampa sono stati in qualche modo dimenticati, eppure rimangono importanti lo stesso. Molte persone stampano articoli da leggere mentre viaggiano o quando non hanno accesso a Internet.
I fogli di stile di stampa hanno vantaggi definiti . Ad esempio, leggere su carta è meno faticoso per gli occhi che leggere sullo schermo.
Inoltre, seguire i tutorial è più facile se ne hai uno accanto a te, con il tuo editor di codice aperto sullo schermo; in questo modo, non devi cambiare finestra ogni volta per cercare qualcosa.
In questo articolo ti indicheremo 10 semplici suggerimenti che ti aiuteranno a creare fogli di stile di stampa migliori .
Nel caso tu abbia dimenticato, ecco come impostare un foglio di stile di stampa:
Il media="print" l'attributo assicura che gli utenti non vedano nessuno degli stili definiti nel file print.css .
Tuttavia, è necessaria una certa attenzione: se il foglio di stile principale non ha attributo multimediale, il foglio di stile di stampa erediterà il suo stile. Per separarli, imposta il tuo foglio di stile principale come segue:
Ecco 10 consigli per iniziare con il foglio di stile di stampa.
1. Rimuovere la navigazione
Qual è la principale differenza tra carta e computer? La carta è statica, mentre un computer è interattivo. E per facilitare questa interazione, i siti web hanno la navigazione, che diventa inutile sulla carta.
Nascondi la navigazione e altre parti del tuo sito web che diventano inutili sulla carta, come le barre laterali che si collegano ad altri post. Il codice per questo è molto semplice: basta impostare l'elemento display a none .
2. Ingrandire l'area del contenuto
Con la navigazione e la barra laterale rimosse, il nostro contenuto è ora distribuito sulla pagina. Questo rende il foglio di stile di stampa più simile a un documento ordinario, anziché a una versione cartacea del sito web.
Tutto quello che dobbiamo fare per espandere il contenuto è resettare il float, rimuovere eventuali margini e impostare la larghezza al 100%.
[css] #content {width: 100%; margin: 0; float: none;} [/ css]3. Ripristina i colori di sfondo
La maggior parte dei browser ignora già le proprietà di sfondo per conservare l'inchiostro. Ma per essere sicuri che tutto lo sfondo sia bianco, possiamo impostare il corpo su bianco, quindi dare a ogni elemento figlio ancora presente sulla pagina uno sfondo bianco.
[css] body {background: white;} # content {background: transparent;} [/ css]4. Ripristina colori testo
Resettando lo sfondo, si apre un altro problema. Cosa succede se hai una casella "Informazioni sull'autore" di colore grigio scuro alla fine dei tuoi post, con il testo in grigio chiaro o bianco? Con lo sfondo ora impostato su bianco, questa informazione sarà invisibile.
Per risolvere questo problema, cambia qualsiasi testo chiaro in qualcosa di più scuro: nero o, preferibilmente, grigio scuro.
[css] #author {color: # 111;} [/ css]
Prendere Sam Brown il blog sopra. Potresti immaginare come sarebbe se non ripristinasse i colori del testo? In effetti illeggibile.
5. Visualizza la destinazione dei collegamenti
Poiché la carta non è un mezzo interattivo, i lettori non possono ovviamente fare clic sui collegamenti per raccogliere ulteriori informazioni.
Supponi che qualcuno stia leggendo una stampa su un nuovo fantastico prodotto. Vedere "Clicca qui per maggiori informazioni" tutto ad un tratto sarebbe piuttosto irritante per loro, non è vero? Questo problema viene facilmente risolto aggiungendo la destinazione del collegamento dopo il testo del collegamento stesso, dandoti qualcosa di simile a questo: "Fai clic qui per ulteriori informazioni (http://hereismore.com/information)."
Inoltre, per i browser compatibili con CSS 2, questo può essere fatto con un semplice vecchio CSS. Ecco il codice:
[css] a: link: after {content: "(" attr (href) ")";} [/ css]Puoi aromatizzare le cose con una dimensione del font più piccola, il corsivo o qualsiasi altra cosa.
6. Creare collegamenti si distinguono dal testo normale
I lettori devono essere in grado di distinguere i collegamenti dal testo normale. Le regole di usabilità di base si applicano qui: il blu e la sottolineatura sono preferiti, ma preferisco aggiungere anche il grassetto.
Ricorda che i documenti vengono spesso stampati in bianco e nero. Non dipendere solo dalla differenza di colore. Ecco il codice per i collegamenti sensibili di stampa:
[css] a: link {font-weight: bold; text-decoration: underline; color: # 06c;} [/ css]# 0066cc è un nuovo colore blu e assomiglia a # 999999 quando stampato in scala di grigi. Con questo, i collegamenti sembreranno buoni stampati a colori o in bianco e nero. Si distingueranno anche dal testo normale.
7. Che cosa è la dimensione del carattere?
In stampa, 12 punti sono lo standard. Ma come lo traduciamo in CSS? Alcuni dicono che l'impostazione della dimensione del carattere su 12 punti (pt) è abbastanza buona. Altri raccomandano di impostarlo al 100%. Altri ancora dicono di non dichiarare alcuna dimensione di carattere nel proprio foglio di stile di stampa, perché così facendo si annullerebbero le preferenze dell'utente.
Personalmente, per la maggior parte del tempo utilizzo la dimensione del carattere di 12 punti:
[css] p {font-size: 12pt;} [/ css]8. Che dire dei caratteri?
La maggior parte delle persone preferisce i caratteri serif perché sono meno stancanti per gli occhi, guidano meglio il lettore attraverso il testo e così via. Impostazione del font-family a serif nel tuo foglio di stile di stampa è probabilmente una buona idea, anche se alcuni lettori potrebbero essere sorpresi di scoprire che il font nella loro stampa non è uguale a quello sul tuo sito web.
Ecco il codice per una buona pila di font di stampa:
[css] body {font-family: Georgia, 'Times New Roman', serif;} [/ css]
Uno dei vantaggi della proprietà @ font-face di CSS 3 è la possibilità di stampare anche i caratteri speciali, rendendo la stampa molto più simile al tuo sito web!
9. Il mio blog ha molti commenti. Cosa dovrei fare?
Bene, questa è davvero la tua scelta. Da un lato, pensa a tutti gli alberi che avresti salvato semplicemente aggiungendo #comments { display: none; } al tuo foglio di stile di stampa. D'altra parte, i commenti sono di grande valore su alcuni blog e contengono una grande discussione.
Spostando i commenti sulla propria pagina, gli utenti possono scegliere se stamparli. Il CSS ha una proprietà che lo rende molto semplice:
[css] #comments {page-break-before: always;} [/ css]Ad esempio, se il tuo articolo è lungo due pagine e mezzo, i commenti verranno eseguiti dalla pagina 4 fino a, ad esempio, 6. Gli utenti sarebbero in grado di scegliere quali pagine stampare, senza perdere alcuna informazione.
10. Mostra un messaggio di sola stampa
" Grazie per aver stampato questo articolo! Per favore, non dimenticare di tornare su mysite.com per nuovi articoli. "Perché non visualizzare un messaggio amichevole come questo nella stampa? O forse chiedere ai lettori di riciclare la carta che hanno usato per preservare l'ambiente.
Ecco come sarebbe:
Grazie per aver stampato questo articolo Per favore, non dimenticare di tornare su mysite.com per nuovi articoli.
[css] #printMsg {display: block;} [/ css] Potresti aggiungere anche un po 'di stile, come un bordo da 1 pixel. Non dimenticare di aggiungere #printMsg { display: none; } al tuo normale foglio di stile, per evitare di confondere i visitatori.
vetrina
Ecco alcuni esempi di siti Web noti che hanno pensato (o dimenticato) al foglio di stile di stampa. Sentiti libero di essere ispirato.
Sembra buono:
Ecco alcuni siti Web che fanno un ottimo lavoro con i loro fogli di stile di stampa:
24 modi : Il sito web di questo "calendario dell'avvento per i fanatici del Web" ha un design elegante, ma mi chiedevo come sarebbe stato stampato. Il risultato è davvero bello. La roba di CSS 3 è stata rimossa. La struttura è pulita e tuttavia liscia. Il grande marchio è stato rimosso, sostituito da un semplice "24 modi" allineato a destra accanto al titolo del post.
ThinkVitamin : Il blog di Carsonified è un buon esempio di come stampare fogli di stile. Nessun vero punto debole tranne che la destinazione dell'URL non è mostrata.
CSS-Tricks : Chris Coyier di CSS-Tricks.com ha fatto un buon lavoro con il suo foglio di stile di stampa. Ha rimosso tutto il disordine e spostato i commenti in una nuova pagina, in modo che gli utenti possano scegliere di non stamparli.
Potrebbe usare un po 'di lavoro
Ecco alcuni siti web che sono già fantastici ma i cui fogli di stile di stampa potrebbero usare un po 'di lucido. Senza offesa per nessuno in questa sezione.
Webdesign Ledger : Webdesign Ledger sembra aver trascurato il suo foglio di stile di stampa. Quando si fa clic su "Stampa", si finisce con tre pagine di annunci pubblicitari e link correlati.
Il cubicolo di design : Brian Hoff sembra aver dimenticato il suo foglio di stile di stampa. Quando stampi un articolo, ottieni anche il modulo di commento.
Flickr : Essere in grado di stampare le foto da mostrare agli amici sarebbe bello. Flickr avrebbe potuto rimuovere tutto tranne l'immagine stessa e le informazioni sul copyright nelle stampe. Ma tutto appare in un semplice HTML non disegnato.
risorse
- Consigli pratici per la creazione di un foglio di stile CSS di stampa di Line25
- Stampa foglio di stile: la guida definitiva
- Progettazione CSS: andare a stampare
- CSS-Tricks ottiene infine un foglio di stile di stampa
Scritto esclusivamente per WDD da Pieter Beulque. Lui è uno studente e sviluppatore web , vivono in Belgio. Puoi seguirlo cinguettio pure.