ΤΙ ΕΙΝΑΙ ΟΙ ΠΡΟΣΑΡΜΟΣΤΙΚΕΣ / RESPONSIVE ΙΣΤΟΣΕΛΙΔΕΣ? - 5.0 out of 5 based on 22 votes

ΤΙ ΕΙΝΑΙ ΟΙ ΠΡΟΣΑΡΜΟΣΤΙΚΕΣ / RESPONSIVE ΙΣΤΟΣΕΛΙΔΕΣ?

ΤΙ ΕΙΝΑΙ ΟΙ ΠΡΟΣΑΡΜΟΣΤΙΚΕΣ / RESPONSIVE ΙΣΤΟΣΕΛΙΔΕΣ? προσαρμοστική σελίδα
11 Φεβ
2017

 

Εάν τυχαίνει να "σερφάρετε" από κάποια φορητή συσκευή (Smartphone ή Tablet), θα έχετε ίσως παρατηρήσει διαφορετικές συμπεριφορές στις ιστοσελίδες που επισκέπτεστε. Πολλές από αυτές τις ιστοσελίδες δεν εμφανίζονται ολόκληρες στην οθόνη και σας αναγκάζουν να "σκρολάρετε" δεξιά και αριστερά προκειμένου να δείτε όλο το περιεχόμενο ή να "ζουμάρετε" για να μεγαλώσουν τα κείμενα και να καταφέρετε να τα διαβάσετε. Οι ιστοσελίδες αυτές δεν είναι προσαρμοστικές και προσφέρουν μία πραγματικά ενοχλητική εμπειρία στους επισκέπτες τους. Ως αποτέλεσμα, ελάχιστοι επισκέπτες παραμένουν στη συγκεκριμένη ιστοσελίδα πάνω από μερικά δευτερόλεπτα. 

 

Μιλώντας με παραδείγματα

 

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

 non responsive website

Αντίστοιχα, στην φωτογραφία που ακολουθεί παρατηρούμε ότι η σελίδα ανταποκρίνεται διαφορετικά στα διάφορα μεγέθη των φορητών συσκευών, με το κύριο μενού να εξαφανίζεται και στη θέση του να εμφανίζεται το σχετικό εικονίδιο μενού (sandwich menu), ενώ οι κύριοι τίτλοι αλλάζουν τις διαστάσεις τους για να προσαρμοστούν αυτομάτως στο μέγεθος της οθόνης. Ταυτόχρονα όλα τα γραφικά προσαρμόζονται (φωτογραφίες, λογότυπο κτλ.) είτε αλλάζουν μέγεθος ή ακόμη και θέση προκειμένου να επιτευχθεί το κατάλληλο αισθητικό αποτέλεσμα στην οθόνη του κινητού τηλεφώνου. Αυτή είναι μία προσαρμοστική (Responsive / Mobile-friendly) ιστοσελίδα.

 responsive website

Αξίζει λοιπόν τον κόπο και για λόγους που θα αναφέρουμε στη συνέχεια να ελέγξουμε πως ανταποκρίνεται η ιστοσελίδα μας σε διάφορα μεγέθη οθόνης ώστε να γνωρίζουμε ποιά θα είναι η εμπειρία του επισκέπτη στην ιστοσελίδα σας αναλόγως της συσκευής που χρησιμοποιεί. Ένας απλός και εύκολος τρόπος για να ελέγξουμε από τον σταθερό υπολογιστή μας εάν μία ιστοσελίδα είναι προσαρμοστική, είναι να αλλάξουμε το μέγεθος του παραθύρου του browser μας. Δείτε λοιπόν ζωντανά εάν η ιστοσελίδα σας συμπεριφέρεται σωστά παίζοντας με τις διαστάσεις του παραθύρου αλλά και τα επίπεδα μεγέθυνσης (zoom) όπως στο ακόλουθο παράδειγμα. Μπορείτε να χρησιμοποιείστε επίσης το πολύ καλό και δωρεάν online εργαλείο Responsinator το οποίο προσομοιώνει την εμφάνιση της ιστοσελίδας σας σε διάφορες συσκευές. Με τον ίδιο τρόπο μπορείτε να ελέγξετε και τις ανταγωνιστικές σας ιστοσελίδες και να βγάλετε κάποια συμπεράσματα όσον αφορά στην θέση τους στις μηχανές αναζήτησης και τα πλεονεκτήματα/μειονεκτήματα τους απέναντι στη δική σας σελίδα.

 

check responsive on browser

 

Η προσαρμοστική τεχνολογία

 

