Με την άνοδο των κινητών συσκευών και με την αύξηση των πωλήσεων που παρατηρείτε όλα αυτά τα χρόνια τόσο σε tablet όσο και σε smartphones προάγουν την ανάγκη για επανασχεδιασμό των ιστοσελίδων ώστε να είναι πιο φιλικές προς αυτές τις συσκευές.
Η ευκολία και η ιδέα της γρήγορης πρόσβασης κερδίζει μέρα με την μέρα έδαφος όχι μόνο σε συσκευές αλλά και σε λογισμικό.
Με το Mobile First Design οι web designers και developers εστιάζουν ακριβώς σε αυτό το κοινό που "σερφάρουν" στο διαδίκτυο από την κινητή τους συσκευή καθημερινά, είτε βρίσκονται στον δρόμο είτε ακόμα και στο σπίτι, αφήνοντας το laptop και το PC τους.
Σαν ιδέα υλοποιήθηκε με τον αποκριτικός σχεδιασμό ιστοσελίδων (responsive design) μειώνοντας το κόστος συντήρησης των ιστοσελίδων στο μισό αφού η δυνατότητα προβολής του περιεχομένου σε κάθε δυνατή διάσταση οθόνης έδωσε την δυνατότητα στους developers να μην δημιουργούν και συντηρούν ιστοσελίδες ειδικά σχεδιασμένες για κάθε μια ξεχωριστή συσκευή. Όμως με το το σχεδιασμό MobileFirst περνάμε στο επόμενο επίπεδο ανάπτυξης ιστοσελίδων.
Ταχύτητα φόρτωσης
Με δεδομένο ότι το hardware των κινητών συσκευών δεν είναι σε δυνατότητες ίδιο με αυτό των PC, αλλά και οι φυλλομετριτές (browsers) που διαθέτουν αποτελούν μια lite έκδοση από εκείνων που υπάρχουν στους υπολογιστές μας η ταχύτητα φόρτωσης μιας σελίδας αποτελεί σημαντικό παράγοντα.
Μια ιστοσελίδα αποτελείτε από πολλά στοιχεία, εικόνες, βίντεο, κείμενο, εξωτερικά δεδομένα δομημένα σε διαφορετικά επίπεδα (layers). Για την "ύπαρξη" των αντικειμένων υπεύθυνος είναι ο κώδικας HTML ενώ για την "θέση" που θα έχουν στην σελίδα και για το πώς θα εμφανίζονται ο κώδικας CSS και κάποιες φορές και Javasscript είναι αναγκαίως.
Στην περίπτωση του Mobile First Design αναζητάμε τον ελάχιστο κώδικα και από τους τρεις που είναι απαραίτητος για την προβολή της σελίδας μας, περιορίζοντας τον όγκο που καταλαμβάνει την ποσότητα και το εύρος εμφάνισής και αναγκαιότητας του.
Περιορίζοντας τον Όγκο
Η ταχύτητα φόρτωσης μιας σελίδας εξαρτάτε και από τον τρόπο συγγραφής του κώδικα. Η ύπαρξη κενών και κενών γραμμών και σχολίων μέσα στον κώδικα επιβραδύνει την ταχύτητα εκτέλεσης του ενώ αυξάνει τον ανώφελα τον όγκο σε Kbytes της σελίδας. Μπορεί να διευκολύνει "σχεδιαστικά" τους προγραμματιστές μια κατανεμημένη δομή αλλά στην πράξη ο υπολογιστής δεν το έχει ανάγκη.
Για παράδειγμα μια κατανεμημένη μορφή σε CSS :
/*css-for-my-page*/
.body{
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
}
Η ελαχιστοποιημένη και κατάλληλη για Mobile First Design
.body{width:200px;height:200px;background-size:200px 200px;background-repeat:no-repeat}
Το κέρδος στο σύνολο ενός πραγματικού CSS σελίδας μπορεί να φτάσει και το διπλάσιο! ενώ η συμπίεση σε όλο τον κώδικα της σελίδας συμπεριλαμβανομένου του HTML και Javascript στο τριπλάσιο!
Περιορίζοντας την Ποσότητα
Πολλές φορές κατά την αναβάθμιση ή την συντήρηση μιας ιστοσελίδας κώδικας που δεν μας είναι απαραίτητος απενεργοποιείται με να τον αγκιστρώσουμε σαν σχόλιο ή παραμένει στην σελίδα σαν "σκουπίδια" (δηλαδή υπαρκτός αλλά ανεκτέλεστος κώδικας). Απαλλαγείτε από αυτόν διαγράφοντας τον - καθαρίζοντας την σελίδα σας.
Ακόμα περιορίστε, όσο σας επιτρέπετε, την χρήση εικόνων, διαφημίσεων και γενικά πολυμέσων. Μπορεί μια σελίδα να είναι πιο δελεαστική με πλούσιες εικόνες αλλά στο Mobile First Design είναι καταστροφικό. Αν θα πρέπει να χρησιμοποιήσετε εικόνες τότε φροντίστε πρώτα να τις συμπιέσετε ώστε να είναι κατάλληλες για την σελίδα σας. Αν θέλετε διαφημίσεις τότε διαχειριστείτε έξυπνα τους πόρους σας ώστε να μην επιβαρύνουν την αρχική σελίδα σας.
Περιορίζοντας το εύρος εμφάνισης και αναγκαιότητας
Στο διαδίκτυο κυκλοφορούν πολλών ειδών εργαλεία και widget που μπορεί να κάνουν την σελίδα σας πιο δελεαστική, όπως slideshow, social buttons, follow windows, contact forms, icons, fonts κτλ. όμως σκεφτείτε ότι τα περισσότερα από αυτά συνοδεύονται με CSS και Javascript και στην χειρότερη περίπτωση θα πρέπει να καλέσετε εξωτερικές πηγές ,δηλαδή να τοποθετήσετε στην σελίδα σας κάποιο link που "βλέπει" σε εξωτερική πηγή κώδικα. Για παράδειγμα μια κλήση για icons
< link href="path/to/font-awesome/css/font-awesome.min.css" rel="stylesheet" >< /link>
Στο Mobile First Design θα πρέπει να περιορίσετε ή ακόμα και να εξαλείψετε τέτοιου είδους ανακατευθύνσεις που αφορούν εξωτερικό κώδικα. Παρόλο που τα δίκτυα και η ταχύτητα μετάδοσης είναι αρκετά γρήγορη, υπάρχει ένα σοβαρό χρονικό μειονέκτημα όταν η εμφάνιση της σελίδας μας εξαρτάται από την ύπαρξη τέτοιων ανακατευθύνσεων. Όσο περισσότερες υπάρχουν και μάλιστα στην αρχή της σελίδας, τόσο η ταχύτητα μειώνετε.
Υπάρχουν "έξυπνα" τρικ και πρακτικές για φιλικά προς τους χρήστες & τις μηχανές αναζήτησης στο να πετύχετε το επιθυμητό αποτέλεσμα χωρίς να επιβαρύνετε περαιτέρω την σελίδα σας. όπως το να περιορίσετε την χρήση τους σε συγκεκριμένες σελίδες και όχι στην αρχική σας ή να εμφανίζονται κάτω από συγκεκριμένες "συνθήκες".
Αν βέβαια αποτελούν "ζωτικής" σημασίας αντικείμενα τότε φροντίστε να μεταφέρετε τα link στο τέλος της σελίδας ή να εντάξετε τον εξωτερικό κώδικα εντός της σελίδας.
Περιεχόμενο πρώτα
Απαραίτητο στοιχείο στο Mobile First Design είναι η προτεραιότητα στο περιεχόμενο. Μια αρχική σελίδα θα πρέπει να έχει τουλάχιστον το 40% του μεγέθους της, προβολή περιεχομένου χωρίς καμιά ανακατεύθυνση. Δηλαδή όσο μια σελίδα είναι "αυτάρκης" (βασίζεται στο υπάρχον κώδικα CSS και HTML) τόσο καλύτερα. Σε αυτό το σημείο θα πρέπει να γίνει μια έξυπνη διαχείριση των αντικειμένων της σελίδας ώστε αυτά που είναι εξαρτημένα από κάποιο Javascript να τοποθετούνται τελευταία ενώ τα αντικείμενα που βασίζονται σε HTML και CSS πρώτα.
Έχουμε αναφερθεί σε τέτοιου είδους αντικείμενα και προηγουμένως, απλά εστιάζουμε και δίνουμε ιδιαίτερη βαρύτητα, γιατί αποτελούν τον κύριο παράγοντα αποτυχίας στο Mobile First Design .
Η έμφαση στο περιεχόμενο μπορεί να πετύχει καλύτερα αποτελέσματα ακόμα και στο SEO της σελίδας μας επηρεάζοντας την σειρά κατάταξης στην αναζήτηση θετικά. Μην ξεχνάτε ότι οι σελίδες κατατάσσονται από τις μηχανές αναζήτησης με διαφορετικά κριτήρια από εκείνα των ανθρώπων. Όταν δεν "κουράζετε" τις μηχανές αναζήτησης με περιττό κώδικα, εικόνες και πληθώρα ανακατευθύνσεων μένουν "ευχαριστημένες" δίνοντας προτεραιότητα στην σελίδα σας από μια άλλη που χρησιμοποιεί περισσότερα πολυμέσα. Βέβαια αυτό από μόνο του δεν είναι αρκετό για ένα πετυχημένο SEO.
Ικανοποίηση χρήστη
Κατά βάση το Mobile First Design έχει ως στόχευση τους χρήστες κινητών συσκευών. Σε συνδυασμό με το responsive design και το πως χρησιμοποιείται δημιουργούμε σελίδες σχεδιασμένες με το κύριο βάρος να πέφτει στην ικανοποίηση των χρηστών που επιθυμούν ταχύτητα και ευελιξία στην πλοήγησή τους στο διαδίκτυο.
Σκεφτείτε τον εαυτό σας να πλοηγήστε και να κάνετε ένα αίτημα για για σελίδα από τον browser του τηλεφώνου ή του tablet σας. Όσο πιο γρήγορα ανοίξει, όσο λιγότερες παραπομπές με διαφημίσεις και εικόνες, όσο λιγότερη αναμονή για την φόρτωση και κατά την πλοήγηση της, τόσο μεγαλύτερη θα είναι η ικανοποίησή σας. Όσο, με άλλα λόγια, η σελίδα είναι άμεση στην ανταπόκρισή της τόσο περισσότερη ευχαρίστηση θα λάβετε ως χρήστης.
Από την άλλη έχετε την εντύπωση ότι οποιαδήποτε στιγμή στην διάρκεια της ημέρας μπορείτε να επισκεφτείτε έναν ιστότοπο χωρίς να σας είναι κουραστικό με μια "πολύωρη" αναμονή.
Αναλογιζόμενοι τους χρόνους αναμονής- ανταπόκρισης μιας σελίδας θα πρέπει να γνωρίζεται ότι ο μέσος χρόνος φόρτωσης δεν θα πρέπει να ξεπερνά τα 1.5sec. Πάνω από αυτό το όριο η σελίδα θα φαντάζει πολύ κουραστική για τον χρήστη, ενώ παρομοιάζει με αιώνα η πλήρη φόρτωση της.
Παράδειγμα αποτελεί η ίδια μας η σελίδα. Στην πρόσφατη ανανέωση του blog μας καταφέραμε να υλοποιήσουμε την φόρτωση της αρχικής μας σελίδας μόλις σε 0.7sec από 2.9sec ενώ σε πλήρη ανάπτυξη πετύχαμε 1.2sec από 3.5sec που είχε πριν.
Χρήσιμα εργαλεία -tools
Προτού πάρετε την απόφαση να αναβαθμίσετε την σελίδα σας σε Mobile First Design σας δίνουμε μερικά από τα καλύτερα online tools για να το πετύχετε.Έλεγχος ταχύτητας ιστοσελίδας
1) gtmetrix
2) Google Insights
Έλεγχος δομημένων δεδομένων. Σημαντικό εργαλείο αφορά κυρίως blogs
Google structured-data-tool
Συμπίεση εικόνων
1)Compressor
2)Optimizilla
Συμπίεση CSS
cssminifier
Συμπίεση Javascript
jscompress
Γενικά Εργαλεία ελέγχου από την Google
Δημοσίευση σχολίου