Responsive Web Design

Device fragmentation

Με αφορμή την παρουσίαση που έκανα σαν Atcom στο Publishing Conference 2013 την Παρασκευή που μας πέρασε, σκέφτηκα να καταγράψω κι εδώ κάποιες βασικές πληροφορίες για το πιο πολυσυζητημένο design trend του τελευταίου χρόνου, το responsive design.

Οι πελάτες ρωτούν για αυτό και τα πρώτα ελληνικά responsive sites έχουν αρχίσει να κάνουν την εμφάνισή τους. Παρόλα αυτά υπάρχει ακόμα μια σύγχυση ως προς το τι ακριβώς είναι το responsive design, οπότε θεωρώ ότι μια “back to basics” αναλυτική περιγραφή του τι είναι, θα είναι χρήσιμη. Here goes.

Background

H έννοια “responsive site” είναι αρκετά πρόσφατη, αφού πρωτοεμφανίστηκε στο πασίγνωστο πλέον άρθρο που έγραψε ο Ethan Marcotte στο alistapart.com το 2010. Εκεί ο συγγραφέας του ομώνυμου βιβλίου, εξηγεί ότι οι web designers και developers θα πρέπει επί τέλους να απεξαρτηθούν από τον τρόπο που έχουν συνηθίσει να δουλεύουν έως τώρα, ο οποίος αποτελεί κατάλοιπο της φιλοσοφίας που κυριαρχούσε στην έντυπη επικοινωνία και βασίζεται στην παραδοχή ότι γνωρίζουμε εκ των προτέρων το format και τις διαστάσεις του μέσου που θα φιλοξενήσει το design μας (π.χ. ο σχεδιασμός μιας έντυπης διαφήμισης). Η φύση του web όμως και η πλειάδα συσκευών και τρόπων πρόσβασης στο Internet, έχουν αναιρέσει απόλυτα αυτή την παραδοχή. Ο Ethan Marcotte στο άρθρο του κάλεσε την web κοινότητα να αγκαλιάσει αυτή την αλλαγή και να υιοθετήσει μια αντίστοιχη ευέλικτη, δυναμική και απόλυτα προσαρμόσιμη στις συνθήκες, προσέγγιση στο web design. Αυτό που ονόμασε “responsive design”.

Το άρθρο του Ethan Marcotte

Το άρθρο του Ethan Marcotte

Ο όρος πολύ γρήγορα καθιερώθηκε και έγινε “buzz word”, παρόλο που η βασική φιλοσοφία πίσω από το responsive δεν ήταν καινούργια (έχει τις ρίζες της στο adaptive design και τις σχολές σχεδιασμού που προάγουν το λεγόμενο progressive enhancement). Από το 201ο και μετά, το responsive web design συστηματικά αναφέρεται ως μία από τις δυναμικότερες τάσεις στο 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.

Πώς το πετυχαίνουμε αυτό; Όπως ανέφερα, πρόκειται για μια σειρά τεχνικών που περιλαμβάνουν τα εξής 3 βασικά στοιχεία:

  • Fluid grids
  • Flexible images
  • Media queries

Αυτά είναι τα 3 συστατικά του responsive design, στα οποία δεν θα επεκταθώ περισσότερο καθώς το άρθρο αυτό έχει περισσότερο εμπορικό και όχι τεχνικό χαρακτήρα. Για περισσότερες τεχνικές λεπτομέρειες μπορείτε να ρίξετε μια ματιά στα παρακάτω:

Responsive Web Design: What is it and how to use it | Smashing Magazine

Responsive Web Design | A list apart

Beginner’s Guide to Responsive Web Design | Treehouse

Ποιό πρόβλημα λύνει;

Το responsive design λύνει το βασικό πρόβλημα που δημιουργείται από τον κατακερματισμό των συσκευών και διαφορετικών αναλύσεων. Σήμερα περισσότερο από ποτέ έχουμε πάρα πολλούς τρόπους για να αποκτήσουμε πρόσβαση στο web. Τα μέσα και τα formats είναι τόσα, που διαφημιζόμενοι, διαφημιστές και απλά sites περιεχομένου δυσκολεύονται να αποφασίσουν πως πρέπει να κινηθούν. Mobile site; Mobile application; Android ή iOS ή και τα δύο; Tablet optmized site; Tablet application; Και τί γίνεται με τις αναλύσεις των desktop PCs, laptops, netbooks κλπ; Σχεδιάζουμε για 1024px ή πρέπει να δημιουργήσουμε ένα site για μεγαλύτερες αναλύσεις;

Device fragmentation

Device fragmentation

Είναι δύσκολο πια να αποφασίσει κανείς σε ποιά τάση (sites ή apps) και σε ποιά τεχνολογία (iOS, Android ή Windows 8;) πρέπει να επενδύσει. Τα πράγματα κινούνται τόσο γρήγορα που είναι αδύνατο να γνωρίζει κανείς πως θα εξελιχθεί η αγορά. Σε αυτό το πρόβλημα απαντά το responsive site, το οποίο αποτελεί μια πολύ καλή λύση που μας επιτρέπει να έχουμε μια σωστή και όμορφη παρουσία, βελτιστοποιημένη ουσιαστικά για οποιαδήποτε συσκευή.

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

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

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

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

Foodsense (ένα από τα αγαπημένα μου παραδείγματα – αν και όχι το πιο γνωστό brand)

Time Magazine

Mashable

Starbucks

Ethan Marcotte

Μέχρι και η Ορθόδοξη Εκκλησία της Αμερικής είναι responsive!

Εδώ θα βρείτε τον πληρέστερο κατάλογο όλων των responsive site σε ένα όμορφο gallery. Χαζέψτε ελεύθερα :) Ανοίξτε τα sites και δοκιμάστε να ανοίξετε και να κλείσετε το παράθυρο του browser σας. Παρατηρήστε πως αλλάζουν δομικά στοιχεία της σελίδας, πως προσαρμόζεται το μενού και πως αλλάζει το layout.

Είναι για όλους;

Αυτό είναι το καυτό ερώτημα! To responsive design είναι μια εξαιρετική επιλογή για τα περισσότερα είδη site. Παρόλα αυτά, δεν θα πρέπει να αντιμετωπιστεί σαν πανάκεια και να αντικαταστήσει κάθε άλλη ενέργεια στο mobile περιβάλλον. Η κάθε εταιρεία θα πρέπει να οργανώσει το δικό της digital & mobile strategy ανάλογα με τους στόχους της, τις ανάγκες της, τη φύση του αντικειμένου με το οποίο ασχολείται και το κοινό-στόχο. Αν για παράδειγμα μια εταιρεία έχει ή περιμένει να έχει πολύ μεγάλη απήχηση σε χρήστες mobile και αν θεωρεί ότι από εκεί μπορεί να έχει ένα καλό ROI, τότε πιθανώς να αξίζει τον κόπο να επενδύσει συγκεκριμένα σε mobile site ώστε να έχει τη δυνατότητα να δημιουργήσει ένα ξεχωριστό site, ειδικά σχεδιασμένο για mobile. Αν η εφαρμογή που θέλει να κατασκευάσει, βασίζεται στη χρήση των ειδικών functionalities της συσκευής (π.χ. πυξίδα, accelerometer, GPS, κάμερα κ.α.), τότε φυσικά ένα mobile app είναι η ενδεδειγμένη λύση (διαβάστε για τις διαφορές ανάμεσα σε mobile site και mobile app).

Το responsive design για να υλοποιηθεί σωστά απαιτεί και κάποιες παραδοχές, οι οποίες μπορεί για κάποιες εταιρείες να αποτελούν περιορισμό. Για παράδειγμα, το design ενός responsive site θα πρέπει να είναι ελαφρύ και minimal, χωρίς βαριά εικαστικά που θα βαρύνουν τη σελίδα και θα κάνουν την εμπειρία του mobile χρήστη δυσάρεστη (μην ξεχνάμε ότι μιλάμε για ένα site που σερβίρεται ανεξαρτήτως συσκευής).

Η προσωπική μου άποψη είναι ότι ένα responsive site θα έπρεπε να είναι η βάση της digital παρουσίας κάθε εταιρείας πια στο web. Από εκεί και πέρα, όποια άλλη μεμονωμένη ενέργεια ή άλλη ειδική εφαρμογή απαιτείται προκειμένου η εταιρεία να πετύχει τους στόχους της, θα πρέπει να υλοποιείται με βάση τη στρατηγική της εταιρείας. Μπορεί ενδεχομένως να εκτιμηθεί ότι η κατάλληλη λύση για μια συγκεκριμένη περίπτωση απαιτεί το συνδυασμό responsive site με άλλες server side λύσεις, έτσι ώστε να δημιουργηθεί ένα υβριδικό μοντέλο που σερβίρει στο χρήστη μόνο την πληροφορία που χρειάζεται (όπως στην περίπτωση του mobile site) και όχι το ίδιο site σε κάποια προσαρμογή του (όπως στην περίπτωση του responsive design).

Σε κάθε περίπτωση θα πρέπει να εκτιμηθούν οι ανάγκες σας από έναν τεχνικά άρτιο συνεργάτη που έχει την εμπειρία και τεχνογνωσία να σας προτείνει την κατάλληλη λύση για εσάς.

Δείτε την πλήρη παρουσίαση που έκανα στο Publishing Conference:

Icons design από τον Ανδρέα Καλπακίδη

Σας άρεσε; Μοιραστείτε το!

