 |
| Responsive Web Design |
Η δυνατότητα αυτή βασίζεται σε μια σύγχρονη τάση κατασκευής websites που ονομάζεται responsive web design. Πρόκειται για μια σειρά από τεχνικές που χρησιμοποιούνται κατά τον σχεδιασμό και ανάπτυξη σελίδων web με αποτέλεσμα την αυτόματη προσαρμογή και διάταξη των περιεχομένων μια σελίδας ανάλογα με την ανάλυση της οθόνης!
Για να καταφέρουμε ένα responsive αποτέλεσμα θα πρέπει καταρχήν να αποδεχτούμε τη βασική παραδοχή: δεν θα έχουμε παντού την ίδια εμφάνιση - διάταξη! Ανάλογα με την ανάλυση της οθόνης το περιεχόμενο θα προσαρμόζεται ώστε να καταλαμβάνει ανάλογη διάσταση και χώρο!
Ο όρος ξεκίνησε το 2010 με αφορμή το άρθρο του Ethan Marcotte με τίτλο Responsive Web Design, για να γίνει σύντομα τάση και πλέον να θεωρείται μια από τις πιο διαδεδομένες τεχνικές σχεδίασης websites. Στο πρωτότυπο άρθρο ο Marcotte εισήγαγε ένα νέο τρόπο σχεδιασμού για το web και κυρίως θέλησε να επηρεάσει όλους όσους είχαν γαλουχηθεί με τεχνικές του "έντυπου" design, όπου οι διαστάσεις και τα μεγέθη ήταν ανέκαθεν σταθερά, αυστηρά και οριοθετημένα! Στο web όμως με την πληθώρα συσκευών και οθονών, από smartphone με ανάλυση 320x480 pixels μέχρι οθόνες σε desktop με 1280x900 η σχεδιαστική προσέγγιση πρέπει να είναι τελείως διαφορετική, δυναμική ή με απλά λόγια προσαρμόσιμη (responsive) ανάλογα με την ανάλυση της οθόνης του κάθε επισκέπτη.
Βασικές Τεχνικές
Για να καταφέρουμε ένα responsive αποτέλεσμα θα πρέπει καταρχήν να αποδεχτούμε τη βασική παραδοχή: δεν θα έχουμε παντού την ίδια εμφάνιση - διάταξη! Ανάλογα με την ανάλυση της οθόνης το περιεχόμενο θα προσαρμόζεται ώστε να καταλαμβάνει ανάλογη διάσταση και χώρο! Στο άκουσμα αυτού ακόμα και σήμερα πολλοί σχεδιαστές web δυσανασχετούν. Εν μέρη είναι λογικό, ειδικά αν δεν ειδικεύονται στο web, αφού σε όλες τις άλλες εφαρμογές (έντυπο, ένδυμα, χώρος, κλπ) το design εφαρμόζεται σε συγκεκριμένες διαστάσεις και οι οδηγίες του δημιουργού μέχρι κεραίας! Η γέφυρα για να περάσουμε από τον "απόλυτο" σχεδιασμό στο προσαρμόσιμο είναι να κατανοήσουμε τις βασικές τεχνικές που προσφέρονται για να έχουμε responsive design.Ρευστά όρια (Fluid Grids)
Από τη στιγμή που δημιουργούμε κάτι ευμετάβλητο και προσαρμόσιμο δεν είναι δυνατόν να σχεδιάσουμε με απόλυτες τιμές. Συνεπώς οι αναφορές σε pixels και points δίνουν την θέση τους σε ποσοστιαία μεγέθη όπως το em. Για παράδειγμα ένα τίτλος 18px σε responsive δηλώνεται ως 2.3em, ενώ το πλάτος μια στήλης θα πρέπει είναι αναλογικό πχ 40% και όχι σταθερό σε pixels.Προσαρμόσιμες εικόνες (Flexible Images)
Ανάλογη λογική ακολουθείται και στις εικόνες (λογότυπα, φωτογραφίες, κλπ) όπου η τελική διάσταση διαμορφώνεται ανάλογα. Η μόνη αναφορά σε διάσταση είναι η μέγιστη τιμή πχ max-width καθώς η τελική διάσταση της εικόνας σχετίζεται με χώρο που φιλοξενεί την εκάστοτε εικόνα και πάντα σε σχέση με την ανάλυση της οθόνης.Media Queries
Η πιο σημαντική τεχνική, κάτι σαν το μαγικό φίλτρο στο Αστερίξ, είναι τα Media queries με τη χρήση των οποίων οι web developers μπορούν να ενεργοποιούν κανόνες εμφάνισης (layouts με διαφορετικό typography ή ακόμα και design) ανάλογα με τα χαρακτηριστικά της συσκευής του επισκέπτη. Αυτή η δυνατότητα απελευθερώνει σημαντικά του δημιουργούς καθώς μπορούν να εμφανίσουν με ένα εντελώς διαφορετικό τρόπο την σελίδα ή και μέρος αυτής ανάλογα με τη συσκευή που χρησιμοποιεί ο χρήστης. Συνεπώς στην desktop έκδοση μπορεί να έχουμε ένα "φορτωμένο" layout με πολλά συνοδευτικά στοιχεία, ενώ στην έκδοση για οθόνες smartphones να περιοριζόμαστε στο κυρίως κείμενο και μάλιστα με μέγεθος γραμματοσειρών που διευκολύνουν την ανάγνωσηΤα βασικά πλεονεκτήματα του Responsive Web Design
Συνοψίζοντας, τα πλεονεκτήματα της χρήσης responsive design σε website είναι τα ακόλουθα:
Φιλικό προς τον χρήστη
Ο επισκέπτης διαβάζει και βλέπει πληροφορίες κατάλληλα προσαρμοσμένες για την οθόνη της συσκευής του χωρίς να αναλώνεται σε μετακινήσεις αριστερά - δεξιά και μεγενθύσεις μέσα - έξω στη σελίδα.Περισσότερες επισκέψεις - καλύτερη διάδραση
Αποτέλεσμα του παραπάνω είναι η επικέντρωση του επισκέπτη στο περιεχόμενο και στην ανάγνωση των πληροφοριών που προσφέρει το website και κατά συνέπεια στην αύξηση της διάδρασης, με μεγαλύτερη διάρκεια παραμονής, περισσότερες σελίδες ανά επίσκεψη, αλλά και μετατροπές, όπως πωλήσεις, συμπλήρωση φορμών, κλπΕνιαία πλατφόρμα συντήρησης
Ως τώρα όσοι ενδιαφέρονταν για την εμφάνιση των σελίδων τους σε κινητά προχωρούσαν σε κατασκευή ειδικών εκδόσεων των sites (mobile version), ενώ αρκετοί προχωρούσαν με την προτροπή "ειδικών" σε κατασκευή ειδικών εφαρμογών για κινητά απλά για εμφάνιση περιεχομένου (χωρίς να αξιοποιούσαν χαρακτηριστικά των κινητών όπως gps, camera, κλπ). Με τη χρήση του responsive design όλα αυτά γίνονται περιττά ενώ η διαχείριση της πληροφορίας γίνεται από ένα σημείο. Ακόμα και από πλευράς SEO τα responsive websites υπερέχουν καθώς με μια μοναδική διεύθυνση ανά σελίδα ενημερώνονται οι πάντες και κυρίως οι μηχανές αναζήτησης για το περιεχόμενο μας.Κόστος
Η εφαρμογή responsive web design μπορεί να εφαρμοστεί σε ένα website με διάφορους τρόπους, ανάλογα με τις επιμέρους τεχνικές που θα αξιοποιηθούν. Σίγουρα απαιτεί περισσότερο χρόνο και κόστος από την τυπική κατασκευή, ειδικά μάλιστα αν ο σχεδιασμός βασιστεί στα media queries. Στο εξωτερικό αρκετά websites το αξιοποιούν στο έπακρο, ενώ άλλα χρησιμοποιούν κάποιες βασικές τεχνικές. Στην Ελλάδα ακόμα δεν έχει εφαρμοστεί ιδιαίτερα και ακόμα και μεγάλα sites επιλέγουν ακόμα την λύση της ειδικής έκδοσης για κινητά (mobile version). Από τα πιο γνωστά διεθνή sites είναι τα: www.starbucks.com, www.disney.com, www.time.com και www.microsoft.com, ενώ στη Τεχνόπολις ΑΕ έχουμε κατασκευάσει πρόσφατα τα : www.drive.gr και www.meta4four.gr.Κλείνοντας διαπιστώνω ότι δεν απάντησα στο ερώτημα ποιους αφορά και θα πρέπει να το εντάξουν στο website τους ή να το περιλάβουν σε μελλοντική ανακατασκευή. Θα επιλέξω για συντομία την εις άτοπον απαγωγή και θα αναφέρω ότι δεν αφορά αυτούς που θεωρούν ότι:
- Το webiste δεν είναι βασικό μέσο προώθησης της εταιρικής τους δραστηριότητας.
- Το website είναι αναγκαίο κακό και ένα είδος ηλεκτρονικού φυλλαδίου.
- Τα smartphone είναι παιχνίδι και οι "σοβαροί" πελάτες θα τους επισκέπτονται από το desktop του γραφείου τους, με οθόνη μάλιστα ίδιας ανάλυσης με αυτή που έχουν στο δικό τους.
- Δεν έχουν ή δεν τους απασχολεί ο ανταγωνισμός.
Πέρα από κάθε διάθεση για χιούμορ, το responsive design είναι μια στρατηγική κίνηση για όλους όσους έχουν επενδύσει στο website τους. Ακολουθώντας τις τεχνολογικές εξελίξεις και τις συνήθειες των χρηστών εδραιώνουμε και επεκτείνουμε το πελατολόγιο μας, ενώ παράλληλα ξεχωρίζουμε από τον ανταγωνισμό...
