Ανοίγεις τη δική σου ιστοσελίδα στο κινητό. Το κείμενο διαβάζεται, το μενού μαζεύεται σωστά και οι εικόνες αλλάζουν μέγεθος χωρίς να βγάζουν τίποτα εκτός οθόνης. Έτσι δουλεύει σωστά ο responsive σχεδιασμός. Όταν δεν δουλεύει έτσι, οι επισκέπτες φεύγουν πριν διαβάσουν λέξη.
Η ιστοσελίδα σου έχει ένα σετ περιεχομένου και ένα σετ κώδικα. Ο responsive σχεδιασμός είναι η προσέγγιση που κάνει αυτόν τον ενιαίο κώδικα να εξυπηρετεί σωστά κάθε επισκέπτη, είτε βρίσκεται σε widescreen υπολογιστή είτε σε κινητό που κρατά κάθετα. Αντί να φτιάξεις ξεχωριστή έκδοση για κινητά, ένας responsive σχεδιασμός προσαρμόζει αυτόματα τη διάταξη, τις εικόνες και την πλοήγηση ανάλογα με την οθόνη που χρησιμοποιείται.
Μια ιστοσελίδα που φαίνεται σωστή μόνο σε υπολογιστή αποτυγχάνει με τους περισσότερους επισκέπτες της πριν διαβάσουν οτιδήποτε. Για τους περισσότερους επιχειρηματίες, ο responsive σχεδιασμός δεν είναι απόφαση που χρειάζεται σκέψη. Είναι βασική προσδοκία που ελέγχεις πριν το λανσάρισμα.
Πώς λειτουργεί ο responsive σχεδιασμός;
Μια responsive ιστοσελίδα χρησιμοποιεί κανόνες CSS που λέγονται media queries, για να ανιχνεύει το μέγεθος της οθόνης του επισκέπτη. Με βάση αυτή την πληροφορία, η διάταξη προσαρμόζεται. Μια ενότητα τριών στηλών σε υπολογιστή μπορεί να γίνει μία στήλη στο κινητό. Ένα οριζόντιο μενού πλοήγησης μπορεί να μαζευτεί σε κουμπί. Οι εικόνες αλλάζουν μέγεθος ώστε να χωράνε στο διαθέσιμο πλάτος χωρίς να ξεχειλίζουν από τα πλαίσιά τους.
Η βασική αρχή είναι ότι το περιεχόμενο μένει το ίδιο. Αλλάζει ο τρόπος που οργανώνεται και εμφανίζεται. Μια responsive σελίδα δεν είναι διαφορετική σελίδα για τους χρήστες κινητού. Είναι η ίδια σελίδα, προσαρμοσμένη σε άλλη οθόνη.
Για μια πιο τεχνική εξήγηση του πώς δουλεύει αυτό, το άρθρο τι είναι ο responsive σχεδιασμός καλύπτει αναλυτικά τη μηχανική, μαζί με το πώς δουλεύουν τα ρευστά πλέγματα και οι ευέλικτες εικόνες σε διαφορετικά μεγέθη συσκευών.
Ποια είναι η διαφορά ανάμεσα στον responsive σχεδιασμό και σε μια ιστοσελίδα μόνο για κινητά;
Πριν γίνει κανόνας ο responsive σχεδιασμός, πολλές επιχειρήσεις έφτιαχναν ξεχωριστή έκδοση της σελίδας τους για κινητά, συχνά σε διαφορετικό URL. Ένας επισκέπτης από κινητό ανακατευθυνόταν στην έκδοση για κινητά. Ένας επισκέπτης από υπολογιστή έβλεπε την κύρια σελίδα.
Αυτή η προσέγγιση δημιουργούσε δύο ξεχωριστά πράγματα προς συντήρηση. Οι αλλαγές στο ένα δεν εφαρμόζονταν αυτόματα στο άλλο. Το περιεχόμενο έχανε τον συγχρονισμό του. Η έκδοση για κινητά είχε συχνά λιγότερες λειτουργίες ή λιγότερο περιεχόμενο. Η διαχείριση δύο κωδίκων διπλασίαζε την προσπάθεια χωρίς να διπλασιάζει το αποτέλεσμα.
Ο responsive σχεδιασμός το αντικατέστησε κάνοντας μία ιστοσελίδα να δουλεύει παντού. Ένα URL, ένα σετ περιεχομένου, ένας κώδικας, προσαρμοσμένος σε όλα τα μεγέθη οθόνης. Είναι απλούστερος στο χτίσιμο, απλούστερος στη συντήρηση και καλύτερος για τις μηχανές αναζήτησης, που προτιμούν ένα αξιόπιστο URL για κάθε κομμάτι περιεχομένου.
Τι αλλάζει ανάμεσα σε υπολογιστή και κινητό σε μια responsive ιστοσελίδα;
Οι προσαρμογές που γίνονται ανάμεσα σε υπολογιστή και κινητό είναι πιο εκτεταμένες από όσο καταλαβαίνουν οι περισσότεροι στην αρχή.
Οι στήλες της διάταξης μαζεύονται. Μια ενότητα με τέσσερις κάρτες προϊόντων δίπλα δίπλα σε υπολογιστή γίνεται στοίβα με κύλιση στο κινητό. Τα μενού πλοήγησης αλλάζουν μορφή. Τα οριζόντια μενού γίνονται αναδιπλούμενα πάνελ ή συρτάρια που ανοίγουν από το πλάι. Τα μεγέθη γραμματοσειράς προσαρμόζονται ώστε να διαβάζονται χωρίς zoom. Τα κουμπιά μεγαλώνουν, ώστε να πατιούνται πιο εύκολα με το δάχτυλο αντί να γίνεται κλικ με ποντίκι.
Οι εικόνες αλλάζουν μέγεθος για να γεμίζουν τα πλαίσιά τους χωρίς να ξεχειλίζουν. Οι εικόνες φόντου μπορεί να κόβονται αλλιώς, για να δουλεύουν σε κάθετες αναλογίες. Οι φόρμες προσαρμόζουν τα μεγέθη των πεδίων και τις αποστάσεις, ώστε να χρησιμοποιούνται με το πληκτρολόγιο του κινητού.
Το τεστ ενός καλά υλοποιημένου responsive σχεδιασμού δεν είναι απλώς ότι δεν χαλάει στο κινητό. Είναι ότι η εμπειρία στο κινητό φαίνεται μελετημένη και όχι συμπιεσμένη.
Πώς συνδέεται ο responsive σχεδιασμός με την ταχύτητα της σελίδας;
Ο responsive σχεδιασμός και η ταχύτητα της σελίδας συνδέονται στενά. Μια responsive σελίδα που στέλνει εικόνες πλήρους ανάλυσης για υπολογιστή σε επισκέπτες κινητού είναι τεχνικά responsive αλλά στην πράξη αργή. Οι επισκέπτες κινητού με δίκτυο δεδομένων κατεβάζουν εικόνες πολύ μεγαλύτερες από όσο μπορεί να δείξει η οθόνη τους.
Ένας καλά υλοποιημένος responsive σχεδιασμός το χειρίζεται αυτό στέλνοντας σε κάθε συσκευή εικόνες κατάλληλου μεγέθους, συμπιέζοντας τα αρχεία για συνδέσεις κινητού και καθυστερώντας τη φόρτωση των μη απαραίτητων στοιχείων που επιβραδύνουν την αρχική φόρτωση. Ο στόχος δεν είναι μόνο η προσαρμογή της διάταξης. Είναι μια γρήγορη, ομαλή εμπειρία ανεξάρτητα από τη συσκευή ή την ταχύτητα της σύνδεσης.
Το άρθρο τι είναι η ταχύτητα ιστοσελίδας καλύπτει πώς η απόδοση φόρτωσης επηρεάζει την εμπειρία χρήστη και την κατάταξη στις αναζητήσεις, και τι κάνει τις σελίδες πιο αργές από όσο πρέπει.
Τι να ελέγχεις όταν αξιολογείς το πόσο responsive είναι ένα πρότυπο;
Δεν είναι κάθε πρότυπο που λέγεται responsive το ίδιο καλά σχεδιασμένο για κινητά. Όταν αξιολογείς ένα, υπάρχουν συγκεκριμένα πράγματα που αξίζει να ελέγξεις πριν δεσμευτείς.
Άνοιξε το demo του προτύπου στο κινητό σου, όχι μόνο στην προεπισκόπηση για υπολογιστή. Πλοηγήσου σε κάθε ενότητα. Έλεγξε ότι το μενού ανοίγει σωστά και ότι όλοι οι σύνδεσμοι είναι προσβάσιμοι. Έλεγξε ότι το κείμενο διαβάζεται χωρίς zoom. Έλεγξε ότι τα κουμπιά ενέργειας είναι αρκετά μεγάλα για να πατιούνται άνετα. Έλεγξε ότι οι εικόνες εμφανίζονται σωστά και δεν σπρώχνουν το περιεχόμενο εκτός οθόνης.
Πρόσεξε τις αποστάσεις στο κινητό. Ενότητες που φαίνονται αεράτες σε υπολογιστή μπορεί να φαίνονται στριμωγμένες όταν οι στήλες μαζεύονται σε μικρή οθόνη. Έλεγξε ότι οι ενότητες περιεχομένου έχουν αρκετό περιθώριο, ώστε το κείμενο να μην πιάνει την οθόνη από άκρη σε άκρη. Το άρθρο πώς να διαλέξεις πρότυπο ιστοσελίδας καλύπτει τη δοκιμή σε κινητό ως μέρος της πλήρους αξιολόγησης ενός προτύπου.
Ποια είναι τα σημάδια ότι μια ιστοσελίδα δεν είναι σωστά responsive;
Κάποιες αστοχίες είναι προφανείς. Άλλες είναι τόσο διακριτικές που μπορεί να μην τις προσέξεις μέχρι να στο πει ένας πελάτης.
Συνηθισμένα σημάδια ότι μια σελίδα δεν είναι σωστά responsive είναι κείμενο που θέλει οριζόντια κύλιση για να διαβαστεί ολόκληρο, εικόνες που ξεχειλίζουν από τα πλαίσιά τους και κόβονται στις άκρες, μενού πλοήγησης που δεν χρησιμοποιούνται χωρίς δείκτη ποντικιού, κουμπιά πολύ μικρά για να πατιούνται με ασφάλεια και φόρμες όπου τα πεδία δεν προσαρμόζονται σωστά για το πληκτρολόγιο του κινητού.
Λιγότερο προφανή σημάδια είναι μια διάταξη που τεχνικά χωράει στο κινητό αλλά μοιάζει με σελίδα υπολογιστή στριμωγμένη σε στενή στήλη. Ενότητες με πάρα πολλές στήλες που μαζεύονται με μπερδεμένη σειρά. Επικεφαλίδες και footer που συμπεριφέρονται αλλιώς στο κινητό, με τρόπους που δεν είχαν προβλεφθεί στον αρχικό σχεδιασμό.
Ο συνηθισμένος έλεγχος είναι να περάσεις κάθε σελίδα σε ένα πραγματικό κινητό. Οι προεπισκοπήσεις του προγράμματος περιήγησης είναι χρήσιμες κατά την ανάπτυξη, αλλά δεν αναπαράγουν πλήρως την εμπειρία μιας συσκευής αφής.
Πώς επηρεάζει ο responsive σχεδιασμός την κατάταξη στις αναζητήσεις;
Οι μηχανές αναζήτησης χρησιμοποιούν την έκδοση της ιστοσελίδας σου για κινητά ως την κύρια έκδοση για καταχώριση και κατάταξη. Μια ιστοσελίδα που δουλεύει καλά στο κινητό και φορτώνει γρήγορα σε αυτό θα αποδίδει γενικά καλύτερα στα αποτελέσματα αναζήτησης από μια σελίδα φτιαγμένη κυρίως για υπολογιστή.
Πέρα από την προτίμηση στην καταχώριση, μια κακά responsive σελίδα στέλνει αρνητικά σήματα. Υψηλά ποσοστά εγκατάλειψης από επισκέπτες κινητού, αργοί χρόνοι φόρτωσης σε δίκτυο δεδομένων και περιεχόμενο που διαβάζεται δύσκολα, όλα αυτά τραβούν την απόδοση προς τα κάτω με τον καιρό. Οι επισκέπτες που φεύγουν αμέσως επειδή η σελίδα δεν δουλεύει στο κινητό τους, λένε στις μηχανές αναζήτησης ότι η σελίδα δεν τους εξυπηρέτησε.
Για πλήρη εικόνα του πώς δουλεύει η βελτιστοποίηση για τις αναζητήσεις και ποιοι τεχνικοί παράγοντες μετράνε περισσότερο, το άρθρο τι είναι το SEO καλύπτει ολόκληρο το θέμα.
Πώς αντιμετωπίζει το WEMASY τον responsive σχεδιασμό
Κάθε πρότυπο στον δημιουργό ιστοσελίδων του WEMASY είναι φτιαγμένο να είναι responsive σε υπολογιστή, tablet και κινητό. Ο οπτικός επεξεργαστής περιλαμβάνει προεπισκόπηση για κινητό δίπλα στην εμφάνιση για υπολογιστή, ώστε να βλέπεις πώς συμπεριφέρονται οι ενότητες σε διαφορετικά μεγέθη οθόνης όσο χτίζεις. Την απόδοση και την προσαρμογή στα κινητά τις αναλαμβάνει η πλατφόρμα, χωρίς χειροκίνητη ρύθμιση.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Είναι η ιστοσελίδα μου αυτόματα responsive αν χρησιμοποιώ δημιουργό ιστοσελίδων;
Οι περισσότεροι σύγχρονοι δημιουργοί ιστοσελίδων χρησιμοποιούν responsive πρότυπα ως στάνταρ. Αν διάλεξες πρότυπο από έναν σύγχρονο δημιουργό ιστοσελίδων, μάλλον είναι responsive. Ο σημαντικός έλεγχος δεν είναι αν το πρότυπο έχει την ετικέτα responsive, αλλά αν συμπεριφέρεται καλά στο κινητό. Πέρασε την ιστοσελίδα σου σε μια πραγματική κινητή συσκευή και δοκίμασε την πλοήγηση, τις εικόνες, το μέγεθος του κειμένου και τις φόρμες, πριν υποθέσεις ότι όλα δουλεύουν σωστά. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Μπορεί μια παλαιότερη ιστοσελίδα να γίνει responsive χωρίς να ξαναχτιστεί;
Εξαρτάται από το πώς χτίστηκε η αρχική σελίδα. Στις σελίδες που χτίστηκαν με σύγχρονους δημιουργούς ιστοσελίδων, η εμπειρία στο κινητό μπορεί συχνά να βελτιωθεί με προσαρμογή των ρυθμίσεων του προτύπου ή αλλαγή σε καλύτερο πρότυπο. Οι σελίδες που γράφτηκαν από την αρχή με κώδικα ή χτίστηκαν σε παλαιότερες πλατφόρμες μπορεί να χρειάζονται σημαντική δουλειά. Σε πολλές περιπτώσεις, το να ξαναχτίσεις σε μια τρέχουσα πλατφόρμα είναι πιο γρήγορο και δίνει καλύτερο αποτέλεσμα από το να προσπαθείς να προσθέσεις responsive συμπεριφορά σε έναν παλιό κώδικα.
Επηρεάζει ο responsive σχεδιασμός το πόσο γρήγορα φορτώνει η ιστοσελίδα μου;
Ο responsive σχεδιασμός από μόνος του δεν επιβραδύνει μια σελίδα. Μπορεί όμως να την επιβραδύνει ο τρόπος που υλοποιείται. Μια σελίδα που στέλνει εικόνες πλήρους μεγέθους για υπολογιστή σε επισκέπτες κινητού με δίκτυο δεδομένων θα φορτώνει αργά, ακόμα κι αν η διάταξη προσαρμόζεται σωστά. Ένας καλά υλοποιημένος responsive σχεδιασμός περιλαμβάνει μεγέθη εικόνων κατάλληλα για κινητά, συμπιεσμένα αρχεία και καθυστερημένη φόρτωση για τα μη απαραίτητα στοιχεία. Η προσαρμογή της διάταξης στην οθόνη είναι μόνο μέρος μιας πλήρους εμπειρίας στο κινητό.
Τι είναι το mobile-first design;
Το mobile-first design είναι μια προσέγγιση όπου η έκδοση για κινητά σχεδιάζεται και χτίζεται πριν την έκδοση για υπολογιστή, και όχι το αντίθετο. Ξεκινά από το πιο περιορισμένο περιβάλλον και επεκτείνεται προς τα έξω. Ο σχεδιασμός πρώτα για κινητά αναγκάζει σε πιο καθαρές προτεραιότητες. Όταν ο χώρος είναι περιορισμένος, επιβιώνουν μόνο το πιο σημαντικό περιεχόμενο και οι πιο σημαντικές ενέργειες. Η έκδοση για υπολογιστή έχει μετά χώρο να χτίσει πάνω σε αυτό το θεμέλιο.
Πώς ελέγχω αν η ιστοσελίδα μου είναι φιλική προς κινητά;
Πέρασε κάθε σελίδα σε ένα πραγματικό κινητό. Δοκίμασε την πλοήγηση, τις εικόνες, το μέγεθος του κειμένου, τις φόρμες και τα κουμπιά. Οι μηχανές αναζήτησης παρέχουν επίσης δωρεάν εργαλεία δοκιμής για κινητά, όπου βάζεις το URL σου και σου επισημαίνουν συγκεκριμένα προβλήματα, όπως κείμενο πολύ μικρό για να διαβαστεί ή στοιχεία που πατιούνται και είναι πολύ κοντά το ένα στο άλλο. Ο συνδυασμός χειροκίνητης διαδρομής και ελέγχου με εργαλείο θα φέρει στην επιφάνεια τα προβλήματα που μετράνε περισσότερο.