Ο σχεδιασμός ιστοσελίδων για κινητά είναι περίπλοκος, δεδομένου ότι μια έκδοση για κινητά ενός ιστότοπου μπορεί να μην είναι συμβατή με κάθε συσκευή. Οι σχεδιαστές πρέπει να γνωρίζουν τις καλύτερες πρακτικές σχεδίασης για να κάνουν την παρουσία σας κινητή με νόημα και αξίζει τον κόπο.
Υπάρχει συνεχής συζήτηση μεταξύ των προγραμματιστών Ιστού σχετικά με τον τρόπο δημιουργίας ενός ιστότοπου βελτιστοποιημένου για κινητά είναι ο καλύτερος τρόπος. Υπάρχουν τρεις κύριες μέθοδοι για την ανάπτυξη ενός ιστότοπου για κινητά.
Αυτά είναι:
- Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές.
- Ειδικοί ιστότοποι για κινητά.
- RESS: Ο προγραμματισμός από την πλευρά του διακομιστή καθιστά CSS και HTML, ανάλογα με τον τύπο της συσκευής.
Κάθε μέθοδος έχει τα πλεονεκτήματα και τα μειονεκτήματά της. Ένας προγραμματιστής Ιστού πρέπει να γνωρίζει κάθε τεχνική για να εφαρμόσει την καλύτερη για την κατάσταση.
3 τρόποι για να σχεδιάσετε μια κινητή ιστοσελίδα
Ανταπόκριση σχεδίασης ιστοσελίδων (RWD)
Το RWD βασίζεται σε ερωτήματα μέσων CSS3 για ευθυγράμμιση της διάταξης μιας ιστοσελίδας με το μέγεθος της περιοχής προβολής μιας συσκευής. Ο ίδιος κώδικας HTML χρησιμοποιείται για την παρουσίαση διαφορετικών διατάξεων ιστοσελίδων για tablet, κινητές συσκευές, επιτραπέζιους υπολογιστές και άλλα gadget.
Οφέλη:
- Ο ιστότοπός σας θα έχει παρόμοιο περιεχόμενο και προσθήκη HTML, επομένως οι επισκέπτες με κινητά θα έχουν την ίδια εμπειρία, ανεξάρτητα από το είδος της συσκευής που χρησιμοποιούν.
- Μια ενιαία διεύθυνση URL διευκολύνει τους χρήστες να συνδέουν και να μοιράζονται περιεχόμενο. (Εάν η ιστοσελίδα είναι διαθέσιμη κάτω από περισσότερες από μία διευθύνσεις URL, οι χρήστες μπορούν να μπερδευτούν.)
Μειονεκτήματα:
Δεν είναι δυνατή η ξεχωριστή βελτιστοποίηση του περιεχομένου για κινητά. Επομένως, ένας σχεδιαστής που χρησιμοποιεί RWD δεν μπορεί να προσαρμόσει το περιεχόμενο χωριστά για τους χρήστες κινητών.
Σύμφωνα με τα στοιχεία του Ιανουαρίου 2013 από το αρχείο HTTP, μια μέση ιστοσελίδα είναι περίπου 1,3 MB. Ωστόσο, οι περισσότερες τοποθεσίες RWD είναι συγκριτικά μεγαλύτερες. Αυτό το μεγαλύτερο μέγεθος μειώνει την απόδοση των ιστότοπων για κινητά, καθιστώντας τους πιο αργούς.
Οι χρήστες κινητής τηλεφωνίας είναι περισσότερο προσαρμοσμένοι σε πρότυπα σχεδίασης διεπαφών χρήστη συγκεκριμένων για κινητά. Επιπλέον, οι χρήστες κινητής τηλεφωνίας είναι εξοικειωμένοι με τη λειτουργία πολλαπλών λειτουργιών. Εκτός αν η δομή πλοήγησης είναι προσαρμοσμένη για συγκεκριμένες συσκευές, οι χρήστες μπορούν να αντιμετωπίσουν προβλήματα όταν προσπαθούν να ολοκληρώσουν διάφορες εργασίες ταυτόχρονα.
Αφιερωμένες τοποθεσίες για κινητά
Αυτή η μέθοδος βελτιώνει την εμπειρία των χρηστών κινητής τηλεφωνίας δημιουργώντας έναν εντελώς ξεχωριστό ιστότοπο.
Οφέλη:
- Απλότητα διαχείρισης: Απαιτούνται ξεχωριστές αλλαγές για ιστότοπους για κινητά και επιτραπέζιους υπολογιστές. Οι αλλαγές που έγιναν περιορίζονται σε κάθε αντίστοιχη έκδοση. Αυτό σημαίνει ότι οι αλλαγές που προορίζονται για την πλατφόρμα για κινητά δεν είναι προσβάσιμες από την επιφάνεια εργασίας.
- Καθώς αναπτύσσετε έναν συγκεκριμένο ιστότοπο για κινητά, γίνεται ευκολότερη η βελτιστοποίησή του και η βελτιστοποίησή του ειδικά για το συγκεκριμένο κοινό.
- Η δομή περιεχομένου και πλοήγησης μπορεί να προσαρμοστεί για χρήστες κινητών τηλεφώνων.
Μειονεκτήματα:
Η κοινή χρήση μιας ιστοσελίδας μέσω κοινωνικών μέσων γίνεται πιο δύσκολη, καθώς με ειδικούς ιστότοπους για κινητά υπάρχουν πολλαπλές διευθύνσεις URL για σελίδες. Όταν οι χρήστες επιφάνειας εργασίας κάνουν κλικ σε διευθύνσεις URL για κινητά που μοιράζονται σε πλατφόρμες κοινωνικών μέσων, ενδέχεται να λάβουν ακούσια την έκδοση του ιστότοπου για κινητά και όχι την έκδοση για υπολογιστές.
Για να αποφύγετε διπλότυπα ζητήματα περιεχομένου, ο προγραμματιστής του ιστού πρέπει να χρησιμοποιεί μετα-ετικέτες rel = "alternative" και rel = "canonical". Εάν ένας χρήστης κινητής τηλεφωνίας πραγματοποιήσει αναζήτηση στο Google και κάνει κλικ σε μια διεύθυνση URL της επιφάνειας εργασίας, ο χρήστης είτε θα προβάλει την έκδοση της επιφάνειας εργασίας είτε θα ανακατευθυνθεί στην έκδοση για κινητά της ιστοσελίδας. Εάν η έκδοση για κινητά δεν υπάρχει, ο χρήστης θα λάβει ένα μήνυμα σφάλματος.
Η δημιουργία ενός εντελώς διαφορετικού ιστότοπου για χρήστες κινητών συσκευών σημαίνει ότι ο ιστότοπος θα είναι ειδικά σχεδιασμένος για χρήστες κινητών τηλεφώνων. Ωστόσο, για την εκπλήρωση αυτού του σκοπού, οι προγραμματιστές του Διαδικτύου πρέπει να αποκόψουν τη λειτουργικότητα και το περιεχόμενο, γεγονός που αποδεικνύεται ως εφιάλτης για αυτούς.
Σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές+ Στοιχεία πλευρικής πλευράς διακομιστή (RESS)
Αυτή η μέθοδος εξαρτάται από τον προγραμματισμό από την πλευρά του διακομιστή για την παροχή προσαρμοσμένων HTML και CSS για διαφορετικές συσκευές. Ο κώδικας για τους χρήστες κινητών συσκευών θα είναι διαφορετικός από αυτόν των χρηστών της επιφάνειας εργασίας.
Ο κύριος στόχος αυτής της εφαρμογής είναι η βελτίωση της απόδοσης του ιστότοπου. Αυτή η μέθοδος λειτουργεί καλά όταν συνδυάζεται με την ικανοποιητική σχεδίαση ιστοσελίδων. Ως εκ τούτου, αυτή η υλοποίηση μπορεί να αναφερθεί ως Responsive Web Design + side server components (RESS).
Οφέλη:
- Η δομή πλοήγησης μπορεί να προσαρμοστεί για διαφορετικές εργασίες που εκτελούνται από χρήστες υπολογιστών και φορητών υπολογιστών.
- Οι προγραμματιστές μπορούν να αφαιρέσουν στοιχεία σελίδας από HTML και CSS για να επιτύχουν την επιθυμητή εμφάνιση.
- Είναι δυνατό να καταργήσετε την περιττή JavaScript από την HTML, η οποία απελευθερώνει τους πόρους της CPU, τη μνήμη και την προσωρινή μνήμη των κινητών συσκευών.
Μειονεκτήματα:
- Η δυναμική HTML αυξάνει το φορτίο στο διακομιστή.
- Δεν είναι δυνατή η επίκληση της ανίχνευσης συσκευής.
- Τα HTML και CSS είναι βελτιστοποιημένα για την απόδοση των κινητών. Η έκδοση επιφάνειας εργασίας χρησιμοποιεί περισσότερα αιτήματα HTTP και δέσμες ενεργειών Java.
Ποια μέθοδος να επιλέξετε;
Η απόφαση να σχεδιάσετε έναν ιστότοπο βελτιστοποιημένο για κινητά εξαρτάται από τα προϊόντα που πωλείτε, το κοινό-στόχο σας, την απαιτούμενη επένδυση, τον ανταγωνισμό, τα ποσοστά μετατροπής κλπ. Η μέθοδος σχεδιασμού που θα λειτουργήσει καλύτερα εξαρτάται σε μεγάλο βαθμό από μορφές οθόνης, λειτουργικά συστήματα, ψηφίσματα.
Οι πιο ανταποκρινόμενες τοποθεσίες σχεδίασης ιστοσελίδων δεν υλοποιούνται με τον καλύτερο δυνατό τρόπο και ως εκ τούτου, οι τοποθεσίες αυτές χρειάζονται περισσότερο χρόνο για φόρτωση. Δεδομένου ότι ο ανταγωνισμός είναι έντονος, ενδέχεται να χάσετε τους πελάτες σας εάν ο ιστότοπός σας λειτουργεί πιο αργά. Ένας χρήστης απλά θα μεταβεί σε έναν άλλο ιστότοπο που χρειάζεται λιγότερο χρόνο για να ανοίξει. Παρόλο που είναι δυνατή η δημιουργία ιστότοπων με μικρότερους χρόνους φόρτωσης με αποκλειστικούς ιστότοπους για κινητά, υπάρχουν και πολλά μειονεκτήματα που συνδέονται με αυτήν την εφαρμογή.
Το RESS προσφέρει τα οφέλη του RWD ξεπερνώντας τα δύο κύρια μειονεκτήματά του. Το κύριο μειονέκτημα του RESS είναι ότι η ανίχνευση της συσκευής είναι αναξιόπιστη. Πρέπει να ελέγχετε συχνά τις νέες συσκευές για να διασφαλίσετε ότι η διαδικασία θα συνεχίσει να λειτουργεί σωστά.
Υπάρχουν υπηρεσίες όπως το DeviceAtlas, το WURFL και άλλες που μπορούν να ανιχνεύσουν νέες συσκευές. Θα σας βοηθήσει να ενημερώσετε νέες συσκευές στη βάση δεδομένων σας.
Ο σχεδιασμός του Mobile Web είναι επιτυχής μόνο όταν ένας ιστότοπος εμφανίζεται σωστά σε μια κινητή συσκευή. Αν και είναι ένα δύσκολο έργο για τους σχεδιαστές να αντιπροσωπεύουν όλα τα βασικά μέρη μιας επιφάνειας εργασίας σε ένα μικρό, κινητό παράθυρο, εμφανίζονται καθημερινά νέες τεχνικές για να κάνουν τους ιστότοπους για κινητά καλύτερους, πιο γρήγορους και πιο πλήρεις.
Mobile Website Φωτογραφία μέσω του Shutterstock
15 Σχόλια ▼
