Πώς να συνδυάσετε ένα κινητό για πρώτη φορά, ένα θέμα WordPress προσανατολισμένο στην απόδοση [Μέρος 2]

Αν έχετε πραγματοποιήσει κύλιση προς τα κάτω για να δείτε τι υπάρχει εδώ, ίσως αναρωτιέστε τι συνέβη στα σημεία 1-5.


Α, σωστά, για να βρείτε ποια είναι η απάντηση, θα πρέπει να ρίξετε μια ματιά στο πρώτο μέρος αυτής της μίνι σειράς.

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

Σε τελική ανάλυση, η γενική πεποίθηση είναι ότι πρέπει μόνο να κάνετε το θέμα ανταποκρινόμενο και, voilà, είναι βελτιστοποιημένο για κινητά, σωστά; Λοιπόν, όχι αρκετά. Έτσι, χωρίς άλλη παραλλαγή, ας επιστρέψουμε αμέσως στο θέμα.

Για το μέρος 1, δείτε εδώ: Πώς να συνδυάσετε ένα κινητό για πρώτη φορά, θέμα WordPress με γνώμονα την απόδοση [Μέρος 1]

6. Σχεδιασμός για όλα τα προγράμματα περιήγησης για κινητά

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

Επομένως, όταν εργάζεστε στο θέμα σας, φροντίστε να θυμάστε τα εξής:

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

7. Το UX έχει σημασία

Σε κινητά, οι άνθρωποι αλληλεπιδρούν με ιστότοπους πολύ διαφορετικά από ό, τι στον υπολογιστή.

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

Ωστόσο, εάν επισκέπτονται τον ίδιο ιστότοπο στο κινητό, πιθανόν να ενδιαφέρονται μόνο για ένα πράγμα – πώς να φτάσουν στο μέρος και τι αριθμό να καλέσουν για να κάνουν κράτηση.

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

Ο ευκολότερος τρόπος για να το κάνετε είναι μέσω καλά σχεδιασμένων περιοχών widget που εμφανίζονται στην αρχική σελίδα και παραμένουν στο επάνω μέρος της ορατής περιοχής της οθόνης (γνωστός και ως διατηρώντας τους στο επάνω μέρος).

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

8. Το λιγότερο είναι περισσότερο

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

Δείτε τι μπορείτε να κάνετε για να πετύχετε περισσότερα με λιγότερα:

  • Αφήστε λιγότερο χώρο για στοιχεία επωνυμίας. Είναι σημαντικό να υπάρχει κάποιος χώρος για το λογότυπο του ιστότοπου, είναι προφανές. Ωστόσο, εξακολουθεί να μην είναι τόσο σημαντικό όσο το πραγματικό περιεχόμενο, οπότε φροντίστε να μην αφήσετε το λογότυπο να καταλαμβάνει το μεγαλύτερο μέρος του χώρου στο επάνω μέρος.
  • Εισαγάγετε προσβάσιμα μενού. Τα μενού ήταν πάντα πρόβλημα στα κινητά. Από τη μία πλευρά, οι ιστότοποι χρειάζονται μενού. Αλλά από την άλλη, ακόμη και ένα σύντομο μενού (που έχει μόνο τέσσερα στοιχεία) μπορεί εύκολα να χρησιμοποιήσει δύο γραμμές κειμένου στις περισσότερες φορητές συσκευές, κάτι που ωθεί το περιεχόμενο πιο κάτω στη σελίδα. Εδώ μπορείτε να κάνετε για να το λύσετε: (1) εμφάνιση του μενού κανονικά εάν ταιριάζει σε μία γραμμή κειμένου, (2) κάντε το αναπτυσσόμενο εάν δεν το κάνει.
  • Απαλλαγείτε από ασήμαντα μενού. Διακινδυνεύω να πω ότι τις περισσότερες φορές, το μενού υποσέλιδου δεν προσφέρει καμία αξία στον επισκέπτη του κινητού. Σε επιτραπέζιο υπολογιστή, χρησιμεύει ως ένα είδος catch-all μενού όπου οι επισκέπτες μπορούν να βρουν συνδέσμους προς όλες τις άλλες σελίδες, αλλά σε κινητές συσκευές, δεν υπάρχει σχεδόν κανένας λόγος για τον οποίο κάποιος θα το χρησιμοποιούσε. Εξετάστε το ενδεχόμενο να το ξεφορτωθείτε εντελώς όταν το θέμα σας προβάλλεται σε κινητό.
  • Να είστε προσεκτικοί με επιπλέον δυνατότητες ιστότοπου. Υπάρχουν αμέτρητες δυνατότητες όσον αφορά την εισαγωγή προσαρμοσμένων λειτουργιών σε ένα νέο θέμα WordPress. Μπορείτε να εφαρμόσετε πράγματα όπως ρυθμιστικά εικόνων, ενσωμάτωση κοινωνικών μέσων, προσαρμοσμένες γκαλερί και πολλά άλλα. Αλλά θα πρέπει; Παρόλο που αυτές οι ιδέες χαρακτηριστικών είναι όλες εξαιρετικές, μπορούν να προκαλέσουν κάποια προβλήματα στους χρήστες κινητών. Εάν θέλετε να βεβαιωθείτε ότι το θέμα σας λειτουργεί σωστά στις περισσότερες πλατφόρμες, χρησιμοποιήστε το εγγενές wp_is_mobile () λειτουργία. Θα σας επιτρέψει να κάνετε διάκριση μεταξύ επισκεπτών από κινητό και επιτραπέζιο υπολογιστή, ώστε να μπορείτε να απλοποιήσετε τη διεπαφή για την πρώτη ώστε να αποφύγετε τυχόν προβλήματα.

