Το CSS είναι ο καλύτερος τρόπος για να δημιουργήσετε σχέδια ιστοσελίδων
Η μάθηση για να γράψετε CSS layouts μπορεί να είναι δύσκολη, ειδικά εάν είστε εξοικειωμένοι με τη χρήση πινάκων για να δημιουργήσετε φανταχτερά σχέδια ιστοσελίδας. Αλλά ενώ το HTML5 επιτρέπει πίνακες για διάταξη, δεν είναι καλή ιδέα.
Οι πίνακες δεν είναι προσβάσιμοι
Ακριβώς όπως οι μηχανές αναζήτησης, οι περισσότεροι αναγνώστες οθόνης διαβάζουν ιστοσελίδες με τη σειρά που εμφανίζονται στο HTML. Και πίνακες μπορεί να είναι πολύ δύσκολο για τους αναγνώστες οθόνης να αναλύσουν. Αυτό συμβαίνει επειδή το περιεχόμενο σε μια διάταξη πίνακα, ενώ είναι γραμμικό, δεν έχει πάντα νόημα όταν διαβάζεται από αριστερά προς τα δεξιά και από πάνω προς τα κάτω. Επιπλέον, με ένθετα τραπέζια και διάφορα διαστήματα στα κελιά του τραπεζιού μπορεί να γίνει πολύ δύσκολη η κατανόηση της σελίδας.
Αυτός είναι ο λόγος που η προδιαγραφή HTML5 συνιστά εναντίον πινάκων για τη διάταξη και γιατί το HTML 4.01 δεν το επιτρέπει. Οι προσβάσιμες ιστοσελίδες επιτρέπουν σε περισσότερους ανθρώπους να τις χρησιμοποιούν και αποτελούν το σήμα ενός επαγγελματία σχεδιαστή.
Με το CSS, μπορείτε να ορίσετε μια ενότητα ως ανήκουσα στην αριστερή πλευρά της σελίδας, αλλά να την τοποθετήσετε τελευταία στο HTML. Στη συνέχεια, οι αναγνώστες οθόνης και οι μηχανές αναζήτησης θα διαβάσουν πρώτα τα σημαντικά μέρη (το περιεχόμενο) και τα λιγότερο σημαντικά τμήματα (πλοήγηση) τελευταία.
Οι πίνακες είναι δύσκολοι
Ακόμα κι αν δημιουργήσετε ένα τραπέζι με έναν επεξεργαστή ιστού, οι ιστοσελίδες σας θα εξακολουθούν να είναι πολύ περίπλοκες και δύσκολο να διατηρηθούν. Εκτός από τα πιο απλά σχέδια ιστοσελίδας, οι περισσότεροι πίνακες διάταξης απαιτούν τη χρήση πολλών και χαρακτηριστικών και ενσωματωμένων πινάκων.
Η κατασκευή του τραπέζι μπορεί να φαίνεται εύκολη ενώ το κάνετε, αλλά στη συνέχεια πρέπει να το διατηρήσετε. Έξι μήνες κάτω από τη γραμμή μπορεί να μην είναι τόσο εύκολο να θυμηθείτε γιατί ένθεσα τα τραπέζια ή πόσες κυψέλες ήταν στη σειρά και ούτω καθεξής. Επιπλέον, αν διατηρείτε ιστοσελίδες ως μέλος μιας ομάδας, πρέπει να εξηγήσετε σε κάθε άτομο πώς λειτουργούν τα τραπέζια ή να περιμένουν να πάρουν επιπλέον χρόνο όταν πρέπει να κάνουν αλλαγές.
Το CSS μπορεί να είναι περίπλοκο, αλλά διατηρεί την παρουσίαση ξεχωριστή από την HTML και καθιστά πολύ πιο εύκολη τη συντήρησή της μακροπρόθεσμα. Επιπλέον, με τη διάταξη CSS μπορείτε να γράψετε ένα αρχείο CSS και να σχεδιάσετε όλες τις σελίδες σας να φαίνονται με αυτόν τον τρόπο. Και όταν θέλετε να αλλάξετε τη διάταξη του ιστότοπού σας, απλώς αλλάζετε ένα αρχείο CSS και ολόκληρο το site chnges - χωρίς να περνάτε κάθε σελίδα μία κάθε φορά για να ενημερώσετε τους πίνακες για να ενημερώσετε τη διάταξη.
Οι πίνακες είναι άκαμπτοι
Αν και είναι δυνατό να δημιουργήσετε πίνακες με ποσοστιαία πλάτη, είναι συχνά πιο αργά για φόρτωση και μπορεί να αλλάξει δραματικά τον τρόπο εμφάνισής της. Αλλά αν χρησιμοποιείτε συγκεκριμένα πλάτη για τους πίνακες σας, καταλήγετε σε μια πολύ άκαμπτη διάταξη που δεν θα φανεί καλή σε οθόνες μεγέθους διαφορετικών από τις δικές σας.
Η δημιουργία εύκαμπτων σχεδίων που φαίνονται καλά σε πολλές οθόνες, προγράμματα περιήγησης και αναλύσεις είναι σχετικά εύκολη. Στην πραγματικότητα, με ερωτήματα μέσων CSS, μπορείτε να δημιουργήσετε ξεχωριστά σχέδια για διαφορετικές οθόνες μεγέθους.
Οι πίνακες που έχουν τοποθετηθεί τοποθετούνται αργότερα από το CSS για τον ίδιο σχεδιασμό
Ο πιο συνηθισμένος τρόπος για να δημιουργήσετε φανταχτερά σχέδια με τραπέζια είναι να "φωλιάζετε" τους πίνακες. Αυτό σημαίνει ότι ένα (ή περισσότερα) τραπέζι τοποθετείται μέσα σε ένα άλλο. Όσο περισσότεροι πίνακες είναι ενσωματωμένοι, τόσο περισσότερο θα χρειαστεί για το πρόγραμμα περιήγησης στο Web να προβάλει τη σελίδα.
Στις περισσότερες περιπτώσεις, μια διάταξη πίνακα χρησιμοποιεί περισσότερους χαρακτήρες για να δημιουργήσει από ένα σχέδιο CSS. Και λιγότεροι χαρακτήρες σημαίνει λιγότερη λήψη.
Οι πίνακες μπορούν να βλάψουν τη βελτιστοποίηση μηχανών αναζήτησης
Η πιο συνηθισμένη διάταξη του πίνακα έχει μια γραμμή πλοήγησης στην αριστερή πλευρά της σελίδας και το κύριο περιεχόμενο στα δεξιά. Όταν χρησιμοποιείτε πίνακες, αυτό (γενικά) απαιτεί το πρώτο περιεχόμενο που εμφανίζεται στην HTML να είναι η αριστερή γραμμή πλοήγησης. Οι μηχανές αναζήτησης κατηγοριοποιούν σελίδες με βάση το περιεχόμενο και πολλοί κινητήρες καθορίζουν ότι το περιεχόμενο που εμφανίζεται στο επάνω μέρος της σελίδας είναι πιο σημαντικό από ό, τι άλλο περιεχόμενο. Έτσι, μια σελίδα με αριστερή πλοήγηση πρώτα, φαίνεται να έχει περιεχόμενο που είναι λιγότερο σημαντικό από την πλοήγηση.
Χρησιμοποιώντας το CSS, μπορείτε να τοποθετήσετε το σημαντικό περιεχόμενο πρώτα στην HTML σας και στη συνέχεια να χρησιμοποιήσετε το CSS για να προσδιορίσετε πού πρέπει να τοποθετηθεί στο σχέδιο. Αυτό σημαίνει ότι οι μηχανές αναζήτησης θα δουν πρώτα το σημαντικό περιεχόμενο, ακόμα και αν το σχέδιο το τοποθετεί κάτω στη σελίδα.
Οι πίνακες δεν εκτυπώνονται πάντα καλά
Πολλά σχέδια τραπεζιού δεν εκτυπώνονται καλά επειδή είναι απλά πολύ φαρδιά για τον εκτυπωτή. Έτσι, για να τα καταστήσετε κατάλληλα, τα προγράμματα περιήγησης θα μειώσουν τα τραπέζια και θα εκτυπώσουν τις παρακάτω ενότητες, οδηγώντας σε πολύ διαφορετικές σελίδες. Μερικές φορές καταλήγετε σε σελίδες που φαίνονται εντάξει, αλλά δεν υπάρχει ολόκληρη η δεξιά πλευρά. Άλλες σελίδες θα εκτυπώνουν τμήματα σε διάφορα φύλλα.
Με το CSS μπορείτε να δημιουργήσετε ένα ξεχωριστό φύλλο στυλ μόνο για την εκτύπωση της σελίδας.
Οι πίνακες για τη διάταξη δεν είναι έγκυροι στο HTML 4.01
Η προδιαγραφή HTML 4 αναφέρει: "Οι πίνακες δεν πρέπει να χρησιμοποιούνται καθαρά ως μέσο για τη διαμόρφωση περιεχομένου εγγράφων, καθώς αυτό μπορεί να παρουσιάσει προβλήματα κατά την απόδοση σε μη οπτικά μέσα".
Επομένως, εάν θέλετε να γράψετε έγκυρο HTML 4.01, δεν μπορείτε να χρησιμοποιήσετε πίνακες για διάταξη. Θα πρέπει να χρησιμοποιείτε πίνακες μόνο για πίνακες δεδομένων. Τα δεδομένα σε μορφή πίνακα γενικά μοιάζουν με κάτι που μπορείτε να εμφανίσετε σε ένα υπολογιστικό φύλλο ή, ενδεχομένως, σε μια βάση δεδομένων.
Αλλά HTML5 άλλαξε τους κανόνες και τώρα οι πίνακες για τη διάταξη, ενώ δεν συνιστάται, είναι τώρα έγκυρο HTML. Η προδιαγραφή HTML5 δηλώνει: "Οι πίνακες δεν πρέπει να χρησιμοποιούνται ως βοήθημα διάταξης."
Επειδή οι πίνακες για τη διάταξη είναι δύσκολο για τους αναγνώστες οθόνης να διαφοροποιηθούν, όπως αναφέρω παραπάνω.
Η χρήση του CSS για τη θέση και τη διάταξη των σελίδων σας είναι ο μόνος έγκυρος τρόπος HTML 4.01 για να δημιουργήσετε τα σχέδια που χρησιμοποιήσατε για τη χρήση πινάκων. Και το HTML5 συνιστά επίσης αυτή τη μέθοδο επίσης.
Οι πίνακες για τη διάταξη μπορεί να επηρεάσουν τις προοπτικές εργασίας σας
Καθώς όλο και περισσότεροι νέοι σχεδιαστές μαθαίνουν το HTML και το CSS, οι δεξιότητές σας στην κατασκευή των πινάκων των τραπεζιών θα είναι όλο και λιγότερο απαιτητικές. Ναι, είναι αλήθεια ότι οι πελάτες δεν σας λένε συνήθως την ακριβή τεχνολογία που πρέπει να χρησιμοποιήσετε για να δημιουργήσετε τις ιστοσελίδες τους. Αλλά σας ζητούν πράγματα όπως:
- Προσβάσιμες ιστοσελίδες: τα σχέδια που μπορούν να προβληθούν από αναγνώστες οθόνης υπόκεινται σε εντολή από πολλές χώρες και οι επιχειρήσεις βρίσκουν προσβασιμότητα ολοένα και πιο σημαντικό καθημερινά.
- Διατηρητέες ιστοσελίδες: σχέδια που μπορούν να λάβουν μαζί τους, ακόμη και αν δεν πρόκειται να τα διατηρήσετε στο μέλλον.
- Ευέλικτα σχέδια: σχέδια που λειτουργούν σε πολλά προγράμματα περιήγησης, αναλύσεις και συσκευές.
- Γρήγορη λήψη σελίδων: η ταχύτητα γίνεται όλο και πιο σημαντική, ακόμη και στο SEO.
- Εκτυπώσιμα σχέδια: σελίδες που εκτυπώνονται χωρίς ειδικά σενάρια ή επιπλέον σελίδες.
Εάν δεν μπορείτε να παραδώσετε ό, τι ζητούν οι πελάτες, θα σταματήσουν να έρχονται σε σας για σχέδια, ίσως όχι σήμερα, αλλά ίσως το επόμενο έτος ή το επόμενο έτος. Μπορείτε πραγματικά να αντέξετε οικονομικά να αφήσετε την επιχείρησή σας να υποφέρει επειδή δεν είστε διατεθειμένοι να αρχίσετε να μαθαίνετε μια τεχνική που έχει χρησιμοποιηθεί από τα τέλη της δεκαετίας του 1990;
Το Ηθικό: Μάθετε να χρησιμοποιείτε το CSS
Το CSS μπορεί να είναι δύσκολο να μάθει, αλλά αξίζει τον κόπο. Μην κρατάτε τις δεξιότητές σας από τη στασιμότητα. Μάθετε το CSS και δημιουργείτε τις ιστοσελίδες σας με τον τρόπο που προορίζονταν να χτιστούν - με CSS για διάταξη.