Stampare i fogli di stile può essere un problema se non sai cosa stai facendo. Prima ancora di avvicinarti a uno devi assicurarti di fare qualche ricerca approfondita su come procedere.
Oggi vi aiuteremo innanzitutto discutendo le considerazioni concettuali che è necessario tenere a mente quando si crea un foglio di stile di stampa. Poi ci tufferemo in un codice dal famoso HTML5 Boilerplate per vedere alcune soluzioni moderne per affrontare i problemi che sorgono quando si stampa dal web.
Dove il web design incontra la stampa
Il web e la stampa sono due animali fondamentalmente diversi. Sono così diversi che spesso troverai designer che lavorano a tempo pieno su un supporto o sull'altro senza quasi incrociarsi. Di conseguenza, i designer di stampa spesso sanno molto poco del web design e i web designer sanno molto poco del design della stampa.
Tuttavia, abbastanza interessante, la maggior parte degli esperti richiede un po 'di sovrapposizione in ogni singolo progetto web che si crea. Stiamo ovviamente parlando di fogli di stile di stampa, che si traducono in una sorta di mondo bizarro in cui i CSS vengono utilizzati per progettare per la stampa! È uno scenario pazzesco, ma ci si aspetta che lo pianifichino comunque.
Sfortunatamente, anche se conosci abbastanza bene il tuo modo di usare il CSS, i fogli di stile di stampa possono aiutarti a curvare le curve. Ci sono alcuni trucchi eccentrici che dovrai implementare oltre a un sacco di pianificazione concettuale.
Vediamo come avviare questo processo ponendo alcune domande chiave.
Print vs. Web: quali sono le differenze fondamentali?
Questa è una domanda importante da porsi quando si crea un foglio di stile di stampa. Dopotutto, stai convertendo un disegno da un mezzo a un altro, quindi vale la pena riflettere su come differiscono.
? Stai convertendo un disegno da un mezzo a un altro, quindi vale la pena di riflettere su come si differenziano?Pensiamo alle aree ovvie. Prima di tutto, una pagina è una tela molto limitata. I siti Web rappresentano uno spazio abbastanza infinito che può scorrere fino a dove vuoi in qualsiasi direzione. Le pagine fisiche, tuttavia, sono bloccate a 8.5 "da 11" con un'area stampabile anche inferiore.
Questo ha importanti implicazioni. Significa che un lungo contenuto consumerà tonnellate di carta. Questo ci porta a pensare a dove possiamo ridurre. Ad esempio, se stampiamo articoli con centinaia di commenti, forse dovremmo disattivarli. C'è anche un evidente cambiamento che deve essere apportato alla larghezza del nostro contenuto. Sia la copia che le immagini devono essere ridimensionate in modo appropriato.
Interazione
Un'altra importante differenza tra la stampa e il web è la capacità di interazione. Il web rappresenta un mezzo dinamico altamente interattivo mentre la stampa è statica; quello che c'è sulla carta è bloccato lì!
Ciò significa che è necessario ripensare a qualsiasi elemento interattivo sulla pagina. Ad esempio, i menu di navigazione sono in genere una delle prime cose da fare. Una pagina stampata non ha utilità per loro e possono davvero divorare spazio se convertiti in semplici elenchi non ordinati.
"Hai bisogno di un buon modo per prendere tutti quei link in linea e mostrare al lettore dove conducono?Devi anche considerare cosa succederà con i cursori di immagini e simili. Se la tua pagina ha una presentazione con dieci immagini nella parte superiore, questo non si tradurrà bene in carta.
Il livello più basilare di interazione sul web è un collegamento. Anche questo diventa problematico. Sul tuo computer, puoi semplicemente fare clic su un link per vedere dove va, sulla carta questa funzionalità è persa quindi hai bisogno di un buon modo per prendere tutti quei link in linea e mostrare al lettore dove conducono.
Chi stampa questa pagina e perché?
La seconda domanda importante che deve essere posta riguarda il motivo per cui la pagina viene stampata in primo luogo. Un buon designer non si limita a far sembrare le cose belle, ma il design deve massimizzare l'utilità per l'utente.
"Un buon designer non si limita a far sembrare le cose belle, il design deve massimizzare l'utilità per l'utente."Questo ovviamente significa che devi considerare solo ciò che l'utente tipico vuole. Questa non sarà una risposta universale. Ogni tipo di progetto avrà un uso esclusivo per la pagina stampata.
Ad esempio, gli utenti di Google Maps vogliono solo tutto ciò che è stato rimosso dalla pagina per la stampa: annunci, l'enorme mappa interattiva, la barra di ricerca di Google, tutto questo e altro ancora devono essere abbandonati per un elenco pulito di indicazioni leggibili.
Questi obiettivi sono ovviamente molto diversi da quelli che stampano un post sul blog di design per circolare in un incontro come punto di discussione. Qui l'enfasi è sulla presentazione di un sacco di testo piuttosto che molto poco.
Imparando dall'esempio: HTML5 Boilerplate
Quando lavori con tipi di CSS che non hai mai affrontato prima, uno dei modi migliori per imparare è semplicemente guardarsi intorno e vedere cosa stanno facendo gli altri.
Il primo posto che di solito inizio in casi come questo è l'HTML5 Boilterplate di Paul Irish. Questo progetto è una solida collaborazione tra i principali professionisti del settore. Non è affatto infallibile, ma è comunque un ottimo esempio da cui imparare.
Se scarichiamo il Boilerplate e apriamo il file CSS, troviamo gli stili di stampa in fondo:
Questo pezzo di codice abbastanza piccolo ha un sacco in corso, il che significa che c'è molto da imparare da. Entriamo e vediamo cosa possiamo trovare.
Stampa query media
La prima cosa che dovresti notare è l'uso di una query multimediale per specificare gli stili di stampa. Questo dice al browser che tutti gli stili contenuti in questo blocco devono essere applicati solo in una circostanza speciale, in questo caso un utente che stampa la pagina (questo aiuterà a terminare la vecchia tecnica "clicca per la versione stampabile della stampante").
Selettore universale e stili generali
La prossima cosa che noto è che il selettore universale (*) viene immediatamente estratto per applicare alcune modifiche di stile generale alla pagina.
Il risultato qui è una drastica semplificazione degli stili visivi sulla pagina. Qualsiasi immagine di sfondo o colore è disattivata, il colore del testo diventa nero, le ombre di testo sono disabilitate, ecc. Tutto ciò migliora la leggibilità e fa risparmiare sull'inchiostro.
Stampa collegamenti amichevoli
Ricorda che abbiamo detto sopra che qualcosa dovrebbe essere fatto sui collegamenti stampati? Si scopre che è possibile gestire questo compito utilizzando puro CSS, un'impresa impressionante! Il buon vecchio Eric Meyer stava facendo così nel 2002 su CSS Design di List List: Going to Print.
Dopo aver applicato una sottolineatura a tutti i link nella pagina per farli risaltare (alcuni cambiano leggermente anche il colore), viene applicato uno snippet di codice che stampa il link dopo il testo:
Il risultato è che un link tipico verrà modificato in link (http://goo.gl/CWGL4). Come puoi vedere, questo è perfetto per una stampa. Come nota a margine, non tutti i browser supporteranno il CSS sopra, ma quelli che non verranno stampati andranno bene, solo senza il testo di collegamento parentetico inserito.
Si noti che il Boilerplate fa un ulteriore passo avanti disabilitando questa azione su immagini e JavaScript che contengono collegamenti.
Ottimizzazione delle interruzioni di pagina
Noterai un sacco di codice per affrontare le interruzioni di pagina: page-break-after: evitare; e p, h2, h3 {orfani: 3; vedove: 3; } entrambi mirano ad aiutare le pagine a scorrere meglio. Il primo proibisce un'interruzione di pagina direttamente dopo intestazioni e paragrafi laddove possibile, il secondo assicura che non meno di tre linee possono essere orfane o vedove su una pagina.
Cosa sono gli orfani e le vedove? Quando hai la prima riga di un paragrafo incagliato da solo nella parte inferiore di una pagina, è un orfano. Allo stesso modo, l'ultima riga di un paragrafo può essere riportata da sola alla pagina successiva, questa è una vedova. Il codice sopra assicura che, ove possibile, vengano visualizzate almeno tre righe di testo.
Dimensionamento dell'immagine
Impostando la larghezza massima dell'immagine su 100%, si garantisce che non si disponga di immagini di sanguinamento strane. Probabilmente ci si è imbattuti in questo come utente: si va a stampare una pagina Web e si finisce con diverse pagine contenenti solo immagini parziali che sono state tagliate dalla pagina principale. Questo è facilmente prevenibile con la singola riga di codice sopra!
Margini delle pagine
Il modo in cui l'HTML5 Boilerplate definisce i margini della pagina è molto interessante. La maggior parte degli articoli precedenti sui fogli di stile di stampa includono metodi molto diversi. In realtà, non sapevo nemmeno di questo metodo fino a quando non ho scritto questo articolo.
Si scopre che puoi usare @page per applicare semplicemente un margine lungo tutta la pagina. Il codice sopra applica un margine di 0,5 cm (il centimetro è CSS? Oh mio!) A tutte le pagine in modo uniforme.
Se vuoi diventare complicato, puoi modificarlo per regolare le impostazioni per ogni altra pagina. Il seguente codice imposta indipendentemente i margini della pagina sinistra (1, 3, 5, ecc.) E della pagina destra (2, 4, 6, ecc.).
È una soluzione semplice ed elegante che, sorprendentemente, è la CSS2.
Ulteriori letture
Poiché HTML5 Boilerplate è un modello generico, non contiene molti snippet di codice tipici di tipi molto specifici di siti come i blog. Prima di attaccare il tuo progetto di fogli di stile di stampa, consulta alcuni dei seguenti articoli per assicurarti di essere al passo coi tempi.
- 10 suggerimenti per fogli di stile di stampa migliori da Web Designer Depot
- Come creare un fantastico foglio di stile di stampa da Aliso il Geek
- Stampa fogli di stile: le basi (per non scuse) di Jens Meiert
- Stampa foglio di stile - la guida definitiva di Webcredible
Conclusione
I fogli di stile di stampa rappresentano un modo completamente diverso di pensare e utilizzare i CSS. Non sono sempre le attività più intuitive quindi non aspettarti di trovare le risposte giuste in modo intuitivo. Assicurati di fare i compiti e testare ampiamente.
Hai qualche trucco o buone pratiche riguardanti i fogli di stile di stampa? Fateci sapere nei commenti qui sotto!