Eάν ασχολείστε εντατικά με την ιστοσελίδα σας και ελέγχετε την απόδοσή της, θα έχετε ίσως ακούσει την ορολογία "Responsive" αρκετές φορές τα τελευταία χρόνια. Όπως γίνεται φανερό από τα παραπάνω παραδείγματα, πρόκειται ουσιαστικά για τη μέθοδο που έρχεται να λύσει αυτά τα προβλήματα εμφάνισης στις φορητές συσκευές, την οποία στα Ελληνικά μεταφέρουμε ως "προσαρμοστική". 

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

Η εμφάνιση: Εκ πρώτης όψεως, η εμφάνιση κρίνεται ως το κύριο ζητούμενο ώστε να παρέχετε στους επισκέπτες σας εύκολη περιήγηση στην ιστοσελίδα σας. Μία προσαρμοστική ιστοσελίδα είναι ουσιαστικά σχεδιασμένη ώστε να αντιλαμβάνεται την συσκευή και το μέγεθος της οθόνης που χρησιμοποιεί ο επισκέπτης της, και να συρρικνώνεται αυτομάτως ή αντίστοιχα να διαστέλλεται ώστε να επιτύχει την καλύτερη εφαρμογή στην οθόνη του επισκέπτη. Φυσικά δεν πρόκειται απλώς και μόνο για αλλαγή διαστάσεων αλλά για μία ολόκληρη τεχνολογία που "τρέχει" πίσω απ' όλες αυτές τις αλλαγές. Σκεφθείτε ότι μπορείτε να κάνετε την ιστοσελίδα σας ακόμη και να αλλάζει χρώμα σύμφωνα με τη συσκευή του επισκέπτη σας! Δεν είναι όμως μόνον το αισθητικό αποτέλεσμα που μας ενδιαφέρει, καθώς υπάρχει και το ζήτημα της απόδοσης που είναι εξίσου σημαντικό.

Η απόδοση: Επί του παρόντος, τα τεχνικά χαρακτηριστικά των φορητών συσκευών είναι περιορισμένα είτε λόγω της περιορισμένης μνήμης πολλών συσκευών, αλλά κυρίως λόγω της συνδεσιμότητας και της ταχύτητας τους στο διαδίκτυο (3G & 4G). Έτσι, πρέπει να λάβουμε υπόψη μας ότι ενώ για παράδειγμα ένα αρχείο βίντεο αναπαράγεται κανονικά σε έναν σταθερό υπολογιστή, δεν συμβαίνει το ίδιο και με όλες τις φορητές συσκευές. Στις προσαρμοστικές ιστοσελίδες έχουμε τη δυνατότητα να επιλέξουμε στη θέση του βίντεο να εμφανίζεται μία στατική εικόνα, ή ένα slide-show ώστε ο επισκέπτης να μην δει απλώς ένα κενό στην οθόνη του αλλά ούτε και να χάσει το νόημα της σελίδας σας επειδή η συσκευή ή η σύνδεσή του δεν μπορεί να ανταποκριθεί. Αντίστοιχα, μπορούμε να επιλέξουμε στοιχεία της ιστοσελίδας μας τα οποία δεν θα εμφανίζονται καθόλου ή θα εμφανίζονται αποκλειστικά και μόνο στις κινητές συσκευές, επιτυγχάνοντας έτσι πολύ καλύτερη στόχευση και το επιθυμητό αποτέλεσμα. Για όσους χρησιμοποιούν ηλεκτρονικό marketing γνωρίζουν ήδη πόσο σημαντικό είναι αυτό.

 

Η αναγκαιότητα για προσαρμογή

 

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

Στατιστικά επισκεψιμότητας: Όλες οι τελευταίες στατιστικές συμφωνούν στο γεγονός ότι η χρήση των φορητών συσκευών βαίνει με σημαντική ετήσια αύξηση ενώ τα τελευταία αποτελέσματα δείχνουν ότι πλέον οι χρήση των φορητών συσκευών έχει πλέον ξεπεράσει αυτή των σταθερών υπολογιστών Desktops & Laptops. Εάν συνυπολογίσουμε την τεχνολογική ανάπτυξη που αναμένεται στο χώρο της κινητής τηλεφωνίας και τις συνεχείς αναβαθμίσεις που δέχονται οι συσκευές αυτές, εύκολα εξάγουμε το συμπέρασμα ότι η αύξηση της χρήσης κινητών συσκευών για πρόσβαση στο διαδίκτυο θα εξακολουθήσει και τα επόμενα χρόνια.

 

mobile stats 1

 

mobile stats2

 

