Τα πρώτα βήματα για ένα mobile-friendly site

Καθημερινά, παρατηρούμε την τάση αύξησης της χρήσης mobile συσκευών και την αντίστοιχη πτώση των desktop, καθώς όλο και περισσότεροι έχουν tablets και smartphones και τα χρησιμοποιούν περισσότερο από τα desktop/laptop.

Αυτή η τάση έχει καταγραφεί και στατιστικά, καθώς τα τελευταία 2 χρόνια, η χρήση των desktop σημειώνει καθοδική πορεία, ενώ η χρήση mobile συσκευών αυξάνεται, όπως μπορούμε να δούμε και στο παρακάτω διάγραμμα από το gs.statcounter.com

Βλέπουμε λοιπόν ότι περίπου το 30% των χρηστών, χρησιμοποιούν mobile συσκευές, γεγονός που σημαίνει ότι αξίζει να ασχοληθείτε με αυτό το κοινό, επενδύοντας σε ένα mobile friendly site.

Φυσικά, οι προτιμήσεις των επισκεπτών κάθε χώρου, είναι διαφορετικές. Μπορείτε να δείτε κι εσείς από σας επισκέπτονται, αν αξιοποιήσετε τα δεδομένα του google analytics.

Κατηγορίες mobile-friendly sites

Υπάρχουν κυρίως 3 τύποι mobile-friendly site και διαφοροποιούνται ως προς τον τρόπο κατασκευής τους και την λειτουργικότητα που προσφέρουν στον χρήστη.

Responsive: Η εμφάνιση και οι λειτουργίες μένουν ίδιες, απλώς το site αυξομειώνεται ανάλογα τις διαστάσεις της οθόνης ή το πόσο αυξομειώνουμε το παράθυρο του browser. Είναι η πιο ευέλικτη εμφάνιση και χρησιμοποιείται ευρέως.

Adaptive: Παρομοίως, η εμφάνιση και οι λειτουργίες μένουν ίδιες, αλλά ανάλογα το μέγεθος και τον τύπο της οθόνης, στέλνονται διαφορετική «κανόνες» εμφάνισης, ώστε να χωρέσει στην τρέχουσα οθόνη. Σε αντίθεση με το responsive, δεν αυξομειώνεται σε κάθε πιθανή οθόνη-διάσταση, αλλά έχει συγκεκριμένα breakpoints, δηλαδή προκαθορισμένες διαστάσεις όπου κάθε φορά που φορτώνει το site, επιλέγεται ποια ταιριάζει καλύτερα στην οθόνη.

Mobile version: Σε αυτή τη περίπτωση, έχουμε ξεχωριστό site για desktop και ξεχωριστό για mobile. Πρόκειται ουσιαστικά για ένα ξεχωριστό site, με δική του εμφάνιση, το οποίο προορίζεται ειδικά για κινητά (ή και tables-μπορούμε να το επιλέξουμε αυτό). Σε αυτή τη περίπτωση, ενδέχεται και τα urls κάθε σελίδας να είναι διαφορετικά σε σχέση με αυτά της ίδιας σελίδας στο desktop!

Εάν ξεκινάτε να δημιουργήσετε ένα νέο site τώρα, τότε η ιδανικότερη λύση είναι να φτιάξετε ένα responsive site. Εάν όμως έχετε ήδη site και θέλετε να το κρατήσετε ως έχει, τότε θα πρέπει να καταφύγετε στη λύση μιας mobile version, ένα mobile υποsite δηλαδή.

Αν to budget σας δεν σας επιτρέπει ένα custom design, υπάρχουν πολύ όμορφα responsive templates που μπορείτε να αξιοποιήσετε πάνω σε γνωστές πλατφόρμες όπως WordPress, Drupal, Magento κλπ.

Τι πρέπει να προσέξετε στο εικαστικό του mobile friendly site

1. Αποστάσεις! Σκεφτείτε ότι στο κινητό ο χρήστης πλοηγείτε χρησιμοποιώντας το δάχτυλο του. Φροντίστε να έχει αρκετό χώρο μεταξύ των κουμπιών, links ώστε να μην πατάει κατά λάθος και εκνευρίζεται!

2. Εφέ πατήματος: Επειδή οι συνδέσεις 3g-4g δεν φτάνουν την ADSL-VDSL ενός desktop, οι σελίδες καθυστερούν να φορτώσουν. Θα πρέπει λοιπόν όταν ο χρήστης πατάει ένα κουμπί, αυτό πχ να αλλάζει χρώμα ώστε να καταλαβαίνει ότι το πάτησε και να μην περιμένει μάταια

3. Χρησιμοποιείστε αρκετά κουμπιά: Στο κινητό δεν υπάρχει η επιλογή να κάνει κάποιος hover για να δει ποια είναι links! Βοηθήστε τον να ξέρει τι μπορεί να πατήσει και τι όχι, βάζοντας αρκετά κουμπιά

4. Φροντίστε να υπάρχει mobile menu. Όσο όμορφο και πρακτικό είναι ένα megamenu σε ένα site που προβάλλεται σε μεγάλη οθόνη, τόσο δύσχρηστο και αποτρεπτικό είναι στις mobile συσκευές. Θα πρέπει λοιπόν να αντικαθιστάται από ένα άλλο, mobile menu.

5. Ελαχιστοποιήστε τα σημεία που χρειάζεται ο χρήστης να γράψει κάτι. Στο κινητό δε μπορεί να γράψει γρήγορα, επομένως μην τον ταλαιπωρείται!

6. Αξιοποιήστε τις δυνατότητες των mobile όπως για παράδειγμα το click to call στο τηλέφωνο σας!

Τα παραπάνω, θα πρέπει να προσεχθούν και από τον προγραμματιστή του site σας. Ωστόσο καλό είναι να έχετε κι εσείς μία γενική εικόνα, για το πώς πρέπει να είναι στημένο το mobile site σας!

 

Συντάκτρια: Πόπη Καψιώτη

Αφήστε ένα Σχόλιο

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *