7 Συμβουλές WordPress για έναν ιστότοπο φιλικό προς κινητά
Δεν υπάρχει τίποτα χειρότερο από το να έχετε έναν όμορφο ιστότοπο για επιτραπέζιους υπολογιστές και έναν ιστότοπο για κινητά που δεν λειτουργεί σωστά.
Οι περισσότερες επιδιορθώσεις σχεδιασμού είναι απλές, αλλά απαιτούν προσοχή εάν θέλετε οι επισκέπτες να παραμείνουν στον ιστότοπό σας κατά την περιήγησή τους σε μια κινητή συσκευή.
Αυτό το άρθρο θα επισημάνει επτά ζητήματα ιστότοπου φιλικών προς κινητά και θα διορθώσει για αυτά.
- Οι(Are) αλλαγές που έγιναν δεν εμφανίζονται στο κινητό(Mobile)
- Μη φιλική πλοήγηση
- Η Responsive Layout(Responsive Layout) σταματά να λειτουργεί ξαφνικά
- Οι εικόνες αργούν να φορτωθούν
- Το πιο σημαντικό περιεχόμενο δεν είναι προφανές
- Πολλές πληροφορίες
- Δεδομένα για μικρές οθόνες
Δεν εμφανίζονται ενημερώσεις ιστότοπου φιλικού προς κινητά(Mobile Friendly Website Updates Not Showing Up)
Μόλις ξοδέψατε πολύ χρόνο κάνοντας ενημερώσεις στον ιστότοπό σας. Φαίνονται υπέροχα στον υπολογιστή σας, αλλά δεν εμφανίζονται στην κινητή συσκευή σας.
Ένας από τους πιο συνηθισμένους λόγους είναι η προσωρινή αποθήκευση. Το πρόγραμμα περιήγησής σας για κινητά μπορεί να εμφανίζει μια παλιά έκδοση του ιστότοπού σας που είχατε λάβει προηγουμένως. Ένας άλλος λόγος μπορεί να είναι ότι ο ιστότοπός σας κρατά την παλιά έκδοση της σελίδας σας και δεν εμφανίζει τις αλλαγές σας.
Εάν αυτό είναι το πρόβλημα, θα χρειαστεί να διαγράψετε την προσωρινή μνήμη για να πραγματοποιήσετε λήψη της αναθεωρημένης έκδοσης. Μια προσθήκη προσωρινής αποθήκευσης όπως το WP Super Cache , το W3 Total Cache ή το WP Fastest Cache μπορεί να βοηθήσει στην επίλυση αυτού του προβλήματος.
Ακολουθούν τέσσερα βήματα που θα σας βοηθήσουν να ξεπλύνετε την προσωρινή μνήμη του ιστότοπού σας και το πρόγραμμα περιήγησής σας για να ενεργοποιήσετε την εμφάνιση της νέας έκδοσης στον ιστότοπο φιλικό προς κινητά.
- Ανανεώστε το πρόγραμμα περιήγησής σας πολλές φορές στον επιτραπέζιο υπολογιστή και την κινητή συσκευή σας.
- Δοκιμάστε τον ιστότοπό σας σε διαφορετικές κινητές συσκευές.
- Εκκαθαρίστε τον ιστότοπό σας με μια προσθήκη προσωρινής αποθήκευσης.
- Επικοινωνήστε με την εταιρεία φιλοξενίας σας για να δείτε εάν υπάρχει άλλο σύστημα προσωρινής αποθήκευσης στον διακομιστή σας που πρέπει να εκκαθαριστεί.
Μη φιλική πλοήγηση(Unfriendly Navigation)
Μπορεί να είναι δύσκολο να δημιουργήσετε ένα μενού πλοήγησης που λειτουργεί καλά σε κινητές συσκευές. Εάν η πλοήγηση του ιστότοπού σας έχει πολλά στοιχεία και υπομενού, είναι ακόμη πιο δύσκολο να συμπιέσετε τα πάντα σε μια μικρότερη οθόνη.
Για παράδειγμα, εάν έχετε μόνο τρία ή τέσσερα στοιχεία στην πλοήγηση στον ιστότοπό σας, θα πρέπει να φαίνεται μια χαρά στο κινητό. Ωστόσο, εάν έχετε περισσότερα στοιχεία και υπομενού, θα στοιβάζονται το ένα πάνω στο άλλο και θα φαίνονται γεμάτα.
Ακολουθούν(Below) μερικοί τρόποι για να διορθώσετε αυτό το πρόβλημα για έναν ιστότοπο φιλικό προς κινητά:
- Μετατρέψτε την πλοήγησή σας σε αναπτυσσόμενο μενού για κινητές συσκευές.
- Εμφανίστε το μενού πλοήγησής σας ως στοιχεία μπλοκ, ώστε να εμφανίζονται κάθετα.
- Χρησιμοποιήστε ένα εικονίδιο μενού που μπορεί να αλλάξει για να καταλαμβάνει λιγότερο χώρο.
- Δημιουργήστε ένα μενού πλοήγησης για κινητά χρησιμοποιώντας το jQuery.
- Χρησιμοποιήστε το μενού Hamburger (Πολλά θέματα περιλαμβάνουν αυτό ως επιλογή ή μπορείτε να χρησιμοποιήσετε μια προσθήκη( use a plugin) .)
Η Responsive Layout σταματά να λειτουργεί ξαφνικά(Responsive Layout Stops Working Suddenly)
Εάν ο ιστότοπός σας φιλικός προς κινητά σταματήσει να λειτουργεί ξαφνικά, αυτό μπορεί να οφείλεται σε μια προσθήκη στον ιστότοπό σας.
Η εγκατάσταση μιας νέας προσθήκης ή μιας ενημέρωσης σε μια υπάρχουσα προσθήκη θα μπορούσε να προκαλέσει διένεξη με άλλες που επηρεάζει την αποκριτική διάταξη σας.
Ξεκινήστε απενεργοποιώντας κάθε πρόσθετο ένα κάθε φορά για να δείτε αν είναι η αιτία. Μην τα απενεργοποιήσετε όλα ταυτόχρονα, διαφορετικά δεν θα ξέρετε ποιο πρόσθετο θα μπορούσε να είναι το ένοχο.
(Code)Οι αλλαγές κώδικα είναι μια άλλη πιθανή αιτία. Εάν έχετε τροποποιήσει οποιονδήποτε κώδικα κατά λάθος ή σκόπιμα, επαναφέρετε την αρχική βάση κώδικα και δείτε εάν ο αποκριτικός ιστότοπός σας αρχίζει να λειτουργεί ξανά.
Όταν ελέγχετε τον ιστότοπό σας για ανταπόκριση σε κινητά, θα πρέπει πάντα να τον δοκιμάζετε σε κινητή συσκευή.
Μερικές φορές φαίνεται να λειτουργεί κατά την αλλαγή του μεγέθους του παραθύρου του προγράμματος περιήγησης στην επιφάνεια εργασίας σας, αλλά δεν εμφανίζεται σωστά στο κινητό.
Εάν λείπει μία γραμμή κώδικα από ένα αρχείο κεφαλίδας HTML , μπορεί να σπάσει την αποκριτική σχεδίαση. Αυτή η γραμμή κώδικα που λείπει θα κάνει την κινητή συσκευή σας να υποθέσει ότι ο ιστότοπος που βλέπετε είναι ιστότοπος πλήρους μεγέθους.
Ο ιστότοπος που αποδίδεται θα έχει το μέγεθος της θύρας προβολής (το μέγεθος της περιοχής της ιστοσελίδας που είναι ορατή στον χρήστη).
Για να διορθώσετε τον ιστότοπό σας φιλικό προς κινητά, προσθέστε την ακόλουθη γραμμή κώδικα στην ενότητα κεφαλίδας:
<meta name=”viewport” content=”width=device-width”>
Μερικές φορές, όταν ενημερώνεται ένα θέμα, αυτός ο κώδικας μπορεί να εξαφανιστεί.
Οι εικόνες αργούν να φορτωθούν(Images Are Taking Too Long to Load)
Η βελτιστοποίηση των εικόνων και η μείωση του μεγέθους του αρχείου εικόνας(reducing image file size) έχει νόημα. Οι μεγάλες εικόνες που δεν είναι βελτιστοποιημένες μπορούν να επιβραδύνουν την ταχύτητα φόρτωσης των ιστοσελίδων σας. Αυτό μπορεί να είναι απογοητευτικό για τους χρήστες κινητών.
Η έκδοση 4.4 του WordPress(WordPress) και μεταγενέστερη προβάλλει αυτόματα τη μικρότερη έκδοση μιας εικόνας στον διακομιστή σας.
Εάν εκτελείτε ήδη την πιο πρόσφατη έκδοση του WordPress , αλλά ο ιστότοπός σας εξακολουθεί να μην φορτώνει αρκετά γρήγορα, μπορείτε:
- Εγκαταστήστε ένα πρόσθετο όπως το Smush Image Optimization, το Compression και το Lazy Load( Smush Image Optimization, Compression, and Lazy Load) για να αλλάξετε το μέγεθος και να βελτιστοποιήσετε τις εικόνες σας
- Χρησιμοποιήστε ένα εργαλείο συμπίεσης και βελτιστοποίησης πριν ανεβάσετε εικόνες στον ιστότοπό σας, όπως το TinyPNG , το Compress JPEG ή το Online Image Optimizer .
Το πιο σημαντικό περιεχόμενο δεν είναι προφανές(Most Important Content Isn’t Obvious)
Ορισμένοι ιστότοποι είναι φορτωμένοι με πολύ περιττό περιεχόμενο για να γεμίσουν τον κενό χώρο όταν ανοίγουν σε έναν επιτραπέζιο υπολογιστή.
Οι ιστότοποι που έχουν αναπτυχθεί χωρίς να γνωρίζουν τους χρήστες κινητών συνήθως εμπίπτουν σε αυτήν την κατηγορία. Αυτοί οι ιστότοποι χρειάζονται περισσότερο χρόνο και εύρος ζώνης για να φορτωθούν.
Εάν οι σελίδες δεν έχουν σχεδιαστεί κατάλληλα για κινητές συσκευές, τότε μέρος του περιεχομένου ενδέχεται να μην εμφανίζεται σε κινητά χωρίς πολλή κύλιση.
Τις περισσότερες φορές, ένα στοιχείο στην ιστοσελίδα σας θα φαίνεται μονόπλευρο σε έναν υπολογιστή και εντελώς διαφορετικό σε μια φορητή συσκευή.
Για παράδειγμα, μια σελίδα τιμολόγησης με τρεις στήλες θα τις εμφανίζει δίπλα δίπλα σε έναν υπολογιστή.
Ωστόσο, σε μια φορητή συσκευή, οι στήλες στοιβάζονται η μία πάνω στην άλλη επειδή το μέγεθος της οθόνης είναι μικρότερο. Αυτή η συμπεριφορά είναι αναμενόμενη.
Βεβαιωθείτε(Make) ότι ο πίνακας τιμών σας βρίσκεται σε κορυφαία θέση στην ιστοσελίδα σας, ώστε να εμφανίζεται πρώτος όταν τον προβάλλετε σε κινητά. Εάν έχετε πολύ κείμενο πάνω από το τραπέζι σας, οι χρήστες κινητών θα πρέπει να κάνουν κύλιση προς τα κάτω για να το δουν και ίσως όχι.
Για τη βέλτιστη εμπειρία χρήστη για κινητά, τοποθετήστε τα πιο κρίσιμα κομμάτια περιεχομένου στην κορυφή της σελίδας. Εάν ένας χρήστης χρειάζεται να κάνει πολύ κύλιση για να μπορέσει να δει το περιεχόμενό σας, μάλλον δεν θα το κάνει.
Πολλές πληροφορίες(Too Much Information)
Ιστότοποι με περίπλοκα στοιχεία διεπαφής χρήστη, όπως πίνακες, φόρμες πολλαπλών βημάτων και σύνθετες λειτουργίες αναζήτησης μπορούν να δημιουργήσουν μια κακή εμπειρία χρήστη για κινητά.
Αυτά τα στοιχεία περιέχουν πάρα πολλές πληροφορίες που μπορεί να γεμίσουν μια οθόνη κινητού και να παρεμποδίσουν τον χρήστη να βρει τις πληροφορίες που θέλει.
Μια προσέγγιση είναι να αφαιρέσετε ή να αποκρύψετε κάποιο περιεχόμενο από χρήστες κινητών. Ωστόσο, αυτή δεν είναι ιδανική λύση για επισκέπτες που θέλουν να έχουν πρόσβαση σε αυτά τα στοιχεία.
Για να αποφύγετε αυτό το πρόβλημα, βελτιστοποιήστε όσο το δυνατόν περισσότερο τον ιστότοπό σας φιλικό προς κινητά. Επίσης, αφαιρέστε τυχόν περιττά στοιχεία εστιάζοντας παράλληλα στην βασική δομή του ιστότοπού σας.
Δεδομένα για μικρές οθόνες(Data For Small Screens)
Οι σύνθετοι πίνακες με πολλές σειρές και στήλες μπορεί να είναι πρόβλημα όταν προβάλλονται σε μικρές οθόνες κινητών. Η καλύτερη λύση είναι η χρήση αποκριτικών πινάκων.
Ένα πρόσθετο όπως το WP Responsive Table μπορεί να το κάνει αυτό εύκολο να επιτευχθεί.
Όπως και στον παραπάνω πίνακα τιμολόγησης, όταν προβάλλονται σε φορητή συσκευή, οι στήλες θα στοιβάζονται για να ταιριάζουν στη μικρότερη οθόνη.
Άλλοι τρόποι εμφάνισης δεδομένων σε κινητές συσκευές περιλαμβάνουν:
- Δημιουργία μικρότερου πίνακα χωρίς τη διάταξη πλέγματος για να αποφευχθεί η ανάγκη για οριζόντια κύλιση.
- Γυρίζοντας ένα τραπέζι στο πλάι για να ταιριάζει καλύτερα σε μια μικρότερη οθόνη.
- Αντικατάσταση μεγαλύτερων πινάκων με μικρότερους που συνδέονται με την πλήρη έκδοση.
- Μετατροπή πινάκων σε γραφήματα πίτας.
Καθώς η χρήση των κινητών αυξάνεται εκθετικά, είναι επιτακτική ανάγκη οι ιστότοποι των επιχειρήσεων να βελτιστοποιούνται με εκδόσεις φιλικές προς κινητά. Βελτιώστε(Enhance) την εμπειρία χρήστη χωρίς να θυσιάσετε τη λειτουργικότητα ακολουθώντας τα παραπάνω βήματα.
Θα πρέπει επίσης να παρακολουθείτε πάντα την απόδοση του ιστότοπού σας και να κάνετε τροποποιήσεις όταν είναι απαραίτητο για να βελτιώσετε την απόδοση και την εμπειρία χρήστη.
Related posts
Πώς να δημιουργήσετε τον δικό σας ιστότοπο που μοιάζει με Twitter χρησιμοποιώντας το θέμα P2 του WordPress
10 βασικά πρόσθετα WordPress για έναν ιστότοπο μικρών επιχειρήσεων
Πώς να κάνετε έναν ιστότοπο WordPress ασφαλή
Κριτική βιβλίου: Δημιουργήστε τον δικό σας ιστότοπο: Ένας οδηγός κόμικ για HTML, CSS και Wordpress
Wix εναντίον WordPress: Ποιο είναι το καλύτερο για τη δημιουργία του ιστότοπού σας;
3 τρόποι για να αφαιρέσετε την παρουσίαση από οποιονδήποτε ιστότοπο
Πώς να μεταδώσετε στην τηλεόραση Roku από υπολογιστή ή κινητό
7 Τεχνικές συμβουλές βελτιστοποίησης SEO για οποιονδήποτε ιστότοπο
8 βήματα για να συμμορφωθείτε με το GDPR με τον ιστότοπό σας
Πώς να σταματήσετε/απενεργοποιήσετε τις ειδοποιήσεις Reddit σε κινητά και επιτραπέζιους υπολογιστές
Πώς να ανακαλέσετε την πρόσβαση σε ιστότοπο τρίτων στο Facebook, το Twitter και το Google
Πώς να εκτελέσετε απίστευτα γρήγορο WordPress στο Microsoft Azure
Πώς να λαμβάνετε ειδοποιήσεις Twitter στον Ιστό και στο κινητό
Πώς να τραβήξετε ένα στιγμιότυπο οθόνης στο Netflix (επιτραπέζιος υπολογιστής και κινητό)
Πώς να συνδέσετε το φορητό υπολογιστή σας με Windows σε ένα hotspot για φορητές συσκευές
Συμβουλές για να αγοράσετε ανακαινισμένα κινητά τηλέφωνα και φορητούς υπολογιστές
Δημιουργήστε γρήγορα έναν προσωπικό ιστότοπο χρησιμοποιώντας το Google Sites
10 Συμβουλές και κόλπα για το Gboard για τη βελτίωση της πληκτρολόγησης για κινητά
Πώς να καθαρίσετε την ουρά στο Spotify σε επιτραπέζιους υπολογιστές και κινητά
Πώς να διαγράψετε τις ειδοποιήσεις Facebook σε κινητά και επιτραπέζιους υπολογιστές