Το γνωστό portal τεχνολογίας Mashable επισήμως ανακοίνωσε το 2013 ως το έτος του responsive Web design (RWD). Και ενώ αυτή η τεχνολογία αναπτύσσεται γοργά στη βιομηχανία του web development, όλα δείχνουν πως οι ανάγκες θα την κάνουν την κυρίαρχη τάση και τα χρόνια που έρχονται. Για πολλούς λόγους που θα τους αναλύσουμε σε επόμενο post, οι ιστοσελίδες πρέπει να προσαρμοστούν σε ένα μέσο στο οποίο η πρόσβαση δεν είναι τυποποιημένη και γίνεται από συνεχώς αυξανόμενο αριθμό συσκευών. Από την οθόνη ενός mini smartphone μέχρι ένα TV monitor LED 55″ η επαφή με τη ιστοσελίδα σας πρέπει να δίνει την ίδια ομαλή και βελτιωμένη εμπειρία στον χρήστη, διαφορετικά τον χάνει! Το Responsive Web Design αντιμετωπίζει αυτά τα προβλήματα ακριβώς με τον τρόπο που υποδηλώνει το όνομά του.
Ανταποκρίνεται (responds) στις αλλαγές του μεγέθους του ενεργού παραθύρου του browser και προσαρμόζεται στην οθόνη άσχετα από μέγεθος και ανάλυση, διατηρώντας την εμπειρία του χρήστη μέσα στα πλαίσια του θετικού και του επιθυμητού. Με απλά λόγια για ένα website να χαρακτηριστεί responsive πρέπει να ισχύουν 3 βασικές προϋποθέσεις:
- Γρήγορη φόρτωση άσχετα από ανάλυση οθόνης
- Άμεση προσαρμογή στην οθόνη του layout και του μεγέθους του κειμένου
- Πρόβλεψη και προσαρμογή στη συσκευή και στις ανάγκες του χρήστη της
Όπως με όλες τις τάσεις, το Responsive Web Design έχει δεχτεί κριτική από ειδικούς και μη, πολλοί από τους οποίους το απέρριψαν ως μόδα ή υπερβολή. Δυστυχώς πολλές φορές αυτές οι “γνώμες” που αναπαράγονται άκριτα καταλήγουν σε μύθους και παραπληροφόρηση που εμποδίζει πολλούς να ανακαλύψουν τα πλεονεκτήματα αυτού του σημαντικού τρόπου web development.
Ας δούμε λοιπόν τι είναι το responsive web design και τους μύθους γύρω από αυτό. Τα παρακάτω είναι πράγματα που είτε διαβάσαμε είτε ακούσαμε από ενδιαφερόμενους ή “ειδικούς” για το θέμα.
1) Το Responsive Web Design κάνει κακό στο SEO
Εδώ δεν χρειάζεται να πούμε πολλά, απλά όπως αναφέρεται στο Google for Webmasters για smartphone-optimized websites, “
this is Google’s recommended configuration“. Το συγκεκριμένο resource καλύπτει και άλλα θέματα όπως το dynamic serving και το ξεχωριστό mobile site με redirect, που το καθένα έχει τη δική του σκοπιμότητα και χρησιμότητα (εκτός θέματος γι αυτό το post).
Απλά ισχύουν τα παρακάτω:
- Τα Responsive sites έχουν 1 URL και 1 κώδικα HTML. Αυτό το καθιστά ιδανικά για γρήγορο crawling από τα Google και άλλα bots.
- Τα Responsive sites ανταποκρίνονται στην βασική απαίτηση των μηχανών αναζήτησης (των μεγάλων τουλάχιστον) για παροχή καλής εμπειρίας στον χρήστη με συνέχεια και συνέπεια.
Οι webmasters δεν πρέπει να ξεχνάνε ότι οι εναλλακτικές του responsive design είναι όπως αναφέρθηκε το dynamic serving (όχι το καλύτερο για seo) και το ξεχωριστό mobile site που επίσης δεν είναι το καλύτερο για seo και θέλει πολύ περισσότερη δουλειά διαχείρισης.
2) Ταύτιση του Responsive Design με το Mobile
Με τόσα gadgets που κυκλοφορούν αυτό δεν έχει και τόση σημασία ούτε και το γεγονός ότι η εκρηκτική αύξηση των mobile συσκευών έχει ισοφαρίσει τη χρήση desktops / laptops. Μπορεί να έχει επηρεάσει η σχεδιαστική αντίληψη του mobile first όμως αυτό είναι κάτι που αφορά αποκλειστικά τους front-end developers στην προσπάθειά τους να δημιουργήσουν την καλύτερη δυνατή εμπειρία χρήστη και όχι γιατί ο σχεδιασμός στοχεύει κυρίως ή αποκλειστικά στο mobile. Οι νέες σχεδιαστικές αντιλήψεις οδηγούν τους designers να δουν πέρα από τη συσκευή, το περιβάλλον που βρίσκεται ο χρήστης όταν περιηγείται στο Internet. Οι σωστές ερωτήσεις οδηγούν και στις σωστές (σχεδιαστικές) αποφάσεις.
- Βλέπει μόνο τα email του ή παρακολουθεί μία ταινία online;
- Βρίσκεται στο επαγγελματικό desktop στο γραφείο ή κάνει checkin από το facebook ενώ περιμένει στην ουρά;
Τα παραπάνω είναι μόνο μερικά από τα ερωτήματα που πρέπει να κάνει ο designer για να μπορέσει να ισορροπήσει το οπτικό layout μίας ιστοσελίδας με την απαιτούμενη ταχύτητα και απόδοση, τη σημασία του προβαλλόμενου περιεχόμενου και τις ανάγκες του χρήστη. Το ότι η παρουσία αυτής της πληθώρας των συσκευών έδωσε το κίνητρο στο web design να γίνει τόσο πιο προνοητικό και πολυδιάστατο είναι στα συν της περιόδου των πολλών συσκευών.
3) Τα Responsive websites θυσιάζουν το περιεχόμενο
Η πρακτική που αναπτύσσεται ολοένα και περισσότερο τελευταία είναι να “διώχνουμε” περιεχόμενο ώστε τα sites να κάνουν όμορφο scale down για τις μικρότερες οθόνες. Φυσικά με τα media queries μπορούμε να ορίσουμε τι θα εμφανίζεται και τι όχι. Εδώ μπορούμε να κάνουμε 2 παρατηρήσεις:
- Ο σκοπός του responsive design είναι ακριβώς να κρατήσει το περιεχόμενο το ίδιο για κάθε τύπο οθόνης και συσκευής.
- Εάν έχετε περιεχόμενο που μπορείτε να κρύψετε τότε μάλλον δεν το χρειάζεστε εξαρχής.
Συνεπώς το Responsive Web Design δεν μπορεί και δεν πρέπει να κρύβει περιεχόμενο. Ο σκοπός του είναι αυτός ακριβώς, να μην αφήνει τη συσκευή ή την οθόνη να περιορίζει αυτό που θέλει να πει η ιστοσελίδα. Η βασική ιδέα πίσω από το responsive design είναι ότι το μέγεθος της οθόνης / συσκευής και η ανάλυση δεν πρέπει να είναι εμπόδιο στην πρόσβαση κάποιου σε περιεχόμενο. Η απόκρυψη περιεχομένου από τους χρήστες ανάλογα με τη συσκευή / ανάλυση μέσα από media queries ή άλλα εργαλεία του responsive design δεν είναι ΠΟΤΕ καλή πρακτική. Στο τέλος θα μπερδέψει και θα εκνευρίσει τον χρήστη – καταναλωτή του περιεχομένου μας. Πως μπορεί να νιώθει κανείς αν πρέπει να ξοδέψει ώρα κάνοντας scroll πάνω και κάτω στην κινητή συσκευή του ψάχνοντας για πληροφορία που στο laptop / desktop την εντοπίζει σχεδόν αμέσως.
Συνεπώς καθώς είμαστε υπεύθυνοι για την εμπειρία που θα έχει ο χρήστης που έρχεται στην ιστοσελίδα μας πρέπει να φροντίσουμε ώστε αυτή να είναι απρόσκοπτη και πλήρης με όποιον τρόπο και αν γίνεται η πρόσβαση σε αυτή.
4) Η κατασκευή ενός Responsive Website έχει περισσότερη εργασία (και έξοδα)
Η απάντηση είναι εξαρτάται. Εξαρτάται με τι γίνεται η σύγκριση. Ναι είναι μεγαλύτερη δουλειά ένα responsive website καθώς χρειάζεται και περισσότερο testing, αλλά ποια είναι η εναλλακτική; Μία mobile εκδοχή για κάθε συσκευή που υπάρχει και που πιθανόν θα εμφανίζεται στην αγορά; Και να γίνεται ανάπτυξη για κάθε νέα πρόταση που σπάει την παράδοση και εισάγει ένα νέο μέγεθος με νέα ανάλυση και πιθανόν νέο λειτουργικό σύστημα; Όπως έγινε με τις οθόνες των 7″ των tablets;
Καθώς σκοπός κάθε ιστοσελίδας είναι να προσεγγίσει όσο το δυνατόν μεγαλύτερο κοινό, αυτό εξ ορισμού θα είναι ανομοιογενές. Συνεπώς όλη η επένδυση σε ένα responsive site αξίζει και με το παραπάνω, καθώς στοχεύουμε σε μία μεγάλη πλέον ποικιλία από συσκευές, browsers, αναλύσεις, οθόνες και λειτουργικά συστήματα με πολλούς συνδυασμούς αναμεταξύ τους.
5) Το responsive design αφορά ιστοσελίδες μικρού μεγέθους και περιεχομένου
Όπως τα παρακάτω:
- http://html.adobe.com/
- http://m.bbc.co.uk/news/
- http://css-tricks.com/
- http://www.currys.co.uk/
- http://disney.com/
- http://www.gov.uk/
- http://www.microsoft.com/
- http://www.starbucks.com/
- http://thenextweb.com/
- http://nd.edu/
- http://mashable.com/
- http://www.time.com/time/
- http://www.starbucks.com/
- http://www.theguardian.com/uk
- http://global.tommy.com/
- http://www.barackobama.com/obamacare-splash/
Εν κατακλείδι πρέπει να τονίσουμε ότι η ιστοσελίδες δεν κάθονται πλέον στο desktop. Η απόρριψη του responsive web design χωρίς να θέλουμε να χάσουμε το πολύτιμο κοινό – επισκέπτες της σελίδας μας, θα μας βάλει στη δυσάρεστη θέση να προσπαθούμε (ανεπιτυχώς) να συμβαδίσουμε με μία ατελείωτη σειρά συσκευών, οθονών, αναλύσεων και όλων των μεταξύ τους συνδυασμών με την κατασκευή μίας αντίστοιχα ατελείωτης (?) σειράς mini versions της ιστοσελίδας μας. Μπορούμε να φανταστούμε ποια θα είναι η κατάσταση σε 5 χρόνια από τώρα.
Το παρακάτω infographic περιγράφει συνοπτικά τη λογική του responsive Web design.
