Συγκρίνοντας δύο διαφορετικές προσεγγίσεις στο σχεδιασμό ιστοσελίδων πολλαπλών συσκευών
Ανταποκρινόμενος και προσαρμοστικός σχεδιασμός ιστοσελίδων είναι και οι δύο μέθοδοι για τη δημιουργία ιστοσελίδων φιλικών προς πολλές συσκευές που λειτουργούν καλά σε διάφορα μεγέθη οθόνης. Παρότι το Google ανταποκρίνεται στο σχεδιασμό ιστοσελίδων και είναι η πιο δημοφιλής από τις δύο προσεγγίσεις, και οι δύο αυτές μέθοδοι σχεδιασμού ιστοσελίδων πολλαπλών συσκευών έχουν τα πλεονεκτήματα και τις αδυναμίες τους.
Ας ρίξουμε μια ματιά στις διαφορές μεταξύ του προσαρμοστικού και προσαρμοστικού σχεδιασμού ιστοσελίδων, εστιάζοντας ειδικά σε αυτούς τους βασικούς τομείς:
- Ευκολία ανάπτυξης
- Το επίπεδο ελέγχου που έχετε στο σχεδιασμό
- Εύρος υποστήριξης συσκευής / οθόνης
- Πόσο φιλική είναι η μελλοντική λύση
- Συνολική ταχύτητα λήψης και απόδοση ιστότοπου
Μερικοί ορισμοί
Πριν βρεθούμε σε παράλληλες συγκρίσεις προσαρμοστικού και προσαρμοστικού σχεδιασμού ιστοσελίδων, ας πάρουμε λίγο χρόνο για να εξετάσουμε έναν υψηλού επιπέδου ορισμό αυτών των δύο προσεγγίσεων.
Οι υπεύθυνες ιστοσελίδες έχουν σχεδιάγραμμα υγρών που αλλάζει και προσαρμόζεται ανεξάρτητα από το μέγεθος της οθόνης που χρησιμοποιείται. Τα ερωτήματα των μέσων ενημέρωσης επιτρέπουν στους ανταποκριτές ιστότοπους να αλλάζουν ακόμη και "σε κίνηση", εάν το μέγεθος του προγράμματος περιήγησης έχει αλλάξει.
Ο προσαρμοστικός σχεδιασμός χρησιμοποιεί σταθερά μεγέθη βασισμένα σε προκαθορισμένα σημεία διακοπής για να παρέχει την πιο κατάλληλη έκδοση διάταξης για το μέγεθος οθόνης που ανιχνεύεται κατά την πρώτη φόρτωση της σελίδας.
Με αυτούς τους ευρείς ορισμούς, ας στραφούμε προς τους βασικούς μας τομείς εστίασης.
Ευκολία ανάπτυξης
Η σημαντικότερη διαφορά μεταξύ του ανταποκριτικού και του προσαρμοστικού σχεδιασμού ιστού είναι ο τρόπος με τον οποίο οι λύσεις αυτές εφαρμόζονται σε έναν ιστότοπο. Επειδή ο ευαίσθητος σχεδιασμός δημιουργεί μια εντελώς υγρή διάταξη, είναι καλύτερο να χρησιμοποιείται σε έργα όπου επανασχεδιάζετε την περιοχή από το έδαφος . Η προσπάθεια αναβάθμισης ενός κώδικα υπάρχοντος ιστότοπου για να αποκτήσετε απόκριση είναι συχνά μια εξόχως απόπειρα γιατί απλά δεν έχετε το επίπεδο ελέγχου που θα είχατε εάν αναπτύξατε αυτόν τον κώδικα από το μηδέν και λαμβάνοντας υπόψη τον σχεδιασμό της απόκρισης για τα πρώτα στάδια αυτής της διαδικασίας . Αυτό σημαίνει ότι όταν αναβαθμίζετε έναν ιστότοπο ώστε να ανταποκρίνεται, αναγκάζεστε να κάνετε συμβιβασμούς για να παραμείνετε εντός αυτού του υπάρχοντος κώδικα βάσης.
Εάν εργάζεστε με έναν υπάρχοντα ιστότοπο σταθερού πλάτους, μια προσαρμοστική προσέγγιση σημαίνει ότι μπορείτε να αφήσετε το μέγεθος που ο ιστότοπος σχεδιάστηκε για ανέπαφη και να προσθέσετε επιπλέον προσαρμοστικά σημεία διακοπής, όπως απαιτείται. Σε ορισμένες περιπτώσεις, εάν ο προϋπολογισμός ενός έργου είναι μικρός και εάν πρόκειται να φιλοξενήσει μόνο μια μικρή ποσότητα έργων ανάπτυξης, μπορείτε να επιλέξετε μόνο να προσθέσετε νέα προσαρμοστικά σημεία διακοπής για μικρότερα μεγέθη οθόνης / κινητού τηλεφώνου. Αυτό σημαίνει ότι θα επιτρέπετε σε μεγαλύτερες οθόνες να χρησιμοποιούν όλοι την ίδια διάταξη - ίσως μια έκδοση 960 σημείων διακοπής που ήταν αυτό που είχε αρχικά σχεδιαστεί για αυτόν τον ιστότοπο.
Η ανοδική σε μια προσαρμοστική προσέγγιση είναι ότι μπορείτε να αξιοποιήσετε καλύτερα τον κώδικα ενός υφιστάμενου ιστότοπου, αλλά ένα από τα μειονεκτήματα είναι ότι δημιουργείτε διαφορετικά πρότυπα διάταξης για κάθε σημείο διακοπής που επιλέγετε να υποστηρίξετε. Αυτό θα έχει αντίκτυπο στο φόρτο εργασίας που απαιτείται για την ανάπτυξη και τη διατήρηση αυτής της λύσης μακροπρόθεσμα.
Έλεγχος σχεδιασμού
Ένα από τα πλεονεκτήματα των ιστοτόπων που ανταποκρίνονται είναι ότι η ρευστότητα τους επιτρέπει να προσαρμόζουν και να υποστηρίζουν όλα τα μεγέθη οθόνης σε αντίθεση μόνο με τα προκαθορισμένα σημεία διακοπής που καθορίζονται σε μια προσαρμοστική προσέγγιση. Η πραγματικότητα, ωστόσο, είναι ότι οι ανταποκριτικοί ιστότοποι μπορεί να φαίνονται εξαιρετικοί σε ορισμένα μεγέθη βασικών μεγεθών (συνήθως μεγέθη που αντιστοιχούν σε δημοφιλείς συσκευές που διατίθενται στην αγορά), αλλά ο οπτικός σχεδιασμός συχνά διασπάται μεταξύ αυτών των δημοφιλών ψηφισμάτων.
Για παράδειγμα, ένας ιστότοπος μπορεί να έχει μεγάλη ευκρίνεια στη διάταξη ευρείας οθόνης των 1400 pixel, το μέγεθος της μέσης οθόνης 960 εικονοστοιχεία και η μικρή οθόνη σε 480 pixels, αλλά τι γίνεται με τις ενδιάμεσες καταστάσεις αυτών των μεγεθών; Ως σχεδιαστής, έχετε ελάχιστο ή και καθόλου έλεγχο σε αυτά τα μεταξύ μεγέθη μεγέθη και η οπτική εμφάνιση της σελίδας σε αυτά τα μεγέθη είναι συχνά λιγότερο από ιδανική.
Με έναν προσαρμοστικό ιστότοπο, έχετε πολύ περισσότερο έλεγχο του σχεδιασμού για τις διάφορες μορφές που χρησιμοποιούνται επειδή είναι σταθερά μεγέθη με βάση τα καθορισμένα σημεία διακοπής. Αυτά τα αμήχανα μεταξύ κράτη δεν είναι πλέον πρόβλημα, επειδή έχετε σχεδιάσει προσεκτικά κάθε εμφάνιση (που σημαίνει κάθε οθόνη διακοπής) που θα παραδοθεί στους επισκέπτες.
Όσο πιο ελκυστικό μπορεί να ακούγεται αυτό το επίπεδο ελέγχου σχεδιασμού, πρέπει να γνωρίζετε ότι έρχεται σε τιμή. Ναι, έχετε τον πλήρη έλεγχο της εμφάνισης κάθε σημείου διακοπής, αλλά αυτό σημαίνει ότι πρέπει να επενδύσετε το χρόνο σχεδιασμού που απαιτείται για το σχεδιασμό για κάθε μία από αυτές τις μοναδικές διατάξεις. Τα περισσότερα σημεία διακοπής που επιλέγετε να σχεδιάσετε, τόσο περισσότερο χρόνο θα χρειαστεί να ξοδέψετε σε αυτή τη διαδικασία.
Εύρος υποστήριξης
Τόσο ο ευαίσθητος όσο και ο προσαρμοστικός σχεδιασμός ιστοσελίδων απολαμβάνουν πολύ ισχυρή υποστήριξη, ειδικά στα σύγχρονα προγράμματα περιήγησης.
Οι προσαρμοζόμενες ιστοσελίδες απαιτούν είτε στοιχεία πλευράς διακομιστή είτε Javascript για ανίχνευση μεγέθους οθόνης. Προφανώς, εάν μια προσαρμοσμένη τοποθεσία απαιτεί Javascript, σημαίνει ότι το πρόγραμμα περιήγησης πρέπει να το έχει ενεργοποιήσει για να λειτουργήσει σωστά ο συγκεκριμένος ιστότοπος. Αυτό μπορεί να μην σας απασχολεί πολύ, αφού οι περισσότεροι άνθρωποι θα έχουν Javascript στα προγράμματα περιήγησής τους, αλλά κάθε φορά που ένας ιστότοπος έχει μια κρίσιμη εξάρτηση από οτιδήποτε, θα πρέπει να σημειωθεί.
Οι υπεύθυνοι ιστότοποι και τα μηνύματα των μέσων ενημέρωσης που τα χρησιμοποιούν θα λειτουργούν καλά σε όλα τα σύγχρονα προγράμματα περιήγησης. Τα μόνα προβλήματα που θα αντιμετωπίσετε είναι τα παλαιότερα εκδόματα του Internet Explorer, καθώς οι εκδόσεις 8 και παρακάτω δεν υποστηρίζουν τα ερωτήματα μέσων . Για να το επιλύσετε αυτό , χρησιμοποιείται συχνά ένα polyfill Javascript , πράγμα που σημαίνει ότι υπάρχει και εξάρτηση από το Javascript εδώ, τουλάχιστον για αυτές τις απαρχαιωμένες εκδόσεις του IE. Και πάλι, αυτό μπορεί να μην είναι πολύ ανησυχητικό για εσάς, ειδικά αν τα αναλύματα ιστοτόπων σας δείχνουν ότι δεν λαμβάνετε πολλούς επισκέπτες χρησιμοποιώντας αυτές τις παλαιότερες εκδόσεις του προγράμματος περιήγησης.
Μελλοντική φιλικότητα
Η ρευστότητα των ανταποκρινόμενων ιστότοπων τους προσφέρει ένα πλεονέκτημα σε σχέση με τους προσαρμοστικούς ιστότοπους όσον αφορά τη μελλοντική φιλικότητα. Αυτό οφείλεται στο γεγονός ότι αυτοί οι ανταποκρινόμενοι ιστότοποι δεν είναι κατασκευασμένοι για να φιλοξενήσουν μόνο ένα προκαθορισμένο σύνολο σημείων διακοπής. Προσαρμόζονται για να ταιριάζουν σε όλες τις οθόνες , συμπεριλαμβανομένων εκείνων που ενδέχεται να μην κυκλοφορούν σήμερα στην αγορά. Αυτό σημαίνει ότι οι ανταποκρινόμενες τοποθεσίες δεν θα χρειαστεί να "σταθεροποιηθούν" εάν μια νέα ανάλυση οθόνης γίνει ξαφνικά δημοφιλής.
Κοιτάζοντας την απίστευτη ποικιλία στο τοπίο της συσκευής (από τον Αύγουστο του 2015, υπήρχαν πάνω από 24.000 διακριτές συσκευές Android στην αγορά), έχοντας έναν ιστότοπο ο οποίος προσπαθεί να φιλοξενήσει αυτό το ευρύ φάσμα οθονών είναι εξαιρετικά σημαντικός για τη μελλοντική φιλικότητα. Αυτό οφείλεται στο γεγονός ότι το τοπίο είναι απίθανο να γίνει λιγότερο διαφοροποιημένο στο μέλλον, πράγμα που σημαίνει ότι ο σχεδιασμός για συγκεκριμένες οθόνες ή μεγέθη θα καταστεί αδύνατη, αν δεν έχουμε φτάσει ήδη στην πραγματικότητα.
Από την άλλη πλευρά αυτού του σεναρίου σύγκρισης, εάν ένας ιστότοπος είναι προσαρμοστικός και δεν ικανοποιεί νέες αναλύσεις που μπορεί να γίνουν σημαντικές στην αγορά, τότε ίσως να αναγκαστείτε να προσθέσετε αυτό το σημείο διακοπής στις τοποθεσίες που έχετε δημιουργήσει. Αυτό προσθέτει χρόνο σχεδιασμού και ανάπτυξης σε έργα και αυτό σημαίνει ότι οι προσαρμοζόμενοι χώροι πρέπει να παρακολουθούνται με συνέπεια, ώστε να διασφαλίζεται ότι δεν έχουν εισαχθεί στην αγορά νέοι βαθμοί διακοπής που πρέπει να προστεθούν στην περιοχή. Και πάλι, καθώς η ποικιλία των συσκευών είναι αυτό που είναι, πρέπει να ελέγχετε συνεχώς για νέα μεγέθη και να τα προσαρμόζετε με νέα σημεία διακοπής είναι μια συνεχής πρόκληση που θα έχει αντίκτυπο στην εργασία που πρέπει να υποστηρίξετε έναν ιστότοπο και το κόστος αυτής της συντήρησης η εταιρεία ή ο οργανισμός για τον οποίο είναι ο ιστότοπος.
Εκτέλεση
Ο υπεύθυνος σχεδιασμός ιστοσελίδων έχει κατηγορηθεί εδώ και πολύ καιρό (άδικος τρόπος σε πολλές περιπτώσεις) ότι είναι μια κακή λύση από την άποψη της ταχύτητας λήψης / απόδοσης. Αυτό οφείλεται σε μεγάλο βαθμό στο γεγονός ότι στις πρώτες ημέρες αυτής της προσέγγισης, πολλοί σχεδιαστές ιστοσελίδων απλώς έσφιξαν τα ερωτήματα μέσων μικρής οθόνης σε υπάρχον CSS ενός ιστότοπου. Αυτό υποχρέωσε τις εικόνες και τους πόρους που προορίζονται για μεγαλύτερες οθόνες να παραδοθούν σε όλες τις συσκευές, ακόμα κι αν αυτές οι μικρότερες οθόνες δεν τις χρησιμοποίησαν στις τελικές τους διατάξεις. Ο ανταποκρινόμενος σχεδιασμός έχει προχωρήσει πολύ από εκείνες τις μέρες και η πραγματικότητα είναι ότι οι ανταποκριτικοί χώροι υψηλής ποιότητας σήμερα δεν υποφέρουν από προβλήματα απόδοσης.
Οι αργές ταχύτητες λήψης και οι φουσκωμένοι ιστότοποι δεν είναι ένα πρόβλημα που ανταποκρίνεται στην ιστοσελίδα - είναι ένα πρόβλημα που μπορεί να βρεθεί σε όλους τους ιστότοπους. Εικόνες που είναι υπερβολικά βαρύ, τροφοδοτούνται από κοινωνικά μέσα, υπερβολικά σενάρια και πολλά άλλα και ζυγίζουν μια τοποθεσία προς τα κάτω, αλλά και οι δύο ανταποκρίσιμες και προσαρμοστικές ιστοσελίδες μπορούν να κατασκευαστούν για γρήγορη φόρτωση. Φυσικά , μπορούν επίσης να κατασκευαστούν με τρόπο που δεν κάνει την απόδοση προτεραιότητα, αλλά αυτό δεν είναι ένα χαρακτηριστικό της ίδιας της λύσης, αλλά μάλλον μια αντανάκλαση της ομάδας που συμμετείχε στην ανάπτυξη του ίδιου του ιστότοπου.
Πέρα από τη διάταξη
Μια από τις πιο συναρπαστικές πτυχές του προσαρμοστικού σχεδιασμού ιστοσελίδων είναι ότι δεν έχετε μόνο τον έλεγχο του σχεδιασμού του ιστότοπου για καθορισμένα σημεία διακοπής, αλλά και τους πόρους που παρέχονται για αυτές τις εκδόσεις ιστότοπων. Για παράδειγμα, αυτό σημαίνει ότι οι εικόνες αμφιβληστροειδούς μπορούν να αποσταλούν μόνο σε συσκευές αμφιβληστροειδούς, ενώ οι οθόνες μη αμφιβληστροειδούς παίρνουν πιο κατάλληλες εικόνες που είναι μικρότερες στο μέγεθος του αρχείου. Άλλοι πόροι ιστότοπων (αρχεία Javascript, στυλ CSS κ.λπ.) μπορούν να παραδοθούν έξυπνα μόνο όταν χρειάζονται και θα χρησιμοποιηθούν.
Αυτή η χρήση του προσαρμοστικού σχεδιασμού ιστού υπερβαίνει κατά πολύ την απλή εξίσωση "εάν κάνετε εκ των υστέρων ένα δικτυακό τόπο, η προσαρμοστική μπορεί να είναι μια ευκολότερη προσέγγιση στη χρήση." Όλοι οι ιστότοποι, συμπεριλαμβανομένου του πλήρους επανασχεδιασμού, μπορούν να επωφεληθούν από μια πιο έξυπνη προσέγγιση σε μια πιο προσαρμοσμένη εμπειρία.
Αυτό το σενάριο δείχνει τον λεπτό χαρακτήρα αυτής της συζήτησης «απόκρισης έναντι προσαρμογής». Παρόλο που είναι αλήθεια ότι μια προσαρμοστική προσέγγιση μπορεί να είναι πιο κατάλληλη από την ανταπόκριση για την εκ των υστέρων εγκατάσταση, μπορεί επίσης να είναι μια εξαιρετική λύση για τους πλήρεις επανασχεδιασμούς. Παρομοίως, σε μερικές περιπτώσεις μπορεί να προστεθεί μια προσέγγιση που ανταποκρίνεται στην κωδική βάση μιας υπάρχουσας τοποθεσίας, δίνοντας στον ιστότοπο όλα τα οφέλη μιας προσέγγισης που ανταποκρίνεται πλήρως.
Ποια προσέγγιση είναι καλύτερη;
Όταν πρόκειται για την απόκριση έναντι του προσαρμοστικού σχεδιασμού ιστοσελίδων, δεν υπάρχει σαφής "νικητής", αν και η απόκριση είναι σίγουρα η πιο δημοφιλής προσέγγιση. Στην πραγματικότητα, η "καλύτερη" προσέγγιση εξαρτάται από τις ανάγκες ενός συγκεκριμένου έργου. Επιπλέον, αυτό δεν χρειάζεται να είναι μια κατάσταση "είτε / ή". Υπάρχουν πολλοί επαγγελματίες του διαδικτύου που κατασκευάζουν ιστότοπους που συνδυάζουν το καλύτερο σχεδιασμό ιστοσελίδων (πλάτη υγρών, μελλοντική υποστήριξη) με τα δυνατά σημεία του προσαρμοστικού σχεδιασμού (καλύτερος έλεγχος του σχεδιασμού, έξυπνη φόρτωση πόρων του ιστότοπου).
Κοινώς γνωστή ως RESS (Responsive Web Design με στοιχεία Side Server), αυτή η προσέγγιση δείχνει ότι πραγματικά δεν υπάρχει "ένα μέγεθος που ταιριάζει σε όλες τις λύσεις". Και οι δύο ανταποκρινόμενοι σχεδιασμός ιστοσελίδων και προσαρμοστικοί έχουν τα πλεονεκτήματα και τις προκλήσεις τους, οπότε πρέπει να προσδιορίσετε ποια θα λειτουργήσει καλύτερα για το συγκεκριμένο έργο σας, ή εάν μια υβριδική λύση μπορεί να σας ταιριάζει καλύτερα.