किसी वेबसाइट को पहले अपने फोन पर, फिर लैपटॉप पर और फिर टीवी पर खोलें। अगर वह तीनों स्क्रीन पर बिना ज़ूम किए या आंखें सिकोड़े सही दिखती है, तो इसका मतलब है कि वेबसाइट रिस्पॉन्सिव डिज़ाइन का इस्तेमाल करके बनाई गई है। इस तकनीक से एक ही कोडबेस अपने लेआउट, इमेज और टाइपोग्राफी को स्क्रीन के हिसाब से ढाल लेता है।

ईथन मार्कोट ने 2010 में इस शब्द का प्रयोग किया था, जब मोबाइल ब्राउज़िंग में ज़बरदस्त वृद्धि हो रही थी और डिज़ाइनरों के सामने एक विकल्प था: प्रत्येक डिवाइस के लिए अलग-अलग वेबसाइट बनाना या एक ऐसी वेबसाइट बनाना जो हर डिवाइस के अनुकूल हो। अंततः रिस्पॉन्सिव डिज़ाइन को चुना गया। इसके मुख्य उपकरण हैं फ्लूइड ग्रिड, फ्लेक्सिबल इमेज और मीडिया क्वेरी। मीडिया क्वेरी ब्राउज़र से पूछती है कि व्यूपोर्ट कितना चौड़ा है और उत्तर के आधार पर अलग-अलग CSS नियम लागू करती है।

किसी डिजाइन को रिस्पॉन्सिव क्या बनाता है?

• ऐसे फ्लूइड ग्रिड जो निश्चित पिक्सेल के बजाय प्रतिशत का उपयोग करते हैं
• लचीली छवियां जो अपने कंटेनर के भीतर ही आकार बदल सकती हैं
• मीडिया क्वेरी जो विभिन्न स्क्रीन आकारों के लिए ब्रेकपॉइंट लागू करती हैं
• मोबाइल लेआउट पर टच-फ्रेंडली टारगेट

लक्ष्य सिर्फ छोटी स्क्रीन पर सामग्री को समेटना नहीं है। बल्कि हर स्थिति में पठनीयता, पदानुक्रम और उपयोगिता को बनाए रखना है। डेस्कटॉप पर तीन कॉलम वाला लेआउट फोन पर एक कॉलम में सिमट सकता है। एक हैमबर्गर मेनू पूरी नेविगेशन बार की जगह ले लेता है। अच्छा रिस्पॉन्सिव डिज़ाइन अनिवार्य लगता है, मानो साइट को हमेशा से आपके डिवाइस पर इसी तरह दिखने के लिए बनाया गया हो।