Ενοχλητικά features σε site

Δεν ξέρω αν είμαι περίεργος (δεν νομίζω) ωστόσο τελευταία παρατηρώ όλο και πιο συχνά το εξής φαινόμενο. Ενώ βλέπω σημάδια φοβερής προόδου στο internet, στο ελληνικό domain φαίνεται να κάνουμε βήματα προς τα πίσω! Με άλλα λόγια, αντι-τεχνικές (marketing, κακού design, ανύπαρκτου UX, κακή/υπερβολική χρήση διαφημίσεων, κτλ.) που έχουν εξαφανιστεί από σοβαρά διεθνή sites, στην Ελλάδα για κάποιο περίεργο λόγο έχουν κάνει ένα δυναμικό comeback! Παρακαλώ αν κάνετε κάτι από τα παρακάτω, επανεξετάστε την στρατηγική σας, σεβαστείτε τον χρήστη σας και προσπαθείστε να μην ακολουθείτε τα λάθη που πιθανόν κάνει κάποιο άλλο ελληνικό site. Το ότι τα χρησιμοποιεί κάποιος άλλος – ακόμα και μεγάλος – ελληνικός “παίχτης” δεν σημαίνει απαραίτητα ούτε ότι είναι σωστό αλλά ούτε και ότι κερδίζει κάτι ουσιαστικό, οπότε καλό είναι να μην αντιγράφουμε το λάθος του…

Παρακάτω παρουσιάζω τα anti-patterns που έχω παρατηρήσει να συμβαίνουν πιο συχνά στα ελληνικά sites και αναλύω με πολύ απλά λόγια γιατί είναι λάθος! Έχουμε και λέμε:

1) Popup ads και modal ads
Δυστυχώς εν έτη 2013 πρέπει να εξηγούμε πως τα popups παράθυρα γεμάτα διαφημίσεις είναι anti-pattern! Κάποιοι έχουν κάνει λίγο πιο “μοντέρνα” αυτήν την “εμπειρία” και αντί για popups windows, “πετάνε” modals με διαφημίσεις, τα οποία πολλές φορές δεν μπορείς να κλείσεις μέχρι να δεις ολόκληρη την διαφήμιση (ή έστω μεγάλο μέρος της). Τι να γράψω πάνω σε αυτό; Τα έχουν πει/γράψει άπειρες φορές πολύ πιο έξυπνοι άνθρωποι από εμένα. Δεν λειτουργούν, ποτέ δεν λειτούργησαν και το μόνο που θα καταφέρεται είναι να χάσετε χρήστες, αφού πρώτα τους σπάσετε και τα νεύρα! Τώρα αν αξίζει να χάσετε χρήστες για να κερδίσετε κάποια προσωρινή διαφήμιση/σπόνσορα, αυτό είναι καθαρά δικό σας θέμα. Αυτό που θα σας ρωτήσω είναι σε ποιον θα πουλάτε διαφημίσεις όταν χάσετε τους χρήστες σας…

2) Θες να γίνουμε φίλοι; O social-άκιας
Πρόκειται για sites τα οποία για να δεις το περιεχόμενο τους πρέπει να γίνεται απαραιτήτως φίλοι ή να κάνετε like στο Facebook page τους κοκ. Απλά τραγικό και θα εξηγήσω πολύ απλά γιατί χάνετε έτσι κι αλλιώς. Ο χρήστης με το που βρεθεί αντιμέτωπος με ένα τέτοιο site έχει 2 επιλογές: Ή θα φύγει κατευθείαν – όπως κάνω συνέχεια – και δεν θα ξανα-επιστρέψει ποτέ, ή θα κάνει like για να δει αυτό που θέλει. Στην δεύτερη περίπτωση τώρα, έστω ότι σας έχουν κάνει like 10.000.000 χρήστες (όλη η Ελλάδα), τι νομίζεται πως έχετε πετύχει; Είναι όλοι αυτοί πελάτες σας; Θα αυξήσετε το convertion rate σας; Θα αρχίσουν ξαφνικά όλοι αυτοί να εξυμνούν το site/υπηρεσία/προϊόν σας; OXI! Το αντίθετο μπορεί να συμβεί! Απλά έχετε καταφέρει να έχετε πολλούς άσχετους φίλους/followers κτλ. Μπράβο σας…

4) Η 10MB page
Καταλαβαίνω πως έχουμε 2013 και πολύ περισσότερο bandwidth απ’ ότι 5 χρόνια πριν, ωστόσο αυτό δεν σημαίνει πως πρέπει να κατασκευάζουμε σελίδες των 10 MB! Η Google μιλάει και επίσημα πλέον πως όσο πιο optimized και γρήγορο είναι ένα site τόσο καλύτερο page rank θα έχει, ωστόσο στην Ελλάδα μου τυχαίνει όλο και συχνότερα να πέφτω πάνω σε sites δεινόσαυρους (μεγατόνων κι όλας). Τις περισσότερες φορές με ελάχιστο optimization (σε images, http requests, κτλ.) μπορούμε να ρίξουμε το file size στο μισό χωρίς να θυσιάσουμε τίποτα σε ποιότητα! Επίσης βγάζοντας κάποιες διαφημίσεις/Flash objects μπορούμε να κάνουμε το site να πετάει, ωστόσο για κάποιο λόγο θέλουμε να ανήκει στην “heavy weight” κατηγορία…

5) Διαφημίσεις μέσα στο περιεχόμενο
Παλιό, κλασικό κόλπο, που εγκαταλείπεται σιγά-σιγά παντού, εκτός από την Ελλάδα όπου ανθίζει! Μπορεί να λειτουργήσει τις πρώτες 4-5 φορές, ωστόσο ο χρήστης σύντομα θα μάθει να αγνοεί και αυτές τις διαφημίσεις (όπως και όλες τις υπόλοιπες), οπότε στο τέλος το μόνο που καταφέρνουμε είναι να τον εκνευρίσουμε και τίποτα παραπάνω.

