Responsive Web Design: Τι είναι και πού χρησιμεύει;

Δημοσιεύτηκε: 02 Μαΐου 2015

Ένας όρος που ακούγεται όλο και συχνότερα στην κατασκευή websites είναι το «Responsive layout». Τι σημαίνει όμως; Από πού προέρχεται και γιατί θα πρέπει να μας απασχολεί; Ας ξεκινήσουμε από την αρχή.

Το αρχικό πρόβλημα

Οι συσκευές με τις οποίες μπορεί κανείς να συνδεθεί στο internet είναι πλέον πάρα πολλές: PC, laptop, tablet, κινητό, netbook (για όσους πρόλαβαν να αποκτήσουν, πριν εκλείψουν). Αν εξετάσουμε το μέγεθος της οθόνης κάθε μίας από αυτές, έχουμε επίσης αναρίθμητες επιλογές. Υπάρχουν π.χ. laptops με οθόνη 15”, 15,5”, 17” ή tablets με οθόνη 7”, 8”, 10” κ.ο.κ.

Αυτό δημιουργεί το εξής πρόβλημα: πώς μπορεί ένα website να εμφανίζεται σε όλες αυτές τις οθόνες, με τρόπο που να δημιουργεί μία βολική και ευχάριστη εμπειρία χρήσης στον επισκέπτη του site, χωρίς π.χ. να χρειάζεται να κάνει zoom στα διάφορα στοιχεία του περιεχομένου και χωρίς να χρειάζεται να κάνει scroll δεξιά – αριστερά;

Λίγη Ιστορία

Το πρώτο παράδειγμα ενός site που προσαρμοζόταν στο μέγεθος του παραθύρου του browser εμφανίστηκε το 2004, ενώ μέχρι το 2008 διάφοροι όροι όπως «flexible» και «fluid» χρησιμοποιήθηκαν για να περιγράψουν layouts με παρόμοιες ιδιότητες.

Το Μάιο του 2010, ο Ethan Marcotte, web designer και συγγραφέας, χρησιμοποίησε για πρώτη φορά τον όρο Responsive Web Design, σε ένα άρθρο του, ενώ τον επόμενο χρόνο στο βιβλίο του με τον ομώνυμο τίτλο διατύπωσε τις αρχές και τις πρακτικές, που αποτέλεσαν τα θεμέλια.

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

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

Γιατί είναι απαραίτητο;

Η πρώτη προτεραιότητα κατά το σχεδιασμό ενός website πρέπει να είναι ο τελικός χρήστης, ο επισκέπτης. Όταν φτιάχνουμε ένα πραγματικό κατάστημα ή ένα γραφείο, θα πρέπει να λάβουμε υπόψη μας τις ανάγκες του κόσμου που θα το επισκεφθεί. Το ίδιο ισχύει και στο internet. Τα «εικονικό» μας κατάστημα θα πρέπει να διευκολύνει τους επισκέπτες του να πλοηγηθούν με ευκολία, χωρίς να χρειαστεί να κάνουν περιττές κινήσεις ή να ψάχνουν πού είναι το καθετί.

Πλέον, βάσει στατιστικών, περισσότεροι από το 40% των επισκεπτών ενός website πλοηγούνται μέσω mobile συσκευών. Συνεπώς, δεν χωράει συζήτηση ότι θα πρέπει εμείς να ανταποκριθούμε στις απαιτήσεις του επισκέπτη και όχι αυτός στο website μας.

Όσο πιο φιλικό στη χρήση είναι ένα website, τόσο περισσότερες οι πιθανότητες ο επισκέπτης να μείνει, να περιηγηθεί και να το επισκεφθεί ξανά. Και φυσικά, τι πιο φιλικό από το να κρατάς  το κινητό σου με το ένα χέρι, όσο διαβάζεις ένα άρθρο(*), χωρίς να χρειάζεται να κάνεις scroll δεξιά – αριστερά, χωρίς να χρειάζεται να κάνεις zoom για να διαβάσεις τα πολύ μικρά γράμματα κ.ο.κ.

Με μια φράση, αυτό που επιδιώκουμε είναι το λεγόμενο UX (User eXperience – εμπειρία χρήσης).

Επιπλέον, αν στόχος ενός website είναι να εμφανίζεται ψηλά στις μηχανές αναζήτησης, τότε το να είναι responsive παίζει πλέον σημαντικό ρόλο, καθώς και η Google ενδιαφέρεται όσοι αναζητούν αποτελέσματα να βρίσκουν αυτά που θα τους προσφέρουν το βέλτιστο UX.

Πώς βλέπουμε αν ένα site είναι responsive;

Ο πιο απλός τρόπος, φυσικά, είναι να το επισκεφθούμε από το κινητό μας. Μπορούμε όμως να κάνουμε τον αντίστοιχο έλεγχο και από την οθόνη του υπολογιστή μας. Ο πιο «ερασιτεχνικός» τρόπος είναι να επιλέξουμε να μειώσουμε το μέγεθος του παραθύρου του browser και στη συνέχεια να «παίξουμε» με το πλάτος του. Αν μειώνοντας το πλάτος, το site δείχνει να κόβεται, τότε δεν είναι responsive. Αντίθετα, αν προσαρμόζεται, είναι.

Ένας λίγο πιο «επαγγελματικός» τρόπος για όσους χρησιμοποιούν Firefox είναι η συντόμευση Ctrl+Shift+M, η οποία μειώνει μόνο τις διαστάσεις του υπ;o εξέταση site, ενώ προσφέρει και αρκετές προεπιλογές, που αντιστοιχούν σε πραγματικά μεγέθη συσκευών.

Για τους χρήστες του Chrome η συγκεκριμένη συντόμευση δεν είναι διαθέσιμη, ωστόσο υπάρχει ειδικό πρόσθετο, το Window Resizer, το οποίο μπορείτε να βρείτε εδώ

Τα website της Kokonut Web Services είναι responsive;

Από τη στιγμή που το Responsive Web Design είναι πλέον απαραίτητο, εννοείται πως ναι. Ξεκινώντας από το 2014, όλα τα sites που έχουμε φτιάξει είναι responsive. Εξάλλου, οι νέες εκδόσεις Joomla, καθώς και του Wordpress, είναι responsive εξ ορισμού.

Για περισσότερες πληροφορίες και ιστορικά στοιχεία, δείτε εδώ


(*) Εννοείται πως αυτό απαγορεύεται κατά την οδήγηση ή όταν περπατάμε στο δρόμο. Η ασφάλεια προέχει.
Βάλτε βαθμό
(2 ψήφοι)
Περισσότερα στην ίδια κατηγορία:

Ρωτήστε μας

Θέλετε πληροφορίες για το site σας; Επικοινωνήστε μαζί μας, τώρα!

Joomla Forms makes it right. Balbooa.com