Το παρακάτω διαδραστικό παράδειγμα παρουσιάζει ένα Responsive Layout Playground, έναν χώρο πειραματισμού όπου ο χρήστης μπορεί να μεταβάλλει το πλάτος μίας διεπαφής και να παρατηρεί πώς αλλάζει η διάταξη των στοιχείων σε πραγματικό χρόνο.

Η άσκηση αυτή αναδεικνύει βασικές έννοιες της διάδρασης ανθρώπου–υπολογιστή όπως η προσαρμοστικότητα (adaptivity), η ανταπόκριση διεπαφής (responsiveness) και η σημασία του context of use σε διαφορετικά μεγέθη οθόνης.
Το interface μεταβάλλεται άμεσα καθώς αλλάζει ο slider του πλάτους, προσφέροντας άμεση οπτική ανατροφοδότηση και επιτρέποντας στον χρήστη να κατανοήσει πώς συμπεριφέρονται flexible UIs.

See the Pen Responsive Layout Playground by Marios-Stephanidhs (@Marios-Stephanidhs) on CodePen.

Στόχος του παραδείγματος

Να κατανοηθεί ο τρόπος με τον οποίο μία διεπαφή μπορεί να προσαρμόζεται δυναμικά σε διαφορετικά πλάτη οθόνης, χρησιμοποιώντας media queries και responsive δομικά στοιχεία.
Το παράδειγμα προσομοιώνει την πραγματική συμπεριφορά ιστοσελίδων σε κινητά, tablet και μεγάλες οθόνες.

Άσκηση

Τροποποιήστε το παράδειγμα προσθέτοντας:

  1. Ένα δεύτερο slider που αλλάζει το ύψος του viewport.
  2. Μία νέα κατηγορία responsive συμπεριφοράς (π.χ. όταν το πλάτος είναι > 1000px, οι κάρτες να εμφανίζονται με διαφορετικό χρώμα ή στοίχιση).
  3. Εναλλακτικά, προσθέστε ένα responsive μενού (π.χ. hamburger menu) που εμφανίζεται μόνο σε μικρά πλάτη.

Στόχος είναι να δημιουργήσετε ένα πιο πλήρες responsive περιβάλλον που προσομοιώνει σύγχρονες διεπαφές πολλαπλών συσκευών.