Βέλτιστες πρακτικές για την προοδευτική βελτίωση του σχεδιασμού ιστοσελίδων

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

Προοδευτική βελτίωση είναι μια τέτοια ιδέα στο web design που στοχεύει να μειώσετε τα λάθη και παρέχει συνεπή εμπειρία χρήστη σε όλους τους τομείς. Η έννοια έχει τη δική της σελίδα Wikipedia που την εξηγεί ως μέθοδο πλήρως προσβάσιμο περιεχόμενο, καθιστώντας τις βελτιωμένες λειτουργίες μόνο όταν υποστηρίζονται από το πρόγραμμα περιήγησης.

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

1. Κατανόηση της Προοδευτικής Βελτίωσης

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

Αυτό είναι το αντίθετο της χαλαρής υποβάθμισης που περιλαμβάνει όλα τα χαρακτηριστικά από προεπιλογή, τότε υποβαθμίζεται όταν κάτι δεν λειτουργεί.

Η προοδευτική βελτίωση είναι καλύτερη για τη συνολική εμπειρία του χρήστη, επειδή στον πυρήνα της φορτώνει μόνο τα απαραίτητα στοιχεία. Κάθε πρόγραμμα περιήγησης στο web μπορεί να υποστηρίξει κείμενο (και συνήθως εικόνες). Χωρίς CSS αυτές οι πληροφορίες θα φαίνονται ήπια και άγευστες, αλλά θα είναι προσιτές.

Αυτό Λίστα εκτός Το άρθρο υποστηρίζει ότι είναι προοδευτική ενίσχυση περιεχομένου πρώτα με τα στυλ και τα δυναμικά στοιχεία που προστέθηκαν αργότερα. Το περιεχόμενο στη σημασιολογική HTML θα πρέπει να παραδοθεί πριν από οτιδήποτε άλλο.

Το προηγμένο CSS και το JavaScript που χρησιμοποιούμε σήμερα υποστηρίζονται ευρέως, αλλά αν θέλουμε να ακολουθήσουμε τις αρχές της προοδευτικής βελτίωσης, θα πρέπει να θεωρούνται πολυτελή.

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

Σημασιολογική σήμανση για όλο το περιεχόμενο
Οι χρήστες, προτιμήσεις του προγράμματος περιήγησης πρέπει να γίνεται σεβαστή
Το περιεχόμενο και η βασική λειτουργικότητα πρέπει να είναι διαθέσιμες σε όλους τους χρήστες
Το διακριτικό JavaScript είναι φορτωμένο μόνο σε περιβάλλοντα που το υποστηρίζουν

Οι τεχνολογικοί περιορισμοί στην ανάπτυξη front-end καθορίζονται κυρίως από τη συμβατότητα του προγράμματος περιήγησης. Η προοδευτική βελτίωση σας επαναφέρει στα βασικά στοιχεία που σκέφτονται για το πώς απλή ιστοσελίδα μπορεί να μοιάζει. Από εκεί, μπορείτε σχέδιο για πιο προηγμένα χαρακτηριστικά, όπως οι ιδιότητες CSS3.

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

2. Διαμονή σε φύλλα στυλ

Τα περισσότερα προγράμματα περιήγησης σήμερα υποστηρίζουν όλες τις βασικές ιδιότητες που χρειάζεστε. Αλλά το προχωρημένο CSS3 εξακολουθεί να αποτελεί πρόβλημα για τους παλαιούς χρήστες, και η προοδευτική βελτίωση προσφέρει μια λύση.

Αντί να ψάχνετε εναλλακτικές μεθόδους για να διατηρήσετε αυτά τα νέα χαρακτηριστικά, ανησυχήστε πρώτα με κατάλληλες δομές διάταξης.

Γράψτε σημασιολογική σήμανση HTML και CSS που λειτουργεί σε όσο το δυνατόν περισσότερους ενεργούς browsers (υποστήριξη για αρχαία προγράμματα περιήγησης όπως η υποστήριξη IE5 δεν είναι απαραίτητη).

Πάρτε για παράδειγμα αυτό το JSFiddle που χρησιμοποιεί πλωτήρες με δύο πλευρικές ράβδους (.σταθερός) και μια περιοχή περιεχομένου υγρού (.υγρό). Εάν διαγράψετε όλα τα CSS και επαναλάβετε τον κώδικα θα παρατηρήσετε ότι όλα στοιβάζονται ωραία με την πρώτη στήλη, μετά με τη δεύτερη και τέλος με την τελευταία.

Ορισμένοι προγραμματιστές προτιμούν να έχουν τη στήλη περιεχομένου (.υγρό) εμφανίζονται πρώτα στην HTML. Αυτό είναι όπου η προοδευτική ενίσχυση μπαίνει στο παιχνίδι, και οι εναλλακτικές λύσεις CSS γίνονται βιώσιμες.

Οι δύο κύριοι στόχοι της HTML σας είναι οι εξής:

Πλήρως σημασιολογική και έγκυρη κώδικας
ΕΝΑ συνεπή εμπειρία για όλους

