Μια αποτελεσματική σελίδα προορισμού είναι ζωτικής σημασίας για την επιτυχία ενός προϊόντος
Το μάρκετινγκ είναι μια ξένη ιδέα για τα περισσότερα σχεδιαστές Υ προγραμματιστές . Διακρίνουμε την ανάπτυξη προϊόντων και τις τεχνικές προκλήσεις, αλλά όταν έρθει η ώρα να προωθήσουμε ένα προϊόν, δεν είμαστε πολύ γνώστες.
Αλλά το μάρκετινγκ είναι ζωτικής σημασίας για την επιτυχία ενός προϊόντος και δεν πρέπει να το παραβλέψουμε. Αυτή ήταν η πρόκληση όταν σχεδίασα και ετοίμασα να εκκινήσω το βασικό πληκτρολόγιο στον κόσμο για προγραμματιστές, το Πληκτρολόγιο Ultimate Hacking .
Η φωτογραφία προϊόντων υψηλής ποιότητας είναι ένα κρίσιμο στοιχείο για τις σελίδες προορισμού ηλεκτρονικού εμπορίου.
Ευτυχώς, ήμουν μέλος μιας ομάδας που συνειδητοποίησε τη σημασία μιας ελκυστικής αρχικής σελίδας, ειδικά τους μήνες που προηγήθηκαν της εκστρατείας crowdfunding. Μαζί, ξεκινήσαμε να σχεδιάζουμε μια σελίδα προορισμού που συλλαμβάνει τη φαντασία, δημιουργεί συνδρομητές και προετοιμάζει το προϊόν μας για μια επιτυχημένη κυκλοφορία.
Αυτή είναι η ιστορία του Η απόλυτη σελίδα προσγείωσης πληκτρολογίου χάραξης .
raspberry pi ανοιχτή θύρα 8080
Τεχνικές συμβουλές. Πρακτικά βήματα προς τα εμπρός.
Μια αναζήτηση Google για 'σχεδιασμό σελίδας προορισμού' δημιουργεί δεκάδες εξαιρετικά άρθρα, το καθένα με σημαντικές συμβουλές όπως:
- 'Το περιεχόμενο πρέπει να φορτωθεί σε μια στιγμή.'
- 'Η φωτογραφία πρέπει να είναι σχετική με το κοινό του ιστότοπου.'
- ε, 'Συμπεριλάβετε μια φόρμα για τη συγκέντρωση δυνητικών πελατών.'
Αυτά είναι χρήσιμα σημεία, αλλά υπάρχουν περισσότεροι παράγοντες επιτυχία σελίδας προορισμού . Αυτός ο οδηγός σχεδιασμού σελίδας προορισμού θα παρέχει τεχνικές συμβουλές, αλλά θα παρέχει επίσης πρακτικές πληροφορίες που θα βοηθήσουν τους σχεδιαστές και τους προγραμματιστές να επιλέξουν τις σωστές υπηρεσίες τρίτων και να ενσωματώσουν τεχνολογίες που λειτουργούν πίσω από τα παρασκήνια.
Τελικά, ο στόχος αυτού του οδηγού είναι να εξοικονομήσει χρόνο και χρήμα σχεδιαστών και προγραμματιστών που διαφορετικά θα μπορούσαν να χαθούν σε άκαρπες δοκιμές και λάθη.
Στόχος για παραγωγή και φιλοξενία βίντεο υψηλής τεχνολογίας
Η παρουσίαση βίντεο στον Ιστό είναι ευκολότερη από ποτέ, αλλά σχετικά λίγοι ιστότοποι το χρησιμοποιούν. Από την οπτική γωνία του Ιστού, δεν είναι τεχνική πρόκληση, αλλά επένδυση πόρων: χρόνος και χρήμα.
Το βίντεο τρέιλερ της αρχικής σελίδας του Ultimate Hacking Keyboard (UHK) υποβλήθηκε σε δώδεκα επαναλήψεις, με κάθε νέα κυκλοφορία να βελτιώνει σταδιακά κάθε μικρή λεπτομέρεια. ο διαδικασία σχεδιασμού Ήταν εξαντλητικό αλλά ικανοποιητικό, και το βίντεο του τρέιλερ είναι το στεφάνι της σελίδας προορισμού μας. Διακρίνει εντελώς το προϊόν μας από το υπόλοιπο πακέτο.
Λάβετε υπόψη ότι η δημιουργία περιεχομένου υψηλής ποιότητας είναι δαπανηρή. Οι εξειδικευμένοι επαγγελματίες μπορούν να κάνουν ένα προϊόν να λάμψει, αλλά είναι σημαντικό να καταλάβετε τι μπορείτε να αντέξετε οικονομικά. Διαφορετικά, το προϊόν σας μπορεί να βυθιστεί πριν σηκωθεί από το έδαφος.
Εάν εσείς ή κάποιος άλλος σχεδιαστής στην ομάδα σας έχετε τις δεξιότητες και την ομάδα, μπορείτε να δοκιμάσετε να δημιουργήσετε το δικό σας περιεχόμενο βίντεο, αλλά διατηρήστε τα βίντεο σύντομα και απλά. Οι υπερβολικά φιλόδοξες παραγωγές στα χέρια των ερασιτεχνών σπάνια πάνε καλά.
Η ομάδα του UHK εγκαταστάθηκε σε μια δυναμική τρισδιάστατη κινούμενη εικόνα για να δείξει βασικές λειτουργίες πληκτρολογίου στην αρχική μας σελίδα. Εάν απαιτείται 2D κινούμενη εικόνα (για μια εφαρμογή ή μια υπηρεσία Ιστού) ή εάν απαιτείται ζωντανό βίντεο από κάμερα, η διαδικασία θα παρουσιάσει διαφορετικές προκλήσεις.
Μόλις δημιουργηθεί ένα βίντεο, πρέπει να φιλοξενείται σε έναν ιστότοπο. Ευτυχώς, υπάρχουν πολλές επιλογές:
Youtube είναι ο αδιαμφισβήτητος ηγέτης της αγοράς και συνώνυμο για βίντεο στον Ιστό. Είναι μια ικανή υπηρεσία και μια λογική επιλογή, αλλά το ενσωματωμένο πρόγραμμα αναπαραγωγής του δεν είναι η πιο αισθητικά ευχάριστη επιλογή.
Vimeo Διαθέτει ενσωματωμένο πρόγραμμα αναπαραγωγής με μινιμαλιστικό σχεδιασμό που είναι αρκετά κομψό. Είναι γνωστό για την προσφορά ποιοτικού περιεχομένου και την παροχή ανώτερης υψηλής ευκρίνειας.
δείγμα λογιστικού σχεδίου παραγωγής
Γουίστια Είναι μια άλλη δημοφιλής επιλογή μεταξύ των εμπόρων. Παρέχει προηγμένες λειτουργίες, όπως χάρτες θερμότητας βίντεο που δείχνουν ποια μέρη ενός βίντεο έχουν παρακολουθηθεί, παραλειφθεί και επαναληφθεί.
Τελικά, η ομάδα του UHK αποφάσισε ότι το Vimeo ανταποκρίθηκε καλύτερα στις ανάγκες μας. Ακολουθεί το τρέιλερ μας για τη σελίδα προορισμού: Πληκτρολόγιο Ultimate Hacking
Το 3D animation είναι ένας πολύ καλός τρόπος για να δείξετε τη λειτουργικότητα ενός προϊόντος.Αξίζει επίσης να σημειωθεί ότι μπήκαμε στο Διεπαφή προγραμματισμού εφαρμογών Vimeo (API) για να βοηθηθεί η καλύτερη λήψη του βίντεό μας. την προσοχή των επισκεπτών της σελίδας προορισμού. Χρησιμοποιώντας API JavaScript Vimeo , κάναμε τα κουμπιά 'Θέλω ένα' στον ιστότοπό μας να κάνουν κλικ τρεις φορές στη σειρά μετά το τέλος του τρέιλερ μας. Εάν χρησιμοποιηθεί σωστά, μικρά τσιμπήματα όπως αυτό μπορούν να αυξήσουν τα ποσοστά μετατροπής της σελίδας προορισμού.
Δημιουργήστε μια συναρπαστική εμπειρία με περιεχόμενο 3D
Μερικές φορές είναι σημαντικό να προσφέρετε στους επισκέπτες της σελίδας προορισμού μια συναρπαστική εμπειρία. Θέλαμε οι επισκέπτες μας να μπορούν να εξερευνήσουν το τελευταίο πληκτρολόγιο hacking σε 3D, οπότε έπρεπε να διερευνήσουμε τις υπηρεσίες που βασίζονται στο WebGL που δημιουργήθηκαν ειδικά για αυτόν τον σκοπό.
Sketchfab είναι η πιο δημοφιλής υπηρεσία που βασίζεται στο WebGL. Είναι εύκολο να ελέγξετε, παρέχει μια ποικιλία οπτικών ρυθμίσεων και ενσωματώνεται με ένα ευρύ φάσμα δημοφιλών υπηρεσιών φιλοξενίας.
Το [P3d.in] (http://p3d.in/) είναι μια απλή υπηρεσία WebGL που εστιάζει στην ευκολία χρήσης, αλλά έχει περιορισμένη υποστήριξη για ορισμένες υφές υψηλής ανάλυσης.
Μετά από προσεκτική εξέταση, επιλέξαμε το Sketchfab. Αυτό είναι το Ultimate Hacking Keyboard 3D .
Οπτικοποιήστε προβλήματα και λύσεις με 2D κινούμενα σχέδια
Ένα από τα κύρια πλεονεκτήματα του Ultimate Hacking Keyboard είναι ότι μειώνει δραστικά την κίνηση των χεριών. Η ομάδα ήθελε να το απεικονίσει στην αρχική μας σελίδα δείχνοντας ένα κινούμενο σχέδιο του UHK που λειτουργεί δίπλα-δίπλα με ένα κανονικό πληκτρολόγιο. Η εφαρμογή αυτού δεν ήταν τόσο απλή όσο ακούγεται.
ράγες 4 εναντίον ράγες 5
Η χρήση ενός ενσωματωμένου βίντεο ήταν σαν υπερβολή και θα απαιτούσε και την επιπλέον απόδοση απόδοσης. Τα κινούμενα GIF δεν ήταν επιλογή λόγω του μεγάλου μεγέθους αρχείου και της περιορισμένης παλέτας χρωμάτων. Τελικά, επιλέξαμε να συνεργαζόμαστε με κινούμενα σχέδια SVG εν σειρά επειδή επέτρεψαν στα γραφικά μας να κινούνται ανεξάρτητα από άλλα γραφικά στη σελίδα.
Η δημιουργία κινούμενης σελίδας προορισμού με αυτόν τον τρόπο ήταν πιο χρονοβόρα από ό, τι περιμέναμε. Έπρεπε να περιηγηθούμε σε προβλήματα μεταξύ προγραμμάτων περιήγησης, σφάλματα βιβλιοθήκης JavaScript και άλλες απρόβλεπτες τεχνικές προκλήσεις για να κάνουμε μια απλή κίνηση. Ωστόσο, το τελικό αποτέλεσμα φαίνεται αρκετά καλό και απέδειξε ότι άξιζε την επιπλέον δουλειά.
Μια λέξη στους σοφούς: Ποτέ μην υποτιμάτε τον αριθμό των πραγμάτων που μπορεί να πάνε στραβά!
Μέτρηση του Analytics σε πραγματικό χρόνο
Το Google Analytics είναι υπέροχο. Χρησιμοποιείται ευρέως και είναι εύκολο να εργαστεί. Ωστόσο, υπάρχουν καλύτεροι υποψήφιοι για συναλλαγές σε πραγματικό χρόνο.
Χτύπημα γραφήματος κάνει εξαιρετική δουλειά για την αποστολή ειδοποιήσεων όταν ένας ιστότοπος υπερβαίνει ορισμένα όρια, ειδικά τον αριθμό των ταυτόχρονων χρηστών σε έναν ιστότοπο. Για παράδειγμα, ο ιστότοπος UHK συνδέεται περιστασιακά με διαδικτυακά φόρουμ, δημιουργώντας ξαφνικές αυξήσεις στην κίνηση. Χάρη στο Chartbeat, γνωρίζουμε αμέσως και μπορούμε να συμμετέχουμε στην τρέχουσα συνομιλία από την αρχή.
Mixpanel βοηθά τους webmaster να αναλύσουν συμβάντα όπως επισκέψεις σε ιστότοπους, να ανοίξουν ένα παράθυρο διαλόγου συνδρομής και να επιβεβαιώσουν μια συνδρομή. Μπορείτε επίσης να δημιουργήσετε διοχετεύσεις από αυτά τα συμβάντα και να οπτικοποιήσετε τα ποσοστά μετατροπής, κάνοντας τους αριθμούς ενεργούς.
Κλικ παρέχει ένα εκπληκτικό χαρακτηριστικό χάρτη θερμότητας που αποκαλύπτει πού κάνουν κλικ οι επισκέπτες σε έναν ιστότοπο. Ανάλογα με τα αποτελέσματα, μπορούν να γίνουν βελτιώσεις στο σχεδιασμό ή το περιεχόμενο ενός ιστότοπου για την επίτευξη καλύτερων αποτελεσμάτων.
HotJar επιτρέπει στους κατόχους ιστότοπων να καταγράφουν τις αλληλεπιδράσεις των επισκεπτών τους αποθηκεύοντας κάθε ενέργεια ποντικιού και πληκτρολογίου και μετατρέποντάς τα σε βίντεο.
Κάθε μία από αυτές τις υπηρεσίες έχει μοναδικά χαρακτηριστικά και οφέλη, αλλά όλες παρέχουν πολύτιμα άμεσα σχόλια σχετικά με τη δραστηριότητα των επισκεπτών μιας ιστοσελίδας. Εναπόκειται σε μεμονωμένες εταιρείες να καθορίσουν τι είδους πληροφορίες είναι πιο πολύτιμες για σκοπούς μάρκετινγκ.
Καταγράψτε τα σφάλματα και αποτρέψτε τους περιττούς πονοκεφάλους
Οι ιστότοποι εξαρτώνται όλο και περισσότερο από τη JavaScript, τόσο πολύ που εξαρτώνται συχνά από τις κρίσιμες λειτουργίες του ιστότοπου. Για παράδειγμα, ο διάλογος συνδρομής στην αρχική σελίδα του Ultimate Hacking Keyboard ενεργοποιείται από κώδικα JavaScript.
Εφαρμόζοντας τη δυνατότητα συνδρομής, τη δοκιμάσαμε σε όλα τα μεγάλα προγράμματα περιήγησης και ήμασταν σίγουροι ότι κάναμε ό, τι χρειαζόταν να κάνουμε. Αργότερα, ωστόσο, λάβαμε ένα μήνυμα ηλεκτρονικού ταχυδρομείου από έναν επισκέπτη που παραπονιέται ότι η συνδρομή της αρχικής σελίδας δεν λειτουργούσε.
Αποδείχθηκε ότι ο εν λόγω επισκέπτης χρησιμοποιεί το Adblock Plus στην αυστηρότερη λειτουργία του, αποκλείοντας το σενάριο ανάλυσης Clicky. Σε αντίθεση με άλλες υπηρεσίες ανάλυσης, ο κώδικας ενσωμάτωσης Clicky δεν ήταν ευέλικτος ως προς αυτό, οπότε κατά την εγγραφή της ενέργειας εγγραφής και την αναφορά του αντικειμένου Clicky, ο κώδικας έριξε ένα σφάλμα.
πώς να συγκεντρώσετε κεφάλαια για εκκίνηση
Μετά από αυτό το περιστατικό, σκεφτήκαμε προσεκτικά πώς να αποφύγουμε παρόμοιες καταστάσεις στο μέλλον. Συνέβη στην ομάδα ότι πρέπει να χρησιμοποιήσουμε τον παγκόσμιο χειριστή συμβάντων window.onerror για να εντοπίσουμε και να καταγράψουμε τέτοια σφάλματα. Στη συνέχεια ψάχνουμε τις κατάλληλες υπηρεσίες εγγραφής και καταλήγουμε στην επιλογή Λάθος .
Η λανθασμένη λήψη είναι φοβερή επειδή κάνει δουλειά και το κάνει τόσο καλά - βρίσκει σφάλματα JavaScript. Η διεπαφή χρήστη της είναι μινιμαλιστική και λειτουργική, η υποστήριξη είναι εξαιρετική και επιτρέπει στον διαχειριστή του ιστότοπου να δει μεμονωμένα σφάλματα και να διερευνήσει ίχνη στοίβας. Το καλύτερο από όλα, παρέχει μια πραγματική έκρηξη για τα χρήματά σας.
Από την ενσωμάτωση του Errorception, επιλύσαμε περίπου δώδεκα σφάλματα, μερικά από τα οποία ήταν απίθανο και απροσδόκητο. Για παράδειγμα, μόλις λάβουμε ένα σφάλμα που σχετίζεται με localStorage και ανακαλύψαμε ότι όταν το Safari βρίσκεται σε λειτουργία ιδιωτικής περιήγησης, localStorage.setItem () οδηγεί σε σφάλμα .
Είναι αδύνατο να ληφθεί υπόψη κάθε περίπτωση, επομένως η καταγραφή είναι ένας πολύ καλός τρόπος για να εντοπίσετε σφάλματα πριν μετατραπούν σε σοβαρούς πονοκεφάλους.
Σχεδιάστε μια διαδικασία κατασκευής χαμηλής συντήρησης
Αρχικά, η σελίδα ευρετηρίου UHK ξεκίνησε ως μία σελίδα HTML που φιλοξενείται από το WordPress και περιείχε όλο τον κώδικα CSS , HTML και JavaScript. Στην αρχή αυτή ήταν μια εφαρμόσιμη λύση, αλλά καθώς η σελίδα μεγάλωνε, έγινε συντήρηση και χρειάστηκε μια πιο αρθρωτή προσέγγιση.
Εξαίρεση χειρισμού υποστηρίγματος μπότας ελατηρίου
Η λύση μας; Αρχικά, χωρίσαμε τον κώδικα CSS, HTML και JavaScript σε διάφορα ξεχωριστά αρχεία. Στη συνέχεια, μετατρέπουμε τα αρχεία CSS σε λιγότερα αρχεία για να κάνουμε τη συντήρηση ακόμα πιο εύκολη. Τέλος, σχεδιάσαμε μια διαδικασία κατασκευής για να συγκεντρώσουμε όλα τα μικρά αρχεία μας.
Βελτιστοποιήστε πάντα για απόδοση
Η ομάδα του UHK γνωρίζει από την εμπειρία ότι η απόδοση του ιστότοπου είναι ζωτικής σημασίας, όπως όταν ήταν η σελίδα προορισμού μας Περικομμένη και λάβαμε ταυτόχρονα 260 επισκέπτες. Ευτυχώς, το Linode VPS μας $ 20 το μήνα αποδόθηκε σαν πρωταθλητής, αλλά αυτό χρειάστηκε περισσότερο από τυφλή τύχη, οπότε εδώ είναι μερικές συμβουλές για τη βελτίωση της απόδοσης:
- Η αργή φόρτωση εικόνων είναι ο φίλος σας, ειδικά αν η σελίδα σας, όπως η δική μας, περιέχει πολλές εικόνες. Χρησιμοποιούμε την προσθήκη WordPress Αποκαλύψτε το Lazy Load .
- Μπορείτε επίσης να φορτώσετε τεμπέληδες στοιχεία. Εάν ένα τμήμα μιας σελίδας εξαρτάται από ένα πρόσθετο σενάριο, ενδέχεται να φορτωθεί αργά ενώ βρίσκεται μέσα στη θύρα προβολής. Ελέγξτε την ορατότητα της θύρας προβολής με το Πρόσθετο jQuery inview και φορτώστε το σενάριο με jQuery.getScript () ή οποιονδήποτε άλλο διαχειριστή σεναρίων.
Ο σχεδιασμός σελίδας προορισμού είναι ζωτικής σημασίας σχεδιασμός
Αντιμετωπίσαμε ορισμένα θέματα του σχεδιασμός σελίδας προορισμού σε αυτήν την ανάρτηση, οπότε θα συνοψίσουμε τα πιο σημαντικά σημεία:
- Προχωρήστε πέρα από το περιεχόμενο που βασίζεται σε κείμενο και συμπεριλάβετε εμπλουτισμένα μέσα όπως βίντεο, τρισδιάστατα μοντέλα και 2D κινούμενα σχέδια. Αυτός ο τύπος περιεχομένου καθιστά μια σελίδα προορισμού πιο ελκυστική και ενθαρρύνει τους επισκέπτες να τη μοιραστούν με άλλους.
- Χρησιμοποιήστε αναλυτικά στοιχεία σε πραγματικό χρόνο, ώστε να μπορείτε να αντιδρά γρήγορα σε απότομες αυξήσεις της κυκλοφορίας και να συμμετάσχετε στη συνεχιζόμενη συνομιλία.
- Καταγράφει πάντα λάθη. Υπάρχουν πολλά πράγματα που μπορούν (και θα) πάνε στραβά, οπότε είναι σημαντικό να δοθεί συνέχεια.
- Βελτιστοποιήστε την απόδοση, έτσι ώστε ο ιστότοπός σας να παραμένει ενημερωμένος ακόμα και με τις υψηλότερες επιβαρύνσεις.
Όπως με κάθε κλάδο σχεδίασης, ο σχεδιασμός σελίδας προορισμού απαιτεί συνεχή δέσμευση για εκμάθηση νέων εργαλείων, τεχνικών και διαδικασιών. Η τεχνολογία και οι γεύσεις εξελίσσονται αναπόφευκτα - η σημερινή αιχμή είναι αύριο λείψανο.
Ευτυχώς, ο σχεδιασμός σελίδας προορισμού που επικοινωνεί καθαρά και σαγηνεύει ένα κοινό δεν εξαρτάται πλήρως από την τεχνολογία. Οι έμπειροι σχεδιαστές ξέρουν πώς να ενσωματώνουν τα πιο πρόσφατα εργαλεία, αλλά η διαδικασία σχεδιασμού τους βασίζεται κυρίως στην υποβολή των σωστών ερωτήσεων και στην επιδέξια πλοήγηση σε θέματα που απειλούν να εκτροχιάσουν ένα έργο.
Τελικά, μια ελκυστική σελίδα προορισμού θα πρέπει να αποτελεί ουσιαστικό μέρος του σχεδίου μάρκετινγκ για κάθε νέα μάρκα ή προϊόν. Στον κόσμο μας που βασίζεται στον ιστό, μια καλά σχεδιασμένη σελίδα προορισμού έχει τη δυνατότητα να δημιουργήσει έναν ακόλουθο, να δημιουργήσει φήμη και να αυξήσει τις πωλήσεις, τα οποία είναι ζωτικής σημασίας για τη συνεχή ευημερία μιας αναπτυσσόμενης επιχείρησης.