6) Νewsletter που δεν σου προσφέρουν τίποτα!
Ακόμα μια ελληνική πατέντα. Πρόκειται συνήθως για newsletters τα οποία δεν έχουν να πουν κάτι ουσιαστικό και που στην καλύτερη των περιπτώσεων θα σε ενημερώνουν για κάποια “προσφορά”. Τα περισσότερα είναι κακο-σχεδιασμένα, μόνο με images – όπου αν δεν εμφανιστούν απλά δεν διαβάζεις τίποτα – και τα στέλνουμε με την καταπληκτική λογική πως όλοι στέλνουν newsletters (πχ. ανταγωνιστές, γνωστοί, συνάδελφοι, κτλ.). Αυτοί που στέλνουν τέτοιου είδους newsletters, συνήθως δεν αξιολογούν τίποτα, όπως πχ. για το ποιος και αν τα ανοίγει/διαβάζει, αν κερδίζουμε κάτι από αυτά ή απλά χάνουμε άδικα τον χρόνο μας. Η λογική είναι πως τα στέλνουμε επειδή μαζί με το site πρέπει να στέλνουμε και κανένα newsletter.

7) Flash!
Μπορεί όλη η γη να έχει υποδουλωθεί στις ανοιχτές τεχνολογίες για διαφημίσεις (και όχι μόνο), ωστόσο το μικρό ελληνικό χωριό συνεχίζει να προβάλει αντίσταση σε οτιδήποτε ανοιχτό και δωρεάν. Αναφέρομαι κατά κύριο λόγο στις Flash διαφημίσεις οι οποίες κρατάνε ακόμα την μερίδα του λέοντας στην χώρα μας, άσχετα αν δεν φαίνονται στα περισσότερα smartphones και tablets. Αυτό δεν μπορώ να το καταλάβω με τίποτα. Εδώ η ίδια η Adobe έχει καταλάβει πως το Flash είναι τελειωμένο και όμως στον ελληνικό κυβερνοχώρο η πλειοψηφία των διαφημίσεων είναι Flash (με μπόλικα MB κατά προτίμηση). Πρόσφατα έπεσα και σε μια περίπτωση πελάτη, ο οποίος ήθελε responsive web design, και όταν οι Flash διαφημίσεις του δεν έπαιζαν σε tablets/smartphones αναρωτιόταν γιατί. Απλά τραγικό.

8) Φόρμες που δεν λειτουργούν!
Εκτός από κακο-σχεδιασμένες πολλές φόρμες στο ελληνικό domain υπάρχουν απλά για διακοσμητικό ρόλο! Δεν εξηγείτε αλλιώς πως οι μισές από αυτές απλά δεν λειτουργούν/δεν καταλήγουν πουθενά.

9) Αudio/Video auto play!
Τι πιο σωστό από το να έχεις ενεργοποιημένο το auto play στο video/audio που έχεις στο site σου. Ακόμα πιο τραγικό είναι το autoplay ήχου σε διαφημίσεις (εκεί και αν χάνεις την μπάλα)! Παίζεις με το ζόρι αυτό που θες στον χρήστη, με το έτσι θέλω. Αλώστε το site σου είναι ότι θες κάνεις. Τι σημασία έχει που τον τρομάζεις, εκνευρίζεις κτλ. Σημασία έχει να παίξει το audio/video σου!

10) Έχουμε ένα πολύ καλό app για το smartphone/tablet σου!
Ένα trend που δυστυχώς υπάρχει και σε site του εξωτερικού (εξαφανίζεται σιγά-σιγά όμως), που βάζω στοίχημα πως θα ανθήσει full στην Ελλάδα. Πρόκειται για τα site που όταν τα επισκέπτεσαι από το smartphone/tablet σου, αντί να σου δείχνουν το περιεχόμενο που έχεις μπει να δεις, σε ζαλίζουν να κατεβάσεις την υπέρ-εφαρμογή τους! Η λογική είναι ανάλογη με αυτήν των follwers/like απλά σε app store επίπεδο : την εφαρμογή μας την έχουν κατεβάσει 100.000 άτομα, άρα είμαστε οι καλύτεροι! Γιατί μου κάνεις την ζωή μου πιο δύσκολη, εγώ να τσεκάρω κάτι γρήγορα στο site θέλω – από το κινητό/tablet μου – αν ήθελα και το app σου, ξέρω που θα το βρω!

Τα πα και ξαλάφρωσα…

Εύκολα στην υλοποίηση accessibility tips : Χρησιμοποιήστε (σωστά) labels στις φόρμες σας.

Ένα πανεύκολο και πολύ απλό στην υλοποίηση accessibility tip που δυστυχώς δεν το συντάω συχνά σε ελληνικά site. Τα πράγματα είναι εξαιρετικά απλά σε αυτό το θέμα. Ο μοναδικός σκοπός του label (ετικέτα) element είναι να “συνδέεται” και να περιγράφει όσο καλύτερα μπορεί ένα και μοναδικό form control, όπως για παράδειγμα checkbox, radio button, text input κτλ. (εκτός από τα buttons φυσικά). Αντιθέτως, κάθε form control μπορεί “συνδεθεί” με πολλά label elements, έτσι ώστε να παρουσιάσει μηνύματα βοήθειας, λάθους κτλ. Οι δύο παρακάτω τρόποι κάνουν σωστή χρήση του label element. Προσωπικά προτιμώ τον πρώτο γιατί σου αφήνει περισσότερα περιθώρια ελευθερίας τόσο σε markup όσο και σε styling επίπεδο…