Ο πιο απλός τρόπος για να επιτευχθούν αυτοί οι στόχοι είναι ξεκινήστε από το τίποτα και εργάζονται επάνω, όπως θα το συνιστούσαν οι περισσότεροι υποστηρικτές της προοδευτικής ενίσχυσης.

Αν ο κωδικός σας φαίνεται καλός με το CSS τόσο με απενεργοποιημένο όσο και με ενεργοποιημένο, τότε προσφέρει μια λογική λύση για όλους.

Αξίζει επίσης να εξεταστεί σε ποιο σημείο σταματάτε να υποστηρίζετε κάτι. Η Microsoft έχει ήδη αποβάλει σημαντική υποστήριξη για το IE6, οπότε οι χρήστες που εκτελούν το πρόγραμμα περιήγησης ενδέχεται να μην αξίζουν τον χρόνο σας.

Αλλά υπάρχει ακόμα μια μεγάλη ερώτηση: αν ένα πρόγραμμα περιήγησης δεν υποστηρίζει το μοντέρνο CSS μου, τι πρέπει να κάνω?

Εσείς απλά γράψτε κώδικα που λειτουργεί χωρίς το, και θεωρούν τη σύγχρονη CSS ως προοδευτική ενίσχυση. Αυτή είναι η ομορφιά της μεθοδολογίας προοδευτικής ενίσχυσης.

Δεν χρειάζεστε εναλλακτικές λύσεις, γιατί είστε βασικά υποθέτοντας ότι τίποτα δεν υποστηρίζεται από προεπιλογή.

Οι μέθοδοι προοδευτικής βελτίωσης αφορούν την αξιοποίηση του ιστότοπου ακόμη και σε περιπτώσεις που δεν υποστηρίζεται κάτι - αλλά εάν υποστηρίζεται, τόσο καλύτερα.

Πρέπει να εξετάσετε πώς το περιεχόμενο ουσιαστικά ρέει χωρίς CSS. Για παράδειγμα, όταν απενεργοποιώ το CSS στην ιστοσελίδα της Transmit, το περιεχόμενο εξακολουθεί να ρέει βιολογικά από τη σελίδα.

Ναι, είναι άσχημο και ναι, αισθάνεται σαν να χάσαμε είκοσι χρόνια προόδου ... αλλά λειτουργεί.

3. Χειρισμός JavaScript

Αξίζει να σημειωθεί ότι κάθε ζήτημα JavaScript στο οποίο μπορεί να εισέλθετε κατά τη διάρκεια της διαδικασίας ανάπτυξης είναι δύσκολο και μοναδικό. Όταν δημιουργείτε ένα νέο έργο με προοδευτική βελτίωση, θα πρέπει να απαριθμήσετε όλες τις απαιτούμενες λειτουργίες βάσει JS και να εξετάσετε πώς θα μπορούσαν λειτουργούν χωρίς JavaScript.

Αυτό θα απαιτήσει πολλές online έρευνα για να βρείτε έγκυρες λύσεις. Ο Aaron Gustafson έγραψε μια μεγάλη θέση στο blog με λύσεις σε διάφορα προβλήματα, όπως η αντικατάσταση του Ajax με μια μετα-ανανέωση για περιεχόμενο μέσα σε ένα iframe.

Επίσης, όταν δημιουργείτε καρτέλες JavaScript, είναι καλή ιδέα να χρησιμοποιήστε συνδέσεις αγκύρωσης με πραγματικές τιμές ταυτότητας. Με αυτόν τον τρόπο, όταν απενεργοποιείται η JavaScript, μπορείτε ακόμα να έχετε ορατές και προσβάσιμες καρτέλες με βάση την τιμή αγκύρωσης. Ο Aaron έγραψε ένα άλλο κομμάτι στην A List Apart που καλύπτει μια πιο γενική επισκόπηση του τρόπου με τον οποίο πρέπει να σκεφτείτε αυτά τα προβλήματα.

Ακολουθεί ένα άλλο παράδειγμα. Ας υποθέσουμε ότι έχετε έναν σύνδεσμο που φορτώνει δυναμικά το περιεχόμενο. ο href η τιμή είναι κενή, επειδή όλα φορτώνονται μέσω JavaScript με τη μέθοδο prevenDefault ().

Αντίθετα, θα ήταν καλό να ρυθμίσετε το href ιδιοκτησία στο τοποθετήστε μια άλλη σελίδα όπου το περιεχόμενο θα μπορούσε να φορτωθεί φυσικά, αλλά ο επισκέπτης βλέπει τη σελίδα μόνο όταν είναι απενεργοποιημένη η JavaScript.

Η προοδευτική βελτίωση είναι κάτι παραπάνω από JavaScript, αλλά με την ανάπτυξη ιστού να προχωράει κάθε χρόνο, δεν υπάρχει αμφιβολία ότι το JavaScript διαδραματίζει σημαντικό ρόλο.

Λειτουργεί υπό την προϋπόθεση ότι όλα έχουν απενεργοποιηθεί, και αυξάνονται από εκεί. Αυτό μπορεί να περιλαμβάνει προβλήματα με ενσωματωμένα γραφικά στοιχεία που είναι εκτός ελέγχου, το