Προσαρμογή Ιστοσελίδας (Responsive Design)

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

Πότε Εμφανίστηκε

H έννοια “responsive site” πρωτοεμφανίστηκε στο πασίγνωστο πλέον άρθρο που έγραψε ο Ethan Marcotte στο alistapart.com το 2010. Εκεί ο συγγραφέας του ομώνυμου βιβλίου, εξηγεί ότι οι web designers και developers θα πρέπει επιτέλους να απεξαρτηθούν από τον τρόπο που έχουν συνηθίσει να δουλεύουν έως τώρα, ο οποίος αποτελεί κατάλοιπο της φιλοσοφίας που κυριαρχούσε στην έντυπη επικοινωνία και βασίζεται στην παραδοχή ότι γνωρίζουμε εκ των προτέρων το format και τις διαστάσεις του μέσου που θα φιλοξενήσει το design μας (π.χ. ο σχεδιασμός μιας έντυπης διαφήμισης). Η φύση του web όμως και η πλειάδα συσκευών και τρόπων πρόσβασης στο Internet, έχουν αναιρέσει απόλυτα αυτή την παραδοχή. Ο Ethan Marcotte στο άρθρο του κάλεσε την web κοινότητα να αγκαλιάσει αυτή την αλλαγή και να υιοθετήσει μια αντίστοιχη ευέλικτη, δυναμική και απόλυτα προσαρμόσιμη στις συνθήκες, προσέγγιση στο web design. Αυτό που ονόμασε “responsive design”. Από το 2010 και μετά, το responsive web design συστηματικά αναφέρεται ως μία από τις δυναμικότερες τάσεις στο web design για τα επόμενα χρόνια

Τι Είναι

Το Responsive Design πήρε την ονομασία του από την λέξη “Respond” και σημαίνει ότι μια ιστοσελίδα προσαρμόζεται δυναμικά και άμεσα σε κάθε διάσταση και προσανατολισμό (orientation) οθόνης(Προσαρμογή Ιστοσελίδας).
Αυτό σημαίνει ότι όταν κάποιος πλοηγηθεί σε μια ιστοσελίδα η οποία είναι Responsive, χρησιμοποιώντας για παράδειγμα ένα smartphone, η ιστοσελίδα θα διαμορφωθεί με τέτοιο τρόπο ώστε να μην χρειάζεται ο χρήστης να κάνει μεγέθυνση ή να κάνει πλάγιο σκρολ για να διαβάσει με ευκολία το περιεχόμενο της.
Με την χρήση του Responsive Design μια ιστοσελίδα μπορεί να λειτουργεί και σαν web application όταν ανοιχτεί από μια φορητή συσκευή όπως (iPhone, iPad, Android, Blackberry etc.). Αυτό είναι πάρα πολύ σημαντικό καθώς τα τελευταία χρόνια έχει παρατηρηθεί μια ραγδαία αύξηση της περιήγησης στο διαδίκτυο από κινητές συσκευές.

Πως Λειτουργεί

Αυτό που “προσαρμόζεται δυναμικά” δεν είναι απλά το πλάτος του περιεχομένου όπως γνωρίζαμε παλιά με τα λεγόμενα fluid sites (δηλαδή τα sites που καταλαμβάνουν όλη την οθόνη). Στο responsive design μπορούμε να αλλάξουμε εντελώς τη δομή, το layout, τις εικόνες, το μέγεθος των γραμματοσειρών και φυσικά το περιεχόμενο της σελίδας. Μιλάμε δηλαδή για μια σελίδα η οποία πραγματικά προσαρμόζεται σε κάθε διάσταση, αλλάζοντας ακόμα και δομικά στοιχεία της έτσι ώστε ο χρήστης να βλέπει πάντα την καταλληλότερη έκδοση για τη συσκευή που χρησιμοποιεί.
• Η προσαρμογή αυτή γίνεται με βάση την ανάλυση της οθόνης του χρήστη. Έτσι, όταν το site εμφανιστεί σε μια μικρή ανάλυση κινητού, ο χρήστης θα δει την αντίστοιχη έκδοσή του, το ίδιο στο tablet κ.ο.κ. Προσοχή, η τεχνική του responsive design, ΔΕΝ ανιχνεύει τη συσκευή από την οποία μπήκε ο χρήστης (όπως γίνεται π.χ. στην περίπτωση δημιουργίας ενός mobile site), αλλά την ανάλυση. Αυτό σημαίνει ότι το site προσαρμόζεται και σε μεγαλύτερες οθόνες όπως έχουν π.χ. πλέον πάρα πολλά desktop PCs. Αντίστοιχα, αν ο χρήστης δεν έχει μεγιστοποιημένο το παράθυρο του browser του, θα βλέπει την κατάλληλη version για το μέγεθος του παραθύρου.
• To responsive design, εκτός από την ανάλυση λαμβάνει υπόψιν του και τον προσανατολισμό, το orientation. Έτσι, όταν π.χ. κρατάμε ένα tablet οριζόντια δηλαδή σε landscape μπορούμε να έχουμε άλλη εμφάνιση της σελίδας από ό,τι όταν το κρατάμε κάθετα, δηλαδή σε portrait. Το ίδιο ισχύει φυσικά και με τα κινητά τηλέφωνα.
• Τέλος, το responsive design site μπορεί να προσαρμόζεται δυναμικά, on the fly όπως ανέφερα. Αυτό σημαίνει ότι η αλλαγή γίνεται στο front end, στον ίδιο τον browser του χρήστη με αποτέλεσμα να μπορεί ο χρήστης να δει αυτή την άμεση αλλαγή όταν για παράδειγμα αλλάζει το orientation της συσκευής του από landscape σε portrait. Αυτό το ίδιο στοιχείο είναι που επιτρέπει στα responsive sites να αλλάζουν δυναμικά όταν ο χρήστης μικρύνει με το ποντίκι του το μέγεθος του παράθυρου του browser του. Τότε θα δει τη σελίδα να μεταμορφώνεται δυναμικά