<label for="name">Όνομα:</label>
<input id="name" name="name" type="text" />

<label>Όνομα:
<input id="name" name="name" type="text" />
</label>

Τα accessibility οφέλη που παίρνουμε είναι πως τα παραπάνω labels ενεργοποιούν κατευθείαν τα controls που περιγράφουν, κάτι πολύ σημαντικό για την ευκολότερη συμπλήρωση φορμών. Πολλά controls είναι μικρά, δυσδιάκριτα και δύσκολα στο να επιλεχθούν (ειδικά τα radio buttons), οπότε επιλέγοντας το κείμενο της ετικέτας μας (label) επιλέγουμε αυτόματα και το ανάλογο control. Τέλος ας μην ξεχνάμε πως βοηθάμε πολύ και τους χρήστες text browser και screen readers…

Εύκολα στην υλοποίηση accessibility tips : Χρησιμοποιήστε option groups στις φόρμες σας.

Ένα πανεύκολο tip που θα ωφελήσει όλες τις κατηγορίες χρηστών σας και θα κάνει τις φόρμες σας ομορφότερες αλλά και ευκολότερες στο να συμπληρωθούν. Εάν λοιπόν έχετε κάποιο select element  με πολλά option elements, καλό θα ήταν να τα κατηγοριοποιήσετε χρησιμοποιώντας τα option groups.

Η χρήση τους είναι εξαιρετικά απλή, απλά ονομάζεται το group δίνοντας του ένα όνομα (label) και στην συνέχεια του προσθέτεται τα option elements που θέλετε. Ρίξτε μια ματιά παρακάτω και προσπαθήστε να το χρησιμοποιήσετε την επόμενη φορά που θα έχετε μια λίστα με πολλές επιλογές…

<label for="bestepisode">Διάλεξε το καλύτερο επεισόδιο τριλογίας!</label>
<select name="bestepisode" id="bestepisode">
<optgroup label="Star Wars">
<option value="starwars4">The Star Wars</option>
<option value="starwars5">The Empire Strikes Back</option>
<option value="starwars6">Return of the Jedi</option>
</optgroup>
<optgroup label="Indiana Jones">
<option value="ij1">Raiders of the Lost Ark</option>
<option value="ij2">The Temple of Doom</option>
<option value="ij3">The Last Crusade</option>
</optgroup>
<optgroup label="Matrix">
<option value="matrix1">The Matrix</option>
<option value="matrix2">The Matrix Reloaded</option>
<option value="matrix3">The Matrix Revolutions</option>
</optgroup>
</select>

Kαλοπιστικά γραφικά vs γραφικά περιεχομένου

Σε αυτό το μικρό postακι θα προσπαθήσω να εξηγήσω την διαφορά των συγκεκριμένων γραφικών/images καθώς και πως πρέπει να εμφανίζονται στην markup μας (με τι attributes κτλ.). Για κάποιον λόγο αυτή η απλή διαφορά δεν γίνεται αμέσως αντιληπτή, ιδιαίτερα στους  νέους του χώρου, οπότε ας ξεκαθαρίσουμε λίγο τα πράγματα.

Η λύση είναι απλούστατη και θέμα θέμα απλής λογικής. Όποιο γραφικό είναι μέρος του περιεχομένου, όπως πχ. μια φωτογραφία, ένα διάγραμμα, κτλ., πρέπει να παρουσιάζεται με το HTML img tag και να περιέχει – εκτός φυσικά από το src attribute – και ένα περιγραφικό alt attribute. Αντιθέτως τα γραφικά που δεν είναι μέρος του περιεχομένου, δεν θα πρέπει να υπάρχουν καθόλου στην markup μας (ως img tags)! Τα συγκεκριμένα γραφικά θα πρέπει να παρουσιάζονται είτε μέσω CSS, είτε μέσω DOM injection χρησιμοποιώντας κάποια Javascript library. Εάν φυσικά τα πράγματα δεν γίνονται αλλιώς (δεν μπορούμε να κάνουμε και μαγικά σε μερικές περιπτώσεις), τότε μπορούμε να προσθέσουμε τα συγκεκριμένα γραφικά με img tags τα οποία θα έχουν κενή την alt attribute τους (<img src="logo.jpg" alt="" />). Εύκολο έτσι;

Εύκολα στην υλοποίηση accessibility tips : Οδηγείστε τους χρήστες screen readers / text browsers κατευθείαν στο περιεχόμενο ή όπου αλλού θέλετε.

Ένα πανεύκολο στην υλοποίηση accessibility feature, που θα βοηθήσει αφάνταστα τους screen readers και τους χρήστες που χρησιμοποιούν text-browsers. Το μόνο που πρέπει να κάνετε είναι στην αρχή κάθε document, να προσθέσετε τα links που θα οδηγούν τον χρήστη κατευθείαν στο σημείο που έχετε ορίσει. Έτσι για παράδειγμα, σε αυτό το site, το πρώτο πράγμα που “εμφανίζεται” στην markup μου είναι μια λίστα με αυτά τα links (μέσα σε ένα div).

<div id="accessibilitylinks">
<ul>
<li><a title="Go to content" href="#content">Skip to content</a></li>
<li><a title="Go to main navigation" href="#navigation">Skip to main navigation</a></li>
<li><a title="Go to Search form" href="#search">Skip to Search form</a></li>
</ul>
</div>

