Έχετε έναν " ανταποκρινόμενο ιστότοπο "; Αυτός είναι ένας ιστότοπος με διάταξη που αλλάζει με βάση τη συσκευή του επισκέπτη και το μέγεθος της οθόνης. Ο υπεύθυνος σχεδιασμός ιστοσελίδων αποτελεί πλέον μια βέλτιστη πρακτική στον κλάδο. Συνιστάται από την Google και βρίσκεται σε εκατομμύρια ιστότοπους στον ιστό. Υπάρχει, ωστόσο, μεγάλη διαφορά μεταξύ της ύπαρξης ενός ιστότοπου που απλώς "ταιριάζει" σε διαφορετικά μεγέθη οθόνης και έχοντας έναν ιστότοπο που ανταποκρίνεται πραγματικά.
Συνηθίζω να βλέπω τις εταιρείες να επανασχεδιάζουν τον ιστοχώρο τους και να σπρώχνουν ένα δελτίο τύπου που θα επεκτείνει τις αρετές του νέου φιλικού προς το κινητό σχεδιασμού τους. Όταν επισκέπτομαι τους ιστότοπους αυτούς, αυτό που βρίσκω συχνά είναι μια διάταξη που πράγματι κλιμακώνεται και μεταβάλλεται ώστε να ταιριάζει σε διαφορετικές οθόνες, αλλά αυτό συμβαίνει μέχρι που παίρνουν την ιδέα της ανταπόκρισης. Αυτό δεν αρκεί. Ένας πραγματικά ανταποκρινόμενος ιστότοπος κάνει περισσότερο από απλή κλίμακα για να ταιριάζει σε μια μικρότερη ή μεγαλύτερη οθόνη. Σε αυτούς τους ιστότοπους, θα βρείτε επίσης τα ακόλουθα σημαντικά χαρακτηριστικά.
1. Βελτιστοποιημένη απόδοση
Κανείς δεν αρέσει να περιμένει να φορτωθεί ένας ιστότοπος και όταν κάποιος χρησιμοποιεί μια κινητή συσκευή με μια σύνδεση που μπορεί να είναι λιγότερο από ιδανική, η ανάγκη για γρήγορη φόρτωση ενός ιστότοπου είναι ακόμα πιο σημαντική.
Πώς λοιπόν βελτιστοποιείτε την απόδοση του ιστότοπού σας; Αν ξεκινάτε με έναν νέο ιστότοπο στο πλαίσιο ενός νέου σχεδιασμού, τότε θα πρέπει να κάνετε ένα σημείο δημιουργίας προϋπολογισμού απόδοσης ως μέρος αυτού του έργου. Εάν εργάζεστε με έναν υπάρχοντα ιστότοπο και δεν ξεκινάτε από το μηδέν, το πρώτο βήμα είναι να ελέγξετε την απόδοση του ιστότοπού σας για να δείτε πού βρίσκεστε σήμερα.
Αφού έχετε μια βασική γραμμή όπου ο ιστότοπός σας βρίσκεται σε κατάσταση απόδοσης, μπορείτε να αρχίσετε να κάνετε τις απαραίτητες βελτιώσεις για να αυξήσετε την ταχύτητα λήψης. Ένα εξαιρετικό μέρος για να ξεκινήσετε είναι πιθανώς με τις εικόνες του ιστότοπού σας. Οι υπερβολικά μεγάλες εικόνες αποτελούν τον υπαινιγμό # 1 όταν πρόκειται για αργούς χώρους φόρτωσης, οπότε η βελτιστοποίηση των εικόνων σας για διανομή μέσω ιστού μπορεί πραγματικά να βοηθήσει το site σας από άποψη απόδοσης.
Η πραγματικότητα είναι ότι η βελτιωμένη απόδοση του ιστότοπου και οι γρήγορες ταχύτητες λήψης είναι ένα όφελος που όλοι οι επισκέπτες θα εκτιμήσουν. Εξάλλου, κανείς δεν έχει παραπονεθεί ποτέ ότι ένας ιστότοπος έχει φορτωθεί "πολύ γρήγορα", αλλά εάν ένας ιστότοπος χρειαστεί υπερβολικά μεγάλο χρονικό διάστημα για να φορτωθεί, θα απομακρύνει απόλυτα τους ανθρώπους, ανεξάρτητα αν ανταποκρίνεται στην οθόνη τους ή όχι.
2. Ιεραρχία έξυπνου περιεχομένου
Όταν ένας ιστότοπος εμφανίζεται σε μια μεγάλη οθόνη, είστε σε θέση να θέσει περιεχόμενο με διάφορους τρόπους, λόγω της ουσιαστικής οθόνης ακινήτων που είναι διαθέσιμα. Μπορείτε να προσαρμόσετε τα σημαντικά μηνύματα και τις εικόνες, τις ενημερώσεις ειδήσεων, τις πληροφορίες συμβάντων και την πλοήγηση στον ιστότοπο με την ίδια στιγμή ταυτόχρονα. Αυτό επιτρέπει σε έναν επισκέπτη να ανιχνεύει εύκολα και γρήγορα το περιεχόμενο ολόκληρης της σελίδας και να αποφασίζει τι είναι σημαντικό για αυτούς.
Αυτό το σενάριο αλλάζει πολύ δραματικά όταν παίρνετε αυτό το σχέδιο τοποθεσίας και το μετατρέπετε σε συσκευές μικρής οθόνης, όπως ένα κινητό τηλέφωνο. Ξαφνικά εργάζεστε με ένα κλάσμα της οθόνης ακινήτων που είχατε πριν. Αυτό σημαίνει ότι θα πρέπει να αποφασίσετε τι θα εμφανιστεί πρώτα στον ιστότοπο, τι θα ακολουθήσει κλπ. Αντί να βλέπετε όλα αμέσως, πιθανόν να έχετε μόνο το χώρο για να δείξετε ένα ή δύο πράγματα (ένα από τα οποία είναι πιθανό να πλοηγηθείτε). Αυτό σημαίνει ότι πρέπει να γίνουν αποφάσεις ιεραρχίας. Δυστυχώς, αυτό που καθορίζει συχνά τι έρχεται πρώτα στην οθόνη, και στη συνέχεια το δεύτερο, κλπ. Είναι ο τρόπος με τον οποίο κωδικοποιείται η ίδια η σελίδα. Είναι πιο εύκολο, κατά την οικοδόμηση ενός ανταποκρινόμενου ιστότοπου, να εμφανίζεται ό, τι είναι πρώτα στον κώδικα πρώτα στην οθόνη, ακολουθούμενο από το δεύτερο στοιχείο στον κώδικα και ούτω καθεξής. Δυστυχώς, αυτό που μπορεί να είναι πιο σημαντικό σε μια συσκευή μπορεί να μην είναι τόσο κρίσιμος σε ένα άλλο. Ένας πραγματικά υπεύθυνος ιστότοπος κατανοεί ότι η ιεραρχία του περιεχομένου θα πρέπει να αλλάζει ανάλογα με τις διαφορετικές καταστάσεις και θα πρέπει να είναι έξυπνος για το τι εμφανίζει εκεί.
Οι βελτιώσεις στις τεχνικές διάταξης του CSS, συμπεριλαμβανομένης της διάταξης CSS Grid Layout, του Flexbox και άλλων, επιτρέπουν στους σχεδιαστές ιστοσελίδων και στους προγραμματιστές περισσότερες επιλογές όσον αφορά την ευφυή τοποθέτηση περιεχομένου, αντί να περιορίζονται από την ακριβή σειρά περιοχών περιεχομένου στον κώδικα HTML. Η αξιοποίηση αυτών των νέων τεχνικών διάταξης θα γίνει ακόμη πιο σημαντική καθώς το τοπίο της συσκευής και οι ανάγκες των χρηστών του ιστότοπού μας συνεχίζουν να εξελίσσονται.
3. Εμπειρίες που λαμβάνουν υπόψη τα πλεονεκτήματα και τις αδυναμίες μιας συσκευής
Παραμένοντας στο θέμα των συσκευών - κάθε συσκευή που κάποιος μπορεί να χρησιμοποιήσει για να επισκεφθεί τον ιστότοπό σας έχει τόσο δυνατά όσο και αδύνατα σημεία που είναι εγγενή σε αυτήν την πλατφόρμα. Ένας πολύ καλός χώρος ανταποκρίνεται στις δυνατότητες και τους περιορισμούς των διαφόρων συσκευών και τις χρησιμοποιεί για να δημιουργήσει προσαρμοσμένες εμπειρίες που ταιριάζουν καλύτερα σε ό, τι συσκευή που μπορεί να χρησιμοποιεί ο επισκέπτης εκείνη τη στιγμή.
Για παράδειγμα, ένα κινητό τηλέφωνο περιλαμβάνει μια σειρά από δυνατότητες που δεν θα βρείτε σε έναν παραδοσιακό επιτραπέζιο υπολογιστή. Το GPS είναι ένα παράδειγμα κινητό-κεντρικό χαρακτηριστικό (ναι, μπορείτε να πάρετε γενικές πληροφορίες θέσης σε επιτραπέζιους υπολογιστές επίσης, αλλά συσκευή GPS είναι πολύ πιο ακριβής). Ο ιστότοπός σας μπορεί να χρησιμοποιεί πληροφορίες GPS για να στέλνει έξυπνα ένα άτομο πολύ λεπτομερείς και συγκεκριμένες πληροφορίες κατεύθυνσης βήμα προς βήμα ή ειδικές προσφορές με βάση ακριβώς πού είναι αυτή τη στιγμή.
Ένα άλλο παράδειγμα αυτού του κύριου στην πράξη θα είναι ένας ιστότοπος που καταλαβαίνει τι είδους οθόνη προβολής χρησιμοποιείτε και στέλνει εικόνες που ταιριάζουν καλύτερα σε αυτή την οθόνη. Αν έχετε οθόνη με υψηλή πυκνότητα εικονοστοιχείων, ενδέχεται να αποφασίσετε να στείλετε εικόνες υψηλότερης ποιότητας σε αυτήν την οθόνη. Αυτές οι ίδιες εικόνες θα ήταν άσκοπη σε μια λιγότερο ικανή οθόνη, ωστόσο, και η επιπλέον ποιότητα θα χαθεί ενώ το επιπλέον μέγεθος αρχείου θα κατεβάζετο χωρίς πραγματικό λόγο.
Οι πραγματικά εξαιρετικά ανταποκρινόμενες τοποθεσίες θεωρούν όλη την εμπειρία του χρήστη και εργάζονται για να προσαρμόσουν την εμπειρία που βασίζεται όχι μόνο σε έναν τύπο συσκευής ή το μέγεθος της οθόνης του, αλλά και σε άλλες σημαντικές πτυχές του υλικού.
4. Περιεχόμενο με Πλαίσιο
Αρχικά, ο σχεδιασμός ιστοσελίδων που αποκρίθηκε έλαβε το όνομά του λόγω της ιδέας της διάταξης ενός ιστοτόπου να ανταποκρίνεται σε διαφορετικά μεγέθη οθόνης, αλλά μπορείτε να απαντήσετε σε πολύ περισσότερα από ό, τι μόνο το μέγεθος της οθόνης. Βασιζόμενη στο προηγούμενο παράδειγμα χρήσης δυνατοτήτων και αδυναμιών μιας συσκευής, θα μπορούσατε να χρησιμοποιήσετε αυτά, καθώς και άλλα δεδομένα όπως η ημερομηνία και η ώρα, για να προσαρμόσετε πραγματικά μια εμπειρία ιστοτόπου.
Φανταστείτε μια ιστοσελίδα για μια μεγάλη εκδήλωση εμπορικής έκθεσης. Ενώ ένας ανταποκρινόμενος ιστότοπος θα αλλάξει τη διάταξη των σελίδων του ιστότοπου σε κλίμακα με διαφορετικές οθόνες, μπορείτε επίσης να χρησιμοποιήσετε την ημερομηνία για να προσδιορίσετε ποιο περιεχόμενο είναι πιο σημαντικό για εμφάνιση. Αν είναι η χρονική περίοδος πριν από την εκδήλωση, πιθανότατα θέλετε να εμφανίσετε εμφανώς πληροφορίες εγγραφής. Εάν, ωστόσο, το γεγονός συμβαίνει στην πραγματικότητα αυτή τη στιγμή, η εγγραφή μπορεί να μην είναι το πιο σημαντικό περιεχόμενο. Αντ 'αυτού, μπορείτε να αποφασίσετε ότι το χρονοδιάγραμμα των γεγονότων της ημέρας είναι πιο κρίσιμο, καθώς είναι πιο συναφές με τις άμεσες ανάγκες αυτού του χρήστη.
Λαμβάνοντας τα πράγματα ένα βήμα παραπέρα, θα μπορούσατε να αξιοποιήσετε το GPS μιας συσκευής για να προσδιορίσετε πού είναι στην πραγματικότητα στην εμπορική έκθεση. Θα μπορούσατε να τους δώσετε διαδραστικό περιεχόμενο με βάση την τοποθεσία τους, δείχνοντάς τους κοντινούς θαλάμους ή περιόδους για να ξεκινήσετε.
5. Προσβασιμότητα
Το τελευταίο παράδειγμα που θα εξετάσουμε για τον τρόπο με τον οποίο ένας ιστότοπος μπορεί πραγματικά να ανταποκριθεί στις ανάγκες ενός επισκέπτη είναι να σκεφτεί την προσβασιμότητα του ιστότοπου . Οι ιστότοποι θα πρέπει να μπορούν να χρησιμοποιούνται από όσο το δυνατόν περισσότερους ανθρώπους, συμπεριλαμβανομένων εκείνων με αναπηρία. Ο ιστότοπός σας θα πρέπει να μπορεί να χρησιμοποιηθεί από κάποιον που χρειάζεται αναγνώστη οθόνης ή άλλο βοηθητικό λογισμικό για πρόσβαση στο περιεχόμενό του. Με αυτό τον τρόπο, ο ιστότοπός σας ανταποκρίνεται στις ανάγκες του, επειδή έχετε εξασφαλίσει ότι η εμπειρία, αν και διαφορετική για τους επισκέπτες με ειδικές ανάγκες, εξακολουθεί να είναι κατάλληλη.
Αντιδρώντας σε όσο το δυνατόν περισσότερα σημεία δεδομένων και όχι μόνο σε μέγεθος οθόνης, ένας ιστότοπος μπορεί να είναι πολύ περισσότερο από απλώς "φιλικός προς το κινητό". Μπορεί να γίνει μια πραγματικά απόκριση με κάθε έννοια της φράσης.