Μία από τις μεγαλύτερες αποφάσεις κατά την κατασκευή ιστοσελίδων για κινητά είναι εάν θα επιλέξετε μια ανταποκρίσιμη ή προσαρμοστική σχεδίαση. Ας δούμε ποιες είναι οι βασικές διαφορές μεταξύ των δύο.

Ανταποκρίσιμος σχεδιασμός
Ο ανταποκρίσιμος σχεδιασμός προσαρμόζεται δυναμικά για να ταιριάζει στο μέγεθος της οθόνης οποιασδήποτε συσκευής. Η διάταξη που χρησιμοποιείται είναι τα πολυμέσα CSS για να αλλάξει το μέγεθος πτυχών μιας σελίδας όπως το πλάτος και το ύψος της.

Προσαρμοστικός σχεδιασμός
Ο προσαρμοστικός σχεδιασμός είναι φιλικός προς κινητά, αλλά χρειάζεται μια διαφορετική προσέγγιση. Εμφανίζει στατική διάταξη για πολλά μεγέθη οθόνης. Ένας σχεδιαστής θα πρέπει να δημιουργήσει διατάξεις για έναν προσαρμοστικό ιστότοπο για έξι πλάτη οθόνης: 320, 480, 760, 960, 1200 και 1600 pixel. Οι χρήστες μπορούν  να περιηγηθούν και να κάνουν αγορές από οποιαδήποτε συσκευή διαθέτουν, τα στοιχεία της σελίδας, όμως, θα εμφανίζονται διαφορετικά.

Ο ανταποκρίσιμος σχεδιασμός είναι εξαιρετικά ευέλικτος και ευκολότερος στη συντήρηση. Αντίθετα, ο προσαρμοστικός είναι πιο δύσκολος στη δημιουργία του και δίνει μεγαλύτερο έλεγχο στον τρόπο με τον οποίο οι χρήστες βιώνουν τον ιστότοπό σας σε διαφορετικές συσκευές. Ποιο σχέδιο επιλέγετε εξαρτάται τελικά από εσάς. Ωστόσο, είναι σημαντικό να σταθμίσετε τα πλεονεκτήματα και τα μειονεκτήματα του καθενός πριν καταλήξετε ποιον θα χρησιμοποιήσετε.

Βέλτιστες πρακτικές σχεδιασμού ιστοσελίδων για κινητά

1. Κατανοήστε το Ταξίδι

Οι κινητές συσκευές δεν έχουν την ίδια διάσταση οθόνης με επιτραπέζιους υπολογιστές και tablet. Αυτό σημαίνει ότι πρέπει να δώσετε προτεραιότητα στα στοιχεία που θα εμφανίζονται σε χρήστες κινητών.

2. Ανακαλύψτε το Nav

Οι γραμμές πλοήγησης επιτρέπουν στους χρήστες να πλοηγούνται στη σωστή ενότητα ενός ιστότοπου. Αυτές βρίσκονται συνήθως στην κορυφή ενός ιστότοπου όπου οι χρήστες μπορούν να τις δουν καλύτερα. Μία πρόκληση είναι η εφαρμογή γραμμών πλοήγησης για κινητές συσκευές. Τα μικρότερα μεγέθη οθόνης σημαίνουν ότι μια πλήρης γραμμή πλοήγησης θα καταλάμβανε πολύ χώρο.

3. Περιορίστε τις επιλογές

Ένας εγκέφαλος δεν μπορεί να κρατήσει πληθώρα πληροφοριών και οι πολλές επιλογές μπορεί να προκαλέσουν σύγχυση και να δυσκολέψουν την περιήγηση των χρηστών στον ιστότοπό σας. Κατά το σχεδιασμό για κινητές συσκευές, διατηρήστε μικρό αριθμό επιλογών σε μια σελίδα.

4. Απλοποίηση

Μην κάνετε τα πράγματα πιο δύσκολα για τους επισκέπτες από ό, τι πρέπει. Εάν κάτι δεν εξυπηρετεί κάποιο σκοπό ή δεν είναι απαραίτητο, απορρίψτε το. Αυτό ισχύει επίσης για όλες τις φόρμες στις σελίδες σας. Περιορίστε τις φόρμες σας και ζητήστε μόνο πληροφορίες που είναι απολύτως απαραίτητες.

5. Εικόνες και βίντεο

Η προσθήκη εικόνων σε μιασελίδα είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή και να αυξήσετε την αφοσίωση. Οι εικόνες πρέπει να είναι σχετικές με την προσφορά σας και να έχουν σωστό μέγεθος για προσαρμοσμένα σχέδια. Οι μη βελτιστοποιημένες εικόνες μπορούν να επιβραδύνουν τον ιστότοπό σας και να επηρεάσουν αρνητικά τη συνολική εμπειρία χρήστη.

6. Τοποθέτηση

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

7. Στοιχεία επικοινωνίας συνδέσμου

Οι χρήστες κινητών που είναι εν κινήσει θέλουν να ολοκληρώσουν γρήγορα την αναζήτηση τους. Δεν έχουν την υπομονή να περιηγούνται σε πολλές σελίδες για να βρουν αυτό που αναζητούν. Γι’ αυτό πρέπει όταν οι χρήστες πατήσουν τη διεύθυνσή σας να εμφανίζονται οι χάρτες για να μπορούν να πλοηγούνται εύκολα στην ιστοσελίδα σας.