शुरुआती जानकारी

शुरुआत से ही, वर्ल्ड वाइड वेब को इस तरह डिज़ाइन किया गया था कि इसमें कोई रुकावट न आए. इससे कोई फ़र्क़ नहीं पड़ता कि आपके पास कौनसा हार्डवेयर है. इससे कोई फ़र्क नहीं पड़ता कि आपका डिवाइस किस ऑपरेटिंग सिस्टम पर चल रहा है. जब तक आपके पास इंटरनेट से कनेक्ट करने की सुविधा होगी, तब तक वर्ल्ड वाइड वेब का ऐक्सेस आपके पास रहेगा.

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

रिस्पॉन्सिव डिज़ाइन, वेबसाइट डिज़ाइन करने का पहला तरीका नहीं है. रिस्पॉन्सिव डिज़ाइन से पहले के सालों में, वेब डिज़ाइनर और डेवलपर ने कई अलग-अलग तकनीकें आज़माई थीं.

तय-चौड़ाई वाला डिज़ाइन

1990 के दशक की शुरुआत में, जब वेब लोकप्रिय होना शुरू हुआ था, तब ज़्यादातर मॉनिटर के स्क्रीन डाइमेंशन 640 पिक्सल चौड़ा और 480 पिक्सल लंबा था. ये कॉन्वेक्स कैथोड रे ट्यूब होती थीं, जो हमारे पास मौजूद सपाट लिक्विड क्रिस्टल डिसप्ले की तरह नहीं थीं.

शुरुआती वेब डिज़ाइन के शुरुआती दिनों में, 640 पिक्सल की चौड़ाई वाले वेब पेज डिज़ाइन करना एक सुरक्षित उपाय था. हालांकि, फ़ोन और कैमरे जैसी दूसरी टेक्नोलॉजी का साइज़ छोटा हो रहा था. साथ ही, स्क्रीन बड़ी होती जा रही थी और धीरे-धीरे फ़्लैट होती जा रही थी. पहले, ज़्यादातर स्क्रीन में 800 x 600 पिक्सल के डाइमेंशन होते थे. वेब डिज़ाइन इसी हिसाब से बदल गए हैं. डिज़ाइनर और डेवलपर ने यह मानकर शुरुआत की थी कि 800 पिक्सल एक सुरक्षित डिफ़ॉल्ट है.

इसके बाद, स्क्रीन फिर से बड़ी हो गईं. 1024 x 768 डिफ़ॉल्ट हो गया. ऐसा लग रहा था कि वेब डिज़ाइनर और हार्डवेयर बनाने वाली कंपनियों के बीच हथियारों का मुकाबला चल रहा है.

​​

चाहे वह 640 हो, 800 हो या 1024 पिक्सल, डिज़ाइन के लिए किसी एक खास चौड़ाई को चुनने को तय-चौड़ाई वाला डिज़ाइन कहा जाता था.

अगर आप अपने लेआउट के लिए एक तय चौड़ाई तय करते हैं, तो आपका लेआउट सिर्फ़ उसी चौड़ाई पर अच्छा दिखेगा. अगर आपकी साइट पर आने वाले किसी व्यक्ति की स्क्रीन आपकी चुनी गई चौड़ाई से ज़्यादा चौड़ी है, तो स्क्रीन पर ज़्यादा जगह खाली हो जाएगी. अपने पेजों के कॉन्टेंट को सेंटर में रखा जा सकता है, ताकि उस जगह को ज़्यादा समान रूप से डिस्ट्रिब्यूट किया जा सके (एक तरफ़ खाली जगह रखने के बजाय), लेकिन इससे उपलब्ध जगह का पूरा फ़ायदा नहीं लिया जा सकेगा.

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

लिक्विड लेआउट

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

इन्हें लिक्विड लेआउट कहा जाता था. हालांकि, लिक्विड लेआउट ज़्यादा चौड़ाई में अच्छा लगेगा. हालांकि, वह चरम सीमा पर खराब होने लगेगा. चौड़ी स्क्रीन पर लेआउट बड़ा हुआ दिखता है. छोटी स्क्रीन पर, लेआउट स्क्वॉश्ड दिखता है. दोनों स्थितियां अच्छी नहीं हैं.

