Responsive Web Design: Τι είναι και γιατί το χρειαζόμαστε;

Το responsive web design είναι αναγκαίο για κάθε ιστοσελίδα που θέλει να βγαίνει πρώτη στη Google σήμερα

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

Είναι γεγονός ότι από τον Απρίλιο του 2015 η Google με την περιβόητη ανανέωση του αλγορίθμου της που έμεινε στην ιστορία ως Mobilegeddon τιμωρεί με αποκλεισμό όλες τις ιστοσελίδες που δεν είναι responsive από τα αποτελέσματα αναζήτησης για κινητά. Άμα η ιστοσελίδα σας είναι responsive ήδη, δεν υπάρχει κανένα πρόβλημα, άμα όμως όχι, τότε θα πρέπει να λάβετε τα μέτρα σας.

Για να μάθετε τι πρέπει να κάνετε για να μην χάσετε επισκεψιμότητα από τα νέα μέσα πρόσβασης των χρηστών στο ίντερνετ, διαβάστε παρακάτω.

Τι είναι το responsive web design;

Το responsive web design ή RWD έχει να κάνει με τον τρόπο εμφάνισης μιας ιστοσελίδας σε διαφορετικές αναλύσεις οθόνης που έχει κάθε smartphone ή tablet αλλά και οι μεγάλες οθόνες με πολύ μεγάλη ανάλυση εικόνας.

Παλαιότερα δεν γινότανε καν λόγος για responsive web design γιατί απλώς κάθε ιστοσελίδα και eshop σχεδιάζονταν αποκλειστικά για laptops και σταθερούς υπολογιστές και έτσι δεν υπήρχε θέμα ανάλυσης οθόνης και χρηστικότητας.

Σήμερα αυτό έχει αλλάξει και με το 50% και πλέον των επισκεπτών να σερφάρουν στο ίντερνετ αλλά και να ψωνίζουν από τα κινητά και τα tablets είναι επιτακτική ανάγκη το site μας να είναι mobile friendly.

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

Για να δείτε αν όντως η ιστοσελίδα σας είναι συμβατή με τις κινητές συσκευές και συνάμα responsive, μπορείτε να το ελέγξετε με το Google Mobile Friendly Tool.

Πως γίνεται από τεχνική σκοπιά το site μας responsive;

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

Ένα site που έχει όντως RWD (responsive web design) έχει προσαρμόσει το γραφικό του περιβάλλον σε επίπεδο αναλογιών και σχεδιαστικών grids, σε επίπεδο CSS και σε επίπεδο εικόνων χρησιμοποιώντας προσαρμόσιμα μεγέθη εικόνων ανάλογα με την ανάλυση οθόνης.

Τα τρία βασικά στοιχεία που πρέπει να έχει στον κώδικα κατασκευής (όταν λέμε κώδικα εννοούμε HTML και CSS) του ένα site για να είναι responsive είναι τα παρακάτω:

Χρειαζόμαστε να χρησιμοποιήσουμε αντί για απόλυτες μονάδες μέτρησης των pixels ή του design grid το fluid concept

Το fluid web design concept έχει να κάνει περισσότερο με την ελαστικότητα στον σχεδιασμό των στοιχείων μιας σελίδας παρά με την στατική προβολή τους.

Προσαρμόσιμες εικόνες

Θα πρέπει οι εικόνες, τα βίντεο και τα animation στοιχεία όπως τα banners να προσαρμόζονται στις κινητές συσκευές ώστε να μην φεύγουν εκτός οθόνης ή να μην είναι καθόλου εμφανίσιμα.

Media queries

Τα media queries επιτρέπουν μια σελίδα να χρησιμοποιεί διαφορετικά CSS styles ανάλογα με τα χαρακτηριστικά κάθε συσκευές (λειτουργικό android, IOS), την ανάλυση οθόνης και το πλάτος του web browser.

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

Responsive web design και WordPress

Υπάρχουν δύο κατηγορίες ανθρώπων, αυτοί που έχουν site σε WordPress και αυτοί που έχουν site σε custom εφαρμογή ή σε κάποιο άλλο CMS ή ecommerce platform.

Όσοι έχετε site σε WordPress θα πρέπει να προσέξετε άμα το θέμα που έχετε επιλέξει για το WordPress site σας είναι responsive και mobile firendly.

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

Όμως, άμα έχετε ιστοσελίδα ή eshop σε WordPress και έχετε διαπιστώσει ότι το θέμα σας δεν είναι συμβατό με τα κινητά τότε θα πρέπει οπωσδήποτε να κάνετε αναβάθμιση στο θέμα σας ή να αλλάξετε θέμα άμα δεν υποστηρίζει η εταιρεία που έφτιαξε το θέμα την επιλογή responsive.

Κατά συνέπεια θα πρέπει πάντα να προτιμάτε WordPress Themes που είναι premium, πληρωμένα δηλαδή από τα free themes όπως αυτά από το Studiopress ή το Themeforest.

Είναι κρίμα για μερικές δεκάδες ευρώ να χάνετε το 50% επισκεπτών που ίσως να έρχονταν στην ιστοσελίδα σας άμα είχατε mobile friendly theme.

Σε περίπτωση που το θέμα σας δεν υποστηρίζει κινητά και δεν είναι responsive είναι προτιμότερο να αλλάξετε θέμα στο site σας παρά να βάλετε κάποιο plugin όπως το WPtouch ή κάποιο άλλο για να κάνετε το site σας συμβατό με smartpones και tablets.

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

7 συμβουλές για πετυχημένο responsive web design

1 Προγραμματίστε από πριν τα χαρακτηριστικά που θα έχει η ιστοσελίδα σας

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

2 Επιλέξτε το σωστό θέμα για την ιστοσελίδα σας

