How Important Is 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 του. Τότε θα δει τη σελίδα να μεταμορφώνεται δυναμικά μπροστά στα μάτια του.
Πώς το πετυχαίνουμε αυτό; Όπως ανέφερα, πρόκειται για μια σειρά τεχνικών που περιλαμβάνουν τα εξής 3 βασικά στοιχεία:
- Fluid grids
- Flexible images
- Media queries
Αυτά είναι τα 3 συστατικά του responsive design, στα οποία δεν θα επεκταθώ περισσότερο καθώς το άρθρο αυτό έχει περισσότερο εμπορικό και όχι τεχνικό χαρακτήρα.
Για περισσότερες τεχνικές λεπτομέρειες μπορείτε να ρίξετε μια ματιά στα παρακάτω:
Ποιό πρόβλημα λύνει;
Το responsive design λύνει το βασικό πρόβλημα που δημιουργείται από τον κατακερματισμό των συσκευών και διαφορετικών αναλύσεων. Σήμερα περισσότερο από ποτέ έχουμε πάρα πολλούς τρόπους για να αποκτήσουμε πρόσβαση στο web. Τα μέσα και τα formats είναι τόσα, που διαφημιζόμενοι, διαφημιστές και απλά sites περιεχομένου δυσκολεύονται να αποφασίσουν πως πρέπει να κινηθούν. Mobile site; Mobile application; Android ή iOS ή και τα δύο; Tablet optmized site; Tablet application; Και τί γίνεται με τις αναλύσεις των desktop PCs, laptops, netbooks κλπ; Σχεδιάζουμε για 1024px ή πρέπει να δημιουργήσουμε ένα site για μεγαλύτερες αναλύσεις;
Είναι δύσκολο πια να αποφασίσει κανείς σε ποιά τάση (sites ή apps) και σε ποιά τεχνολογία (iOS, Android ή Windows 8;) πρέπει να επενδύσει. Τα πράγματα κινούνται τόσο γρήγορα που είναι αδύνατο να γνωρίζει κανείς πως θα εξελιχθεί η αγορά. Σε αυτό το πρόβλημα απαντά το responsive site, το οποίο αποτελεί μια πολύ καλή λύση που μας επιτρέπει να έχουμε μια σωστή και όμορφη παρουσία, βελτιστοποιημένη ουσιαστικά για οποιαδήποτε συσκευή.
Πλεονεκτήματα
Γιατί να στραφεί τελικά κανείς στο responsive design; Γιατί να επιλέξει κανείς μία ομολογουμένως πιο περίπλοκη και τεχνικά απαιτητική λύση για το site του;
- Βελτιωμένο user experience (UX): Ο βασικός λόγος είναι φυσικά η παροχή ενός θετικού user experience στους χρήστες ανεξαρτήτως μέσου και τρόπου πρόσβασης στη σελίδα μας!
- Κόστος: Αν και ακριβότερο από ένα παραδοσιακό site, η λύση του responsive design ενδεχομένως είναι οικονομικότερη από το να προσπαθούσε κανείς να δημιουργήσει ξεχωριστές σελίδες και εφαρμογές για κάθε συσκευή.
- Future-proof!: Ένα responsive site θα προσαρμοστεί σε οποιαδήποτε νέα συσκευή ή ανάλυση, η οποία μπορεί να μην είναι ακόμα διαθέσιμη και να μην γνωρίζουμε.
- Συντήρηση: Η συντήρηση του περιεχομένου αλλά και η τεχνική συντήρηση είναι ευκολότερη, αφού μιλάμε για ένα ενιαίο site και όχι πολλαπλές σελίδες.
- Συνέπεια: Προσφέρουμε στο χρήστη μια ενιαία εικόνα, ένα brand, ένα design και ένα περιεχόμενο ανεξαρτήτως συσκευής.
Παραδείγματα responsive design που σχεδιάστηκαν απο εμάς(DD Cyprus1Click) :
και βασικά όλα τα websites που δημιουργήσαμε μέχρι σήμερα περιλαμβανομένου και του εδώ website www.c1cweb.com
Για πιο πολλά δείγματα Responsive web design εδώ. Our work
Είναι για όλους;
Αυτό είναι το καυτό ερώτημα! To responsive design είναι μια εξαιρετική επιλογή για τα περισσότερα είδη site. Παρόλα αυτά, δεν θα πρέπει να αντιμετωπιστεί σαν πανάκεια και να αντικαταστήσει κάθε άλλη ενέργεια στο mobile περιβάλλον. Η κάθε εταιρεία θα πρέπει να οργανώσει το δικό της digital & mobile strategy ανάλογα με τους στόχους της, τις ανάγκες της, τη φύση του αντικειμένου με το οποίο ασχολείται και το κοινό-στόχο. Αν για παράδειγμα μια εταιρεία έχει ή περιμένει να έχει πολύ μεγάλη απήχηση σε χρήστες mobile και αν θεωρεί ότι από εκεί μπορεί να έχει ένα καλό ROI, τότε πιθανώς να αξίζει τον κόπο να επενδύσει συγκεκριμένα σε mobile site ώστε να έχει τη δυνατότητα να δημιουργήσει ένα ξεχωριστό site, ειδικά σχεδιασμένο για mobile. Αν η εφαρμογή που θέλει να κατασκευάσει, βασίζεται στη χρήση των ειδικών functionalities της συσκευής (π.χ. πυξίδα, accelerometer, GPS, κάμερα κ.α.), τότε φυσικά ένα mobile app είναι η ενδεδειγμένη λύση (διαβάστε για τις Πλεονεκτήματα του Mobile app).
Το responsive design για να υλοποιηθεί σωστά απαιτεί και κάποιες παραδοχές, οι οποίες μπορεί για κάποιες εταιρείες να αποτελούν περιορισμό. Για παράδειγμα, το design ενός responsive site θα πρέπει να είναι ελαφρύ και minimal, χωρίς βαριά εικαστικά που θα βαρύνουν τη σελίδα και θα κάνουν την εμπειρία του mobile χρήστη δυσάρεστη (μην ξεχνάμε ότι μιλάμε για ένα siteπου σερβίρεται ανεξαρτήτως συσκευής).
Η προσωπική μου άποψη είναι ότι ένα responsive site θα έπρεπε να είναι η βάση της digital παρουσίας κάθε εταιρείας πια στο web. Από εκεί και πέρα, όποια άλλη μεμονωμένη ενέργεια ή άλλη ειδική εφαρμογή απαιτείται προκειμένου η εταιρεία να πετύχει τους στόχους της, θα πρέπει να υλοποιείται με βάση τη στρατηγική της εταιρείας. Μπορεί ενδεχομένως να εκτιμηθεί ότι η κατάλληλη λύση για μια συγκεκριμένη περίπτωση απαιτεί το συνδυασμό responsive site με άλλες server side λύσεις, έτσι ώστε να δημιουργηθεί ένα υβριδικό μοντέλο που σερβίρει στο χρήστη μόνο την πληροφορία που χρειάζεται (όπως στην περίπτωση του mobile site) και όχι το ίδιο site σε κάποια προσαρμογή του (όπως στην περίπτωση του responsive design).
Σε κάθε περίπτωση θα πρέπει να εκτιμηθούν οι ανάγκες σας από έναν τεχνικά άρτιο συνεργάτη που έχει την εμπειρία και τεχνογνωσία να σας προτείνει την κατάλληλη λύση για εσάς.
Related posts
