Ανοίξτε έναν ιστότοπο στο τηλέφωνό σας, έπειτα σε έναν φορητό υπολογιστή και μετά σε μια τηλεόραση. Αν φαίνεται σωστός και στις τρεις περιπτώσεις χωρίς να τσιμπάει ή να μισοκλείνει την οθόνη, τότε έχει κατασκευαστεί με responsive design. Η προσέγγιση επιτρέπει σε μια ενιαία βάση κώδικα να προσαρμόσει τη διάταξη, τις εικόνες και την τυπογραφία της σε οποιαδήποτε οθόνη εμφανίζεται.

Ο όρος επινοήθηκε από τον Ethan Marcotte το 2010, όταν η περιήγηση στα κινητά βρισκόταν σε άνθηση και οι σχεδιαστές αντιμετώπιζαν μια επιλογή: να δημιουργήσουν ξεχωριστούς ιστότοπους για κάθε συσκευή ή έναν που να προσαρμόζεται στις ανάγκες. Ο σχεδιασμός με δυνατότητα προσαρμογής κέρδισε. Τα βασικά εργαλεία είναι τα ρευστά πλέγματα, οι ευέλικτες εικόνες και τα ερωτήματα πολυμέσων. Ένα ερώτημα πολυμέσων ρωτά το πρόγραμμα περιήγησης πόσο ευρύ είναι το παράθυρο προβολής και εφαρμόζει διαφορετικούς κανόνες CSS ανάλογα με την απάντηση.

Τι κάνει ένα σχέδιο responsive (αντιδραστικό)

• Ρευστά πλέγματα που χρησιμοποιούν ποσοστά αντί για σταθερά pixel
• Ευέλικτες εικόνες που κλιμακώνονται μέσα στα κοντέινερ τους
• Ερωτήματα πολυμέσων που εφαρμόζουν σημεία διακοπής για διαφορετικά μεγέθη οθόνης
• Στόχοι φιλικοί στην αφή σε διατάξεις για κινητά

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