CSS3 Multi-column layout (Το μαύρο πρόβατο)

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

Η πρώτη σκέψη όμως όπως γνωρίζετε είναι περισσότερο ενθουσιώδης παρά ορθολογική. Η ερώτηση της δεύτερης και της τρίτης σκέψης είναι αν στην οθόνη μας οι πολλές στήλες θα είναι το ίδιο ευχάριστος τρόπος να διαβάζουμε ένα κείμενο;

Το A List Apart πριν 3 χρόνια είχε παρουσιάσει το CSS3 Multi-column layout, και μαζί με αυτό είχε παρουσιάσει και το αντίστοιχο script για την επίτευξη συμβατότητας με browser που δεν υποστηρίζουν τον νέο κανόνα. Οι μόνοι browser που υποστηρίζουν — περιορισμένα — το module είναι οι «βασισμένοι σε Mozilla» και ο Safari 3.

Γιατί το Multi-Column Module είναι Αμφιλεγόμενο

Ας μαζέψουμε κάποια δεδομένα για να οδηγηθούμε σε κάποιο συμπέρασμα ως προς τις δυσκολίες που αντιμετωπίζουν τα «πολύστηλα» κείμενα.

  • Το ιδανικό μέγεθος μιας γραμμής είναι περίπου 12 λέξεις. Παραπάνω ή παρακάτω κάνει το διάβασμα λιγότερο αποδοτικό. Αν και το πλάτος της μέσης σελίδας στο Web έχει αυξηθεί σε 960px, θα είναι αρκετό για να τηρηθεί το όριο λέξεων; Με το ζόρι στις 2 στήλες και με την προϋπόθεση ότι δεν θα υπάρχει sidebar.
  • Τί θα γίνει με το κάθετο scrolling; Αν το κείμενο δεν χωράει στο ύψος της οθόνης, τότε για κάθε στήλη θα πρέπει να κάνουμε scroll-down και μετά scroll-up ξανά. Οπότε λογικά όλα τα multi-column κείμενα θα πρέπει να έχουν μέγιστο ύψος τα 700px περίπου, αν κρίνουμε από τις νέες αναλύσεις. Εδώ ψηφίζω καθαρά τα παλιό αγαπημένο scroll-down.
  • Έρχεται ένας έξυπνος και μου λέει: «Θα κάνουμε τις σελίδες με fixed-height και το Scrolling θα είναι οριζόντιο ». Θα του απαντήσω ότι αρχικά αυτό είναι έξυπνο αλλά δεν θα γίνει mainstream για πολλούς λόγους. Θα το σκεφτόμουν πάντως αν είχα ένα οριζόντιο wheel στο mouse μου.

Επειδή έχω καλή πίστη όμως πιστεύω — παρά τα παραπάνω — ότι ένας καλός developer-designer θα μπορέσει να χρησιμοποιήσει το Multi-Column Module σωστά και αποδοτικά σε περιπτώσεις όπου θα έχει νόημα. Απλά όπως πολλοί γνωρίζετε αυτός ο καλός άνθρωπος δεν αποτελεί τον μέσο επαγγελματία και έτσι η κατάχρηση είναι ένα από τα αναμενόμενα αποτελέσματα. Γι’ αυτό το λόγο δεν έχει αγκαλιαστεί ιδιαίτερα αυτό το module.

Μια Ματιά στο Τεχνικό Κομμάτι

Πάμε τώρα — για πολύ λίγο — στο τεχνικό της υπόθεσης. Δεν θα μπω στα βαθιά μιας και αυτό το κείμενο προσεγγίζει θεωρητικά το θέμα. Οι στήλες θα ορίζονται είτε από το πλάτος τους (column-width) και θα παράγεται ο αριθμός στηλών που χωράει αυτόματα, είτε από τον αριθμό τους(column-count) και το πλάτος τους θα ορίζεται επίσης αυτόματα. Το διάστημα ανάμεσα στις στήλες θα ορίζεται από το column-gap. Η παρακάτω εικόνα θα κάνει πιο ξεκάθαρες τις παραπάνω εντολές.

image

Για μια ολοκληρωμένη εικόνα του module επισκεφθείτε την σελίδα του W3C.

Συμπέρασμα

Διαβάζοντας πολλά κείμενα σε Blog, οι βασικές αντιδράσεις για το νέο module είναι δύο. Οι μεν είναι χαρούμενοι που αυξάνονται οι δυνατότητες στο design μιας σελίδας και είναι έτοιμοι για δημιουργία και πειραματισμό. Οι πιο σκεπτικοί, αλλιώς οι δε, προβληματίζονται για τα θέματα usability / readability και έτσι κοιτάνε με μισό μάτι το νέο module. Προσωπικά είμαι με τους δεύτερους. Δεν μπορώ να καταλάβω πως θα βελτιώσει το web ένα ριψοκίνδυνο module όπως αυτό. Το μόνο που μπορώ να φανταστώ είναι πως θα φαίνονται σε μερικά χρόνια οι σελίδες των online περιοδικών.

 

author

Αλέξανδρος Λίγγρης

O Αλέξανδρος Λίγγρης, γνωστός και ως Lexx, είναι web developer στην kudos και θα βρείτε περισσότερα για τη δουλειά του στο προσωπικό του site.

guest
Θέλεις το επόμενο κείμενο να είναι το δικό σου;

ΜΑΘΕ ΠΕΡΙΣΣΟΤΕΡΑ

{ Προσθέστε το σχόλιό σας }

Commenting is not available in this weblog entry.