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

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

मुख्य तकनीकें

• प्रतिशत पर आधारित द्रव ग्रिड।
• लचीली छवियां और मीडिया।
• निर्धारित ब्रेकपॉइंट पर मीडिया क्वेरी।
• मोबाइल-फर्स्ट कंटेंट को प्राथमिकता देना।

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