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

Στον πυρήνα του, η δημιουργία ενός θέματος WordPress είναι μάλλον απλή εργασία. Το WordPress προσφέρει ένα πραγματικά φιλικό περιβάλλον και καθιστά σαφές ποια PHP λειτουργεί για να χρησιμοποιήσει για ποιο σκοπό.


Ωστόσο. Παρόλο που είναι απλό, απέχει πολύ από το εύκολο, και ειδικά αν θέλετε το θέμα σας να βελτιστοποιηθεί για κινητά.

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

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

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

1. Το περιεχόμενο έρχεται πρώτο

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

Παρόλο που οι σύγχρονες συσκευές είναι σε θέση να εμφανίζουν γραφικά έως 1136 × 640 pixel (iPhone 5s), ας μην ξεχνάμε ότι η οθόνη είναι ακόμα τέσσερις ίντσες. Δεν πρόκειται για πολλά ακίνητα για εργασία.

Πράγματα που αξίζει να κάνετε:

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

2. Βελτιστοποιήστε τις εικόνες

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

Συγκεκριμένα πράγματα που μπορείτε να κάνετε:

  • Εξετάστε το ενδεχόμενο να ενσωματώσετε τη λειτουργικότητα τεμπέλης φόρτωσης. Από μόνη της, η τεμπέλη φόρτωση είναι μεγάλη (φόρτωση εικόνων μόνο όταν ο επισκέπτης κάνει κύλιση σε αυτές). Αλλά το πρόβλημα είναι ότι οι τελικοί χρήστες ενδέχεται να καταλήξουν να εγκαταστήσουν κάποια πρόσθετα τεμπέλης φόρτωσης στον τελικό ιστότοπο. Αυτό θα μπορούσε να επηρεάσει ό, τι έχετε ήδη ενσωματώσει στο θέμα. Εάν θέλετε να αναλάβετε τον κίνδυνο, ωστόσο, θα ήταν καλύτερο να κάνετε τη λειτουργικότητα δυνατή μέσω μιας λύσης όπως το jQuery και το Πρόσθετο Lazy Load. Οι προσθήκες WordPress τείνουν επίσης να χρησιμοποιούν αυτήν τη βιβλιοθήκη, επομένως ελαχιστοποιείτε την πιθανότητα να πάει στραβά τα πράγματα όταν υπάρχουν δύο διαφορετικά σενάρια και τα δύο προσπαθούν να επιτύχουν το ίδιο αποτέλεσμα. Επίσης, μπορείτε να απενεργοποιήσετε το τεμπέλης φόρτωσης στις ρυθμίσεις του θέματος.
  • Βελτιστοποιήστε τις εικόνες για μέγεθος και ποιότητα. Οι εικόνες συνήθως αντιπροσωπεύουν την πλειονότητα της κατανάλωσης εύρους ζώνης για τον μέσο ιστότοπο, οπότε ως δημιουργός θεμάτων, πρέπει να βεβαιωθείτε ότι οι εικόνες σας είναι όσο το δυνατόν βέλτιστες. Μπορείτε να κάνετε δύο πράγματα για να συμβεί αυτό: (1) βεβαιωθείτε ότι οι εικόνες δεν έχουν μεγαλύτερη διάσταση από ό, τι πρέπει (βλ. # 3) – ένα επιπλέον pixel εδώ και εκεί μπορεί να προστεθεί αρκετά γρήγορα, (2) βελτιστοποίηση όλες οι εικόνες μέσω ενός εργαλείου όπως Optimole ή TinyPNG πριν από την κυκλοφορία του θέματος στο κοινό.
  • Χρησιμοποιήστε γραμματοσειρές εικονιδίων όποτε είναι δυνατόν. Το παλιό σχολείο που συμπεριλάμβανε εικονίδια σε οποιοδήποτε σχέδιο ήταν απλώς να τα δημιουργήσει στο Photoshop, να μετατρέψει τα πάντα σε PNG ή GIF και να το αναπτύξει. Σήμερα όμως, δεν είναι η πιο βελτιστοποιημένη λύση. Με εργαλεία όπως Γραμματοσειρά φοβερό, μπορούμε να εμπλουτίσουμε τα σχέδιά μας με εκατοντάδες όμορφα σχεδιασμένες γραμματοσειρές, διατηρώντας ταυτόχρονα την απόδοση πολύ αξιοπρεπή.

3. Κάντε το σχέδιο Retina-ready (βελτιστοποιημένο για οθόνες υψηλής DPI)

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

Υπάρχουν δύο κύριες συντομεύσεις που μπορείτε να χρησιμοποιήσετε για τη βελτιστοποίηση υψηλής DPI:

  • Χρησιμοποιήστε γραμματοσειρές εικόνας – που αναφέρονται παραπάνω. οι γραμματοσειρές εικόνας κλιμακώνονται αυτόματα και φαίνονται υπέροχες σε κάθε συσκευή.
  • Δημιουργήστε εναλλακτικές εκδόσεις όλων των άλλων εικόνων – σε διπλάσιο μέγεθος – και ανταλλάξτε τις με CSS κάθε φορά που χρησιμοποιείται μια συσκευή υψηλής DPI για την προβολή του περιεχομένου. Εδώ είναι ένας οδηγός για το πώς μπορείτε να το κάνετε αυτό.

Τέλος, θα πρέπει επίσης να φροντίσετε τα favicons στο θέμα σας (και πιθανώς να επιτρέψετε στον χρήστη να τα αλλάξει, αλλά αυτό είναι άλλο πράγμα).

Πίσω στην ημέρα, χρειαζόσασταν μόνο μία εικόνα 16 × 16 PNG, την οποία στη συνέχεια θα μετατρέπατε σε ICO και είστε έτοιμοι. Αυτή τη στιγμή είναι πολύ πιο περίπλοκο. Για παράδειγμα, οι νέες συσκευές Apple θα προσπαθήσουν να αναζητήσουν μεγαλύτερα εικονίδια και στη συνέχεια να προσπαθήσουν να τα χρησιμοποιήσουν ως σελιδοδείκτες.

Μερικά από τα μεγέθη favicon που αναμένεται να βρει το iOS είναι: 76 × 76, 120 × 120, 152 × 152. Εδώ είναι πλήρης λίστα στο Apple.com.

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

4. Βελτιστοποίηση για χτύπημα

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

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

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

5. Το να ανταποκρίνεται το θέμα δεν έχει σημασία

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

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

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

Σας προσκαλώ να συντονιστείτε για το δεύτερο μέρος για να πάρετε το υπόλοιπο της λίστας (πρόκειται να αναφερθούμε σε πράγματα όπως ο σχεδιασμός UX, η πλοήγηση, η χρήση JS για τη βελτιστοποίηση των χρόνων φόρτωσης, εκμεταλλευόμενοι μερικές από τις λιγότερο γνωστές λειτουργίες του 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