9. Φορτώστε μόνο τα απαραίτητα αρχεία

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

Ένας από τους καλύτερους τρόπους για να γίνει αυτό είναι μέσω μιας λύσης όπως Μοντερνέζρ. Εν ολίγοις, είναι μια βιβλιοθήκη JavaScript που ανιχνεύει τις δυνατότητες HTML5 και CSS3 στο πρόγραμμα περιήγησης του χρήστη. Σας επιτρέπει να γράψετε κώδικα υπό όρους με βάση το εάν μια συγκεκριμένη δυνατότητα περιλαμβάνεται στο πρόγραμμα περιήγησης από προεπιλογή ή όχι. Στη συνέχεια, εάν υπάρχει ανάγκη, μπορούν να εισαχθούν οι απαιτούμενες βιβλιοθήκες.

εκσυγχρονιστής

Αλλά η Modernizr δεν θα είναι η λύση για τα πάντα. Ακολουθούν ορισμένες άλλες οδηγίες που πρέπει να έχετε υπόψη:

  • Κατά γενικό κανόνα, μην ξεχνάτε να μην εισάγετε βιβλιοθήκες εάν δεν είναι απολύτως απαραίτητες για τη λειτουργικότητα του θέματος. Όσο περισσότερες βιβλιοθήκες και εξωτερικά σενάρια υπάρχουν, τόσο περισσότερος χρόνος θα χρειαστεί να φορτωθεί ο τελικός ιστότοπος (ειδικά σε κινητά).
  • Να προσπαθείτε πάντα να φορτώνετε αρχεία JavaScript στο τέλος της δομής HTML και όχι στην αρχή.
  • Προσπάθησε να ελαχιστοποιήστε τον αριθμό των στοιχείων DOM χρησιμοποιεί τη δομή HTML σας.
  • Φορτώστε αρχεία CSS και JavaScript για κάθε σελίδα ξεχωριστά. Για παράδειγμα, εάν έχετε ένα αρχείο CSS που απαιτείται μόνο σε μια συγκεκριμένη σελίδα, χρησιμοποιήστε τη συνάρτηση is_page () μέσα σε μια δήλωση υπό όρους και ενεργοποιήστε το στυλ μόνο σε αυτήν τη σελίδα.

10. Εκτελέστε δοκιμές ταχύτητας σε έναν διακομιστή δοκιμών

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

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

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

  • Insights PageSpeed. Ένα εργαλείο που δημιουργήθηκε από την Google. Θα σας δώσει καλά δεδομένα τόσο για την απόδοση του κινητού σας όσο και για επιτραπέζιους υπολογιστές, καθώς και μερικές συμβουλές για το πώς να βελτιώσετε τα πράγματα.
  • Δοκιμή ταχύτητας ιστότοπου Pingdom. Αυτό το εργαλείο θα σας δώσει μια πλήρη ανάλυση του χρόνου που απαιτείται για τη φόρτωση κάθε μεμονωμένου σεναρίου / αρχείου που απαιτεί ο ιστότοπός σας.
  • Ghostlab. Πολύ εύχρηστο εργαλείο για συγχρονισμένη δοκιμή προγράμματος περιήγησης για web και κινητό ταυτόχρονα.
  • Δοκιμή απόδοσης από κινητό από την Mobitest. Σας επιτρέπει να δοκιμάσετε τον ιστότοπό σας σε πραγματικές κινητές συσκευές και όχι μόνο σε ένα γενικό, προσομοιωμένο περιβάλλον κινητής τηλεφωνίας.
  • Πρόγραμμα περιήγησης. Σας δίνει άμεση πρόσβαση σε κάθε έκδοση κάθε δημοφιλούς προγράμματος περιήγησης για κινητά και επιτραπέζιους υπολογιστές. Με αυτό το εργαλείο, δεν χρειάζεται να αναρωτιέστε πώς θα μοιάζει το θέμα σας σε ένα ξεπερασμένο πρόγραμμα περιήγησης, μπορείτε να δημιουργήσετε ένα στιγμιότυπο οθόνης με μερικά μόνο κλικ.

ταχύτητα σελίδας

Αυτό συνοψίζει τον οδηγό 10 βημάτων για τη δημιουργία ενός πρώτου θέματος WordPress με θέμα την απόδοση. Ελπίζω να βγάλεις μερικές υπέροχες ιδέες από αυτό και ότι θα σε βοηθήσει να μετατρέψεις το επόμενο θέμα σου σε ένα πραγματικό τέρας απόδοσης!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map