Δημιουργία websites με elastic layout
Γιάννης Κωνσταντακόπουλος, στις 26 November 2008 · CSS ·
Στην αιώνια μάχη αν πρέπει το layout ενός website να είναι fixed (δηλαδή να καταλαμβάνει συγκεκριμένο πλάτος στην οθόνη) ή liquid (να καταλαμβάνει όλη την οθόνη) υπάρχει ένας ακόμα παίκτης που συχνά ξεχνάμε, το elastic layout.
Τι είναι το elastic layout θα το δούμε σε πολύ λίγο. Ας κάνουμε πρώτα εύκολο το διαχωρισμό μεταξύ fixed και liquid.
Fixed vs. liquid layout
Το fixed layout είναι το πιο συνηθισμένο μοντέλο. Καταλαμβάνει συγκεκριμένο πλάτος στην οθόνη, συνήθως 960px, ώστε να φαίνεται σωστά σε όλες τις συνηθισμένες αναλύσεις οθόνης. Παράδειγμα fixed layout είναι αυτό το site. Το καταλαβαίνει κάποιος με δυο εύκολους τρόπους:
- αν μικρύνει αρκετά το μέγεθος του browser του θα δει ότι από ένα σημείο και μετά ότι τα περιεχόμενα δε χωράνε σε αυτό, ενώ ταυτόχρονα το πλάτος παραμένει σταθερό
- αν πατήσει στο πληκτρολόγιο του Ctrl+ ή Ctrl- θα δει ότι μεγαλώνουν ή μικραίνουν τα γράμματα, χωρίς όμως να αυξάνεται ή να μειώνεται το πλάτος της γραμμής
Το liquid layout τώρα, αναλαμβάνει να καλύψει όλο το διαθέσιμο χώρο του browser όποιο μέγεθος κι αν έχει αυτός. Ένα παράδειγμα liquid layout είναι το molly.com της σπουδαίας advocate των Web Standards, Molly Holzschlag.
Το liquid layout θεωρείται αρκετά μη βολικό και δε θα ασχοληθούμε και ιδαίτερα μαζί του.
Elastic layout
Το elastic layout έχει το χαρακτηριστικό ότι αυξομειώνει το μέγεθός του ανάλογα με το μέγεθος των γραμμάτων. Έτσι, πατώντας Ctrl+ το μέγεθος όλου του layout αυξάνει. Αντίστοιχα για το Ctrl-. Παράδειγμα elastic layout είναι το (δικό μου website) porcupine colors.
Όταν λοιπόν κάποιος πατήσει Ctrl+ σε ένα fixed layout το πλάτος του δεν αυξάνει, έτσι οι λέξεις του κειμένου σπρώχνονται προς τα κάτω, καθώς το μήκος της γραμμής παραμένει σταθερό.
Δοκιμάστε το ίδιο στο elastic layout. Το μήκος της γραμμής αλλάζει κι όσο κείμενο χωρούσε σε μια γραμμή πριν από το Ctrl+ το ίδιο χωράει και μετά.
Πρόκειται για σημαντική διαφορά. Πια δεν είναι το πλάτος αυτό που καθορίζει τα πράγματα, αλλά το μέγεθος του κειμένου.
Το elastic layout θεωρείται ιδανικό για την ανάγνωση κειμένου. Το μεγάλο του μειονέκτημα είναι ότι όταν ένα website έχει πολύ και ασύμμετρο φωτογραφικό υλικό, το design παραμορφώνεται γιατί δεν μπορεί μια φωτογραφία να κάνει αντίστοιχο stretch. (Για την ακρίβεια και γι' αυτό υπάρχει λύση, αλλά είναι αρκετά περίπλοκη για να χρησιμοποιείται σε καθημερινή βάση.)
Το CSS του elastic layout
Ξεχάστε τα pixels
Για τη δημιουργία του elastic layout ο designer πρέπει να ξεφύγει από τη λογική της μέτρησης αποστάσεων με px. Στη θέση τους έρχονται τα em.
Ένα πολύ γρήγορο ταξίδι στον κόσμο των em: Ο όρος προφέρεται "εμ" και προέρχεται από το αντίστοιχο γράμμα της λατινικής αλφαβήτας "Μ". Γεννήθηκε στα παλιά τυπογραφεία και ορίζει το πλάτος του γράμματος "M", το οποίο είναι και το πιο φαρδύ στην αλφαβήτα.
Στα τυπογραφεία λοιπόν αφού έδιναν στο πλάτος του "Μ" μια συγκεκριμένη τιμή π.χ. 10 χιλιοστά, μπορούσαν με βάση αυτό να ορίσουν και όλα τα υπόλοιπα γράμματα ώστε να υπάρχει μια αρμονία σε όλη τη γραμματοσειρά.
Άρα, το em είναι μια σχετική τιμή, μια τιμή που δεν έχει απόλυτο μέγεθος όπως τα px. Συνεπώς, το πρώτο πράγμα που πρέπει ο designer να γράψει στο CSS του είναι καθορίσει τη σχέση em και px.
Τι σημαίνει όμως "καθορίζω τη σχέση em και px" και γιατί να το κάνω αυτό;
Hands on code
Όταν ο designer γνωρίζει ότι π.χ. το 1em αντιστοιχεί σε 10px τότε θα ξέρει πως να ορίσει π.χ. το default πλάτος του layout του. Κατά συνέπεια, αν εγώ πω ότι θέλω το default width να είναι 960px, ξέρω ότι αυτά αντιστοιχούν σε 96em.
Κρατάμε ότι θέλουμε να πετύχουμε την αναλογία 1em:10px, γιατί το 10 είναι βολικός αριθμός.
Το επόμενο βήμα είναι να οριστεί ο συσχετισμός. Με δεδομένο ότι οι σύγχρονοι browsers δίνουν μια default τιμή στο μέγεθος των γραμμάτων ίση με 16 pixels, θα πρέπει να βρεθεί η αντιστοιχία. Πόσο % είναι η σχέση em και px;
Διαιρώντας το 10 με το 16 το αποτέλεσμα που προκύπτει είναι 62,5%.
Εδώ τελειώνουν οι υπολογισμοί. Ας λερώσουμε τα χέρια μας με λίγο κώδικα.
Το πρώτο πράγμα που πρέπει να γραφτεί στο CSS είναι η παραπάνω αναλογία.
Από εδώ και πέρα, όποια τιμή δίνω σε em είναι ίση με *10 σε px.
Αν χρειάζομαι να κατασκευάσω ένα δίστηλο layout με ένα header κι ένα footer με default πλάτος τα 960px, το CSS μου θα ήταν κάπως έτσι:
Όπως φαίνεται δηλαδή, στην ουσία αντιμετωπίζω το layout σαν να πρόκειται για px.
Αντίστοιχα για την τυπογραφία κάποιοι κανόνες θα μπορούσαν να είναι:
Αυτό είναι το γενικό σκεπτικό πίσω από το elastic layout. Από το σημείο αυτό και μετά, τα πράγματα είναι ανοιχτά για τον designer να διαμορφώσει το website του όπως αυτός θέλει.
Σωστές πρακτικές & Παγίδες
Αποστάσεις
Είπαμε ότι ξεχνάμε τα px, αλλά μερικές φορές καλό είναι να τα θυμόμαστε. Πότε; Όταν χρειαζόμαστε να καθορίσουμε τις αποστάσεις του κειμένου δεξιά κι αριστερά της σελίδας. Αν λοιπόν στο τελευταίο παράδειγμα θέλω τα headings μου να απέχουν 20px από αριστερά και γράψω:
Αυτό θα κάνει το h1 να απέχει όχι 20, αλλά 1.8*2*10=36px και το h2 1.4*2*10=28px. Αυτό συμβαίνει γιατί η νέα δήλωση του font-size επικαλύπτει την αρχική, ότι δηλαδή 1em=10px. Έτσι, όχι μόνο δεν πετυχαίνω τα 20px απόστασης από αριστερά που ήθελα, αλλά τα headings απέχουν διαφορετική απόσταση από το άκρο της σελίδας.
Ο σωστός κώδικας για να πετύχω αυτό που θέλω είναι:
Σε αντίθεση όμως με τις αποστάσεις δεξιά κι αριστερά, οι αποστάσεις από πάνω προς τα κάτω και ιδιαίτερα το line-height πρέπει να δηλώνονται σε em, γιατί όταν ένα κείμενο στηθεί σωστά σε επίπεδο τυπογραφίας, κάθε Ctrl+ και Ctrl- διατηρεί την αρμονία σε αυτό.
Εναλλακτική λύση του παραπάνω είναι να δηλώσω σε em το padding μέσα σε ένα block όπως π.χ. το left-col. Δεν τη συστήνω όμως, παρά μόνο σε πολύ οργανωτικούς CSS developers που έχουν ανά πάσα στιγμή εικόνα του CSS στο μυαλό τους και μάλιστα αριθμητικά.
Nested ορισμοί σε μέγεθος γραμματοσειράς
Κάτι ακόμα που πρέπει να προσεχθεί είναι ο διπλός ορισμός στο μέγεθος του font. Όταν το μέγεθος ενός element π.χ. h1 οριστεί και σε ένα block και ξεχωριστά, περίεργα πράγματα συμβαίνουν. Παράδειγμα:
Αν θέλω το h1 μέσα στο header να έχει μέγεθος 18px και γράψω τον παραπάνω κώδικα, τότε αυτό που θα προκύψει είναι απρόβλεπτο και σίγουρα όχι αυτό που ήθελα. Ο σωστός τρόπος είναι να μη δηλώσω μέσα στο header το μέγεθος του κειμένου. Δηλαδή:
Συνοψίζοντας
Το elastic layout είναι ελαφρά πιο δύστροπο σε σχέση με το fixed ή ακόμα και το liquid layout. Το βρίσκω όμως πολύ πιο αρμονικό και τελικά πιο χρήσιμο για τις περιπτώσεις όπου αξίζει να χρησιμοποιηθεί.
Θα το σύστηνα σε ανθρώπους που έχουν απόλυτο έλεγχο του site που διαχειρίζονται. Όταν υπάρχει πιθανότητα να επέμβει στον κώδικα και δεύτερος άνθρωπος, τότε το πιο πιθανό είναι σε κάποια σελίδα να σπάσει το design και να προκύψουν άσχημα αποτελέσματα.
Σε κάθε περίπτωση πάντως, είναι ένα ισχυρό όπλο στη φαρέτρα του designer που δεν έχουμε την πολυτέλεια να μην το έχουμε ανάμεσα στις εναλλακτικές μας λύσεις.
Γιάννης Κωνσταντακόπουλος
Σχεδιάζει κι αναπτύσσει websites και γράφει κείμενα για το Web. Στο τέλος, μιλάει για όλα αυτά, με στόχο το Web να είναι χρήσιμo, εκτός από όμορφo. Είναι μέλος του ILG, που ανήκει στο Web Standards Project. Θα τον βρείτε στο porcupine colors.
