Σου έχει τύχει ποτέ να μπεις σε ένα site από το κινητό σου και να βλέπεις τα πάντα μικρά, μπερδεμένα ή ακόμα χειρότερα να χρειάζεται να κάνεις zoom και pan για να δεις τι λέει;
Αν ναι, τότε ξέρεις το πρόβλημα που δημιουργεί ένα site που κανείς δεν σχεδίασε για κινητά. Κι όμως, πολλοί ιδιοκτήτες ιστοσελίδων και eshop δεν δίνουν όσο σημασία θα έπρεπε σε αυτό το θέμα.
Κρίσιμη πληροφορία: περισσότερο από το 70% των ανθρώπων που ψάχνουν στο internet τώρα χρησιμοποιούν κινητό. Αν το site σου δεν λειτουργεί καλά στο κινητό, χάνεις τους μισούς πιθανούς πελάτες σου, ακόμα και αν βρουν το site σου στη Google.
Σε αυτό το άρθρο θα σε πάω βήμα-βήμα στη σωστή σχεδίαση για κινητά. Δεν θα σου μιλήσω με τεχνικό λεξιλόγιο (εκτός αν χρειάζεται), αλλά θα σου εξηγήσω τι σημαίνει η κάθε αλλαγή και γιατί είναι σημαντική. Ακόμα κι αν δεν ξέρεις τι είναι το responsive design, το άρθρο είναι για σένα.
Γιατί η σχεδίαση για κινητό είναι υπερκρίσιμη
Μπορεί να το θεωρείς δεδομένο ότι πρέπει να σχεδιάσεις για κινητά, αλλά ας ξεκινήσουμε από την αρχή. Γιατί ακριβώς είναι τόσο σημαντικό;
Πρώτον, η Google προτιμάει τα sites που δουλεύουν καλά σε κινητά. Αν το δικό σου δεν λειτουργεί σωστά, η Google μπορεί να το βάλει πιο κάτω στα αποτελέσματα της αναζήτησης. Δεν είναι θέμα δίκαιου η όχι, αλλά είναι ο κανόνας του παιχνιδιού.
Δεύτερον, ακόμα κι αν ο κάποιος φτάσει στο site σου από κάποιον άλλον τρόπο (π.χ. από social media), αν το δει στο κινητό και το βρει άβολο, θα φύγει αμέσως. Δεν θα περιμένει να το ξανακοιτάξει από υπολογιστή. Θα πάει στον ανταγωνιστή σου που έχει ένα καθαρό, ευκολο site.
Τρίτον, αν έχεις eshop, η σχεδίαση για κινητά σημαίνει λιγότερα ακυρωμένα καλάθια και περισσότερες πωλήσεις. Πολλοί ψωνίζουν μόνο από κινητό τώρα. Αν είναι δύσκολο να κάνουν αγορά από σένα, δεν θα την κάνουν.
Τα στατιστικά μιλούν
Τα τελευταία χρόνια το κινητό έχει ξεπεράσει τον υπολογιστή. Σήμερα, περίπου το 70% της κίνησης σε ένα site ξεκινά από κινητό. Αυτό σημαίνει ότι αν σχεδιάσεις για υπολογιστή πρώτα και ύστερα προσπαθήσεις να προσαρμόσεις το κινητό, κάνεις ό,τι απλό υπάρχει.
Το σωστό είναι το αντίθετο: σχεδιάζεις για κινητό πρώτα, και ύστερα επεκτείνεις για μεγάλες οθόνες.
Δες και το άρθρο: 10 Σημαντικά Στοιχεία που Πρέπει να έχει Κάθε Ιστοσελίδα
Τι σημαίνει ο σωστός σχεδιασμός για κινητά
Responsive design – Απλή εξήγηση
Ας καταλήξουμε στο τι σημαίνει “responsive design”. Σημαίνει απλώς ότι το site σου αλλάζει διάταξη ανάλογα με το μέγεθος της οθόνης ενός κινητού.
Φαντάσου σαν το νερό που παίρνει το σχήμα του δοχείου. Το site σου θα πρέπει να κάνει το ίδιο: να δείχνει σωστό σε οθόνη 320 pixels (μικρό κινητό), 768 pixels (tablet) και 1200 pixels (υπολογιστής).
Δεν το πετυχαίνεις με κόλπα, ούτε με μαγικά. Χρειάζεται σωστός κώδικας και σχεδιασμός. Και ναι, αν δεν κάνεις αυτή τη δουλειά, θα δεις το site σου παραμορφωμένο στο κινητό.
Το πρώτο πράγμα: Έλεγχος του viewport
Υπάρχει μια γραμμή κώδικα που είναι υπό-εκτιμημένη αλλά σημαντικότατη. Οι προγραμματιστές το ονομάζουν “meta viewport tag”. Αν δεν είναι στο site σου, το κινητό θα νομίζει ότι το site σου έχει πλάτος 960 pixels και θα το συμπιέσει όλο για να χωράει στην οθόνη.
Με τη γραμμή κώδικα meta viewport tag λες στο browser του κινητού: «Δείξε το site μου με το πραγματικό πλάτος της οθόνης». Αν δεν την βάλεις, το κινητό θα νομίζει ότι η οθόνη του έχει πλάτος 960 pixels και θα συμπιέσει όλο το site για να χωρέσει, με αποτέλεσμα τα γράμματα να δείχνουν μικροσκοπικά και ο χρήστης να πρέπει να κάνει zoom για να διαβάσει.
Η γραμμή που πρέπει να υπάρχει στο
<head>του site σου είναι αυτή:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Εσύ που έχεις WordPress, συνήθως η συμπεριφορά αυτή είναι ήδη εκεί, προεγκατεστημένη. Αν κατασκευάζεις site εξ αρχής, πρέπει να ελέγξεις ότι υπάρχει.
Για τους ιδιοκτήτες: απλώς κάνε ένα screenshot του site σου στο κινητό. Αν λειτουργεί σωστά χωρίς zoom, τότε όλα πάνε καλά. Αν χρειάζεται να κάνεις zoom, ειδοποίησε τον κατασκευαστή σου.
Τι χαλάει το περιεχόμενο σε κινητό και πώς το διορθώνεις
Οι εικόνες που είναι πολύ μεγάλες
Μια συχνή αιτία είναι οι εικόνες. Αν ανεβάσεις φωτογραφία 3000×2000 pixels και απλώς την κάνεις μικρότερη με HTML ή CSS, ο browser θα κατεβάσει την πλήρη εικόνα. Αυτό σημαίνει:
- Αργή φόρτωση
- Χρήση περισσότερου data
- Κακή εμπειρία
Τι θα έκανα; Θα έβαζα τις εικόνες σε σωστό μέγεθος πριν τις ανεβάσω. Για ένα site, μια εικόνα δεν χρειάζεται να είναι μεγαλύτερη από 1200 pixels σε πλάτος. Για κινητό, 600 pixels είναι αρκετό.
Εάν έχεις eshop, διάβασε πιο προσεκτικά το άρθρο μας για φωτογραφίες προϊόντων: “Πώς ανεβάζω φωτογραφίες προϊόντων στο eshop”
Τα plugin και τα scripts που δεν χρειάζονται
Πολλά WordPress sites έχουν γεμίσει με plugin. Κάθε plugin που κατεβάζεις είναι ένα νέο JavaScript αρχείο που πρέπει να φορτώσει το browser. Σε κινητό, αυτό κάνει το site σου αργό.
Θα σου δώσω μια συμβουλή: κάνε καταγραφή όλων των plugin που έχεις στο site σου. Μετά, απενεργοποίησε ένα-ένα και δες αν το χρειάζεσαι πραγματικά. Αν δεν χρειάζεσαι, διέγραψε το. Αν χρειάζεσαι, κράτησε το αλλά βεβαιώσου ότι δεν κάνει τον site σου αργό.
Η ταχύτητα φόρτωσης σε κινητό είναι διαφορετική από υπολογιστή
Ίσως νομίζεις ότι αν το site σου φορτώνει γρήγορα στον υπολογιστή (που είναι συνδεδεμένος σε δίκτυο), θα φορτώνει και στο κινητό. Δεν είναι αλήθεια.
Ο κανόνας είναι αυστηρότερος για κινητά. Η Google θέλει η σελίδα σου να φορτώνει σε λιγότερο από 3 δευτερόλεπτα σε 4G. Πολλά sites φτάνουν τα 6-8 δευτερόλεπτα. Αυτό είναι πολύ.
Η Google προσφέρει το εργαλείο PageSpeed Insights. Πηγαίνεις εκεί, βάζεις το URL του site σου, και σου δείχνει τι είναι αργό. Μιλάει στη γλώσσα σου. Εμάς μας αφορά ειδικά το “mobile” score, όχι το desktop.
Διάβασε και το άρθρο “Γιατί Είναι Σημαντική η Ταχύτητα Φόρτωσης του site”
Πώς πρέπει να δείχνουν τα πράγματα στο κινητό
Το layout πρέπει να είναι μία στήλη, όχι πολλές
Σε υπολογιστή μπορείς να έχεις sidebar, δύο στήλες, κάρτες δίπλα-δίπλα. Στο κινητό, όλα πρέπει να μπαίνουν κάθετα σε μία στήλη.
Αν δεν το κάνεις, ο άνθρωπος θα πρέπει να κάνει scroll αριστερά και δεξιά για να δει τι υπάρχει. Αυτό είναι δύσκολο και φεύγει αμέσως.
Τα κουμπιά και τα στοιχεία πρέπει να είναι αρκετά μεγάλα
Ο κανόνας είναι: ένα κουμπί θα πρέπει να έχει τουλάχιστον 48×48 pixels. Γιατί; Γιατί ο αντίχειρας του ανθρώπου είναι αρκετά μεγάλος. Αν κάνεις το κουμπί πολύ μικρό, κάποιος θα κάνει λάθος κλικ, θα νευριάσει, και θα φύγει.
Επίσης, τα links δεν πρέπει να είναι πολύ κοντά το ένα στο άλλο. Δώσε χώρο.
Τα κείμενα πρέπει να είναι ευανάγνωστα
Αν το κείμενο είναι πολύ μικρό, ο επισκέπτης θα κάνει zoom. Αλλά αυτο θα τον κουράσει στο site σου και θα πάει αλλού.
Το ελάχιστο μέγεθος γραμματοσειράς για κινητό είναι 14px. Είναι κανόνας.
Πρακτικές συμβουλές για καλή σχεδίαση κινητού
Χρησιμοποίησε ξεκάθαρη πλοήγηση
Σε κινητό, το μενού πρέπει να είναι απλό και ξεκάθαρο. Μην κάνεις mega menus ή πολλά επίπεδα. Ο επισκέπτης δεν έχει όρεξη να ψάχνει για 30 δευτερόλεπτα στο κινητό.
Το καλύτερο είναι ένα hamburger menu (τρεις γραμμές) που ανοίγει και κλείνει. Απλό, καθαρό, και δουλεύει παντού.
Δες και το άρθρο: “Χρησιμοποίησε ξεκάθαρη πλοήγηση με απλό μενού”
Δοκίμασε το site σου στο δικό σου κινητό
Έχεις κινητό; Ωραία. Δεν χρειάζεσαι τίποτα άλλο. Άνοιξε τη σελίδα σου στο κινητό και δες πώς δείχνει.
Αν κάτι μοιάζει παράξενο, αν κάτι δεν έχει σωστή ευθυγράμμιση ή αν βλέπεις κάτι πολύ μικρό, τότε ξέρεις ότι πρέπει να αλλάξεις κάτι.
Δεν χρειάζεσαι εργαλεία για να αρχίσεις. Φτάνει μόνο το κινητό σου.
Δοκίμασε σε διαφορετικές οθόνες
Υπάρχουν χιλιάδες διαφορετικά κινητά και tablets. Δεν μπορείς να δοκιμάσεις σε όλα. Αλλά θα πρέπει να δοκιμάσεις σε τουλάχιστον τρία μεγέθη:
- Μικρό κινητό (around 320px) – iPhone SE ή παρόμοιο
- Medium (around 768px) – tablet ή μεγάλο κινητό
- Large (1024px και πάνω) – desktop
Τα περισσότερα εργαλεία δίνουν device preview, αλλά αν έχεις κάποια κατοχή συσκευών, καλύτερα να δοκιμάσεις στις δικές σου.
Κάνε τις φόρμες απλές
Αν έχεις contact form ή cart σε eshop, κάνε το όσο απλό μπορείς. Μην ζητάς πολλά πεδία. Σε κινητό, κάθε επιπλέον πεδίο σημαίνει μεγαλύτερη πιθανότητα ο κάποιος να εγκαταλείψει τη φόρμα.
Και μιας και μιλάμε για checkout: “Η Απλοποίηση του Checkout και η Επίδρασή της στις Πωλήσεις”
Ταχύτητα φόρτωσης σε κινητό – Βήματα δράσης
Σμίκρυνε τις εικόνες
Όπως είπα, οι εικόνες είναι ο μεγαλύτερος εχθρός της ταχύτητας. Αν έχεις 10 φωτογραφίες στη σελίδα σου και κάθε μια είναι 5MB, τότε έχεις 50MB να κατεβάσει ο κάποιος για να δει την σελίδα. Αυτό είναι τρέλα.
Υπάρχουν εργαλεία όπως TinyPNG ή Optimizilla που κάνουν την εικόνα μικρότερη χωρίς να χάνει πολύ ποιότητα. Χρησιμοποίησέ τα.
Ενεργοποίησε lazy loading
Lazy loading σημαίνει ότι το site φορτώνει τις εικόνες μόνο όταν ο χρήστης κάνει scroll και φτάνει σε αυτές. Όχι όλες μαζί από την αρχή.
Σε WordPress, αυτό είναι συνήθως ήδη ενεργό. Σε custom sites, θα πρέπει να το προσθέσεις.
Χρησιμοποίησε CDN
Ένα CDN (Content Delivery Network) κρατάει αντίγραφα του site σου σε διάφορα σημεία του κόσμου. Έτσι, όταν κάποιος από τη Θεσσαλονίκη κατεβάσει το site σου, παίρνει τα δεδομένα από έναν server κοντά του, όχι από χιλιάδες χιλιόμετρα μακριά.
Υπάρχουν φτηνές ή ακόμα και δωρεάν επιλογές όπως Cloudflare.
Τι θα έπρεπε να ξέρουν κατασκευαστές sites
Mobile-first design θα πρέπει να είναι το default
Δεν πρέπει να σχεδιάζεις για desktop και να προσαρμόζεις μετά. Θα πρέπει να σχεδιάζεις για κινητό πρώτα, και ύστερα να προσθέτεις δυνατότητες για μεγάλες οθόνες.
CSS media queries είναι ο καλύτερός σου φίλος
Με media queries, μπορείς να αλλάξεις το CSS ανάλογα με το μέγεθος της οθόνης. Αυτό είναι το κλειδί του responsive design.
Δοκίμαζε συνεχώς
Δοκίμαζε κάθε αλλαγή πρώτα σε κινητό, όχι ανάποδα. Κάνε τη δοκιμή στο Firefox DevTools ή στο Chrome DevTools, ή ακόμα καλύτερα, στο δικό σου κινητό.
Για τους ιδιοκτήτες: τι πρέπει να ζητήσεις
Αν δεν ξέρεις πώς να κατασκευάσεις site, θα πρέπει κάποιος άλλος να το κάνει για σένα. Όταν μιλάς με τον κατασκευαστή σου, ζήτησε μερικά πράγματα:
- Όταν τελειώσεις το site, θέλω να το δοκιμάσω στο κινητό μου πριν το εγκρίνω.
- Πόσο γρήγορα φορτώνει σε κινητό; Μπορούμε να το ελέγξουμε με PageSpeed Insights;
- Μπορεί το μενού να λειτουργεί σωστά σε όλες τις οθόνες;
- Τα κουμπιά αγοράς/επικοινωνίας είναι αρκετά μεγάλα για να κάνω κλικ;
Αν ο κατασκευαστής δεν μπορεί να απαντήσει ξεκάθαρα σε αυτά τα ερωτήματα, τότε ίσως θα πρέπει να αναζητήσεις άλλον.
Τα κοινά λάθη που πρέπει να αποφύγεις
Μεγάλες εικόνες χωρίς συμπίεση
Το έχω πει και θα το πω ξανά. Εικόνες χωρίς συμπίεση κάνουν το site σου αργό στο κινητό.
Flash ή άλλες τεχνολογίες που δεν δουλεύουν σε κινητό
Το Flash πλέον είναι νεκρό, αλλά δυστυχώς υπάρχουν ακόμα sites που το χρησιμοποιούν. Αν αναπτύσσεις κάτι, βεβαιώσου ότι δουλεύει σε κινητό.
Πολύ περιεχόμενο στριμωγμένο σε μία σελίδα
Σε κινητό, ο κάποιος δεν θέλει να κάνει scroll ατελείωτα. Κάνε τη σελίδα σου συνοπτική και οδήγησε τον επισκέπτη στα πιο σημαντικά σημεία.
Αναδυόμενα (popups) που δεν κλείνουν εύκολα
Εκνευρίζουν σε κινητό. Και ακόμη περισσότερο αν το Χ για να κλείσεις το popup είναι τόσο μικρό που δεν μπορείς να το πατήσεις.
Ένα τελικό παράδειγμα από τη δική μας εμπειρία
Είχαμε ένα eshop πελάτη με 40% της κίνησης από κινητό, αλλά οι επισκέπτες ολοκλήρωναν μόνο το 5% των παραγγελιών από κινητό. Το 95% έφευγε. Ξεκινήσαμε από αυτό:
Τι αλλάξαμε στην πράξη
Πρώτον, απλοποιήσαμε το checkout σε 3 σελίδες (όχι 5). Δεύτερον, κάναμε τα κουμπιά μεγαλύτερα. Τρίτον, ενημερώσαμε τις εικόνες προϊόντων σε σωστό μέγεθος.
Τρεις μήνες αργότερα, οι παραγγελίες από κινητό έφτασαν στο 25%. Όχι, δεν είναι ένα θαύμα, αλλά ήταν μια σημαντική αλλαγή μόνο γιατί άκουσε τις συμβουλές.
Επίλογος
Ο σχεδιασμός για κινητά δεν είναι προαιρετικός. Είναι αναγκαίος. Αν δεν το κάνεις, χάνεις τους περισσότερους πελάτες σου.
Τα καλά νέα; Δεν είναι δύσκολο. Δεν χρειάζεσαι τεχνικές γνώσεις. Χρειάζεται μόνο λίγη προσοχή και σωστές αποφάσεις.
Ξεκίνησε σήμερα. Δοκίμασε το site σου στο κινητό σου. Αν δεις κάτι που δεν σου αρέσει, ξέρεις ήδη τι πρέπει να αλλάξεις. Κάνε τη δουλειά. Ο ανταγωνισμός σου ήδη το κάνει.
Αν θέλεις να μάθεις περισσότερα για το σχεδιασμό site, διάβασε και τα παρακάτω άρθρα:
“SEO ή Social; Ποιο είναι το καλύτερο για την επιχείρησή σου;”
“Site που αρέσει. Κάτι που σε αφορά αν θέλεις να έχεις πολλούς επισκέπτες”
“Τι είναι το SEO; Δες γιατί το site σου δεν βγαίνει στη Google”
Με λένε Δημήτρη Αθανασιάδη και δουλεύω με την κατασκευή ιστοσελίδων, eshop και SEO. Τα τελευταία χρόνια, έχω δει πολλές ιστοσελίδες που δεν λειτουργούν σωστά στο κινητό, και οι ιδιοκτήτες τους χάνουν πελάτες χωρίς να καταλαβαίνουν από πού ξεκινά το πρόβλημα.
Αν έχεις ένα site ή eshop και θέλεις να ελέγξεις πώς λειτουργεί σε κινητό, ή αν σκέφτεσαι να κατασκευάσεις ένα καινούργιο site και θέλεις να μάθεις τι πρέπει να ζητήσεις, μπορείς να μου στείλεις το site σου για ελεύθερη αξιολόγηση. Θα σου δώσω συμβουλές για όσα μπορούμε να βελτιώσουμε συγκεκριμένα στο δικό σου περιεχόμενο και στους πελάτες σου. Αν χρειάζεσαι αναθεώρηση ή κατασκευή από το μηδέν, μπορούμε να συζητήσουμε μια προσφορά που θα ταιριάζει στο budget σου.
