Τι είναι το Responsive Web Design και γιατί το χρειάζεστε!



Το responsive web design είναι ένας σχετικά καινούριος όρος. Για πρώτη φορά αναφέρθηκε από τον Ethan Marcotte στο άρθρο του με τίτλο “Responsive Web Design”.
Στα ελληνικά, η λέξη responsive σημαίνει ανταπόκριση, απάντηση, οπότε μπορούμε να πούμε ότι η τεχνική αυτή βασίζεται στην ανίχνευση κάποιων μεταβλητών και με βάση τις τιμές τους υπάρχει και ανάλογη ανταπόκριση.
Στο web, θα ορίζαμε το responsive web design ως τη διαδικασία σχεδιασμού και κατασκευής ιστοσελίδων οι οποίες ανιχνεύουν διάφορες μεταβλητές από το εξωτερικό και εσωτερικό περιβάλλον και ανταποκρίνονται ανάλογα προς τον επισκέπτη.
Στόχος είναι η δημιουργία μίας «έξυπνης» ιστοσελίδας η όποια θα προσαρμόζει το μέγεθος και τα βασικά χαρακτηριστικά της (μενού, εικόνες, κείμενο) ανάλογα με τις διαστάσεις της οθόνης της συσκευής του χρήστη!

Το πρόβλημα

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

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

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

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


  • Το πιο βασικό πλεονέκτημα είναι ότι έχουμε μια ιστοσελίδα η οποία συμπεριφέρεται σαν 2 σε 1. Μπορούμε να επισκεφθούμε μια ιστοσελίδα χωρίς πρόβλημα είτε από έναν προσωπικό υπολογιστή είτε από μια κινητή συσκευή έχοντας την καλύτερη δυνατή εμπειρία πλοήγησης.
  • Analytics: Μπορούμε να έχουμε μια πλήρη αναφορά των επισκέψεων της ιστοσελίδας μας για διαφορετικού είδους συσκευές.
  • Σύνδεσμοι: Κοινοί σύνδεσμοι (links) που έχουμε στην ιστοσελίδα ανεξάρτητα από το είδος της συσκευής.
  • SEO: Ένα url συμπεριλαμβάνει όλα τα links που θέλουμε να έχουμε.
  • Μεγαλύτερη ευκολία στη συντήρηση και μείωση των σφαλμάτων. Είναι καλύτερα να συντηρείς μία ιστοσελίδα, παρά τρεις (μία για προσωπικό υπολογιστή, μία για tablet και μία για κινητό τηλέφωνο).
  • Μείωση του χρόνου σχεδίασης της δομής της ιστοσελίδας για όσον αφορά διαφορετικές συσκευές.

Responsive Web Design

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

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

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

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


Κατηγορίες:
Σχόλια