pos voithaei to responsive design

Στην εποχή μας, οι κινητές συσκευές χρησιμοποιούνται καθημερινά για τα πιο απλά έως και τα πιο “περίπλοκα” πράγματα. Παλαιότερα, τα κινητά τηλέφωνα χρησιμοποιούνταν μόνο για κλήσεις και μηνύματα, με πολύ περιορισμένες δυνατότητες πλοήγησης και περιοριστικά κλειδωμένα menu. Σήμερα, έχουμε ήδη προσπεράσει την εποχή που η κινητή μας συσκευή χρησιμοποιείται ακόμη και για οικονομικές συναλλαγές με τραπεζικά ιδρύματα (mobile banking) ή και επιτόπια επεξεργασία εικόνας / βίντεο υψηλής απαίτησης πόρων (heavy resource usage).

Με το σκεπτικό αυτό, κρίνεται σκόπιμο μια ιστοσελίδα να μπορεί να διαβαστεί από ένα κινητό εύκολα και γρήγορα, αφήνοντας τον επισκέπτη ικανοποιημένο, χωρίς να ταλαιπωρείται και να “ψάχνεται” στη μικρή οθόνη του κινητού του. Το παρόν και το μέλλον της της αύξησης της θετικής εμπειρίας χρήστη (UX) μιας ιστοσελίδας / διαδικτυακής υπηρεσίας καθώς και στρατηγικής internet marketing, είναι στη διαμόρφωση υπηρεσιών με φιλοσοφία στοχευμένη πρωτίστως στα smartphones.

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

Οι τρόποι διαμόρφωσης των ιστοσελίδων για κινητά

Υπάρχουν 3 τρόποι απεικόνισης μεγέθους όταν μιλάμε για κινητές συσκευές και είναι οι εξής:

Responsive Design:

Συχνά αναφέρεται και ως RWD (Responsive Web Design). Χρησιμοποιείται κώδικας CSS και HTML για το στυλ, την αλλαγή μεγέθους, την απόκρυψη, τη συρρίκνωση, τη μεγέθυνση ή τη μετακίνηση του περιεχομένου για την καλύτερη προσαρμοστικότητά του ανάλογα με το πλάτος οθόνης της συσκευή χρήσης. Η δομή URL διατηρείται κοινή με αυτές των σταθερών μέσων (desktop).

Adaptive Design:

Αναφέρεται από την Google ως δυναμική υπηρεσία εξυπηρέτησης (dynamic serving). Οι URL διευθύνσεις παραμένουν ίδιες, αλλά η HTML έκδοση αλλάζει ανάλογα με τη συσκευή που χρησιμοποιείται. Ο ιστότοπος, με απλά λόγια, έχει αρκετές και διαφορετικές εκδόσεις που εξυπηρετούνται από τα κοινά URLs. 

Separate Dedicated Mobile Site:

Αναφέρεται και ως mDot (από τη συντομογραφία m.). Εδώ έχουμε διαφορετική έκδοση HTML και διαφορετικές URL διευθύνσεις που εξυπηρετούν τους επισκέπτες. Συνήθως στο www.subdomain είναι η έκδοση για υπολογιστή, ενώ στο m. subdomain η έκδοση για τις κινητές συσκευές.

 

 

Ωστόσο, είναι σημαντικό να αναφέρουμε στο σημείο αυτό, τη προτίμηση της Google για το Responsive Web Design. Η φιλοσοφία πίσω από αυτό είναι ότι θα συγχωρέσει μια ιστοσελίδα με όχι τόσο καλό κώδικα HTML, αλλά σίγουρα θα είναι αυστηρή για τη σπατάλη των υπολογιστικών πόρων της. Ας δούμε λίγο μερικά πλεονεκτήματα των ιστοσελίδων που έχουν responsive σχεδίαση και κατά πόσο επηρεάζεται η απόδοση κατάταξης σε σχέση με αυτές.

Χρηστικότητα:

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

 

Χρήση μίας διεύθυνσης URL:

