Ιστοσελίδα responsive
Όταν λέμε responsive ιστοσελίδα τι εννοούμε; Τι πρέπει να ξέρετε;
Εμείς θα σας τη δημιουργήσουμε, αλλά καλό είναι να ξέρετε κάποια πράγματα…
Τι είναι
Στα ελληνικά, η λέξη responsive σημαίνει ανταπόκριση, απάντηση, οπότε μπορούμε να πούμε ότι η τεχνική αυτή βασίζεται στην ανίχνευση κάποιων μεταβλητών και με βάση τις τιμές τους υπάρχει και ανάλογη ανταπόκριση. Στο web, θα ορίζαμε το responsive web design ως τη διαδικασία σχεδιασμού και κατασκευής ιστοσελίδων οι οποίες ανιχνεύουν διάφορες μεταβλητές από το εξωτερικό και εσωτερικό περιβάλλον και ανταποκρίνονται ανάλογα προς τον επισκέπτη. Στόχος είναι η δημιουργία μίας «έξυπνης» ιστοσελίδας η όποια θα προσαρμόζει το μέγεθος και τα βασικά χαρακτηριστικά της (μενού, εικόνες, κείμενο) ανάλογα με τις διαστάσεις της οθόνης της συσκευής του χρήστη!
Γιατί είναι απαραίτητη
Τα τελευταία χρόνια αυξάνεται με γοργούς ρυθμούς η χρήση των tablets και των κινητών συσκευών για την πλοήγηση στο διαδίκτυο από ότι παλαιότερα που χρησιμοποιούσαμε αποκλειστικά σταθερό ηλεκτρονικό υπολογιστή. Αυτό μπορεί να δημιουργήσει προβλήματα στην εμφάνιση των ιστοσελίδων, λόγω ποικιλίας διαστάσεων στις οθόνες των συσκευών, καθώς και διαφόρων ασυμβατοτήτων μεταξύ τους. Χρησιμοποιώντας την τεχνική του responsive web design για να κατασκευάσουμε μια ιστοσελίδα έχουμε ως στόχο να αποφύγουμε τέτοιου είδους προβλήματα και να προσφέρουμε στον επισκέπτη την καλύτερη δυνατή εμπειρία πλοήγησης, καθώς και τις δυνατότητες που προσφέρει το εκάστοτε μέσο που χρησιμοποιεί.
Πως λειτουργεί
Αυτό που γίνεται συνήθως, είναι η ιστοσελίδα να ανιχνεύει τη συσκευή του επισκέπτη, καθώς και τις διαστάσεις της οθόνης. Όταν ο επισκέπτης χρησιμοποιεί οθόνη με σχετικά μεγάλες διαστάσεις (π.χ. πάνω από 1000px), η προβολή της σελίδας γίνεται υπό κανονικές συνθήκες εμφανίζοντας όσον το δυνατόν περισσότερα αντικείμενα. Σε οθόνες με μικρότερες διαστάσεις, τα αντικείμενα τοποθετούνται συνήθως το ένα κάτω από το άλλο και μερικές φορές αποκρύπτονται εντελώς.
Πιo αναλυτικά
Δείτε στην συνέχεια τα βασικά στοιχεία μια responsive design ιστοσελίδας, όπως και αυτή που θα φτιάξουμε για εσάς:
Το μοντέρνο στυλ της full width ιστοσελίδας είναι μια νέα δυνατότητα να πιάνει όλο το πλάτος της οθόνης οποιασδήποτε συσκευής. Πιο αναλυτικά μια responsive ιστοσελίδα όταν θα εμφανιστεί στην οθόνη μιας μικρότερης συσκευής, θα πρέπει να μπορεί να προσαρμοστεί αυτόματα χωρίς να χάσει τίποτα από τα δεδομένα της.
Η ιστοσελίδα που θα δημιουργήσουμε για εσάς θα είναι δυναμική (Responsive) και όχι στατική, όπως ήταν αυτές της παλιότερης γενιάς. Με άλλα λόγια κάθε περιεχόμενο όπως εικόνα, video, animation ή κείμενο θα προσαρμοστεί σε οποιοδήποτε απαιτούμενο μέγεθος, χωρίς να αλλοιωθεί κάτι από το αποτέλεσμα που έχει αρχικά το site.
Ένα άλλο ακόμη στοιχείο που έχει κάθε μοντέρνα ιστοσελίδα και που φυσικά θα έχει και αυτή που θα δημιουργήσουμε για εσάς είναι ότι έχει την δυνατότητα να είναι animated. Αυτό σημαίνει ότι δημιουργεί μια ευχάριστη πλοήγηση για τον χρήστη καθώς κάθε αντικείμενο όπως εικόνα, video, animation ή κείμενο έχει δικιά του, αυτόνομη κίνηση (not nested). Αντίθετα οι περισσότερες σελίδες που υπάρχουν έχουν το παλιό μοτίβο ενιαίας κίνησης αντικειμένων (nested)
Το μοντέρνο website απαιτεί κατά την δημιουργία μιας ιστοσελίδας να φροντίζουμε για την mobile εκδοχή της ιστοσελίδας, σε τέτοιο βαθμό που μπορεί κάποιος να μας ζητήσει η ιστοσελίδα να είναι έτσι ρυθμισμένη ώστε να φαίνεται καλύτερα για τα smartphones δηλαδή η mobile εκδοχή της βασικά, καθώς όπως είπαμε σήμερα οι χρήστες περισσότερο σερφάρουν από mobile συσκευές παρά από το pc. Εννοείται όμως πως η ιστοσελίδα θα μπορεί να προσαρμόζεται και στις υπόλοιπες οθόνες!
Χρειάζεται σε κάθε ιστοσελίδα το responsive web design
Όταν πρόκειται να κατασκευάσουμε μια ιστοσελίδα είναι πολύ βασικό να αποφασίσουμε εξαρχής εάν θα χρησιμοποιήσουμε την τεχνική του responsive web design.
Θα πρέπει να το χρησιμοποιούμε όταν:
- Η ιστοσελίδα περιέχει σχετικά μικρό αριθμό σελίδων, χωρίς πολύπλοκη λειτουργικότητα και οι απαιτήσεις των χρηστών δε διαφέρουν πολύ από συσκευή σε συσκευή.
- Η ιστοσελίδα είναι σχετικά απλή, χωρίς πολλά διαφορετικά είδη διατάξεων (layouts) για τις σελίδες.
Δεν πρέπει να το χρησιμοποιούμε όταν:
- Η ιστοσελίδα περιέχει πολλές σελίδες και γενικότερα οι λειτουργίες που έχει είναι αρκετά πολύπλοκες.
- Οι στόχοι και οι απαιτήσεις των χρηστών διαφέρουν σε αρκετά μεγάλο βαθμό από συσκευή σε συσκευή.
Συμπέρσμα
Η τεχνική του responsive web design πλέον αρχίζει και χρησιμοποιείται ευρέως, διότι είναι μια οικονομική λύση για αυτούς που θέλουν η ιστοσελίδα τους να είναι συμβατή σε κάθε browser και σε κάθε συσκευή. Έτσι, μπορούμε να αυξήσουμε τις επισκέψεις της σελίδας μας, αλλά και την εμπειρία πλοήγησης των επισκεπτών μας.
Όμως, δεν είναι πάντοτε η καλύτερη επιλογή. Σίγουρα αποτελεί τη λύση πολλές φορές, αλλά όχι σε όλες τις περιπτώσεις. Η χρήση του καμιά φορά μπορεί να προκαλέσει άλλα προβλήματα και τότε καλύτερο είναι να μην χρησιμοποιηθεί αυτή η τεχνική.
Γενικότερα, η σχεδίαση μιας ιστοσελίδας η οποία βασίζεται στην τεχνική του responsive web design δεν είναι εύκολη. Οι designers και οι developers θα πρέπει να γνωρίζουν πολύ καλά HTML, CSS και Javascript και φυσικά να έχουν πολύ καλή συνεργασία μεταξύ τους ώστε να επιτευχθεί το επιθυμητό αποτέλεσμα.
Τέλος, το responsive web design είναι μια κυρίαρχη τάση στο χώρο της σχεδίασης και κατασκευής ιστοσελίδων και θα συνεχίσει να χρησιμοποιείται ολοένα και περισσότερο.
Μερικά δείγματα τις δικής μας δουλειάς που έχει χρησιμοποιηθεί το responsive web design:
Για περισσότερες πληροφορίες ή για να κάνετε και την δική σας ιστοσελίδα responsive επικοινωνήστε μαζί μας εδώ
