Εφαρμόζοντας το sIFR

Στη μίνι σειρά “Εφαρμογή καλής τυπογραφίας στο Web” που έφτιαξα στο παρελθόν είχα κάνει μια μικρή αναφορά στο sIFR (Scalable Inman Flash Replacement) στο 3ο μέρος. Αυτή τη φορά την εφάρμοσα γι’ αυτό το site και οι εντυπώσεις μου είναι οι καλύτερες.

Από που ξεκίνησε όλο αυτό

Στο Web υπάρχει ένα δεδομένο που δεν τίθεται στη γραφιστική: η απουσία πολλών γραμματοσειρών. Ο designer για το Web έχει πρακτικά πολύ λίγες επιλογές για τη γραμματοσειρά που θα επιλέξει. Θεωρώ το κομμάτι “Τυπογραφία” ένα από τα σημαντικότερα στο Web design. Αν το περιεχόμενο είναι ο βασιλιάς, η τυπογραφία είναι τα ρούχα του.

Με δεδομένο, λοιπόν, ότι στην ουσία μπορούν να χρησιμοποιηθούν 5-6 γραμματοσειρές (αφήνω απ’ έξω μερικές αστείες όπως η Comics Sans ή κάποιες που στα Ελληνικά είναι πολύ αδύναμες όπως η Garamond) για ένα design, έπρεπε να βρεθεί ένας τρόπος να χρησιμοποιήσουμε πιο πολλές.

Η πρώτη λύση που εφαρμόστηκε και είναι σήμερα διαδεδομένη παντού είναι η αντικατάσταση ενός κειμένου με εικόνα. Η επεξεργασία της εικόνας μπορεί να γίνει σε κάποιο πρόγραμμα όπως π.χ. το Photoshop κι εκεί ο designer μπορεί να χρησιμοποιήσει όποια γραμματοσειρά επιθυμεί.

Στην περίπτωση αυτή δεν υπάρχει κανένα πρόβλημα. Η εικόνα τοποθετείται στη σελίδα και ο browser τη διαβάζει κανονικά. Ωστόσο, είναι προφανές ότι η λύση αυτή μπορεί να χρησιμοποιηθεί σε πολύ μικρά κείμενα όπως το λογότυπο ενός site. Αλλιώς σιγά σιγά αντικαθίσταται το πραγματικό κείμενο με εικόνες, το site γίνεται πιο αργό και πάει λέγοντας.

Η ιδέα του sIFR

To sIFR επιτρέπει τη χρήση οποιασδήποτε γραμματοσειράς σε οσοδήποτε μεγάλο κείμενο, χωρίς το site να γίνεται πιο αργό, χωρίς να τίθενται θέματα προσβασιμότητας από άτομα με δυσκολία στην όραση και γενικά χωρίς να έχει κανένα μειονέκτημα ως τεχνική.

Το sIFR, που προτάθηκε από τον S. Inman κι αναπτύσσεται από διάφορους άλλους σημαντικούς designers, βασίζεται στη συνεργασία Flash, JavaScript, CSS και φυσικά (X)HTML ώστε να προσφέρει ακόμα πιο ποιοτικά αποτελέσματα.

Το “κόλπο” ξεκινάει από το Flash, το οποίο μπορεί να χρησιμοποιήσει οποιαδήποτε γραμματοσειρά είναι διαθέσιμη. Στη συνέχεια, εισάγεται στη σελίδα με τη βοήθεια της JavaScript. Η JavaScript επίσης καθορίζει σε ποιο σημείο του κειμένου θα εφαρμοσθεί ή νέα γραμματοσειρά π.χ. όλους τους τίτλους με tag <h3>. Το πως θα φαίνεται είναι κάτι το οποίο ρυθμίζεται μέσα από το CSS αρχείο.

Δε θα αναφέρω με λεπτομέρειες όλη τη διαδικασία γιατί υπάρχουν εξαιρετικές οδηγίες γι’ αυτό. Όμως αξίζει να πω ότι, ενώ είναι την πρώτη φορά σαφώς πιο δύσκολη η εφαρμογή του sIFR σε μια σελίδα, αφού γίνει αυτό μια φορά, το να ξαναεφαρμοστεί είναι βόλτα στο πάρκο.

Πλεονεκτήματα

Τα έχω αναφέρει σκόρπια πιο πάνω. Αν τα μάζευα σε μια λίστα θα ήταν:

• Δυνατότητα χρήσης όποιας γραμματοσειράς επιθυμεί ο designer σε οποιοδήποτε σημείο της σελίδας.
• Προσβασιμότητα από επισκέπτες που έχουν προβλήματα στην όραση (οι screen readers διαβάζουν το κείμενο, χωρίς δυσκολία).
• Προσβασιμότητα ακόμα κι αν η Javascript ή/και το CSS είναι απενρεγοποιημένα στον browser ή/και o επισκέπτης της σελίδας δεν έχει εγκατεστημένο το Flash plugin.
• Ταχύτητα: το site καθυστερεί πολύ λιγότερο απ’ όταν χρησιμοποιούνται images. Tην πρώτη φορά που ο browser “διαβάζει” τη σελίδα αργεί ελάχιστα περισσότερο κι αυτό είναι όλο.
• Ευκολία χρήσης μετά την πρώτη φορά.

Στο site αυτό εφάρμοσα το sIFR για όλους τους τίτλους με γαλάζια γράμματα που βρίσκονται σε μαύρο background. Αν δοκιμάσετε να κάνετε δεξί κλικ πάνω σε κάποιον από αυτούς (όχι αυτούς με κάθετο προσανατολισμό - αυτοί είναι ακόμα εικόνες), θα δείτε ότι δεν υπάρχει κάπου εικόνα.

Ακόμα γίνονται κάποια πειράματα με τη γραμματοσειρά, αλλά το αποτέλεσμα σε πρώτη φάση με ικανοποιεί. Εξάλλου πριν απ’ οτιδήποτε άλλο, αυτό το site είναι ο χώρος που παίζω και μαθαίνω.