Παρόλο που φαίνεται προσεγμένη η πρακτική να υπάρχει ξεχωριστό URL για την εμφάνιση μιας ιστοσελίδας σε κινητό, δε θεωρείται καλή πρακτική για τη βελτιστοποίηση της ιστοσελίδας ως προς το SEO (καθώς διαμοιράζονται οι επισκέψεις σε ξεχωριστές διευθύνσεις).  Στη περίπτωση ξεχωριστής διεύθυνσης, δεν υπάρχει η δυνατότητα διατήρησης των κοινών backlinks και η μέγιστη απόδοση του SEO σε μια μόνο ιστοσελίδα προορισμού. Με κοινή διεύθυνση, γίνεται πιο εύκολη η κοινοποίηση (αφορά και στα social media), καθώς υπάρχει μία διεύθυνση URL, η οποία από όπου και αν προβληθεί το περιεχόμενο, να είναι εύκολα προσβάσιμο από τον επισκέπτη της ιστοσελίδας, ανεξάρτητα από τη συσκευή (κινητό, tablet, laptop κτλ.) που το βλέπει.

 

Γρηγορότερος χρόνος φόρτωσης ιστοσελίδας:

Εξαιρετικά σημαντικό για την απόδοση κατάταξης είναι η ταχύτητα φόρτωσης ιστοσελίδας. Με τη χρήση του responsive design, δεν υπάρχει ανακατεύθυνση (redirection) σε άλλο URL, επομένως είναι πιο γρήγορο από το να προωθούταν ο χρήστης σε μια ιστοσελίδα “mobile σχεδίασης”.

 

Μείωση ρυθμού εγκατάλειψης (decrease Bounce Rate):  

Υψηλό bounce rate για τη Google σημαίνει ότι το περιεχόμενο της ιστοσελίδας δεν ήταν σχετικό με τις αναζητήσεις του χρήστη, άρα μειώνεται ο βαθμός ικανοποίησης του επισκέπτη (UX), συνεπώς και η κατάταξη στις μηχανές αποτελεσμάτων αναζήτησης. Αυτός είναι ένας πιθανός “κίνδυνος” με τη χρήση διαφορετικής έκδοσης ιστοσελίδας για κινητά. Με το responsive design δεν υπάρχει αυτό το πρόβλημα καθώς το περιεχόμενο είναι ίδιο και απλά προσαρμόζεται στην εκάστοτε συσκευή.

 

Λιγότερες πιθανότητες για διπλό περιεχόμενο:

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

 

Λιγότερο κόστος:

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

 

Καλύτερη εικόνα της εταιρείας:

Μελέτες έχουν δείξει πως το 50% των επισκεπτών, απάντησε για τις ιστοσελίδες που δε λειτουργούσαν σωστά από κινητό, ότι δεν θα ενδιαφερόταν να επισκεφτεί πάλι την ιστοσελίδα μιας επιχείρησης, αφού δεν εξυπηρετήθηκε στο χρόνο που επιθυμούσε κατά τη πρώτη του επίσκεψη ή δυσκολεύτηκε να βρει αυτό που ψάχνει λόγω κακής σχεδίασης. Σημαντικός παράγοντας (μετατροπής) αφού επηρεάζεται αισθητά το ποσοστό αποχώρησης από μια ιστοσελίδα (bounce rate).

 

Συνοψίζοντας, από τα προαναφερόμενα βγαίνει το συμπέρασμα ότι η τάση του “αποκριτικού” Responsive Web Design, έχει μπει καλά στις καθημερινές μας πλοηγήσεις και επηρεάζει την γενικότερη εικόνα και τη συμπεριφορά των επισκεπτών των ιστοσελίδων. Η συμπεριφορά αυτή διαφαίνεται στα ποσοστά εγκατάλειψης των σελίδων που έχουν φτωχή σχεδίαση και δε βοηθούν την εύκολη πλοήγηση των χρηστών. Φυσικά, αυτό γίνεται αντιληπτό και από τις μηχανές αναζήτησης σε επίπεδο βελτιστοποίησης SEO, όπως αυτή της Google. Την επόμενη λοιπόν φορά που θα σκεφτείτε τη σχεδίαση μιας ιστοσελίδας σε περιβάλλον που δεν ανταποκρίνεται στα σύγχρονα smartphones, καλό θα ήταν να σκεφτείτε σοβαρά πόσους ενδεχομένως επισκέπτες θα χάσετε έχοντας μία μη responsive ιστοσελίδα.

Μέχρι το επόμενο άρθρο, “keep in mind.. everybody loves responsive web pages”.