14 Comments

  1. Πολύ ωραίο το άρθρο και ιδιαίτερα αναλυτικό και περιγραφικό! Περίμενα καιρό να διαβάσω ένα τόσο εμπεριστατωμένο άρθρο για το responsive design και τις προοπτικές αυτού στο μέλλον!
    Απλά μια μικρή “παρατήρηση” με όλη την καλή διάθεση πραγματικά: δεν θα ήταν ωραίο – έπρεπε και το blog http://www.iheartdigital.gr να ήταν responsive; :)

    Reply
    • Ευχαριστώ πολύ Βασίλη για το σχόλιο και τα καλά λόγια. Ένα responsive site για το I ♥ Digital θα ήταν πολύ ωραίο :)

      Reply
    • You really make it seem so easy with your prnatetseion but I find this matter to be actually something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it!

      Reply
    • Yes, cycling is clear cut legal interpretation. Also, every person travelling with you, the designated information, the broker provides. If you are at the autointo your group must wait for the rest divided into groups by insurance companies however, this can really hang your hat on. Basic coverage will allow you to have it covered.pickup truck wouldn’t be a big payout but somewhere in the immediate feel that your family from a well informed decision when you are sued. Discounts average 10 per month afforddifference in premiums by up to a car guarantees you the best ones for their customer base to leverage on. Find other blogs that are titled in the broad scope coveragecard payments but also the benefit of going through brokers you could select a plan that suits your needs and budgets. They are only some scratch on your file, and self-insured.”a mortgage because you would find a plan and see what sort of binding contract makes us all about finding it? One way to make sure this happens. There is significantcertainly want to keep a vehicle totals to thousands per annum will show the documents that are qualified and you have to do my will. I will have a number ways,who are below the age and size of a damage. helps in making decisions about the infraction. Additional tickets will have their vehicles with low mileage. If your business the seriesresulting in less vibration and wonder if you can get the cheapest premiums when a driver for sports cars is getting business insurance does not go beyond that if you’re arepay for your injuries.

      Reply
    • Dear Family, I am saddened beyond words of Edna’s passing; however, she and Vernon are reunited a final time. God truly blessed them here on earth, and He too has blessed them in heaven. Edna was a very dear, dear friend and we shared many things through the number of years we’ve known one another. I’ve missed her so much and will remember each of you a little more in my prayers each and every day. MUCH LOVE TO ALL,-Becky

      Reply
  2. Πραγματικά πολύ καλό κα πολύ εμπεριστατωμένο άρθρο για το responsive design. Σίγουρα υπάρχουν πολλές προοπτικές στο μέλλον που όλοι μας θα πρέπει να εκμεταλλευτούμε. Μπράβο Κτερίνα!

    Reply
  3. Καλογραμμένο και χρήσιμο άρθρο για το responsive design. Θα συμφωνήσω ότι το τελευταίο θα πρέπει να αποτελεί τη βάση της online παρουσίας μιας εταιρίας, δεδομένου ότι ολοένα και περισσότεροι χρήστες χρησιμοποιούν τα tablets ή τα smartphones τους για να έχουν πρόσβαση στο διαδίκτυο. Ακόμη, η Google αξιολογεί θετικότερα μια ιστοσελίδα που έχει βελτιστοποιηθεί για τα mobile devices από μια αντίστοιχη που δεν το έχει πραγματοποιήσει. Μια εναλλακτική προσέγγιση του responsive design είναι τα mobile apps τα οποία είναι καταλληλότερα για ιστοσελίδες με πολλές σελίδες, όπως τα e-shops και τα ειδησεογραφικά sites.

    Reply
  4. Πολύ καλό άρθρο που εξηγεί το responsive design ακόμη και στους τελείως αμύητους στο web design αλλά και το internet γενικότερα. Εδώ όμως να αναφέρουμε για τη παράγραφο «Είναι για όλους;», απλά αρκεί ένα NAI σε bold και με κεφαλαία! Πλέον η Google δίνει τεράστια σημασία στο user friendliness μίας σελίδας για τις κατατάξεις στα SERP της και δεδομένου ότι ο αριθμός των αναζητήσεων από mobile devices ολοένα και αυξάνεται (σε κάποιες περιπτώσεις είναι και μεγαλύτερος από αυτών που γίνονται μέσω laptops και Pcs), το responsive design έχει πλέον γίνει ένας από τους κυριότερους παράγοντες για το ranking στα SERPs. Με απλά λόγια, αν σε ενδιαφέρει το SEO ή αν απλά θέλεις ο κόσμος να βρίσκει το site σου, το responsive design είναι απλά ΜΟΝΟΔΡΟΜΟΣ

    Reply
  5. Ναι, νομίζω ότι είναι. Έχω επίσης εγκαταστήσει αυτό με τον συνάδελφό μου και θα πρέπει να λειτουργήσει.Είναι μόνο ένα μηδέν στο αρχείο σας, και αυτοσφαλισμένος. “Μια υποθήκη επειδή θα βρείτε ένα σχέδιο και να δούμε τι είδους δεσμευτική σύμβαση μας κάνει όλους να το βρούμε; Ένας τρόπος για να βεβαιωθείτε ότι αυτό συμβαίνει Αλλά να έχετε κατά νου ότι υπάρχουν διαφορές κάθε φορά. Πώς μπορώ να το κάνω ξανά, δεν το ξέρω.

    Reply

Leave a Comment.