Σε αυτό το άρθρο κάνουμε μια αντιπαράθεση του tableless design vs table design και τα πλεονεκτήματα του Tabless design. Ξεκινώντας λοιπόν πρέπει να κατανοήσουμε τον κάθε τύπο web design. Λέγοντας web design εννοούμε την σχεδίαση ενός ιστοχώρου.
Τι είναι Table Design
Μέχρι πριν μερικά χρόνια τα οι ιστοσελίδες κατασκευάζονταν με την χρήση πινάκων. Ο πίνακας ως δομή αποτελούμενη από γραμμές και στήλες υλοποιείται στην HTML, Hyper Text Markup Language, με την ετικέτα <table> και τις υπόλοιπες υπό-ετικέτες αυτής.
Παράδειγμα Table Design
Για έναν απλό πίνακα 2Χ2 χρειάζεται να χρησιμοποιηθεί ο ακόλουθος html κώδικας προκειμένου να υλοποιηθεί ο πίνακας:
|
<table> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table> |
Αυτό που κάνει ο παραπάνω κώδικας είναι να χρησιμοποιεί μια υπό-ετικέτα <tr> για να ορίσει την κάθε γραμμή του πίνακα. Για κάθε μια γραμμή του, χρησιμοποιείται η υπό-ετικέτα <td> η οποία ορίζει το κάθε ένα κελί της συγκεκριμένης γραμμής του πίνακα.
Βλέπουμε λοιπόν ότι για έναν πολύ απλό πίνακα την ποσότητα του κώδικα ο οποίος ορίζεται ως το βασικό δομικό στοιχείο της σελίδας. Οι σελίδες λοιπόν, φτιάχνονταν με πίνακες και ενσωματωμένους σε αυτούς άλλους πίνακες συν το περιεχόμενο το οποίο σε αρκετές περιπτώσεις ήταν τεράστιο σε όγκο. Το πλεονέκτημα αυτής της μεθόδου είναι ότι τηρούταν μια συγκεκριμένη διάταξη σε όλες τις σελίδες με αποτέλεσμα το συνεπές περιεχόμενο. Με την πρόοδο της τεχνολογίας όμως οι σελίδες έγιναν ποιο δυναμικές με αποτέλεσμα το table design να μην είναι επαρκές.
Τι είναι Tableless Design
Για να κατανοήσουμε τι είναι και τα πλεονεκτήματα του tableless design πρέπει να εξηγήσουμε την τεχνολογία που υπάρχει πίσω από αυτό και δεν είναι άλλη από τα CSS.
Σχετικά με τα CSS
Το CSS σημαίνει Cascading Style Sheets δηλαδή διαδοχικά φύλλα στυλ και είναι μια τεχνολογία η οποία εμφανίστηκε το 1996 από το World Wide Web Consortium. Ο σκοπός της τεχνολογίας αυτής είναι ο έλεγχος της παρουσίασης των περιεχομένων μιας ιστοσελίδας όπως είναι τα χρώματα και η διάταξη τους. Η τεχνολογία αυτή διαφέρει από την HTML η οποία απλά ορίζει το περιεχόμενο της σελίδας.
Τα CSS λοιπόν είναι κανόνες μορφοποίησης οι οποίοι υπάρχουν σε ένα ξεχωριστό αρχείο με κατάληξη .css. Το αρχείο αυτό καλείται από μια ή περισσότερες σελίδες. Η κάθε σελίδα η οποία θα το καλέσει, θα χρησιμοποιήσει τους αντίστοιχους κανόνες ανάλογα με τα δομικά στοιχεία τα οποία χρησιμοποιεί. Με τον τρόπο θα οριστεί αυτόματα η διάταξη των αντικειμένων της από τους κανόνες CSS οι οποίοι υπάρχουν στο κληθέν .css αρχείο.
Παράδειγμα Tabless Design
Η ύπαρξη των css δεν απαγορεύει την χρήση πινάκων. Η προαιρετική χρήση τους απλά περιορίζεται εντός του βασικού html δομικού στοιχείου το οποίο χρησιμοποιείται από τα css, δηλαδή το <div> το οποίο βγαίνει από την λέξη division. Ένας πίνακας δηλαδή ορίζεται μόνο εφόσον χρειάζεται εντός του div.
|
<div class="myclass"> <table> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table> </div> |
Σε αυτό το παράδειγμα περιορίζεται η χρήση του πίνακα μέσα σε ένα div html στοιχείο. Αυτό με την σειρά του καλεί μια κλάση η οποία έχει οριστεί στο css αρχείο και οι οποία κλάση μπορεί να περιέχει μια σειρά μορφοποιήσεων του div.
Τα 9 Πλεονεκτήματα του Tableless Design
Ας δούμε τα δούμε λοιπόν.
1. Το tableless design επιτρέπει στους web designers να φτιάχνουν ιστοσελίδες με σύνθετες και ευέλικτες διατάξεις των στοιχείων της ιστοσελίδας.
2. Σελίδες με tableless design είναι ποιο φιλικές στις μηχανές αναζήτησης. Ο λόγος είναι ότι απαιτείται λιγότερος κώδικας και συνεπώς είναι ευκολότερο για τα web crawlers να σαρώσουν την σελίδα.
3. Η ομοιομορφία και η οπτική συνέπεια μεταξύ των σελίδων είναι πολύ ευκολότερη. Στο table design μεταβάλλοντας κάθε σελίδα ξεχωριστά υπάρχει ο κίνδυνος να χαθεί η ομοιομορφία αυτή.
4. Στο tableless design μια αλλαγή σε κανόνες στο κληθέν css αρχείο, τροποποιεί αυτόματα όλα τα html στοιχεία τα οποία σχετίζονται με αυτούς. Δεν χρειάζεται δηλαδή να μεταβάλλουμε τα html στοιχεία της σελίδας.
5. Η επανασχεδίαση ενός ιστοχώρου είναι μια διαδικασία γρηγορότερη και με λιγότερο κόστος ακριβώς λόγο της ύπαρξης των ξεχωριστών αρχείων css. Τα αρχεία αυτά διατηρούν τον ορισμό της διάταξης του ιστοχώρου ξεχωριστά από το περιεχόμενο των ιστοσελίδων γεγονός που κάνει την όποια τροποποίηση εύκολη διαδικασία.
6. Το table design απαιτούσε την χρήση εικόνων σε ποίκιλα μεγέθη ώστε να οριστεί η διάταξη της κάθε σελίδας. Αυτό σήμαινε μεγάλο όγκο δεδομένων και δυσκολία στις όποιες αλλαγές. Στο tableless design τα divs μπορούν εύκολα να τροποποιηθούν και να μεταβληθεί η διάταξη τους. Αυτό κάνει τις αλλαγές στο site ευκολότερες.
7. Ένα ακόμα πλεονέκτημα του tableless design είναι ο γρηγορότερος χρόνος καταφόρτωσης, download, της ιστοσελίδας. Αυτό επιτυγχάνεται απλά με την χρήση λιγότερου κώδικα στην ιστοσελίδα.
8. Ιστοσελίδες με tableless design γίνονται προσιτές από άτομα με προβλήματα όρασης. Αυτό συμβαίνει γιατί τέτοιες σελίδες είναι αναγνώσιμες από τους αναγνώστες οθόνης, screen readers, οι οποίες μεταφράζουν το περιεχόμενο της σελίδας σε φωνή.
9. Στο tableless design ο web designer μπορεί να συνδέσει πολλά εξωτερικά αρχεία css, κάθε ένα από τα οποία μπορεί να απευθύνεται σε διαφορετικό τύπο οθόνης. Αυτό σημαίνει ότι ένας ιστοχώρος μπορεί να προσαρμόζεται σε κάθε τύπο συσκευής. Ένα τέτοιο site ονομάζεται responsive.
Επίλογος
Σε αυτό το άρθρο είδαμε την σύγκριση μεταξύ tableless design και table design για να καταλήξουμε στα 9 πλεονεκτήματα του tableless design.