Πώς να μετατρέψετε μια ιστοσελίδα για ένα κινητό πρόγραμμα περιήγησης

Οι κινητές συσκευές, όπως τα smartphones και τα tablet, αντιπροσωπεύουν περισσότερο από το ήμισυ της συνολικής κίνησης στο Internet. Ωστόσο, σύμφωνα με την έρευνα που πραγματοποίησε το BrightEdge το 2014, πάνω από το ένα τέταρτο των ιστότοπων που επισκέπτονται οι χρήστες δεν έχουν ρυθμιστεί σωστά για αυτές τις συσκευές - που τους κοστίζουν κατά μέσο όρο απώλειες 68% στην κυκλοφορία. Η σωστή τροποποίηση της δικής σας ιστοσελίδας για κινητά προγράμματα περιήγησης απαιτεί προγραμματισμό και έλεγχο. Η ίδια η κωδικοποίηση, ωστόσο, συνήθως δεν είναι πολύ δύσκολη, ιδιαίτερα αν είστε ήδη εξοικειωμένοι με το CSS. Εάν χρησιμοποιείτε μια πλατφόρμα όπως το WordPress, δεν χρειάζεται να γνωρίζετε τον κώδικα καθόλου.

Κοινές πλατφόρμες

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

Χρήση CSS και HTML

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

Διαδραστικές λειτουργίες οθόνης αφής

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

Δοκιμή και επαλήθευση

Ο καλύτερος τρόπος να δοκιμάστε τον νέο ιστότοπο για κινητά που χρησιμοποιείτε να χρησιμοποιήσετε τη δική σας κινητή συσκευή. Εξετάστε το στυλ και τη διάταξη της σελίδας, περιηγηθείτε με πινελιές και χειρονομίες και κοιτάξτε προσεκτικά τις εικόνες σας για να βεβαιωθείτε ότι φαίνονται τραγανές. Μπορείτε επίσης να χρησιμοποιήσετε το πρόγραμμα περιήγησης ιστού του υπολογιστή σας για να μιμηθεί μια οθόνη κινητής τηλεφωνίας. Στο Google Chrome, για παράδειγμα, πατήστε "F12" για να ανοίξετε την κονσόλα προγραμματιστή. Κάντε κλικ στο εικονίδιο "Ρυθμίσεις" και, στη συνέχεια, κάντε κλικ στην καρτέλα "Εξομοίωση" για να επιλέξετε μια συσκευή όπως το Google Nexus ή το iPad της Apple.