अपने लेआउट के लिए min-width और max-width का इस्तेमाल करके, इन समस्याओं को कम किया जा सकता है. इसके बाद, हो सकता है कि आपको कम से कम चौड़ाई से कम या ज़्यादा से ज़्यादा चौड़ाई के साइज़ पर, आपको वही समस्याएं मिलें जो आपको फ़िक्स्ड-विड्थ लेआउट में मिलती हैं. चौड़ी स्क्रीन पर, जगह खाली नहीं रहेगी. छोटी स्क्रीन पर, सब कुछ देखने के लिए उपयोगकर्ता को पूरे पेज को बाएं और दाएं ले जाना होगा.

इस तरह के लेआउट के लिए, लिक्विड शब्द का इस्तेमाल किया जाता है. इस तरह के डिज़ाइन को फ़्लूइड लेआउट या फ़्लेक्सिबल लेआउट भी कहा जाता था. इस शब्द में इस्तेमाल की गई शब्दावली, तकनीक की तरह ही आसान थी.

छोटी स्क्रीन

21वीं सदी में वेब का दायरा लगातार बढ़ता जा रहा है. इसके साथ ही, मॉनिटर भी चालू कर दिए. हालांकि, ऐसी नई स्क्रीन मिलीं जो किसी भी डेस्कटॉप डिवाइस से छोटी थीं. सभी सुविधाओं वाले वेब ब्राउज़र के साथ मोबाइल फ़ोन आने के बाद, डिज़ाइनर के सामने एक दुविधा का सामना करना पड़ा. वे यह कैसे पक्का कर सकते थे कि उनका डिज़ाइन डेस्कटॉप कंप्यूटर और मोबाइल फ़ोन पर अच्छा लगेगा? उन्हें स्क्रीन के लिए अपनी सामग्री को कम से कम 240 पिक्सल चौड़ी और हज़ारों पिक्सल चौड़ी स्क्रीन के रूप में तैयार करने के तरीके की ज़रूरत थी.

अलग साइटें

इनमें से एक विकल्प यह है कि आप मोबाइल से वेबसाइट पर आने वाले लोगों के लिए एक अलग सबडोमेन बनाएं. हालांकि, इसके बाद आपको दो अलग-अलग कोडबेस और डिज़ाइन बनाए रखने होंगे. मोबाइल डिवाइस पर वेबसाइट पर आने वाले लोगों को रीडायरेक्ट करने के लिए, आपको उपयोगकर्ता-एजेंट स्निफ़िंग करनी होगी. इससे आपको भरोसा नहीं होगा और यह आसानी से धोखा दिया जा सकता है. निजता की वजहों से, Chrome अपनी उपयोगकर्ता-एजेंट स्ट्रिंग के इस्तेमाल को बंद कर देगा. साथ ही, मोबाइल और गैर-मोबाइल के बीच कोई स्पष्ट रेखा नहीं है. आप टैबलेट डिवाइस किस साइट पर भेजते हैं?

अडैप्टिव लेआउट

अलग-अलग सबडोमेन पर अलग-अलग साइटें रखने के बजाय, आपके पास दो या तीन तय चौड़ाई वाले लेआउट वाली एक ही साइट हो सकती है.

जब सीएसएस में मीडिया क्वेरी पहली बार आईं, तो उन्होंने लेआउट को ज़्यादा सुविधाजनक बनाने का काम किया. हालांकि, कई डेवलपर अब भी तय-चौड़ाई वाले लेआउट बनाने में ज़्यादा सहज महसूस करते थे. एक तकनीक में, तय चौड़ाई के हिसाब से, तय चौड़ाई वाले कई लेआउट के बीच स्विच करना होता है. कुछ लोग इसे अडैप्टिव डिज़ाइन कहते हैं.

अडैप्टिव डिज़ाइन की मदद से डिज़ाइनर, कुछ अलग-अलग साइज़ में अच्छे दिखने वाले लेआउट दे सकते थे. हालांकि, उन साइज़ के लेआउट में डिज़ाइन देखने पर, यह कभी भी सही नहीं दिखता. हालांकि, जगह ज़्यादा होने की समस्या बनी हुई है. हालांकि, यह फ़िक्स्ड-विड्थ लेआउट जितना खराब नहीं था.

सीएसएस मीडिया क्वेरी का इस्तेमाल करके, लोगों को ब्राउज़र की चौड़ाई के सबसे करीब का लेआउट दिया जा सकता है. हालांकि, डिवाइस के अलग-अलग साइज़ के आधार पर, इस बात की संभावना ज़्यादा है कि ज़्यादातर लोगों के लिए लेआउट कम सही लगेगा.