Πλεονεκτήματα

Διευκόλυνση του επισκέπτη της ιστοσελίδας: Καθώς ο επισκέπτης της ιστοσελίδας δεν χρειάζεται να κάνει συνεχώς μεγέθυνση για να διαβάζει το περιεχόμενο της ιστοσελίδας, του προσφέρεται ένα πιο ευχάριστο, καλαίσθητο και γρήγορο περιβάλλον για να την εξερευνήσει.
Εύκολη ενημέρωση: Σε αντίθεση με το να υπάρχει μία ιστοσελίδα για ηλεκτρονικούς υπολογιστές και μία εφαρμογή ή μια άλλη έκδοση ιστοσελίδας για κινητές συσκευές, το Responsive Design διευκολύνει το διαχειριστή της με την έννοια ότι δεν χρειάζεται να ενημερώνει δύο ιστοσελίδες αλλά μόνο την κεντρική. Κατά συνέπεια αυτό τον γλυτώνει από πολύ χρόνο και έξοδα.
Αύξηση χρηστικότητας και χρόνου παραμονής στην ιστοσελίδας: Όταν ένας χρήστης επισκεφτεί την ιστοσελίδα από μια κινητή συσκευή, δεν θα παραμείνει πολύ ώρα στην ιστοσελίδα αν αυτή δεν τον διευκολύνει. Ενώ αν η ιστοσελίδα είναι Responsive οι πιθανότητες να περιηγηθεί σε όλες τις υπηρεσίες ή τα προϊόντα είναι πολύ υψηλότερες.
Προσαρμοστικότητα: Μία responsive ιστοσελίδα θα προσαρμοστεί σε οποιαδήποτε ανάλυση, η οποία μπορεί να μην είναι ακόμα διαθέσιμη και να μην γνωρίζουμε.
Κόστος: Η responsive σχεδίαση είναι οικονομικότερη από τη δημιουργία ξεχωριστών ιστοσελίδων ή εφαρμογών για κάθε συσκευή (πχ. Mobile Site).

Είναι για όλους;

Αυτό είναι το ουσιαστικό ερώτημα! Η Προσαρμογή Ιστοσελίδας είναι μια εξαιρετική επιλογή για τα περισσότερα site. Παρόλα αυτά, δεν θα πρέπει να αντικαταστήσει κάθε εφαρμογή στο mobile περιβάλλον. Η κάθε εταιρεία θα πρέπει να οργανώσει το δικό της διαδικτυακό πρόσωπο ανάλογα με τους στόχους της και τις ανάγκες της. Αν για παράδειγμα μια εταιρεία έχει ή περιμένει να έχει πολύ μεγάλη απήχηση σε χρήστες mobile, τότε πιθανώς να αξίζει τον κόπο να επενδύσει συγκεκριμένα σε mobile site ώστε να έχει τη δυνατότητα να δημιουργήσει ένα ξεχωριστό site, ειδικά σχεδιασμένο για mobile. Αν η εφαρμογή που θέλει να κατασκευάσει, βασίζεται στη χρήση των ειδικών λειτουργιών της συσκευής (π.χ. πυξίδα, accelerometer, GPS, κάμερα κ.α.), τότε φυσικά ένα mobile app είναι η ενδεδειγμένη λύση.
Το responsive design για να υλοποιηθεί σωστά απαιτεί και κάποιους κάνονες, οι οποίοι μπορεί για κάποιες εταιρείες να αποτελούν περιορισμό. Για παράδειγμα, το design ενός responsive site θα πρέπει να είναι ελαφρύ και minimal, χωρίς βαριά εικαστικά που θα βαρύνουν τη σελίδα και θα κάνουν την εμπειρία του mobile χρήστη δυσάρεστη (μην ξεχνάμε ότι μιλάμε για ένα website που προσαρμόζεται ανεξαρτήτως συσκευής).
Η προσωπική μου άποψη είναι ότι ένα responsive site θα έπρεπε να είναι η βάση της digital παρουσίας κάθε εταιρείας πια στο web. Από εκεί και πέρα, όποια άλλη μεμονωμένη ενέργεια ή άλλη ειδική εφαρμογή απαιτείται προκειμένου η εταιρεία να πετύχει τους στόχους της, θα πρέπει να υλοποιείται με βάση τη στρατηγική της εταιρείας. Μπορεί ενδεχομένως να εκτιμηθεί ότι η κατάλληλη λύση για μια συγκεκριμένη περίπτωση απαιτεί το συνδυασμό responsive site το οποίο να παρουσιάζει μόνο την πληροφορία που χρειάζεται (όπως στην περίπτωση του mobile site) και όχι το ίδιο site σε κάποια προσαρμογή του (όπως στην περίπτωση του responsive design).

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment