css3.gr

Τα print styles είναι ένα από τα σημαντικότερα, κατά την ταπεινή μου άποψη, κομμάτια ενός ενημερωτικού site. Αρκετοί χρήστες εξακολουθούν μέχρι σήμερα να τυπώνουν ειδήσεις με σκοπό να τις διαβάσουν αργότερα, όσο ...επίπονο στο περιβάλλον κι αν αυτό ακούγεται.

Τα print styles όμως είναι και ένας καλός τρόπος να “ξεχωρίσεις” το content από όλα τα παρελκόμενα: μενού πλοήγησης, sidebars, διαφημίσεις και χίλια άλλα που καταφέρνουν να βρουν μια θέση στη σελίδα μας. Ύπάρχουν αρκετοί χρήστες που  χρησιμοποιούν το print preview για να διαβάσουν με την ησυχία τους κάποιο άρθρο, ελεύθεροι από κάθε ενόχληση (προφανώς οι συγκεκριμένοι ίσως να μη γνωρίζουν ακόμη για το bookmarklet Readability, μια εξαιρετικά χρήσιμη javascript λειτουργία που με ένα κλικ “ξεκαθαρίζει” το περιεχόμενο της σελίδας).

Σε πρόσφατη αναζήτησή μου για τα πιο ενδεικτικά print styles που χρησιμοποιούν μεγάλα ενημερωτικά sites εξεπλάγην. Αν και τα περισσότερα από αυτά προσφέρουν κάποιου είδους λειτουργία printing έτοιμη, τα περισσότερα δεν διαθέτουν καθόλου default print styles, με αποτέλεσμα η εκτύπωση να μην διαφέρει και πολύ από την online μορφή του άρθρου, σπαταλώντας χαρτί, μελάνι και χώρο. Επιπλέον, τις περισσότερες φορές τα font-sizes για το web δεν είναι κατάλληλα για το χαρτί, με καταστροφικά αποτελέσματα κυρίως για τα νεύρα των τριγύρω (”Ζαχαρένιααααα, γιατί τα ‘βγαλε τόσο μικρά;”).

Ελάτε παρέα να δούμε μαζί την έντυπη μορφή τριών από τα μεγαλύτερα ενημερωτικά sites του Διαδικτύου.

CNN.com

Το “βαρύ πυροβολικό” των ενημερωτικών sites μπορεί σίγουρα να καυχιέται για το προσεγμένο του design και τις δυνατότητες των εκάστοτε designers του να προσαρμόζονται στις ανάγκες ενός τόσο τεράστιου site. Ωστόσο, όταν προσπαθήσετε να εκτυπώσετε κάποιο από τα άρθρα του χρησιμοποιώντας την επιλογή Print από το μενού του browser σας, θα δείτε κάτι σαν αυτό:

Ναι, δεν έχετε άδικο, είναι σχεδόν ίδιο με την online έκδοση. Κακή πρώτη εντύπωση. Βέβαια για να είμαστε ακριβείς, το CNN.com προσφέρει μια ξεχωριστή δυνατότητα Print σε ανάλογο κουμπί στο πάνω μέρος της σελίδας. Πατώντας το, ανοίγει ένα pop-up με την παρακάτω μορφή:

Αισθητά καλύτερα, αλλά γιατί να χρειάζεται κλικ στο συγκεκριμένο κουμπί για την σωστή εκτύπωση της σελίδας; Γιατί δεν υπάρχουν (έστω υποτυπώδη) print styles; One can only wonder.

BBC.co.uk

Φαίνεται ότι το BBC.co.uk είναι λίγο πιο μπροστά από το CNN.com σε αυτό το θέμα, καθώς εκτυπώνοντας ένα άρθρο χρησιμοποιώντας την επιλογή Print του browser εμφανίζει αυτό:

Όπως βλέπετε, οι περιττές εικόνες έχουν αφαιρεθεί, το ίδιο και τα χρώματα του μενού πλοήγησης, της επικεφαλίδας και της κατακλείδας του site. Βέβαια, μαζί με αυτές έχει εξαφανιστεί και η εικόνα του άρθρου (το κείμενο έχει μετακινηθεί πιο κάτω στη σελίδα), αλλά αυτό φαντάζομαι είναι πρόβλημα του συγκεκριμένου άρθρου. Είναι σίγουρα ένα βήμα στη σωστή κατεύθυνση, αλλά τί θέση έχουν στοιχεία όπως το μενού πλοήγησης και τα video / audio news του site στην εκτυπώσιμη μορφή του;

Όπως και το CNN, το BBC διαθέτει ξεχωριστή λειτουργία εκτύπωσης του άρθρου, στο κουμπί Printable version. Πατώντας το, βλέπουμε αυτό:

Αρκετά ικανοποιητική μορφή του άρθρου, κατάλληλη για εκτύπωση. Αν και τα print styles του site είχαν ίδιο ή τουλάχιστον παραπλήσιο αποτέλεσμα, θα ήταν ακόμη καλύτερα.

Reuters

Το Reuters κινείται στη λογική του CNN: ναι μεν διαθέτει λειτουργία printable version, αλλά η απευθείας εκτύπωση δεν διαφέρει σε τίποτε από την online μορφή:

Άντίθετα, η printable μορφή είναι αρκετά καθαρότερη και σίγουρα πιο ευανάγνωστη:

Ανάλογη είναι και η λογική άλλων sites, όπως το Yahoo! News και Fox News.

Παρατηρεί κανείς ότι εντέλει, ενώ τα περισσότερα ενημερωτικά sites δίνουν τη δυνατότητα στους χρήστες να εκτυπώσουν τη σελίδα απαλλαγμένη από τα περιττά στοιχεία, δεν έχουν μεριμνήσει για το απλούστερο, τη λειτουργία Print μέσω του μενού του browser. Η εκτύπωση μέσω της ξεχωριστής printable version απαιτεί δύο κλικ - η απευθείας εκτύπωση ένα. Επιπλέον, οι περισσότεροι χρήστες είναι ήδη εξοικειωμένοι με τον browser τους αλλά όχι με το κάθε site - γιατί να βάζουμε τον χρήστη στη διαδικασία αναζήτησης του εκάστοτε print control;

Εν κατακλείδι

Η εκτύπωση είναι μια διαδικασία που οφείλεται να υποστηρίζεται, αν το site σας χαρακτηρίζεται από αρκετό περιεχόμενο που μπορεί να χρησιμεύσει ως αναφορά. Εφόσον διαθέτετε ήδη μια λειτουργία print this, μην αμελήσετε να επιμεληθείτε τα print styles σας - δεν γνωρίζετε ποιο δρόμο θα ακολουθήσει ο χρήστης για την εκτύπωση.

Εκμεταλλευτείτε τα print styles για να αφαιρέσετε περιττά στοιχεία από τη σελίδα σας, απλουστέψτε τη δομή σας και αυξήστε το font-size σε επικεφαλίδες και κείμενο. Διατηρήστε αν θέλετε το λογότυπό σας (κατά προτίμηση στην πάνω αριστερή μεριά της σελίδας), αλλά προς Θεού, τα banners σας δεν έχουν καμία θέση σε μια κόλλα Α4.

Καθώς οι χρήστες δεν πρόκειται να κατέβουν από τον θρόνο στον οποίο κάθονται σύντομα, δώστε τους τουλάχιστον την ευκαιρία να εκμεταλλευτούν δημιουργικά μια διαδικασία όπως την εκτύπωση. Εντέλει, κάνει καλό και στο περιβάλλον!

Αναφορικά με τα print styles…

Αν θέλετε να μάθετε περισσότερα για τα print styles ή να εμπλουτίσετε τις γνώσεις σας με κάποιες καλές πρακτικές, μην ξεχάσετε να ελέγξετε τα παρακάτω links:

• A List Apart - CSS Design: Going to Print
• A List Apart - Improving Link Display for Print
• 24 Ways - Back To The Future of Print