रिस्पॉन्सिव वेब डिज़ाइन

अगर अडैप्टिव लेआउट, मीडिया क्वेरी और तय चौड़ाई वाले लेआउट का एक मेल है, तो रिस्पॉन्सिव वेब डिज़ाइन, मीडिया क्वेरी और लिक्विड लेआउट का एक मैशअप है.

इस शब्द को ईथन मार्कोट ने साल 2010 में 'ए लिस्ट अपार्ट' में एक लेख में इस्तेमाल किया था.

ईथन ने रिस्पॉन्सिव डिज़ाइन के लिए तीन शर्तें तय की हैं:

1. फ़्लूइड ग्रिड
2. फ़्लूइड मीडिया
3. मीडिया क्वेरी

रिस्पॉन्सिव साइट के लेआउट और इमेज, किसी भी डिवाइस पर अच्छी दिखेंगी. लेकिन एक समस्या थी.

viewport के लिए meta एलिमेंट

मोबाइल फ़ोन के ब्राउज़र को ऐसी वेबसाइटों का इस्तेमाल करना पड़ता था जो ज़्यादा चौड़ी स्क्रीन के लिए, तय चौड़ाई वाले लेआउट के साथ डिज़ाइन की जाती थीं. डिफ़ॉल्ट रूप से, मोबाइल ब्राउज़र यह मान लेते थे कि 980 पिक्सल वह चौड़ाई है जिसे लोग डिज़ाइन कर रहे थे (और वे गलत नहीं थे). इसलिए, अगर आपने लिक्विड लेआउट का इस्तेमाल किया है, तो भी ब्राउज़र 980 पिक्सल की चौड़ाई लागू करेगा. इसके बाद, रेंडर किए गए वेब पेज को स्क्रीन की असल चौड़ाई तक स्केल करेगा.

अगर रिस्पॉन्सिव डिज़ाइन का इस्तेमाल किया जा रहा है, तो आपको ब्राउज़र को यह बताना होगा कि वह स्केलिंग न करे. वेब पेज के head में मौजूद meta एलिमेंट का इस्तेमाल करके ऐसा किया जा सकता है:

<meta name="viewport" content="width=device-width, initial-scale=1">

इसमें दो वैल्यू होती हैं, जिन्हें कॉमा लगाकर अलग किया जाता है. पहला वाला width=device-width है. इससे ब्राउज़र को यह लगता है कि वेबसाइट की चौड़ाई, डिवाइस की चौड़ाई के बराबर है (वेबसाइट की चौड़ाई 980 पिक्सल न मानने के बजाय). दूसरी वैल्यू initial-scale=1 है. यह ब्राउज़र को बताता है कि कितना या कितना स्केल करना है. रिस्पॉन्सिव डिज़ाइन के साथ, आप नहीं चाहते कि ब्राउज़र कोई भी स्केलिंग करे.

इस meta एलिमेंट के शामिल होने से, आपके वेब पेज रिस्पॉन्सिव बनाने के लिए तैयार हो जाते हैं.

आधुनिक रिस्पॉन्सिव डिज़ाइन

आज हमारे पास ऐसी वेबसाइटें बनाने की क्षमता है जो व्यूपोर्ट के साइज़ से ज़्यादा बेहतर हैं. मीडिया से जुड़ी सुविधाओं की मदद से, डेवलपर को उपयोगकर्ता की पसंद के हिसाब से अनुभव मिलता है. कंटेनर क्वेरी की मदद से कॉम्पोनेंट, अपनी रिस्पॉन्सिव जानकारी का मालिकाना हक हासिल कर पाते हैं. picture एलिमेंट, डिज़ाइनर को स्क्रीन के अनुपात के आधार पर आर्ट डायरेक्शन से जुड़े फ़ैसले लेने में मदद करता है.

जांचें कि आपको कितना समझ आया

रिस्पॉन्सिव वेब डिज़ाइन के बारे में अपनी जानकारी को परखें

रिस्पॉन्सिव डिज़ाइन, संभावनाओं की एक रोमांचक और बढ़ती दुनिया है. इस कोर्स के बाकी हिस्से में, आपको इन टेक्नोलॉजी के बारे में जानकारी मिलेगी. साथ ही, यह भी बताया जाएगा कि इन टेक्नोलॉजी का इस्तेमाल करके, सभी के लिए खूबसूरत और रिस्पॉन्सिव वेबसाइट कैसे बनाई जा सकती हैं.