Οι πιθανότητες είναι ότι έχετε δει πώς το iPhone μπορεί να αλλάξει και να επεκτείνει ιστοσελίδες. Μπορεί να σας δείξει ολόκληρη την ιστοσελίδα με μια ματιά ή ζουμ για να κάνει το κείμενο που σας ενδιαφέρει να είναι ευανάγνωστο. Από μία άποψη, δεδομένου ότι το iPhone χρησιμοποιεί το Safari, οι σχεδιαστές ιστοσελίδων δεν θα πρέπει να κάνουν τίποτα ειδικά για να δημιουργήσουν μια ιστοσελίδα που θα λειτουργήσει στο iPhone.
Αλλά θέλετε πραγματικά να λειτουργήσει η σελίδα σας; Οι περισσότεροι σχεδιαστές θέλουν τις σελίδες τους να λάμπουν!
Όταν δημιουργείτε μια ιστοσελίδα , πρέπει να σκεφτείτε ποιος πρόκειται να την δει και πώς θα την δουν. Ορισμένοι από τους καλύτερους ιστότοπους λαμβάνουν υπόψη τον τύπο συσκευής στην οποία προβάλλεται η σελίδα, όπως η ανάλυση, οι επιλογές χρωμάτων και οι διαθέσιμες λειτουργίες. Δεν στηρίζονται απλώς στη συσκευή για να το καταλάβουν.
Γενικές οδηγίες για τη δημιουργία ιστότοπου για κινητές συσκευές
- Δοκιμάστε σε όσο το δυνατόν περισσότερες συσκευές. Το πρώτο πράγμα που πρέπει να κάνετε είναι να δείτε τον ιστότοπό σας σε ένα iPhone και σε πολλές διαφορετικές συσκευές κινητής τηλεφωνίας ή εξομοιωτές, όπως μπορείτε. Παρόλο που μπορείτε να χρησιμοποιήσετε εξομοιωτές για όλες τις δοκιμές σας, δεν σας δίνουν την ίδια αίσθηση με την προσπάθεια να περιηγηθείτε σε έναν ιστότοπο στη μικροσκοπική μικρή οθόνη, ώστε να δοκιμάσετε τις πραγματικές συσκευές όσο το δυνατόν περισσότερο.
- Κάντε τις σελίδες σας να υποβαθμίζονται με χαρά. Μπορείτε να γράψετε τις σελίδες σας για προγράμματα περιήγησης με ευρεία οθόνη, αλλά βεβαιωθείτε ότι οι κρίσιμες πληροφορίες είναι ορατές ακόμη και σε μια μικρή οθόνη που δεν μπορεί να χειριστεί ειδικές λειτουργίες (όπως cookies, Ajax, Flash, JavaScript κ.λπ.). Οτιδήποτε πέρα από το XHTML Basic θα είναι πέρα από μερικά κινητά τηλέφωνα. Ενώ τα περισσότερα smartphones μπορούν να χειριστούν όλα αυτά τα πράγματα (εκτός από το Flash στο iPhone, φυσικά), άλλες κινητές συσκευές δεν μπορούν.
- Δημιουργήστε μια συγκεκριμένη ασύρματη σελίδα-και διευκολύνετε την εύρεση. Αν πρόκειται να δημιουργήσετε μια συγκεκριμένη σελίδα για το κινητό σας τηλέφωνο και για τους πελάτες ασύρματου δικτύου - κάντε το διαθέσιμο. Ένας πολύ καλός τρόπος είναι να τοποθετήσετε το σύνδεσμο στην ασύρματη σελίδα στην κορυφή του εγγράφου σας και, στη συνέχεια, να αποκρύψετε αυτόν τον σύνδεσμο από μη φορητές συσκευές χρησιμοποιώντας τον τύπο φορητού μέσου. Μετά από όλα, οι περισσότεροι άνθρωποι έρχονται στην αρχική σελίδα σας, ακόμη και σε κινητά τηλέφωνα-και αν ο σύνδεσμος προς την ασύρματη σελίδα σας δεν υπάρχει, θα φύγουν αν η σελίδα είναι πολύ δύσκολη για χρήση.
Διάταξη ιστοσελίδας για έξυπνα τηλέφωνα
Το πρώτο πράγμα που πρέπει να θυμάστε όταν γράφετε σελίδες για την αγορά smartphone είναι ότι δεν χρειάζεται να κάνετε αλλαγές εάν δεν θέλετε. Το μεγάλο πράγμα για τα περισσότερα smartphones που διατίθενται είναι ότι χρησιμοποιούν προγράμματα περιήγησης Webkit (Safari σε iOS και Chrome στο Android) για την εμφάνιση ιστοσελίδων, οπότε αν η σελίδα σας φαίνεται καλά στο Safari ή το Chrome, θα φαίνονται καλά στα περισσότερα smartphones ). Αλλά υπάρχουν πράγματα που μπορείτε να κάνετε για να κάνετε την εμπειρία περιήγησης πιο ευχάριστη:
- Θυμηθείτε ότι η οθόνη είναι μικροσκοπική. Τα smartphones θα συμπυκνώσουν όλες αυτές τις στήλες κάτω στο μικρό παράθυρο και αυτό μπορεί να τους κάνει πολύ δύσκολο να διαβαστούν χωρίς ζουμ. Οι περισσότεροι χρήστες χρησιμοποιούνται για τη μεγέθυνση, αλλά μπορεί να ενοχλούν. Μία μακρά στήλη κειμένου είναι ευκολότερη στην ανάγνωση.
- Διαχωρίστε τις σελίδες σε μικρότερα κομμάτια. Μπορεί να είναι δύσκολη η ανάγνωση μεγάλων τμημάτων κειμένου σε κινητό τηλέφωνο, οπότε η τοποθέτησή τους σε πολλαπλές σελίδες καθιστά ευκολότερη την ανάγνωση.
Σύνδεσμοι και πλοήγηση σε iPhone
- Όσο πιο σύντομες είναι οι διευθύνσεις URL, τόσο το καλύτερο. Εάν έχετε δοκιμάσει ποτέ να πληκτρολογήσετε μια διεύθυνση URL σε ένα κινητό τηλέφωνο, θα γνωρίζετε ότι είναι ένας πόνος (εκτός ίσως για τους έφηβους που συνηθίζουν να στέλνουν πολλά μηνύματα κειμένου). Ακόμη και στο iPhone, είναι κουραστικό να πληκτρολογείτε μεγάλες διευθύνσεις URL. Κρατήστε τους σύντομα.
- Αλλά το κείμενο μακράς σύνδεσης είναι ευκολότερο να αγγίξει. Όταν σε μια σελίδα όπου μερικές ξεχωριστές λέξεις συνδέονται με διαφορετικά άρθρα, ακριβώς δίπλα στο άλλο, μπορεί να είναι πολύ δύσκολο να πατήσετε το σωστό χωρίς ζουμ. Πολλοί άνθρωποι απλά θα εγκαταλείψουν και θα πάνε κάπου αλλού. Οι συνδέσεις με 3-5 λέξεις σε αυτές είναι πιο εύκολο να κάνετε κλικ στο τηλέφωνο από τους συνδέσμους 1 λέξης.
- Μην τοποθετείτε την πλοήγησή σας στο πάνω μέρος της οθόνης. Δεν υπάρχει τίποτα πιο ενοχλητικό από το να χρειάζεται να προβάλλετε σελίδες μέσω οθονών και οθόνες συνδέσμων για να βρείτε τις πληροφορίες που θέλετε. Αν εξετάσατε ιστοσελίδες που σχεδιάστηκαν για κινητά τηλέφωνα, θα δείτε ότι τα πρώτα πράγματα που εμφανίζονται είναι το περιεχόμενο και ο τίτλος. Στη συνέχεια, κάτω από αυτό είναι πλοήγηση.
- Μη φοβάστε να αποκρύψετε την πλοήγησή σας. Η απόκρυψη συνδέσεων πλοήγησης με CSS ή JavaScript και η εμφάνισή τους μόνο όταν ο χρήστης το ζητάει είναι ένας τρόπος να γίνει ευκολότερη η σελίδα για τους χρήστες smartphone.
Συμβουλές για εικόνες σε Smartphones
- Οι εικόνες πρέπει να είναι μικρές. Ναι, τα Android και τα iPhone μπορούν να μεγεθύνουν και να απενεργοποιήσουν τις εικόνες , αλλά όσο μικρότερες είναι, τόσο οι διαστάσεις και ο χρόνος λήψης, τόσο πιο ευτυχισμένοι θα είναι οι ασύρματοι πελάτες σας. Η βελτιστοποίηση των εικόνων είναι πάντα μια καλή ιδέα, αλλά για σελίδες κινητού τηλεφώνου, είναι κρίσιμη.
- Οι εικόνες πρέπει να κατεβάζουν γρήγορα. Οι εικόνες καταλαμβάνουν πολύ χώρο στις ιστοσελίδες κατά την προβολή τους από μια κινητή συσκευή. Και ενώ συχνά είναι πολύ ωραία και κάνουν τις σελίδες να φαίνονται καλύτερα όταν προβληθούν σε ένα πρόγραμμα περιήγησης ιστού πλήρους οθόνης, συχνά παρεμβάλλονται σε μια κινητή συσκευή. Επιπλέον, όταν ένας χρήστης smartphone βρίσκεται στο κυψελοειδές δίκτυο, το τελευταίο πράγμα που θέλουν να πληρώσουν είναι να κατεβάσουν ένα σωρό τεράστιες εικόνες ή εικονίδια πλοήγησης.
- Μην τοποθετείτε μεγάλες εικόνες στο πάνω μέρος της σελίδας. Ακριβώς όπως και με την πλοήγηση, μπορεί να είναι πολύ κουραστικό να περιμένετε μια εικόνα που καταλαμβάνει 3-4 screenfuls για φόρτωση στο πάνω μέρος της σελίδας. Και αυτό είναι εξαιρετικά κοινό στις ιστοσελίδες. Η μόνη εξαίρεση σε αυτό είναι αν ο αναγνώστης γνωρίζει ότι πρόκειται να πάρει μια εικόνα όταν κάνουν κλικ, λένε σε μια συλλογή φωτογραφιών.
Τι πρέπει να αποφύγετε κατά το σχεδιασμό για κινητά
Υπάρχουν πολλά πράγματα που πρέπει να αποφύγετε όταν δημιουργείτε μια σελίδα φιλική προς κινητά. Όπως προαναφέρθηκε, αν θέλετε πραγματικά να έχετε αυτά στη σελίδα σας, μπορείτε, αλλά βεβαιωθείτε ότι ο ιστότοπος λειτουργεί χωρίς αυτούς.
- Flash - τα περισσότερα κινητά τηλέφωνα δεν υποστηρίζουν το Flash, οπότε δεν είναι καλή ιδέα να συμπεριληφθεί στις ασύρματες σελίδες σας.
- Cookies - πολλά κινητά τηλέφωνα δεν υποστηρίζονται από cookies. Τα iPhone έχουν υποστήριξη cookie.
- Κορνίζες - ακόμα και αν το πρόγραμμα περιήγησης τους υποστηρίζει, σκεφτείτε τις διαστάσεις της οθόνης. Τα πλαίσια απλά δεν λειτουργούν σε κινητές συσκευές - είναι πολύ δύσκολο ή αδύνατο να διαβαστούν.
- Πίνακες - Μην χρησιμοποιείτε πίνακες για διάταξη σε κινητή σελίδα. Και προσπαθήστε να αποφύγετε γενικά τα τραπέζια. Δεν υποστηρίζονται σε κάθε κινητό (αν και τα iPhone και άλλα smartphone τα υποστηρίζουν) και μπορείτε να καταλήξετε με παράξενα αποτελέσματα.
- Εμπιστευμένοι πίνακες - αν πρέπει να χρησιμοποιήσετε έναν πίνακα, βεβαιωθείτε ότι δεν θα το φωλιάσετε σε άλλο τραπέζι. Αυτά είναι δύσκολα για τα προγράμματα περιήγησης που υποστηρίζουν την επιφάνεια εργασίας και, στην καλύτερη περίπτωση, κάνουν τη φόρτωση της σελίδας πιο αργά.
- Απόλυτα μέτρα - με άλλα λόγια, δεν ορίζουν τις διαστάσεις αντικειμένων σε απόλυτα μεγέθη (όπως εικονοστοιχεία, χιλιοστά ή ίντσες). Αν ορίζετε κάτι πλάτους 100px, σε μια κινητή συσκευή που μπορεί να είναι η μισή οθόνη και σε άλλη μπορεί να είναι δύο φορές το πλάτος. Τα σχετικά μεγέθη (όπως τα ems και τα ποσοστά) λειτουργούν καλύτερα.
- Γραμματοσειρές - μην υποθέσετε ότι οποιαδήποτε από τις γραμματοσειρές που χρησιμοποιείτε για να έχετε πρόσβαση θα είναι διαθέσιμη στα κινητά τηλέφωνα.
Διαβάστε περισσότερα
- Πώς να κάνετε την ιστοσελίδα σας κινητό φιλικό χρησιμοποιώντας PHP