Responsive Web Design

responsive_web_design1

Το responsive web design είναι ένας σχετικά καινούριος όρος. Για πρώτη φορά αναφέρθηκε από τον Ethan Marcotte στο άρθρο του με τίτλο “Responsive Web Design“.

Στα ελληνικά, η λέξη responsive σημαίνει ανταπόκριση, απάντηση, οπότε μπορούμε να πούμε ότι η τεχνική αυτή βασίζεται στην ανίχνευση κάποιων μεταβλητών και με βάση τις τιμές τους υπάρχει και ανάλογη ανταπόκριση.

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

Στόχος είναι η δημιουργία μίας «έξυπνης» ιστοσελίδας η όποια θα προσαρμόζει το μέγεθος και τα βασικά χαρακτηριστικά της (μενού, εικόνες, κείμενο) ανάλογα με τις διαστάσεις της οθόνης της συσκευής του χρήστη!

Τι είναι το responsive design;

Ουσιαστικά αποτελεί μια σειρά τεχνικών που μας επιτρέπουν να κατασκευάζουμε σελίδες οι οποίες προσαρμόζονται δυναμικά και “on the fly” σε κάθε διάσταση και προσανατολισμό (orientation) οθόνης. Αξίζει να προσέξουμε τα εξής:

  • Αυτό που “προσαρμόζεται δυναμικά” δεν είναι απλά το πλάτος του περιεχομένου όπως γνωρίζαμε παλιά με τα λεγόμενα 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 του. Τότε θα δει τη σελίδα να μεταμορφώνεται δυναμικά μπροστά στα μάτια του. Δοκιμάστε το και εσείς στα sites του Mashable και της βρετανικής Vogue.

Το πρόβλημα

Τα τελευταία χρόνια αυξάνεται με γοργούς ρυθμούς η χρήση των tablets και των κινητών συσκευών για την πλοήγηση στο διαδίκτυο από ότι παλαιότερα που χρησιμοποιούσαμε αποκλειστικά σταθερό ηλεκτρονικό υπολογιστή.

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

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

ifix-slide11

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

Αυτό που γίνεται συνήθως, είναι η ιστοσελίδα να ανιχνεύει τη συσκευή του επισκέπτη, καθώς και τις διαστάσεις της οθόνης. Όταν ο επισκέπτης χρησιμοποιεί οθόνη με σχετικά μεγάλες διαστάσεις (π.χ. πάνω από 1000px), η προβολή της σελίδας γίνεται υπό κανονικές συνθήκες εμφανίζοντας όσον το δυνατόν περισσότερα αντικείμενα.

Σε οθόνες με μικρότερες διαστάσεις, τα αντικείμενα τοποθετούνται συνήθως το ένα κάτω από το άλλο και μερικές φορές αποκρύπτονται εντελώς.

blog-Responsive-Design

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

Γιατί να στραφεί τελικά κανείς στο responsive design; Γιατί να επιλέξει κανείς μία ομολογουμένως πιο περίπλοκη και τεχνικά απαιτητική λύση για το site του;

  1. Βελτιωμένο user experience (UX): Ο βασικός λόγος είναι φυσικά η παροχή ενός θετικού user experience στους χρήστες ανεξαρτήτως μέσου και τρόπου πρόσβασης στη σελίδα μας!
  2. Κόστος: Αν και ακριβότερο από ένα παραδοσιακό site, η λύση του responsive design ενδεχομένως είναι οικονομικότερη από το να προσπαθούσε κανείς να δημιουργήσει ξεχωριστές σελίδες και εφαρμογές για κάθε συσκευή.
  3. Future-proof!: Ένα responsive site θα προσαρμοστεί σε οποιαδήποτε νέα συσκευή ή ανάλυση, η οποία μπορεί να μην είναι ακόμα διαθέσιμη και να μην γνωρίζουμε.
  4. Συντήρηση: Η συντήρηση του περιεχομένου αλλά και η τεχνική συντήρηση είναι ευκολότερη, αφού μιλάμε για ένα ενιαίο site και όχι πολλαπλές σελίδες.
  5. Συνέπεια: Προσφέρουμε στο χρήστη μια ενιαία εικόνα, ένα brand, ένα design και ένα περιεχόμενο ανεξαρτήτως συσκευής.

responsive-web-design-3

Πότε πρέπει να χρησιμοποιείται το Responsive Web Design και πότε όχι;

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

Θα πρέπει να το χρησιμοποιούμε όταν:

  • Η ιστοσελίδα περιέχει σχετικά μικρό αριθμό σελίδων, χωρίς πολύπλοκη λειτουργικότητα και οι απαιτήσεις των χρηστών δε διαφέρουν πολύ από συσκευή σε συσκευή.
  • Η ιστοσελίδα είναι σχετικά απλή, χωρίς πολλά διαφορετικά είδη διατάξεων (layouts) για τις σελίδες.

Δεν πρέπει να το χρησιμοποιούμε όταν:

  • Η ιστοσελίδα περιέχει πολλές σελίδες και γενικότερα οι λειτουργίες που έχει είναι αρκετά πολύπλοκες.
  • Οι στόχοι και οι απαιτήσεις των χρηστών διαφέρουν σε αρκετά μεγάλο βαθμό από συσκευή σε συσκευή.

Συμπεράσματα

Η τεχνική του responsive web design πλέον αρχίζει και χρησιμοποιείται ευρέως, διότι είναι μια οικονομική λύση για αυτούς που θέλουν η ιστοσελίδα τους να είναι συμβατή σε κάθε browser και σε κάθε συσκευή. Έτσι, μπορούμε να αυξήσουμε τις επισκέψεις της σελίδας μας, αλλά και την εμπειρία πλοήγησης των επισκεπτών μας.

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

Γενικότερα, η σχεδίαση μιας ιστοσελίδας η οποία βασίζεται στην τεχνική του responsive web design δεν είναι εύκολη. Οι designers και οι developers θα πρέπει να γνωρίζουν πολύ καλά HTML, CSS και Javascript και φυσικά να έχουν πολύ καλή συνεργασία μεταξύ τους ώστε να επιτευχθεί το επιθυμητό αποτέλεσμα.

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

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

  • Foodsense (ένα από τα αγαπημένα μου παραδείγματα – αν και όχι το πιο γνωστό brand)
  • Skroutz.gr
  • Time Magazine
  • Mashable
  • Starbucks
  • Ethan Marcotte
  • Μέχρι και η Ορθόδοξη Εκκλησία της Αμερικής είναι responsive!
  • Εδώ θα βρείτε τον πληρέστερο κατάλογο όλων των responsive site σε ένα όμορφο gallery. Χαζέψτε ελεύθερα 🙂 Ανοίξτε τα sites και δοκιμάστε να ανοίξετε και να κλείσετε το παράθυρο του browser σας. Παρατηρήστε πως αλλάζουν δομικά στοιχεία της σελίδας, πως προσαρμόζεται το μενού και πως αλλάζει το layout.

πηγές: artabout.gr, atcom.gr

Share if you like...Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on TumblrEmail this to someone

Leave a Reply