mobile stats3

 

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

Ηλεκτρονικά μηνύματα: Επί του παρόντος είναι το κύριο μέσο προώθησης και διαφήμισης ιστοσελίδων μέσω διαδικτύου. Μία μεγάλη μερίδα των παραληπτών όμως λαμβάνει τα ηλεκτρονικά μηνύματα μέσω κινητού τηλεφώνου, χρησιμοποιώντας κάποιο Smart-phone app. Έτσι, εάν το ηλεκτρονικό μήνυμα που στέλνετε στον υποψήφιο πελάτη σας περιέχει κάποιον σύνδεσμο (link) στην ιστοσελίδα σας, είναι προφανές ότι η σύνδεση θα γίνει μέσω κινητού και ο παραλήπτης θα δει την ιστοσελίδα σας από τη φορητή του συσκευή. Εάν λοιπόν χρησιμοποιείτε ηλεκτρονικά μηνύματα ως μέσο προώθησης της ιστοσελίδας σας, είναι απαραίτητο να φροντίσετε να έχετε μία προσαρμοστική ιστοσελίδα ειδάλλως όλος ο κόπος και ο χρόνος σας για την ηλεκτρονική σας επικοινωνία κινδυνεύει να πάει χαμένος.

 

Τα οφέλη για την ιστοσελίδα σας

 

Επαγγελματισμός: Όπως ακριβώς συμβαίνει και σε ένα φυσικό κατάστημα ή επιχείρηση, έτσι και στο διαδίκτυο ο επισκέπτης σας επιθυμεί να δει ένα φιλικό και προσεγμένο περιβάλλον το οποίο θα του επιτρέψει να αισθανθεί την επιθυμία να παραμείνει περισσότερο χρόνο στο χώρο σας. Πόσο πιθανό είναι να αγοράσετε κάτι από ένα παλαιωμένο κτίριο με σκονισμένα ράφια και πόσο θα εμπιστευτείτε την επιχείρηση αυτή? Πόσο χρόνο θα παραμείνετε σε αυτό το κατάστημα εάν γνωρίζετε ότι σε πολύ μικρή απόσταση βρίσκονται εκατοντάδες άλλα παρόμοια? Η απάντηση είναι προφανής και -για να ολοκληρώσουμε τον παραλληλισμό- το κόστος της αναβάθμισης της ιστοσελίδας σας είναι σαφώς μικρότερο απ' ότι το κόστος την ανακαίνισης ενός φυσικού καταστήματος ή μίας επιχείρησης.

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

Κυριαρχία Branding: Στη χώρα μας οι εξελίξεις της τεχνολογίας εφαρμόζονται με έναν σχετικά περιορισμένο ρυθμό αφομοίωσης. Αυτό σημαίνει ότι πιθανότατα οι κύριοι ανταγωνιστές σας δεν έχουν ακόμη ενσωματώσει τις νέες τεχνολογίες στις ιστοσελίδες τους. Εάν αυτό ισχύει η αναβάθμιση της ιστοσελίδας σας, θα σας δώσει το πλεονέκτημα της κυριαρχίας έναντι των ανταγωνιστών σας και είναι ίσως ευκαιρία να αναπτύξετε Brand awareness χωρίς ιδιαίτερο κόπο αφού η ιστοσελίδα σας θα ξεχωρίσει με την τεχνολογία και τον σχεδιασμό της. 

Ασφάλεια & Αναβάθμιση: Η ανανέωση της τεχνολογίας κατασκευής της ιστοσελίδας σας εκτός των άλλων πλεονεκτημάτων θα βελτιώσει σημαντικά την ασφάλεια της ιστοσελίδας σας. Οι σύγχρονες ιστοσελίδες είναι εγγενώς αναβαθμισμένες ώστε να μπορούν να φιλοξενούνται σε πιο σύγχρονους, ταχύτερους και πιο ασφαλείς servers που ενσωματώνουν περισσότερες δικλείδες ασφαλείας.  Μία ιστοσελίδα παλαιότερης κατασκευής πιθανότατα δεν μπορεί πλέον να σταθεί στις νεότερες εκδόσεις διακομιστών από Centos 6.0 και μετέπειτα εκδόσεις, ενώ και η ίδια η τεχνολογία της σελίδας 

