<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=352162718287948&amp;ev=PageView&amp;noscript=1">
Πείτε μας για το επόμενο project σας! Εμείς θα επικοινωνήσουμε μαζί σας άμεσα. Συμπληρώστε τη φόρμα
MENU
5 tips για την κατασκευή μιας ιστοσελίδας όπου... mobile comes first

5 tips για την κατασκευή μιας ιστοσελίδας όπου... mobile comes first

Όσο ελκυστικό και αν εμφανίζεται το website σας στη… μεγάλη οθόνη, «οι κανόνες καλής αναζήτησης» που έχει επιβάλλει η Google με το mobilegeddon της, θα δίνουν πάντα προτεραιότητα στα websites που είναι “mobile-first. Δείτε λοιπόν τα 5 συστατικά που χρειάζεται να λάβετε υπόψη σας για να κατακτήσετε τις μικρές, αλλά πολύ απαιτητικές οθόνες και κερδίστε τις εντυπώσεις των επισκεπτών σας!

Ποια πράγματα παίζουν σημαντικό ρόλο σε ένα mobile-friendly website; 

1. Touch-friendly

Φροντίσετε να σχεδιάσετε μεγάλα τα σημεία-στόχους τα οποία θέλετε να πατήσουν οι επισκέπτες του site σας. Πόσο μεγάλα; Σύμφωνα με τα iOS Human Interface Guidelines της Apple θα πρέπει να είναι τουλάχιστον 44px x 44px, ώστε να μπορούν εύκολα να πατηθούν με το δείκτη ή τον αντίχειρα. Διαφορετικά, θα αποκτήσετε σύντομα εκνευρισμένους επισκέπτες οι οποίοι θα πατάνε άλλα εικονίδια από αυτά που επιθυμούν.

Mobile friendly touche example

  1. Ευανάγνωστο

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

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

Επίσης, περιορίστε την έκταση των γραμμών στα κείμενά σας. Ένας μέσος όρος 30-40 χαρακτήρων ανά γραμμή, είναι ιδανικός στις mobile συσκευές ώστε να μη κουράσετε τους αναγνώστες σας ή να τους «πνίξετε» μέσα σε μακροσκελή κείμενα.

Mobile friendly fonts example

  1. Εύκολη πλοήγηση

Η πλοήγηση σε μια συσκευή με μικρή οθόνη μπορεί να αποδειχτεί πρόκληση. Το βασικό menu πλοήγησης ενός site οφείλει να είναι εύκολα και γρήγορα προσβάσιμο, τόσο από την αρχική σελίδα όσο και από οποιαδήποτε άλλη σελίδα του site.

Υπάρχουν διάφοροι τρόποι για να σχεδιαστεί το navigation και για την επιλογή μας λαμβάνουμε πάντα υπόψη μας το μέγεθος του περιεχομένου του site που σχεδιάζουμε.

Δυο δημοφιλείς μέθοδοι για το menu πλοήγησης σε mobile, είναι το overlay menu και το off-canvas menu. Και στις δυο περιπτώσεις, το πλεονέκτημα που παρέχουν είναι ότι μπορούν να φιλοξενήσουν ολόκληρο το navigation ενός site χωρίς αυτό να είναι διαρκώς εμφανές στον επισκέπτη αλλά όμως πάντα προσβάσιμο.

Mobile friendly navigation example

Ακόμα, δώστε τη δυνατότητα στους επισκέπτες σας να έχουν εύκολη πρόσβαση στην homepage του site σας ανά πάσα στιγμή. H πιο συνηθισμένη τακτική που εφαρμόζεται είναι η σύνδεση του λογότυπου του site με την αρχική σελίδα.

  1. Μέγεθος Οθόνης & Ανάλυση

Μια από τις μεγαλύτερες δυσκολίες που συναντά κανείς στο σχεδιασμό ενός mobile site, είναι η πρόβλεψη των πολλών και διαφορετικών μεγεθών οθόνης.

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

Επίσης, πρέπει να λάβετε υπόψη σας και τη διαφορετική ανάλυση κάθε οθόνης εφόσον πολλές συσκευές διαθέτουν πλέον HDPI ή Retina οθόνες. Πρακτικά αυτό σημαίνει ότι όλα τα γραφικά και οι φωτογραφίες που περιλαμβάνει ένα site πρέπει να είναι διαθέσιμα στο διπλάσιο μέγεθος, έτσι ώστε να εμφανίζονται σωστά και να μη δείχνουν «σπασμένα».

Mobile friendly screen resolution example

  1. Χρόνος φόρτωσης

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

Αν και οι περισσότερες συσκευές τελευταίας τεχνολογίας έχουν πρόσβαση στο internet μέσω του κινητού τηλεφωνικού δικτύου (3G, 4G), εξακολουθεί να είναι απαραίτητο να εξασφαλίσετε ότι το site σας φορτώνει γρήγορα.

Υπάρχουν αρκετά site όπως για παράδειγμα το GTmetrix που σας επιτρέπουν να τεστάρετε το χρόνο φόρτωσης του site σας και ταυτόχρονα παρέχουν λύσεις για να βελτιώσετε την ταχύτητά του.

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

To γλωσσάρι του... Inbound Marketing