Με τον παραπάνω κώδικα, οι χρήστες screen reader μπορούν πολύ εύκολα – στην κυριολεξία με ένα κλικ – να μετακινηθούν στο περιεχόμενο της σελίδας μου, στο navigation ή στην search form. Φυσικά μπορούμε να εφαρμόσουμε και όλους τους γνωστούς styling κανόνες στην λίστα έτσι ώστε να την διαμορφώσουμε όπως θέλουμε. Καλό θα είναι εάν θέλουμε να την κρύψουμε, να μην χρησιμοποιήσουμε τον κανόνα display:none αλλά να την κρύψουμε με κάποιο άλλο τρόπο (πχ. absolute position), και αυτό γιατί πολλοί screen readers/text browsers δεν διαβάζουν τα elements με display:none. Για παράδειγμα, εγώ κρύβω την συγκεκριμένη λίστα links με τον παρακάτω κώδικα:

#accessibilitylinks {
position:absolute;
top:-1000px;
}

Είναι πραγματικά το πιο εύκολο αλλά και πρακτικό usability χαρακτηριστικό που μπορείτε να έχετε στην σελίδα σας!

Εύκολα στην υλοποίηση accessibility tips : Extra navigation για text browsers / screen readers (και όχι μόνο)

Η αλήθεια είναι πως όσο καλός και ενημερωμένος να είσαι στο χώρο του web, πάντα υπάρχει κάτι καινούργιο να μάθεις. Επειδή λοιπόν και εγώ πρόσφατα (πριν από έναν χρόνο για την ακρίβεια, αλλά ας μείνουμε στο πρόσφατα), ανακάλυψα μερικά ενδιαφέροντα και πολύ εύκολα στην υλοποίηση accessibility tips, θα τα παρουσιάσω σε αυτή την μίνι σειρά post.

Οι περισσότεροι γνωρίζετε το link element που βάζουμε στο head κομμάτι του κώδικα μας, και δηλώνει πως το εν λόγω document έχει κάποια σχέση (relationship – rel) με κάποιο άλλο document ή πηγή. Ο πιο κλασικός τρόπος χρήσης του είναι η εισαγωγή κάποιου εξωτερικού stylesheet (CSS), όπως για παράδειγμα :

<link rel="stylesheet" href="default.css" type="text/css" media="screen" />

Αυτό που δεν γνωρίζουν οι περισσότεροι, είναι πως με το εν λόγω element μπορούμε να προσφέρουμε επιπλέον navigation χαρακτηριστικά στους χρήστες screen readers, text browsers αλλά και σε κάποιους κανονικούς browsers (όπως Opera) οι οποίοι αρχίζουν να υποστηρίζουν και αυτήν την ιδιότητα του link element. Μερικά παραδείγματα και τρόπους χρήσης του μπορείτε να δείτε παρακάτω :

<link rel="home" title="Home" href="http://www.tsevdos.com/" />
<link rel="prev" title="Title of previous page" href="http://www.tsevdos.com/</code><code>previous-page" />
<link rel="next" title="Title of next page" href="http://www.tsevdos.com/</code><code>next-page" />

Όπως βλέπεται η χρήση του είναι πανεύκολη και τα πλεονεκτήματα αρκετά, έτσι ώστε να το χρησιμοποιήσουμε.

Τέλος το συγκεκριμένο tag μπορεί να χρησιμοποιηθεί και για άλλους σκοπούς, όπως για παράδειγμα στο να ενημερώσει τις μηχανές αναζήτησης εάν το περιεχόμενο της σελίδας μας υπάρχει και σε άλλες γλώσσες ή σε άλλη μορφή. Παρακάτω μπορείτε να βρείτε τα ανάλογα παραδείγματα, ωστόσο δεν θα σταθώ πολύ σε αυτά μιας και θέλω στο συγκεκριμένο post να συγκεντρωθώ κυρίως στο θέμα προσβασημότητας/accessibility. Όπως και να έχει ρίξτε οπωσδήποτε μια πιο λεπτομερή ματιά στο link element και δεν θα χάσετε.

<link lang="fr" title="La documentation en Fran&ccedil;ais" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html">
<link media="print" title="The manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps">
<link rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html">

Μείνετε συντονισμένοι και για τα επόμενα!

Βρετανικές web οδηγίες. Τι λάθος έκαναν;

Το Ηνωμένο Βασίλειο είναι η πρώτη ευρωπαϊκή χώρα που κάθισε και ετοίμασε τις δικές της οδηγίες για τα web sites που δραστηριοποιούνται σε βρετανικό έδαφος. Το Central Office of Information (COI) λοιπόν, δημοσίευσε τις οδηγίες που πρέπει να ακολουθούν και να καλύπτουν τα κυβερνητικά (government) sites και τα sites γενικού ενδιαφέροντος (public sector).

Από μια γρήγορη ματιά που τους έριξα, οι οδηγίες προσβασημότητας (accessibility) δεν διαφέρουν και πολύ από τα διεθνή standards, έχουν γράψει με άλλα λόγια τα ίδια πράγματα σε κάπως πιο επιχειρηματική γλώσσα (έτσι μου φάνηκε τουλάχιστον). Προσωπικά δεν θα έμπαινα καν στην διαδικασία να διαβάσω οδηγίες που έχουν να κάνουν με το web, εάν αυτές προερχόντουσαν από κάποια άλλη χώρα, ωστόσο το Ηνωμένο Βασίλειο έχει μεγάλη επιρροή στην Ευρωπαϊκή Ένωση και τις ευρωπαϊκές αποφάσεις, ιδιαίτερα σε θέματα τεχνολογίας και καινοτομίας. Μέσα λοιπόν σε όλον αυτό τον όγκο των πληροφοριών, το Web Standards Project παρατήρησε ένα τραγικό λάθος και αμέσως ξέσπασε μια μεγάλη διαμάχη ανάμεσα σε αυτό και την βρετανική κυβέρνηση.

Το Web Standards Project υποστηρίζει, και συμφωνώ απολύτως μαζί του, πως το COI έχει συντάξει έναν τελείως λάθος τρόπο υπολογισμού υποστήριξης browser (παρεμπίπτοντος δεν παρέχουν τις εν λόγω οδηγίες σε HTML μορφή ακόμα, αλλά μόνο σε MS Word και PDF, κάτι πραγματικά τραγικό). Έτσι οι επίσημες βρετανικές οδηγίες, προτρέπουν τους web masters να μην τεστάρουν αλλά και να μην υποστηρίζουν πλήρως τους browsers που δεν καταφέρνουν να έχουν ένα σεβαστό ποσοστό επισκεψημότητας. Το ποσοστό αυτό βγαίνει με κάποια περίεργα μαθηματικά που έχουν σκεφτεί οι άγγλοι ειδικοί (και που δεν πρόκειται να πάρει σοβαρά κανένας web master κατά την γνώμη μου), ενώ αν κατάλαβα καλά κάποιος browser με ποσοστό κάτω από 2% θεωρείτε όχι ημι-υποστηριζόμενος (semi-supported).

Τα προβλήματα που προκύπτουν από τις συγκεκριμένες οδηγίες είναι πάρα πολλά, όπως για παράδειγμα τι εννοούν γράφοντας ημι-υποστηριζόμενος (semi-supported) browser (ο καθένας μπορεί να το ερμηνεύσει διαφορετικά), με ποια λογική στατιστικής και με ποιο εργαλείο θα βγαίνει το ποσοστό των browser το οποίο θα καθορίζει την στρατηγική των site σε θέματα υποστήριξης browser, και πάρα πολλές παρόμοιες ερωτήσεις που σου έρχονται στο μυαλό διαβάζοντας μόνο τις οδηγίες στο συγκεκριμένο θέμα!

Εκτός από τα παραπάνω λάθη, τα οποία δεν ξεκαθαρίζουν και μάλλον μπερδεύουν ακόμα περισσότερο τους web masters, το σημαντικότερο μειονέκτημα των οδηγιών είναι η λάθος προσέγγιση που ακολουθούν! Κανονικά θα έπρεπε όπως πολύ επιτυχημένα γράφει και το Web Standards Project οι οδηγίες να προβάλουν τους σωστούς και μοντέρνους τρόπους κατασκευής ιστοσελίδων, έτσι ώστε να κινηθούν και οι κατασκευαστές browser αναγκαστικά προς την κατεύθυνση των web standards. Με την λογική του COI ένα public sector site με πολλούς IE6 users, μπορεί να χρησιμοποιήσει IE-only τεχνολογίες, tags, κτλ. που φυσικά δεν θα καταλαβαίνουν οι άλλοι μοντέρνοι browsers, αλλά αυτό δεν θα είναι πρόβλημα, γιατί πολύ απλά οι άλλοι browsers μπορεί να ανήκουν στην κατηγορία ημι-υποστηριζόμενων (semi-supported) browser! Το τραγικό είναι πως ένα τέτοιο site θα είναι απολύτως νόμιμο!

Ελπίζω να καταλάβουν γρήγορα την συγκεκριμένη γκάφα και να διορθώσουν γρήγορα το συγκεκριμένο κομμάτι των οδηγιών (δεν έχω προλάβει να τις διαβάσω αναλυτικά όλες). Προσωπικά δεν περίμενα οι βρετανοί να κάνουν μια τόσο μεγάλη γκάφα στις οδηγίες τους και με ανησυχεί μήπως και η συγκεκριμένη γκάφα περάσει και σε μελλοντικούς ευρωπαϊκούς κανόνες-οδηγίες… Επίσης δεν καταλαβαίνω γιατί μπήκαν σε τόση φασαρία έτσι ώστε να ξαναγράψουν, και μάλιστα χειρότερα, αυτά που ήδη υπάρχουν! Εάν ήθελαν πιο βρετανικούς κανόνες, ας έγραφαν ένα δικό τους section 508 όπως οι αμερικάνοι, και ας μην έμπλεκαν τα μπούτια τους με χίλια δύο πράγματα, οδηγίες, υπο-οδηγίες, στατιστικά, τεχνικές απαιτήσεις κτλ. κτλ. Προσωπικά θα συνεχίζω να δημιουργώ τα sites μου ακολουθώντας τις διεθνής οδηγίες και απλά ελπίζω οι κανόνες που θα ακολουθήσει η Ευρώπαική Ένωση να είναι σωστότερα γραμμένοι…

Progressive enhancement : Tsevdos.com sidebar

Το δεύτερο και ίσως αγαπημένο μου feature στο Whitepress theme, είναι η AJAX-powered, αλλά ταυτόχρονα accessible sidebar του! Την τεχνική την δανείστηκα από το blog jQuery for designers και πιο συγκεκριμένα από το post jQuery Tabs, και ο λόγος που την λάτρεψα είναι επειδή χρησιμοποιεί σωστά αυτό που ονομάζουμε progressive enhancement. Progressive enhancement με πολύ απλά λόγια σημαίνει πως ο χρήστης έστω και εάν δεν έχει την javascript ενεργοποιημένη στον browser, η sidebar και ολόκληρο το περιεχόμενο της θα εμφανίζεται κανονικά! Το μόνο που θα χάσει ο χρήστης σε αυτήν την περίπτωση είναι το AJAX-like εφέ που δημιουργεί η Javascript (και πιο συγκεκριμένα το jQuery), ενώ θα βλέπει και όλα τα tabs ανοιχτά, το ένα κάτω από το άλλο. Όπως μπορείτε να παρατηρήσετε και από τις 2 παρακάτω εικόνες, ο χρήστης με ενεργοποιημένη Javascript έχει περισσότερο ελεύθερο χώρο στην sidebar του, και μπορεί να επιλέξει ποιο tab θα είναι ενεργοποιημένο. Αντίθετα κάποιος χρήστης με απενεργοποιημένη Javascript ή screen reader απλά βλέπει κανονικά και στην σειρά όλο το περιεχόμενο της sidebar με την σειρά που εμφανίζεται στην markup!

