Οι ιστοσελίδες που έχουν βελτιστοποιηθεί για χρήση σε κινητές συσκευές διαφέρουν από αυτές που εμφανίζονται σε επιτραπέζιους και φορητούς υπολογιστές. Οι τελευταίες έχουν σχεδιαστεί για μεγάλες οθόνες και ακριβή κλικ του ποντικιού, ενώ οι ιστοσελίδες για κινητά έχουν μέγεθος για μικρότερες οθόνες και ανακριβές χτύπημα με το δάχτυλο.
- Σχεδιασμένο για μικρότερες οθόνες και ανακριβές χτύπημα με το δάχτυλο.
- Σχεδιασμένο για μεγάλες οθόνες με ακριβές κλικ του ποντικιού.
Δεδομένου ότι η πλειονότητα των επισκέψεων σε ιστότοπους προέρχεται από κινητές συσκευές, οι σχεδιαστές ιστότοπων έχουν καθήκον να παρέχουν εκδόσεις που λειτουργούν τόσο με κινητές συσκευές όσο και με επιτραπέζιους υπολογιστές. Η πιο συνηθισμένη προσέγγιση είναι η χρήση αποκριτικής σχεδίασης ιστού, η οποία παρέχει αυτόματα την κατάλληλη έκδοση με βάση τη συσκευή και το μέγεθος οθόνης του χρήστη, όπως εντοπίζεται από το πρόγραμμα περιήγησης.
Σε κάθε περίπτωση, οι ιστοσελίδες φιλικές προς κινητά διαφέρουν από τις εκδόσεις για υπολογιστές με διάφορους τρόπους.
Σχεδίαση σελίδας: Οι οθόνες κινητών έχουν λιγότερο χώρο
- Οθόνες smartphone και tablet έχουν διαγώνιο 4 έως 10 ίντσες.
-
Τα πτυσσόμενα ή επεκτάσιμα γραφικά στοιχεία μενού αντικαθιστούν συνήθως τις πλευρικές γραμμές και τα ογκώδη μενού κεφαλίδων.
- Γραφικά πλήρους πλάτους με δικαστική χρήση του διαστήματος μεταξύ κειμένου.
- Οι περισσότερες επιτραπέζιες οθόνες έχουν διαγώνιο 19 ίντσες έως 24 ίντσες.
- Οι σύνδεσμοι διαφημιζόμενων και οι μεγάλες διαφημίσεις banner είναι πιο συνηθισμένοι.
- Πυκνότερο κείμενο με περισσότερα περιθώρια για γραφικά.
Η πιο προφανής διαφορά μεταξύ των ιστοσελίδων για επιτραπέζιους υπολογιστές και για κινητά είναι η ακίνητη περιουσία της οθόνης. Ενώ οι περισσότερες επιτραπέζιες οθόνες έχουν διαγώνιο τουλάχιστον 19 ίντσες έως 24 ίντσες, τα tablet είναι συνήθως περίπου 10 ίντσες. Τα smartphone είναι περίπου 4 ίντσες διαγώνια. Η απλή σμίκρυνση δεν μετατρέπει με επιτυχία μια ιστοσελίδα σε έκδοση φιλική προς κινητά, επειδή καθιστά το κείμενο μη αναγνώσιμο και απαιτεί ένα επιπλέον βήμα από τον επισκέπτη του ιστότοπου. Επίσης, το χτύπημα με ακρίβεια σε μικροσκοπικά στοιχεία είναι αδύνατο.
Για να διορθώσουν το πρόβλημα, οι σχεδιαστές ενδέχεται να αφαιρέσουν πλαϊνές γραμμές και γραφικά που δεν είναι απολύτως απαραίτητα. Αντίθετα, χρησιμοποιούν μικρότερα γραφικά, αυξάνουν τα μεγέθη γραμματοσειρών και συμπτύσσουν το περιεχόμενο σε επεκτάσιμα γραφικά στοιχεία. Αυτός ο περιορισμός ακίνητης περιουσίας έχει οδηγήσει σε ένα εντελώς διαφορετικό τρόπο σκέψης μεταξύ των σχεδιαστών ιστού.
Επίσης, τα πτυσσόμενα ή επεκτάσιμα γραφικά στοιχεία μενού αντικαθιστούν συνήθως τις πλευρικές γραμμές και τα ογκώδη μενού κεφαλίδων. Στην προσπάθειά τους να κάνουν κάθε χιλιοστό του χώρου της οθόνης να μετράει, οι σχεδιαστές αφαιρούν τον περιττό λευκό χώρο, ενώ παρακολουθούν προσεκτικά την αναγνωσιμότητα.
Ένα πλήθος συνδέσμων χορηγίας και μεγάλων διαφημίσεων banner απλά δεν λειτουργούν σε τηλέφωνο ή μικρό tablet. Αντίθετα, οι μικρές αναδυόμενες διαφημίσεις είναι πιο συνηθισμένες σε ιστοσελίδες για κινητές συσκευές.
Οι διατάξεις που διαθέτουν κείμενο τυλιγμένο γύρω από ένα γραφικό δεν παίζουν καλά σε κινητές συσκευές. Αντίθετα, οι σχεδιαστές συχνά δίνουν σε αυτά τα γραφικά όλο το πλάτος της οθόνης και εκτελούν το κείμενο κάτω ή πάνω. Ομοίως, ο καλός σχεδιασμός ιστοσελίδων σπάει το κείμενο σε κομμάτια για αναγνωσιμότητα. κανείς δεν θέλει να διαβάσει συμπαγείς τοίχους κειμένου. Αυτό γίνεται ακόμη πιο σημαντικό στις μικρές οθόνες. Η χρήση του λευκού διαστήματος με σύνεση είναι ζωτικής σημασίας.
Στοιχεία ελέγχου σελίδας: Desktop Precision έναντι Mobile Blobs
- Μεγάλες περιοχές πατήματος ή hotspot για πιο ακριβή πλοήγηση.
- Διαφορετική διεύθυνση URL: προσθέτει το γράμμα "m." Συχνά μια επιλογή για προβολή της έκδοσης για υπολογιστές ενός ιστότοπου.
- Τα διαπιστευτήρια σύνδεσης έχουν συχνά ειδικό χώρο, μερικές φορές με προσβασιμότητα δακτυλικών αποτυπωμάτων.
- Πιο ακριβείς σύνδεσμοι και κουμπί βάσει δρομέα.
Σε αντίθεση με έναν ακριβή δείκτη του ποντικιού στην επιφάνεια εργασίας σας, το ανθρώπινο δάχτυλο είναι μια σταγόνα και το πάτημα απαιτεί μεγάλους στόχους στην οθόνη για υπερσυνδέσμους. Οι ιστότοποι φιλικοί προς κινητά προσφέρουν μεγάλες περιοχές (ή hotspot) για να διευκολύνουν την ακριβή πλοήγηση.
Οι ιστοσελίδες φιλικές προς κινητά περιλαμβάνουν επίσης συνήθως το γράμμα m στις διευθύνσεις τους. για παράδειγμα, η διεύθυνση κινητού του Facebook είναι m.facebook.com. Η διεύθυνση URL του κινητού συνήθως επιλέγεται αυτόματα για εσάς όταν σερφάρετε με κινητό tablet ή smartphone. Σε ορισμένες περιπτώσεις, θα δείτε έναν σύνδεσμο με δυνατότητα πατήματος που σας επιτρέπει να μεταβείτε στην κανονική έκδοση της σελίδας για επιτραπέζιους υπολογιστές.
Τα πεδία σύνδεσης και κωδικού πρόσβασης που προορίζονται για επιτραπέζιους υπολογιστές και φορητούς υπολογιστές γίνονται μικροσκοπικά και άχρηστα σε ένα τηλέφωνο, επομένως οι εκδότες Ιστού τα μεγαλώνουν, δίνοντάς τους μερικές φορές τις δικές τους σελίδες για ευκολία χρήσης. Η σύνδεση με δακτυλικό αποτύπωμα ή άλλον λογαριασμό, όπως το Google ή το Facebook, γίνεται όλο και πιο συνηθισμένη καθώς εξελίσσονται οι δυνατότητες συσκευών και υπηρεσιών.
Γιατί έχει σημασία;
Οι ιστοσελίδες για φορητές συσκευές έχουν σχεδιαστεί για φορητές συσκευές και διαφέρουν αρκετά από τις σελίδες που έχουν σχεδιαστεί για ανάγνωση από υπολογιστή. Ενώ συνήθως μπορείτε να προβάλετε την έκδοση για υπολογιστές μιας ιστοσελίδας σε κινητή συσκευή και αντίστροφα, έχουν σχεδιαστεί διαφορετικά για να διευκολύνουν την προβολή, την ανάγνωση και την πλοήγηση του περιεχομένου.
