रिस्पॉन्सिव वेब डिज़ाइन वेबसाइट बनाने का ऐसा तरीका है जिसमें एक ही पेज अपना लेआउट उस स्क्रीन के हिसाब से ढाल लेता है जिस पर उसे देखा जा रहा है, छोटे फ़ोन से लेकर चौड़े डेस्कटॉप मॉनिटर तक। अलग मोबाइल और डेस्कटॉप साइट की जगह रिस्पॉन्सिव साइट लचीले लेआउट, लचीली इमेज और CSS media queries से उसी कंटेंट को हर स्क्रीन साइज़ के लिए दोबारा व्यवस्थित करती है। आज वेबसाइटें डिफ़ॉल्ट रूप से इसी तरह बनती हैं, और Google भी यही तरीका सुझाता है।
रिस्पॉन्सिव वेब डिज़ाइन की शुरुआत कहाँ से हुई
यह शब्द डिज़ाइनर Ethan Marcotte ने “Responsive Web Design” नाम के एक लेख में दिया, जो मई 2010 में A List Apart में छपा था। उस समय iPhone को आए तीन साल हुए थे, और कई कंपनियाँ अपनी डेस्कटॉप साइट के साथ एक अलग “m-dot” मोबाइल साइट बना रही थीं। Marcotte ने ऐसी एक साइट का प्रस्ताव रखा जो डिवाइस के हिसाब से जवाब दे, और जो तीन चीज़ों पर बनी हो:
- फ़्लूइड grid: लेआउट की चौड़ाई तय पिक्सेल की जगह relative units (प्रतिशत) में।
- लचीली इमेज: इमेज जो अपने container के अंदर छोटी-बड़ी हों।
- Media queries: CSS नियम जो तभी लागू हों जब स्क्रीन कोई शर्त पूरी करे, जैसे न्यूनतम चौड़ाई।
रिस्पॉन्सिव साइटें आज भी इन्हीं तीन विचारों पर चलती हैं, हालाँकि तब से CSS के टूल बहुत बेहतर हो गए हैं।
मुख्य सिद्धांत
कंटेंट ढलता है, ग़ायब नहीं होता
रिस्पॉन्सिव पेज हर डिवाइस पर वही कंटेंट दिखाता है, बस जगह के हिसाब से व्यवस्थित करके। डेस्कटॉप पर तीन कॉलम वाला लेआउट फ़ोन पर एक कॉलम बन जाता है, हॉरिज़ॉन्टल मेन्यू एक मेन्यू बटन बन जाता है, और बड़ी टेबल अपने बॉक्स के अंदर स्क्रॉल हो सकती है। मोबाइल पर ज़रूरी कंटेंट छिपाना एक आम ग़लती है, ख़ास तौर पर इसलिए कि Google पेजों का मोबाइल वर्शन इंडेक्स करता है।
Breakpoints के बीच लेआउट फ़्लूइड रहता है
लेआउट स्क्रीन के साथ आराम से फैलता और सिकुड़ता है, और अपनी बनावट सिर्फ़ कुछ चौड़ाइयों पर बदलता है, जिन्हें breakpoints कहते हैं। इन चौड़ाइयों को अच्छी तरह चुनना अपने-आप में एक विषय है: देखें रिस्पॉन्सिव breakpoints।
Mobile first
ज़्यादातर रिस्पॉन्सिव साइटें अब mobile first बनती हैं: बुनियादी CSS फ़ोन का लेआउट होती है, और media queries बड़ी स्क्रीन के लिए चीज़ें जोड़ती हैं। इससे आम तौर पर CSS सरल और मोबाइल पेज तेज़ बनते हैं। ज़्यादा जानकारी mobile first डिज़ाइन में।
Touch और स्क्रीन डेंसिटी भी “रिस्पॉन्सिव” का हिस्सा हैं
रिस्पॉन्सिव डिज़ाइन सिर्फ़ चौड़ाई के बारे में नहीं है। फ़ोन उँगलियों से चलते हैं, उनकी स्क्रीन हाई-डेंसिटी होती है, और वे portrait और landscape के बीच बदलते रहते हैं। रिस्पॉन्सिव साइट में अँगूठे के लिए काफ़ी बड़े टैप टारगेट, हाई-डेंसिटी डिस्प्ले पर साफ़ इमेज, और घुमाने पर भी न टूटने वाले लेआउट होते हैं।
Responsive बनाम adaptive डिज़ाइन
| Responsive डिज़ाइन | Adaptive डिज़ाइन | |
|---|---|---|
| लेआउट | एक फ़्लूइड लेआउट जो breakpoints पर बदलता है | कई तय लेआउट, हर तरह के डिवाइस के लिए एक |
| साइज़ के बीच | आराम से फैलता है | सबसे क़रीबी तय लेआउट पर कूद जाता है |
| डिवाइस डिटेक्शन | ज़रूरत नहीं; CSS viewport के हिसाब से चलती है | अक्सर सर्वर पर user agent इस्तेमाल करता है |
| रखरखाव | एक कोडबेस | कई टेम्पलेट जिन्हें आपस में मेल में रखना पड़ता है |
| आज आम इस्तेमाल | लगभग सभी वेबसाइटें | कुछ बड़ी साइटें और ऐप जिनकी मोबाइल ज़रूरतें बहुत अलग हैं |
“Adaptive” शब्द कभी-कभी ढीले अर्थ में responsive के लिए भी इस्तेमाल होता है। काम का फ़र्क़ है फ़्लूइड बनाम तय लेआउट, और CSS पर आधारित बनाम सर्वर पर आधारित बदलाव।
आज रिस्पॉन्सिव डिज़ाइन कैसे बनता है
आधुनिक CSS रिस्पॉन्सिव लेआउट को 2010 के मुक़ाबले कहीं आसान बना देती है:
- viewport meta tag मोबाइल ब्राउज़र को डिवाइस की चौड़ाई इस्तेमाल करने को कहता है। इसके बिना बाक़ी कुछ काम नहीं करता। देखें viewport meta tag क्या है।
- Flexbox और CSS Grid ऐसे लेआउट बनाते हैं जो अपने-आप अगली लाइन में चले जाते हैं।
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))एक भी media query के बिना एक से चार कॉलम तक जाने वाला कार्ड grid बना देता है। - Media queries चुनी हुई चौड़ाइयों पर लेआउट बदलती हैं, और ओरिएंटेशन, dark mode, कम मोशन और इनपुट के प्रकार पर भी जवाब देती हैं। syntax और उदाहरण: CSS media queries गाइड।
- Container queries किसी कंपोनेंट को पूरी स्क्रीन की जगह उसके अपने container की चौड़ाई पर जवाब देने देती हैं, ताकि एक कार्ड साइडबार और मुख्य कॉलम, दोनों में सही दिखे।
- Fluid typography
clamp()से हेडिंग को स्क्रीन के साथ आराम से छोटा-बड़ा करती है। - रिस्पॉन्सिव इमेज
srcsetऔरsizesसे ब्राउज़र को स्क्रीन के साइज़ वाली फ़ाइल डाउनलोड करने देती हैं।
Tailwind CSS और Bootstrap जैसे फ़्रेमवर्क इन तकनीकों को पहले से तय breakpoints के साथ पैक करके देते हैं।
रिस्पॉन्सिव पैटर्न के उदाहरण
- Column drop: स्क्रीन पतली होने पर कॉलम एक-एक करके ऊपर-नीचे हो जाते हैं।
- Off-canvas नेविगेशन: छोटी स्क्रीन पर मेन्यू एक बटन के पीछे साइड से खिसककर आता है।
- प्राथमिकता वाला कंटेंट: मोबाइल पर मुख्य एक्शन (सर्च, “Book now”) ऊपर आ जाता है।
- रिस्पॉन्सिव टेबल: टेबल अपने container में हॉरिज़ॉन्टल स्क्रॉल होती हैं, या row कार्ड में बदल जाती हैं।
- Art direction:
<picture>एलिमेंट से मोबाइल पर इमेज का अलग हिस्सा दिखाना।
रिस्पॉन्सिव वेबसाइट कैसे टेस्ट करें
सिर्फ़ “फ़ोन” और “डेस्कटॉप” नहीं, कई चौड़ाइयों पर टेस्ट करें। Chrome DevTools में responsive viewport को खींचकर देखें कि लेआउट कहाँ टूटता है, फिर नाम वाले डिवाइस उनके असली user agent और pixel ratio के साथ जाँचें। Mobile View Extension जैसा एक-क्लिक मोबाइल व्यू यहाँ काम आता है, क्योंकि यह DevTools खोले बिना उसी पेज को डिवाइस प्रीसेट पर दिखाता है। आख़िर में असली फ़ोन पर जाँचें। पूरा तरीका रिस्पॉन्सिव डिज़ाइन कैसे टेस्ट करें में है।
अक्सर पूछे जाने वाले सवाल
रिस्पॉन्सिव वेब डिज़ाइन का मुख्य लक्ष्य क्या है?
हर विज़िटर को, चाहे उसकी स्क्रीन किसी भी साइज़ की हो, एक ही कोडबेस से उसी कंटेंट वाला इस्तेमाल और पढ़ने लायक़ पेज देना।
क्या रिस्पॉन्सिव डिज़ाइन और मोबाइल फ़्रेंडली एक ही बात है?
रिस्पॉन्सिव डिज़ाइन मोबाइल फ़्रेंडली होने का एक तरीका है, और सबसे आम तरीका। कोई साइट रिस्पॉन्सिव होकर भी मोबाइल फ़्रेंडली नहीं हो सकती, जैसे अगर उसके बटन बहुत छोटे हों या वह फ़ोन पर धीरे लोड होती हो। देखें वेबसाइट को मोबाइल फ़्रेंडली कैसे बनाएँ।
रिस्पॉन्सिव वेब डिज़ाइन किसने शुरू किया?
Ethan Marcotte ने 2010 में A List Apart के एक लेख में यह शब्द और यह तरीका पेश किया।