Άλλος ένας καινούριος όρος… Αν προσπαθούσαμε να τον αποδόσουμε στα Ελληνικά, ίσως να το λέγαμε προσαρμόσιμο web design. Τι είναι λοιπόν το προσαρμόσιμο web design, πως μας προέκυψε και γιατί μας ενδιαφέρει;

Σαν όρο το ακούσαμε πρώτη φορά το 2010, το είδαμε στην πράξη το 2011 και θα το συναντάμε αρκετά συχνότερα στο άμεσο μέλλον.

Τι είναι το Responsive Web Design;

Τον όρο εισήγαγε ο Ethan Marcotte στο άρθρο του για το A List Apart με τίτλο “Repsonsive Web Design” και προήλθε από μια πρόσφατη τάση στην αρχιτεκτονική “responsive architecture” σύμφωνα με την οποία ένας χώρος ή ένα δωμάτιο προσαρμόζεται ανάλογα με τον αριθμό των ανθρώπων ή τις ενέργειές τους.

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

Εάν μεταφέρουμε τη λογική αυτή στο web, ο όρος responsive web design αναφέρεται στη διαδικασία σχεδιασμού και κατασκευής (design and development) ιστοσελίδων οι οποίες είναι ικανές να αντιλαμβάνονται και να ανταποκρίνονται στις ενέργειες του χρήστη ή επισκέπτη καθώς και να προσαρμόζονται στο μέσο στο οποίο προβάλλονται, ώστε να μπορούν να προσφέρουν στον χρήστη τη καλύτερη δυνατή εμπειρία.

Γιατί χρειάζεται το Responsive Web Design;

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

Δεν είναι σπάνιο πλέον (το αντίθετο μάλιστα), κάποιος να επισκέπτεται σελίδες από το pc του, το laptop του, το κινητό του, το iPad, το Playstation ή το Xbox και η λίστα συνεχίζεται…

Ο στόχος του responsive web design είναι να εξασφαλίσει στον επισκέπτη την καλύτερη δυνατή εμπειρία σε όποια συσκευή κι αν βλέπει τη σελίδα και παράλληλα να εκμεταλλεύεται τις δυνατότητες που έχει κάθε πλατφόρμα.

Πως λειτουργεί;

Η λογική είναι να αντιλαμβάνεται τον browser και τη συσκευή που χρησιμοποιεί ο επισκέπτης και ανάλογα να προσαρμόζει το περιεχόμενο της σελίδας.

Στην παραπάνω φωτογραφία βλέπετε τρεις διαφορετικές εκδοχές του ίδιου website (colly.com) ανάλογα με την ανάλυση του browser. Δοκιμάστε να αυξομειώσετε το πλάτος του browser σας και να δείτε πως ανταποκρίνεται.

Φανταστείτε τον χρήστη ο οποίος σερφάρει από το σπίτι του και τον υπολογιστή του με ανάλυση 1900x1200px. Με ένα responsive website μπορούμε να εκμεταλλευτούμε τον παραπάνω χώρο που έχουμε για να προβάλλουμε περισσότερα στοιχεία και αντικείμενα της σελίδας μας above the fold δημιουργώντας ένα προσαρμοσμένο περιβάλλον στον συγκεκριμένο χρήστη.

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

Συμπέρασμα

Το responsive web design σίγουρα δεν είναι η λύση σε όλα τα προβλήματα ούτε η σωστότερη επιλογή για κάθε ιστοσελίδα. Σε πολλές όμως περιπτώσεις είναι η ιδανική λύση για τη συμβατότητα της σελίδας σε κάθε περιβάλλον. Και όπως είναι φυσικό όταν βελτιώνουμε την εμπειρία των επισκετπών μας, αυξάνουμε και την επιτυχία και τα conversion της σελίδας μας.

Ο σωστός σχεδιασμός μιας σελίδας ώστε να είναι προσαρμόσιμη στους διάφορους browser δεν είναι εύκολο. Απαιτεί συνεργασία των designers με τους developers και πάρα πολύ καλή γνώση των σύγχρονων web τεχνικών και μεθόδων, όπως HTML5, CSS3 και Javascript.

Σίγουρα πάντως το responsive web design είναι το τώρα του web και είναι από τις τεχνικές που θα δούμε να χρησιμοποιούνται ολοένα και περισσότερο στο προσεχές μέλλον.

Παραδείγματα

Μοιραστείτε το