Τι σημαίνει Responsive Design

Τι εννοούμε με τον όρο Responsive Design στην κατασκευή ιστοσελίδων;

Ενδεχομένως να έχετε επισκεφτεί την ίδια ιστοσελίδα από πολλές διαφορετικές συσκευές. Από τον υπολογιστή του γραφείου σας ο οποίος έχει μια οθόνη μεγάλη, από το laptop του σπιτιού σας το οποίο είναι εφοδιασμένο με οθόνη αρκετά μικρότερη, από το tablet σας ή και από το κινητό σας τηλέφωνο.Καταφέρατε σε όλες σας τις επισκέψεις από διαφορετικές συσκευές να βρείτε εύκολα τις πληροφορίες που σας ενδιέφεραν;Μήπως χρειάστηκε να κάνετε πχ μεγέθυνση της οθόνης στο κινητό σας γιατί τα κείμενα φαινόντουσαν πάρα πολύ μικρά;Μήπως χρειάστηκε να κάνετε κύλιση (scroll) δεξιά και αριστερά γιατί δεν φαινόταν ολόκληρο το πλάτος της ιστοσελίδας;

Με την κατασκευή μιας ιστοσελίδας προσδοκούμε στην προβολή της επιχείρησής μας στο διαδίκτυο και στην ανεύρεση νέων πιθανών πελατών.Ένα από τα σημαντικότερα χαρακτηριστικά της ιστοσελίδας είναι η φιλικότητα προς τον επισκέπτη ώστε να τον βοηθήσει να περιηγηθεί σε αυτή και να βρει εύκολα και γρήγορα τις πληροφορίες που τον ενδιαφέρουν.Η συσκευή που μπορεί να χρησιμοποιεί ο επισκέπτης θα είναι υπολογιστής ή laptop με μεταβαλλόμενο μέγεθος οθόνης, tablet, κινητό τηλέφωνο.Θα πρέπει λοιπόν η ιστοσελίδα μας να μπορεί να προσαρμοστεί αυτόματα στο μέγεθος της οθόνης της συσκευής που χρησιμοποιεί ο επισκέπτης και να προσαρμόσει αυτόματα τις πληροφορίες, τα κείμενα, τις εικόνες και οτιδήποτε άλλο υπάρχει σε αυτή...

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

Ποιά είναι τα πλεονεκτήματα στην κατασκευή ιστοσελίδων χρησιμοποιώντας τεχνολογία Responsive Design;

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

Responsive Design στην κατασκευή ιστοσελίδων (πηγή Wikipedia)

Η φράση Responsive Design πήρε την ονομασία της από την λέξη "Respond" και σημαίνει ότι μια ιστοσελίδα προσαρμόζεται δυναμικά και «on the fly» (δηλαδή άμεσα) σε κάθε διάσταση και προσανατολισμό (orientation) οθόνης. Αυτό σημαίνει ότι όταν κάποιος πλοηγηθεί σε μια ιστοσελίδα η οποία είναι Responsive, χρησιμοποιώντας για παράδειγμα ένα smartphone, η ιστοσελίδα θα διαμορφωθεί με τέτοιο τρόπο ώστε να μην χρειάζεται ο χρήστης να κάνει μεγέθυνση ή να κάνει πλάγιο scroll δεξιά και αριστερά για να διαβάσει με ευκολία το περιεχόμενο της. Με την χρήση του Responsive Design μια ιστοσελίδα μπορεί να λειτουργεί και σαν web application όταν ανοιχτεί από μια φορητή συσκευή όπως (iPhone, iPad, Android, Blackberry etc.). Αυτό είναι πάρα πολύ σημαντικό καθώς τα τελευταία χρόνια έχει παρατηρηθεί μια ραγδαία αύξηση της περιήγησης στο διαδίκτυο από κινητές συσκευές.