Η προοδευτική βελτίωση είναι μια τεχνική που βοηθά να διασφαλίσετε ότι το λογισμικό σας είναι ισχυρό και προσβάσιμο. Ακολουθώντας το, μπορείτε να διασφαλίσετε ότι όσο το δυνατόν περισσότερα άτομα θα μπορούν να χρησιμοποιήσουν τον ιστότοπο ή την εφαρμογή σας.
Ξεκινήστε με μια ελάχιστα βιώσιμη έκδοση του web design σας και βεβαιωθείτε ότι λειτουργεί όπως απαιτείται. Στη συνέχεια, επιστρώστε επιπλέον λειτουργικότητα και στυλ, ώστε να μπορούν να επωφεληθούν τα πιο ικανά προγράμματα περιήγησης.
Πώς Λειτουργεί η Προοδευτική Ενίσχυση;
Λόγω της εξαιρετικά κατανεμημένης φύσης του, ο ιστός χρειαζόταν πάντα να υποστηρίζει μια τεράστια γκάμα συσκευών. Από βασικούς υπολογιστές της δεκαετίας του 1970 έως ικανούς σύγχρονους επιτραπέζιους υπολογιστές, tablet και τηλεοράσεις, οι ιστότοποι έχουν προχωρήσει πολύ.
Στην καρδιά όλων είναι η HTML. Δεδομένου ότι είναι μια «συγχωρητική» γλώσσα, τα προγράμματα περιήγησης θα εμφανίζουν την HTML όσο καλά την κατανοούν. Συνήθως, θα αγνοήσουν οτιδήποτε δεν υποστηρίζουν.
Αυτό μπορεί να είναι χρήσιμο από την άποψη ενός προγραμματιστή, αλλά μπορεί να προκαλέσει προβλήματα στους αναγνώστες. Εάν ο ιστότοπός σας εμφανίζει μια κενή σελίδα όταν η JavaScript δεν μπορεί να εκτελεστεί, οι χρήστες δεν έχουν άλλη επιλογή από το να την εγκαταλείψουν. Η προοδευτική βελτίωση σάς ενθαρρύνει να παρέχετε βασικό περιεχόμενο σε όλους όσους έχουν πρόσβαση σε αυτό και στη συνέχεια να βελτιώσετε αυτό το περιεχόμενο χρησιμοποιώντας κατάλληλες τεχνολογίες, όπως CSS και JavaScript.
Μια προοδευτική προσέγγιση στο styling
Η CSS είναι η γλώσσα του φύλλου στυλ του Ιστού που μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε χρώματα, γραμματοσειρές, διατάξεις, και πολλές άλλες οπτικές πτυχές των σελίδων σας. Μπορείτε να το χρησιμοποιήσετε για να βελτιώσετε την προεπιλεγμένη εμφάνιση του περιεχομένου σας, αλλά αυτό δεν σημαίνει ότι δεν πρέπει να δομήσετε σωστά το περιεχόμενό σας εξαρχής.
Πάρτε μια γραμμή μενού, για παράδειγμα. μπορείτε να το δομήσετε ως εξής:
<nav>
<a href="/register">κανω ΕΓΓΡΑΦΗ</ένα>
<a href="/login">Σύνδεση</ένα>
<a href="/about">σχετικά με εμάς</ένα>
<a href="/contact">Επικοινωνία</ένα>
</nav>Για να εμφανίσετε ένα οριζόντιο μενού, με κάθε σύνδεσμο να μοιάζει λίγο με ένα κουμπί, μπορείτε να το διαμορφώσετε χρησιμοποιώντας αυτό το CSS:
nav a {
κείμενο-διακόσμηση: κανένα;
οθόνη: inline-block;
υλικό παραγεμίσματος: 0.5 εκ 1em;
περίγραμμα: 1px στερεό;
ακτίνα περιγράμματος: 8 εικονοστοιχεία;
margin-right: 1em;
}Όταν το πρόγραμμα περιήγησης το αποδίδει πλήρως, θα πρέπει να μοιάζει με το εξής:
Ωστόσο, εάν το CSS δεν είναι διαθέσιμο, το μενού θα εμφανιστεί ως εξής:
Παρατηρήστε πώς αυτό δεν μοιάζει καθόλου με μενού και δεν είναι πολύ εύκολο στη χρήση αφού οι σύνδεσμοι συγχωνεύονται σε έναν.
Μπορείτε να χρησιμοποιήσετε μια εναλλακτική δομή για να κάνετε το σχέδιο πιο στιβαρό:
<nav>
<ul>
<li><a href="/register">κανω ΕΓΓΡΑΦΗ</ένα></li>
<li><a href="/login">Σύνδεση</ένα></li>
<li><a href="/about">σχετικά με εμάς</ένα></li>
<li><a href="/contact">Επικοινωνία</ένα></li>
</ul>
</nav>Δεδομένου ότι αυτή η σήμανση χρησιμοποιεί ένα μη ταξινομημένο στοιχείο λίστας, είναι πολύ πιο χρησιμοποιήσιμο απουσία CSS:
Σημειώστε πόσο πιο εύκολο είναι να σαρώσετε και να κατανοήσετε γρήγορα αυτούς τους συνδέσμους, ακόμη και με το προεπιλεγμένο στυλ του προγράμματος περιήγησης. Αυτή η προσέγγιση θα σας ζητήσει να προσθέσετε λίγο περισσότερο CSS, για να παρακάμψετε τα προεπιλεγμένα στυλ λίστας:
navli { απεικόνιση: στη γραμμή; }Παρόλο που η τελική δομή και το στυλ είναι πιο περίπλοκα και οι περισσότεροι χρήστες θα έχουν ενεργοποιημένο το CSS, αυτή η προσέγγιση είναι πιο στιβαρή. Θα είναι πιο φιλικό προς τους χρήστες αναγνωστών οθόνης και προγράμματα περιήγησης που βασίζονται σε τερματικά.
Εισαγωγή της λειτουργικότητας σταδιακά
Η προοδευτική βελτίωση είναι πιο σημαντική όταν πρόκειται για τη λειτουργία ενός ιστότοπου ή μιας εφαρμογής. Η αρχή δηλώνει ότι, ανεξάρτητα από το τι, ο ιστότοπός σας πρέπει να λειτουργεί όσο το δυνατόν καλύτερα.
Στην πράξη, αυτό ισχύει συνήθως για JavaScript. Εάν εισαγάγετε συμπεριφορά από την πλευρά του πελάτη, θα πρέπει να στρώσει λειτουργικότητα πάνω από έναν ιστότοπο ή μια εφαρμογή που λειτουργεί ήδη χωρίς αυτήν.
Μια πολύ συνηθισμένη περίπτωση είναι ο χειρισμός συμβάντων. Φανταστείτε μια σελίδα που φορτώνει επιπλέον περιεχόμενο κατά παραγγελία. Αυτό θα μπορούσε να είναι μια χειροκίνητη άπειρη κύλιση, μια ενσωμάτωση σχολίου ή κάτι παρόμοιο.
<σώμα>
<!--... -->
<κουμπί onclick="φόρτωσε περισσότερα();">
Φορτώνω Περισσότερο
</button>
<!--... -->
</body>του κουμπιού στο κλικ Το χαρακτηριστικό περιέχει κώδικα JavaScript που θα εκτελείται όταν κάποιος κάνει κλικ στο κουμπί. Ωστόσο, εάν η JavaScript δεν είναι διαθέσιμη, αυτό το κουμπί δεν θα κάνει τίποτα. Ένας χρήστης θα μείνει κάνοντας κλικ σε αυτό το κουμπί χωρίς σχόλια και καμία ιδέα για το τι πάει στραβά. Μια πολύ καλύτερη προσέγγιση χρησιμοποιεί προοδευτική βελτίωση:
<σώμα>
<!--... -->
<ένα id="p2" href="/page/2">Σελίδα 2</ένα><γραφή>
λειτουργίαφόρτωσε περισσότερα() { κονσόλα.κούτσουρο("!"); }
/* Αντικατάσταση συνδέσμου με κουμπί */
var σύνδεσμος = έγγραφο.getElementById("p2");
var κουμπί = έγγραφο.createElement("κουμπί");
button.innerText = "Φόρτωσε περισσότερα";
button.addEventListener("Κάντε κλικ", φόρτωσε περισσότερα);
έγγραφο.σώμα.insertBefore(κουμπί, Σύνδεσμος);
Σύνδεσμος.parentNode.removeChild(Σύνδεσμος);
</script>
</body>
Αυτός ο κώδικας μετατρέπει τη βασική σύνδεση σε ένα κουμπί με ένα πρόγραμμα χειρισμού συμβάντων. Εισάγοντας την εξάρτηση από JavaScript χρησιμοποιώντας την ίδια τη JavaScript, μπορείτε να είστε σίγουροι ότι θα λειτουργήσει. Και υπάρχει μια λειτουργική προεπιλεγμένη συμπεριφορά που λειτουργεί, με τη μορφή του τυπικού συνδέσμου προς /page/2.
Είναι όντως απαραίτητη η προοδευτική ενίσχυση;
Ο καθένας χρησιμοποιεί προγράμματα περιήγησης με CSS και JavaScript, οπότε γιατί να ασχοληθείτε με μια κατάσταση που δεν προκύπτει; Λοιπόν, υπάρχουν αρκετοί λόγοι για τους οποίους πρέπει να υιοθετήσετε την καλή πρακτική της προοδευτικής βελτίωσης.
- Πρώτον, δεν χρησιμοποιούν όλοι όσοι επισκέπτονται τον ιστότοπό σας πρόγραμμα περιήγησης. Μερικοί επισκέπτες θα είναι bot, όπως ένας ευρετηριαστής μηχανής αναζήτησης, και μπορεί να μην κατανοούν καθόλου το CSS ή το JavaScript.
- Δεύτερον, δεν θα χρησιμοποιεί κάθε άτομο που επισκέπτεται τον ιστότοπό σας πρόγραμμα περιήγησης με CSS και JavaScript. Ορισμένοι επισκέπτες ενδέχεται να χρησιμοποιούν ένα πρόγραμμα περιήγησης που βασίζεται σε τερματικό, το οποίο εμφανίζει απλό κείμενο με ελάχιστη μορφοποίηση. Άλλοι μπορεί να χρησιμοποιούν πρόγραμμα ανάγνωσης οθόνης.
- Τρίτον, ακόμα κι αν ένα πρόγραμμα περιήγησης υποστηρίζει CSS και JavaScript, τα πράγματα πάνε στραβά. Ένας κατεστραμμένος σύνδεσμος ή μια κακή σύνδεση δικτύου μπορεί να οδηγήσει σε έλλειψη αρχείου .css ή .js. Ένα σφάλμα στο JavaScript μπορεί να προκαλέσει τη μη εκτέλεση άλλου κώδικα.
- Τέλος, ορισμένοι επισκέπτες ενδέχεται να αποφασίσουν ενεργά να απενεργοποιήσουν το CSS ή το JavaScript. Μπορεί να το κάνουν λόγω ανησυχιών σχετικά με το απόρρητο ή επειδή βρίσκονται σε αργή σύνδεση ή σύνδεση πληρωμής ανά χρήση.
Μια προοδευτική νοοτροπία κάνει θαύματα
Πάνω απ 'όλα, η προοδευτική βελτίωση σάς ενθαρρύνει να υιοθετήσετε μια προσέγγιση με προτεραιότητα το περιεχόμενο. Το περιεχόμενο είναι ο βασιλιάς, επομένως το κείμενο και οι εικόνες σας θα πρέπει να είναι πάντα διαθέσιμα, για όλους, ανεξάρτητα από το εάν έχουν πρόσβαση στον ιστότοπό σας.
Δίνοντας σε όλους τους αναγνώστες την καλύτερη δυνατή εμπειρία και στη συνέχεια κάνοντας την ακόμα καλύτερη για όσους μπορούν να επωφεληθούν, μπορείτε να έχετε το καλύτερο από όλους τους κόσμους. Η προοδευτική βελτίωση είναι μόνο ένα βασικό συστατικό της καλής πρακτικής προσβασιμότητας και χρηστικότητας.