Το theme δεν έχει να κάνει με την θεματολογία της ιστοσελίδας μας αλλά με το website template που θα χρησιμοποιήσουμε. Τα περισσότερα sites είτε CMS όπως το WordPress, Joomla κτλ είτε custom design, βασίζονται σε κάποιο τέτοιο template το οποίο πριν το αγοράσουμε θα πρέπει να έχουμε δει πως θα εμφανίζεται στις κινητές συσκευές.

Θα πρέπει δηλαδή να δούμε κάποιο λειτουργικό demo του template πρώτα και μετά να προβούμε στην αγορά του.

Συνήθως καλό είναι να έχουμε εκτός από μια επιλογή για template ή theme και κάποια άλλη εναλλακτική ή δεύτερη επιλογή ή και τρίτη επιλογή σε περίπτωση που οι δύο πρώτες επιλογές μας δεν είναι πετυχημένες.

3 Ξεκινήστε με mobile first φιλοσοφία σχεδιασμού

Η φιλοσοφία σχεδιασμού της ιστοσελίδας θα πρέπει να είναι mobile first, δηλαδή πρώτα να λαμβάνει υπόψιν της τις κινητές συσκευές και μετά τα desktop και laptop pcs.

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

Το λέω αυτό εκ πείρας γιατί τα 30% των ιστοσελίδων που φτιάχνει η εταιρεία μου κάθε χρόνο είναι site που χρειάζονται redesign επειγόντως είτε γιατί ήτανε σε λάθος πλατφόρμα και όχι σε WordPress είτε γιατί όταν σχεδιάστηκαν δεν είχανε ληφθεί υπόψιν μερικά βασικά στοιχεία του φιλικού προς τις μηχανές αναζήτησης web design.

Μπορείτε να δείτε περισσότερα στο άρθρο: Τo SEO ξεκινάει από το Web Design

4 Προσέξτε τα μενού πλοήγησης

Τα μενού πλοήγησης στα κινητά είναι ένα αδύνατο σημείο για πάρα πολλά sites στην έκδοση τους για κινητές συσκευές. Θα πρέπει πριν επιλέξετε κάποιο θέμα για το site σας να δείτε άμα είναι λειτουργικό το μενού τους και άμα μπορεί ο μέσος χρήστης να πλοηγηθεί εύκολα και γρήγορα σε όλες τις σελίδες, άρθρα και προϊόντα που πιθανών να έχει το site σας.

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

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

Το UX ή user experience είναι πολύ σημαντικό για να κρατήσουμε έναν επισκέπτη μέσα στο site μας και να τον κάνουμε να θέλει να ξαναρθεί γιατί απλώς και μόνο βρήκε εύκολα και γρήγορα αυτό που ήθελε.

5 Συμβουλευτείτε τα web στάνταρς της Google

Στο Google Webmaster Central Blog μπορείτε να βρείτε πολλά χρήσιμα άρθρα όπως το Making smartphone sites load fast που θα σας βοηθήσουν να βελτιώσετε την ιστοσελίδα σας και να την κάνετε πιο γρήγορη και πιο χρήσιμη για τους επισκέπτες σας αλλά και για την αγορά σας.

Μερικά από τα web standards της Google έχουν να κάνουν με την ταχύτητα φόρτωσης της ιστοσελίδας σας που είναι και σημαντικός παράγοντας κατάταξης όπως:

• Server response κάτω από 200 ms
• Μείωση του αριθμού των redirects στην φόρτωση της ιστοσελίδας
• Αποφυγή του αποκλεισμού του κώδικα JavaScript και του CSS στην πρώτη οθόνη
• Βελτιστοποίηση του χρόνου εκτέλεσης της JavaScript

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

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

6 Χρησιμοποιήστε καθαρό web design και καθαρό κώδικα

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

7 Ελέγξετε τα εξωτερικά APIs

Κάποια εξωτερικά APIs που εκτελούνται μέσα στην ιστοσελίδα μας ίσως να μην είναι τα ίδια responsive γιατί ο κώδικας HTML ή PHP τα διαβάζει ως χωριστά αντικείμενα και έτσι προκαλούν πολλά σφάλματα στην προβολή τους από κινητά και ταμπλέτες ή δεν φαίνονται καν.

Μπορείτε να δείτε περισσότερα στο πολύ χρήσιμο άρθρο: 7 Mistakes Developers Make When Using 3rd Party API’s

Ζητήστε τη συμβουλή μιας αξιόπιστης εταιρείας κατασκευής ιστοσελίδων

Αντί επιλόγου και εξαγωγή συμπερασμάτων θα σύστηνα πριν κάνετε οτιδήποτε να ζητήσετε τη συμβουλή ή τη συνδρομή μιας εταιρείας κατασκευής ιστοσελίδων που έχει ως πρώτης του προτεραιότητα το Search engine optimization και βλέπει την κατασκευή και τον σχεδιασμό της ιστοσελίδας όπως θα την έβλεπε η Google ή με τα μάτια των μηχανών αναζήτησης.

Όλες οι εταιρείες κατασκευής ιστοσελίδων και τα δημιουργικά γραφεία δεν είναι ίδια και κάθε ένα έχει διαφορετική επαγγελματική εμπειρία.

Μην διστάσετε να επικοινωνήσετε μαζί μας για να ρωτήσετε οτιδήποτε ή για να σας βοηθήσουμε να φτιάξετε ή να φτιάξουμε για εσάς μια ιστοσελίδα που θα βγαίνει στην πρώτη σελίδα της Google!

Δείτε περισσότερα για το responsive web design:

• Γιατί χρειάζεται να κάνω το site μου Responsive;
• HTML Responsive Web Design
• 21 Συμβουλές για τέλειο web design