Προώθηση & Μάρκετινγκ: Εφόσον σας ενδιαφέρει η επισκεψιμότητα της ιστοσελίδας σας και χρησιμοποιείτε ή σκοπεύετε να χρησιμοποιήσετε μεθόδους ψηφιακού μάρκετινγκ για την επιχείρησή σας, θα πρέπει να υιοθετήσετε τις νέες προσαρμοστικές τεχνολογίες ώστε να αποφύγετε τυχόν απώλειες των προσπαθειών σας. Το βασικό πλεονέκτημα είναι η εύκολη ενσωμάτωση όλων των δυνατοτήτων που προσφέρουν οι σύγχρονες μέθοδοι του ψηφιακού μάρκετινγκ και η βεβαιότητα ότι η υποδομή της ιστοσελίδας σας γίνεται άμεσα αποδεκτή από τους επισκέπτες. 

Απόδοση στις μηχανές αναζήτησης: Η σχετικά πρόσφατη ανακοίνωση της κυρίαρχης μηχανής αναζήτησης (Google) προβλημάτισε ιδιαίτερα τους επαγγελματίες του SEO. Σύμφωνα με αυτή, ο αλγόριθμος της δημοφιλούς μηχανής προσαρμόστηκε ανάλογα ώστε να περιλαμβάνει σοβαρές ποινές για τις ιστοσελίδες οι οποίες δεν εμφανίζονται να είναι προσαρμοστικές. Στόχος της δημοφιλούς μηχανής είναι να εμφανίζονται πλέον προσαρμοστικές σελίδες στα αποτελέσματα των αναζητήσεων, δεδομένου ότι όλο και περισσότερες αναζητήσεις πραγματοποιούνται από φορητές συσκευές όπως είδαμε και στα παραπάνω στατιστικά. 

 

Κόστος και προβληματισμοί

 

Διατήρηση στις μηχανές αναζήτησης: Το σημαντικότερο ίσως ζήτημα που θα μπορούσε να μας απασχολήσει είναι η υπάρχουσα θέση της ιστοσελίδας στις μηχανές αναζήτησης. Συνήθως η μετατροπή μίας ιστοσελίδας παλιάς τεχνολογίας σε σύγχρονη και προσαρμοστική απαιτεί εξ ολοκλήρου ανακατασκευή της σελίδας αυτής. Εάν όμως η παλιά ιστοσελίδα βρίσκεται σε υψηλή θέση στα αποτελέσματα αναζήτησης, τι γίνεται με την θέση αυτή? Η νέα ιστοσελίδα θα διατηρήσει την αρχική θέση της? Η απάντηση στο ερώτημα αυτό δεν είναι απόλυτη και έχει σχέση με την νέα σελίδα που θα κατασκευαστεί, την τεχνολογία που θα χρησιμοποιηθεί και φυσικά εάν και κατά πόσο θα μπορέσει η νέα δομή να ταιριάξει με την παλαιότερη. Στις περιπτώσεις αυτές η μετάβαση θα πρέπει να γίνει με σωστή οργάνωση και ιδιαίτερη προσοχή, ενώ οι εργασίες SEO που πιθανόν έχουμε πραγματοποιήσει στην παλιά μας ιστοσελίδα θα πρέπει να επαναληφθούν.

Μετατροπή παλιάς ιστοσελίδα σε προσαρμοστική: Αυτό κατά κύριο λόγο εξαρτάται από την κατασκευή της παλαιότερης ιστοσελίδας, επάνω σε ποια τεχνολογία έχει κατασκευαστεί, εάν χρησιμοποιεί κάποιο διαχειριστικό (π.χ. Wordpress ή Joomla!), εάν πρόκειται ή εάν περιλαμβάνει custom εφαρμογές κτλ. Στην πράξη αυτό δεν είναι καθόλου εύκολο εάν θέλουμε να κάνουμε σωστή δουλειά. Ουσιαστικά απαιτείται ανακατασκευή της ιστοσελίδας σας. Υπάρχουν όμως και έμμεσοι τρόποι να εμφανίσετε την αρχική σας σελίδα με καλύτερο τρόπο στις κινητές συσκευές χρησιμοποιώντας ένα συνδυασμό μεθόδων κώδικα Javascript και CSS, χωρίς βεβαίως τα πλεονεκτήματα της τεχνολογικής αναβάθμισης, αλλά τουλάχιστον θα προσφέρετε μία καλύτερη εμπειρία στους επισκέπτες σας. Σε κάθε περίπτωση μπορείτε να επικοινωνήσετε μαζί μας προκειμένου να ζητήσετε μία δωρεάν αξιολόγηση της παλαιότερης σελίδας σας και συμβουλευτική υποστήριξη για την βελτιστοποίησή της.

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

 

 

 

 

Τελευταία τροποποίηση στις Πέμπτη, 23 Μαρτίου 2017 10:35
Ετικέτες