Adaptive vs Responsive design: Ποια είναι η διαφορά;

Ακούω όλο και περισσότερο τους δύο παραπάνω όρους, τον δεύτερο σχεδόν καθημερινά, ωστόσο οι περισσότεροι έχουν την αίσθηση πως πρόκειται για ακριβώς το ίδιο πράγμα (συνωνυμία), κάτι που δεν ισχύει. Και επειδή αυτό μπορεί να οδηγήσει σε παρεξηγήσεις, γι αυτόν ακριβώς τον λόγο αποφάσισα να γράψω το παρακάτω post. Παρακάτω λοιπόν προσπαθώ να εξηγήσω με όσο το δυνατόν ευκολότερο τρόπο την διάφορα ενός Responsive και ενός Adaptive design.

Responsive design

Θα ξεκινήσω με τον πιο διάσημο όρο το Responsive design, τo οποίο χρησιμοποιεί απαραίτητα 3 χαρακτηριστικές web τεχνικές. Αυτό είναι το fluid grid (για το layout), media queries (για τον έλεγχο μεγέθους των οθονών) και flexible media (images, video, κτλ.). Αν λοιπόν το layout μας έχει και τα 3 παραπάνω χαρακτηριστικά, τότε είναι responsive, που πολύ απλά σημαίνει πως αν έχει κατασκευαστεί σωστά θα παίζει σε οποιαδήποτε ανάλυση/συσκευή. Δεν θέλω να σταθώ σε λεπτομέρειες και τεχνικές τύπου “mobile first” (όπου για λόγους bandwidth καλό είναι να κατασκευάζουμε το site ξεκινώντας από την μικρότερη ανάλυση που θέλουμε να υποστηρίξουμε, και να συνεχίσουμε με τις μεγαλύτερες) για την ώρα, ίσως το κάνω σε κάποιο άλλο post.

Adaptive design

Λέγοντας Adaptive design εννοούμε πως δεν ικανοποιεί και τα τρία προαναφερθέντα χαρακτηριστικά (συνήθως το fluid grid layout) και απλά προσπαθεί με τα media queries να προσαρμόσει (adapt) το layout όσο καλύτερα γίνεται σε διάφορες αναλύσεις και συσκευές. Η συγκεκριμένη τεχνική χρησιμοποιείται όλο και λιγότερο, μιας και όπως καταλαβαίνεται το responsive design αν και δυσκολότερο στην υλοποίηση, προσφέρει περισσότερα πλεονεκτήματα.

Τέλος θα ήθελα να θυμίσω πως βασικός λόγος δημιουργίας αυτής της σύγχυσης/παρεξήγησης στην ονοματολογία, ήταν πως στην γέννηση των media queries (άρα και των παραπάνω τεχνικών ) δεν υπήρχε standard ορολογία, οπότε ήταν καθαρά στην κρίση του designer το πως  θα ονόμαζε αλλά και τι εννοούσε (σε αυτό το μπέρδεμα συνείσφεραν ακόμα και γνωστά βιβλία) ωστόσο πλέον καλό θα είναι να ξέρουμε να τα διαχωρίζουμε.

Τα καλύτερα links – Ιούνιος 09

Έμπνευση

  • 1 γραμμή CSS grid framework : Το έβαλα πιο πολύ για έμπνευση και όχι σαν web design εργαλείο, μιας και δεν το θεωρώ framework. Παραδέχομαι ωστόσο τον τύπο που το έφτιαξε γιατί με λίγη φαντασία και με ακόμα λιγότερο κώδικα, έφτιαξε κάτι που μπορεί να κοντράρει κάποια πολύ πιο advanced CSS frameworks…

Web Design

  • Adobe BrowserLab : Μια επώνυμη και δωρεάν (προς το παρόν) υπηρεσία, για να ελέγχεται τα sites σας σε πολλούς συνδυασμούς browsers και OS.

Web Development

  • Ο φίλος, συνάδελφος και παλιός συμμαθητής μου John D.Wells, το έχει ρίξει τώρα τελευταία στο Expression Engine, με αποτέλεσμα να δημιουργήσει μία πολύ ενδιαφέρον λίστα από links για τους νέους αλλά και τους πιο έμπειρους ΕΕ developers. Εγώ πάντως της έριξα μια ματιά και ήδη αρχίζω να μπαίνω στην EE λογική…
  • Perch : Το πιο απλό και εύκολο στην χρήση CMS που έχετε δει!
  • Moousture : Η πρώτη mouse gesture Javascript library.
  • To prettyPrint είναι μια πολύ καλή λύση για Javascript debugging. Δείτε το videακι και θα καταλάβετε αμέσως τι κάνει…
  • Το JSLint, είναι για πολλούς Javascripts experts ο Javascript validator! Τον έχει φτιάξει ο guru του είδους, Douglas Crockford.

Browsers

  • Ο Opera Unite, ακούγεται σαν μια πολύ καλή ιδέα, ωστόσο έχω την αίσθηση πως έχει πολύ πολύπλοκα concepts για απλούς χρήστες. Οι πιο έμπειροι την βρίσκουν με Firefox, οπότε πάλι δεν τον βλέπω καλά τον πολύ δυνατό Opera Unite

Search Engine Optimization (SEO)

Accessibility/Usability

  • 10 φτηνές λύσεις/εργαλεία για usability tests. Η αλλιώς απ’ το ολότελα καλή και η Παναγιώταινα…
  • Ακόμα μια καλή κίνηση από την Adobe, η οποία έχει πάρει φόρα τώρα τελευταία. Στο καινούργιο της blog λοιπόν, με τίτλο Adobe Accessibility, ενημερώνει τους χρήστες των προγραμμάτων της για τα accessibility χαρακτηριστικά τους, καθώς και για το πως να τα χρησιμοποιούν με τον σωστό τρόπο. Μπράβο της, και μακάρι όλες οι εταιρείες να έκαναν κάτι ανάλογο…

Plug ins

  • jQuery TOOLS : Μια συλλογή από plug ins, για να δημιουργήται εύκολα και γρήγορα τα πιο κλασικά web 2.0 εφέ… Κάτι που κατά την γνώμη μου έπρεπε να υπάρχει στο jQuery UI.
  • jMonthCalendar : Ακόμα ένα calendar plug in για το jQuery, με πολλά features και δυνατότητες.

Blogs

  • Ότι θα θέλατε να μάθετε για την HTML5, αλλά φοβόσασταν να ρωτήσετε, βρίσκεται στο blog HTML5 Doctor… Το δημοσίευσε και η sugar στο CSS3 (από εκεί το είδα) αλλά δεν θα τους χαλάσει ένα ακόμα back link… Αξιοσημείωτο είναι πως το blog τους είναι φτιαγμένο με HTML5!