Tsevdos.com with Javascript on
Η sidebar όπως εμφανίζεται σε browser που έχει ενεργοποιημένη την Javascript.
Tsevdos.com with Javascript off
Η sidebar όπως εμφανίζεται σε browser που δεν έχει ενεργοποιημένη την Javascript.

Η markup (XHTML)

Ας δούμε όμως πως μπορούμε να φτιάξουμε το συγκεκριμένο εφέ εύκολα και γρήγορα. Εν αρχή λοιπόν (όπως πάντα) η markup μας.


Όπως βλέπεται ένα div με το id sidebar, περιέχει μια unordered list (ul), με τρία list items (li), τα οποία στην ουσία λειτουργούν ως navigation list για τα τρία divs που ακολουθούν και θα περιέχουν το περιεχόμενο μας. Φυσικά η navigation list μπορεί να έχει περισσότερα links, αρκεί να υπάρχουν και τα ανάλογα divs περιεχομένου από κάτω. Αυτό ήταν, η markup είναι έτοιμη! Το μόνο που θα πρέπει να προσέξει κάποιος (θα εξηγήσω παρακάτω το γιατί), είναι πως σε περίπτωση που θέλει να προσθέσει επιπλέον ζευγάρια links και divs (για να έχει επιπλέον tabs και περιεχόμενο δηλαδή), θα πρέπει το link μέσα στο list item, να έχει για href attribute ακριβώς το ίδιο string με το id του div που θα προσθέσει. Όπως ήδη μπορείτε να δείτε, όλα τα links έχουν για href attribute τα id των div που θα εμφανίζουν.

H CSS

To styling (CSS) της συγκεκριμένης markup δεν παίζει κανέναν απολύτως ρόλο στον κώδικα μας (όλη η δουλειά γίνεται μέσω Javascript/jQuery), ωστόσο γι αυτούς που θέλουν να δημιουργήσουν κάτι στα γρήγορα, ας αντιγράψουν τον παρακάτω κώδικα, τον οποίο χρησιμοποιώ και στο παράδειγμα που μπορείτε να δείτε και φυσικά να κατεβάσετε!

* {
margin: 0;
padding: 0;
}

#sidebar {
width: 500px;
margin: 20px;
margin-bottom: 15px;
border-left: 1px solid #999;
}

#navigation {
list-style-type: none;
}

a:link, a:visited {
color: #fff;
background: #ccc;
padding: 1px 5px 0;
text-decoration: none;
font-weight: bold;
}

a:hover, a:active, a.selected {
color: #fff;
background: #999;
}

#navigation li {
list-style-type: none;
float: left;
border: 1px solid #999;
border-width: 1px 1px 0 0;
}

#sidebar div {
clear: left;
padding: 10px;
border: 1px solid #999;
border-width: 1px 1px 1px 0;
}

Και τέλος η Javascript (jQuery)

Και επιτέλους περνάμε στην καρδιά αυτού του tutorial, δηλαδή στην Javascript και το jQuery πιο συγκεκριμένα! Για τους ανυπόμονους, ο κώδικας είναι ο παρακάτω, ωστόσο καλό θα είναι να τον εξηγήσουμε και λίγο, γιατί πολλά πράγματα γίνονται, μέσα σε πολύ λίγες γραμμές κώδικα…



Στην πρώτη γραμμή λοιπόν, δηλώνουμε στην markup πως θα κάνουμε χρήση της jQuery library. Η συγκεκριμένη library (όπως και οι περισσότερες άλλωστε) λειτουργεί όταν το DOM (Document Object Model) είναι έτοιμο. Αυτό ακριβώς κάνει ο παρακάτω κώδικας. Μέσα του θα προσθέσουμε όλον το Javascript κώδικα ο οποίος με την βοήθεια και της βιβλιοθήκης θα δημιουργήσει το εφέ μας.

$(document).ready(function(){
...
});

Επιλέγουμε λοιπόν τα links (anchor elements) που βρίσκονται μέσα στην unordered list με id navigation, και τους προσθέτουμε ένα απλό click event. Με άλλα όταν γίνει click σε κάποιο link της λίστας, τότε ο κώδικας που βρίσκεται ανάμεσα στις αγκύλες ενεργοποιήται.

$('#sidebar #navigation li a').click(function() {
...
});

