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