Και πάμε πλέον στο τι γίνεται όταν πατηθεί κάποιο από τα παραπάνω links. Αρχικά επιλέγουμε όλα τα divs της sidebar (#sidebar > div) και τα κρύβουμε (hide()). Ταυτόχρονα εμφανίζουμε το div (με ένα απλό fadeIn εφέ) το οποίο έχει id ίδια τιμή με το string της href attribute του link (hash). Για τον λόγο αυτό σας προειδοποίησα παραπάνω πως πρέπει να προσέξουμε πολύ στην markup μας αυτήν την μικρή λεπτομέρεια. Εάν δεν έχουν ίδια τιμή ο κώδικας απλά δεν παίζει… Για να το κάνω ακόμα πιο κατανοητό (για αυτούς που κάνουν τώρα τα πρώτα τους βήματα σε jQuery), ας υποθέσουμε πως πατήθηκε το link Section 1, το οποίο έχει για href attribute την τιμή “#first_div”. Μόλις γίνει click λοιπόν, το jQuery θα κρύψει όλα τα divs της sidebar, και θα επιλέξει το div το οποίο έχει για id την τιμή #first_div. Αυτό γίνεται επειδή το this.hash εκείνη την στιγμή παίρνει την τιμή #first_div. Μόλις ολοκληρωθεί και αυτό, απλά εμφανίζουμε με fade in το συγκεκριμένο div. Και όλα αυτά γίνονται μόλις σε 1 γραμμή κώδικα!

$('#sidebar > div').hide().filter(this.hash).fadeIn();

Ευτυχώς ο υπόλοιπος κώδικας είναι πολύ πιο κατανοητός και εύκολος. Στις παρακάτω 3 γραμμές απλά επιλέγουμε όλα τα links και τους αφαιρούμε (εάν έχουν, όμως πάντα ένα link θα έχει) την κλάση “selected”, η οποία και δίνει το ανάλογο style στο επιλεγμένο link. Τέλος προσθέτουμε στο link που έχει γίνει το click την κλάση “selected”, έτσι ώστε να φαίνεται πως είναι επιλεγμένο (highlighted), και δηλώνουμε στον browser να σταματήσει την default ενέργεια του click event (return false;), μιας και έχουμε πετύχει το εφέ που θέλουμε!

$('#sidebar #navigation li a').removeClass('selected');
$(this).addClass('selected');
return false;

Τέλος σε όλο αυτό το click event προσθέτουμε ένα από τα αγαπημένα μου χαρακτηριστικά που έχει το jQuery. Φιλτράρουμε το πρώτο element που έχει επιλεχθεί, δηλαδή το πρώτο link της λίστας μας, και κάνουμε click πάνω του, μέσω κώδικα! Έτσι όταν στο τέλος εμφανίζεται η σελίδα το πρώτο link (ή tab ή όπως αλλιώς θέλετε να το πείτε), θα είναι πάντα επιλεγμένο!!! Αυτό ήταν, είναι έτοιμο, δουλεύει και πάνω από όλα, είναι φιλικό προς όλους τους χρήστες! Δοκιμάστε να απενεργοποιήσετε την Javascript και θα δείτε πως θα συνεχίζει να δουλεύει χωρίς κανένα πρόβλημα, απλά θα χάσει λίγη από την μαγεία του…

.filter(':first').click();

Επίλογος

To jQuery είναι πραγματικά μια φανταστική Javascript library η οποία κάνει τα δύσκολα πράγματα απλά! Όπως βλέπεται μέσα σε μόλις 6-7 γραμμές κώδικα έχουμε ένα πολύ όμορφο και accessible αποτέλεσμα το οποίο μπορεί να χρησιμοποιηθεί παντού! Η δυνατότητα του να κάνεις εύκολα και γρήγορα αυτά που έχεις στο μυαλό σου, χωρίς να σε απασχολούν οι μικρολεπτομέρειες τις Javascript (οι οποίες πιστέψτε με είναι πολλές και ενοχλητικές), είναι αυτό που κάνει το jQuery να ξεχωρίζει από τις άλλες libraries. Τέλος για όσους θέλουν μια ακόμα πιο εύκολη και φυσικά accessible λύση καλό θα είναι να ρίξουν και μια ματιά στο UI Tabs το οποίο είναι ένα επίσημο plug-in για το jQuery και κάνει με πολύ λιγότερο κόπο αυτό που δημιουργήσαμε παραπάνω ()…

Accessibility test σε 10′ λεπτά

Είναι άπειρες οι φορές όπου φίλοι, γνωστοί ή ακόμα και άγνωστοι ζητάνε την γνώμη μου για το πόσο προσβάσιμο (accessible) είναι site τους. Οι περισσότεροι έχουν την αίσθηση πως εμείς (οι web designers/developers) είμαστε μάγοι ή έχουμε πολύ εξειδικευμένο εξοπλισμό και software για να κάνουμε κάτι τέτοιο. Στην πραγματικότητα το μόνο που χρειάζεται κάποιος, είναι ένας σύγχρονος browser (κατά προτίμηση Firefox με το web developer toolbar) και κάποιες εναλλακτικές ρυθμίσεις, έτσι ώστε να εντοπίσει γρήγορα τα διάφορα accessibility προβλήματα που πιθανόν να υπάρχουν. Στο παρακάτω post λοιπόν περιγράφω πολύ συνοπτικά πως μπορεί κάποιος, να κάνει ένα αξιόλογο web accessibility τεστ μέσα σε 10 μόλις λεπτά (όχι δεν σας κοροϊδεύω!). Για να μπορεί το post να διαβαστεί από όλους (και όχι μόνο από ειδικούς του χώρου), θα παρακάμψω την πολύ θεωρία πίσω από κάθε test, και θα εστιάσω την προσοχή στα παραδείγματα. Έχουμε και λέμε λοιπόν :

Απενεργοποιήστε τα images και δείτε πως φαίνεται το site σας χωρίς αυτά

Προσπαθείστε το site σας να δείχνει αξιοπρεπέστατο ακόμα και εάν δεν έχουν φορτωθεί τα γραφικά του (είτε γιατί ο χρήστης τα έχει απενεργοποιήσει, είτε επειδή κάποιο πρόβλημα στον server δεν τα αφήνει να κατέβουν, είτε επειδή ο χρήστης δεν έχει καλό bandwidth, κτλ.). Όποιος και να είναι ο λόγος το site σας θα πρέπει να δείχνει σωστά και χωρίς γραφικά. Απλό και κατανοητό νομίζω, και για τον λόγο αυτό δεν θα μακρηγορήσω περισσότερο, αλλά θα περάσω κατευθείαν σε 2 παραδείγματα.

Στο παρακάτω παράδειγμα λοιπόν, το blog του Γιάννη δεν “αλλοιώνεται” ούτε “χαλάει” όταν του απενεργοποιήσουμε τα images. Επίσης χρησιμοποιεί σωστά το alternative text περιγράφοντας τα γραφικά που δεν εμφανίζονται…

Porcupine blog - images on

Porcupine blog - images off

Αντιθέτως, το site Avopolis, δείχνει αρκετά άσχημο όταν απενεργοποιούμε τα images. Το χειρότερο από όλα είναι πως το κεντρικό μενού του site εξαφανίζετε, μιας και είναι όλο φτιαγμένο σε ένα image map!

Avopolis site - images on

Avopolis site - images off

Απενεργοποιείστε την Javascript

Ο κανόνας που ισχύει είναι αρκετά απλός : Δεν πρέπει να θεωρούμε πως ο χρήστης του site μας έχει την Javascript ενεργοποιημένη!

Στο blog το οποίο βρίσκεστε εάν απενεργοποιείστε την Javascript (η οποία χρησιμοποιείτε στην sidabar για τα διάφορα AJAX-like εφεδάκια), δεν θα χάσετε τίποτα από το περιεχόμενο του blog! Η τεχνική αυτή ονομάζεται Progressive enhancement, και το σκεπτικό πίσω από την τεχνική, είναι πως το site πρέπει να γίνεται σταδιακά πιο δυναμικό (interactive). Έτσι πρέπει πρώτα να έχουμε ένα καθαρό, σωστά δομημένο και σημασιολογικό (semantic) document (ή αλλιώς markup), μετά να τo εμπλουτίζουμε και να το παρουσιάσουμε κατάλληλα με τους ανάλογους styling κανόνες (CSS) και τέλος ότι extra interactivity θα θέλαμε να υπάρχει να κατασκευαστεί με σωστή χρήση της Javascript.

Tsevdos.com - Javascript on

Tsevdos.com - Javascript off

Αντίθετα στο site του Pop+Rock εάν δεν έχετε την Javascript ενεργοποιήμένη δεν δουλεύει το κεντρικό μενού του site! Το συγκεκριμένο λάθος προκαλεί και πολλά SEO προβλήματα που έχω αναφέρει σε παλιότερο post (Ποτέ μην χρησιμοποιείτε μενού φτιαγμένα από Flash ή Javascript).

Pop+Rock - Javascript on

Pop+Rock - Javascript off

Απενεργοποιείστε την CSS

Με αυτόν τον τρόπο θα καταλάβενετε πως φαίνεται πραγματικά το document σας, τόσο στους text-only browsers και στους screen readers, όσο και στα bots των μηχανών αναζήτησης! H παρακάτω εικόνα παρουσιάζει το blog μου, χωρίς καθόλου styles. Όπως παρατηρείτε, το document δεν έχει χάσει απολύτως τίποτα ούτε σε περιεχόμενο ούτε σε δομή, ενώ συνεχίζει να είναι προσβάσιμο σε όλους! Το μόνο που έχει χάσει είναι τα styles του, τα οποία του δίνουν την τελική μορφή του…

Tsevdos.com - CSS off

Αυξήστε το text-size από τον browser σας

Απλό αλλά σημαντικό τεστ. Απλά αυξήστε το text-size στον browser σας τουλάχιστον δύο φορές (πατώντας Ctrl + +). Εάν το site δεν αλλοιώνεται πολύ και γενικότερα το αποτέλεσμα είναι ικανοποιητικό τότε δεν υπάρχει κανένα πρόβλημα. Εάν το site παραμορφώνεται αρκετά, χάνεται κείμενο πίσω από άλλα elements, κτλ., τότε θα πρέπει να ξανασκεφτούμε κάποιες αποφάσεις που πήραμε κατά την δημιουργία του design μας…

Κάντε validate τον κώδικα σας

Σαν τελικό τεστ, και γενικότερα όποτε τελειώνετε κάποιο site ή template, όσο μεγάλο ή μικρό και να είναι, κάντε μια επίσκεψη στους (X)HTML και CSS validators, και διορθώστε τα προβλήματα που μπορεί να εμφανιστούν κατά το validation… Όσο πιο γρήγορα αποφασίσετε να το κάνετε, τόσο πιο εύκολα και γρήγορα θα επιλύσετε αυτά τα προβλήματα! Και μην ξεχνάτε, valid κώδικας σημαίνει πιο σταθερά και ποιοτικά site, τα οποία θα αντέχουν στον χρόνο!

Η παραπάνω διαδικασία θα σας βοηθήσει να εντοπίσετε πάρα πολύ γρήγορα σχεδόν όλα accessibility προβλήματα που μπορεί να έχει το site σας! Καθόλου άσχημα δηλαδή για τα μόλις 10 λεπτά χρόνου που θα ξοδέψετε! Από εκεί και πέρα μένει να επιλύσετε τα προβλήματα που εντοπίσατε, όπου φυσικά είναι και το δύσκολο αλλά απαραίτητο βήμα έτσι ώστε να κάνετε προσβάσιμο (accessible) το site σας. Ελπίζω τα παραδείγματα οπού ανέφερα να ήταν σαφή και κατανοητά, μιας και ο ελληνικός κυβερνοχώρος χρειάζεται αρκετή δουλειά ακόμα στο θέμα accessibility… Μείνετε συντονισμένοι λοιπόν για να κάνουμε το internet μια πιο σταθερή και λειτουργική πλατφόρμα!

Η απόλυτη λίστα web accessibility και usability υπηρεσιών

Το Virtual Hosting blog δημιούργησε την πιο ολοκληρωμένη λίστα δωρεάν web accessibility και usability υπηρεσιών που έχω βρει μέχρι τώρα! Το post είναι εξαιρετικό, με αρκετές λεπτομέρειες για την κάθε υπηρεσία, και είναι must για όλους όσους ασχολούνται σοβαρά με το web design. Ετοίμαζα και εγώ κάτι σχετικό, αλλά πλέον δεν υπάρχει λόγος να ξαναγράφω τα ίδια πράγματα…