शुरुआत से, वर्ल्ड वाइड वेब को अलग-अलग पहलुओं को ध्यान में रखकर डिज़ाइन किया गया था. इससे कोई फ़र्क़ नहीं पड़ता कि आपके पास कौनसा हार्डवेयर है. इससे कोई फ़र्क़ नहीं पड़ता कि आपका डिवाइस कौनसा ऑपरेटिंग सिस्टम चला रहा है. जब तक इंटरनेट से कनेक्ट किया जा सकता है, तब तक वर्ल्ड वाइड वेब को ऐक्सेस किया जा सकता है.
वेब के शुरुआती दिनों में, ज़्यादातर लोग डेस्कटॉप कंप्यूटर का इस्तेमाल करते थे. आज-कल वेब का इस्तेमाल डेस्कटॉप, लैपटॉप, टैबलेट, फ़ोल्ड किए जा सकने वाले फ़ोन, फ़्रिज, और कार के तौर पर किया जा सकता है. लोग यह उम्मीद करते हैं कि वेबसाइटें अच्छी ही दिखेंगी, चाहे वे किसी भी डिवाइस का इस्तेमाल कर रहे हों. रिस्पॉन्सिव डिज़ाइन की वजह से यह मुमकिन है.
रिस्पॉन्सिव डिज़ाइन, वेबसाइट डिज़ाइन करने का पहला तरीका नहीं है. रिस्पॉन्सिव डिज़ाइन से पहले के सालों में, वेब डिज़ाइनर और डेवलपर ने कई अलग-अलग तकनीकें आज़माई थीं.
फ़िक्स्ड-विथ डिज़ाइन
1990 के दशक की शुरुआत में, जब वेब पहली बार लोकप्रिय हो रहा था, ज़्यादातर मॉनिटर का स्क्रीन डाइमेंशन 640 पिक्सल चौड़ा और 480 पिक्सल लंबा था. ये उत्तल कैथोड रे ट्यूब थीं, जैसे, अभी हमारे पास सपाट लिक्विड क्रिस्टल डिसप्ले नहीं हैं.
वेब डिज़ाइन के शुरुआती दौर में, तो 640 पिक्सल चौड़ाई वाले वेब पेजों को डिज़ाइन करना सही साबित हुआ. हालांकि, फ़ोन और कैमरे जैसी दूसरी टेक्नोलॉजी का साइज़ छोटा हो रहा था, स्क्रीन बड़ी होती जा रही थीं (और आखिर में, पहले से ज़्यादा आकर्षक). लंबे समय से पहले, ज़्यादातर स्क्रीन में 800 x 600 पिक्सल के डाइमेंशन होते थे. इसके हिसाब से वेब डिज़ाइन बदल गए थे. डिज़ाइनर और डेवलपर यह मानने लगे थे कि 800 पिक्सल एक सुरक्षित डिफ़ॉल्ट विकल्प है.
इसके बाद, स्क्रीन फिर से बड़ी हो गई. डिफ़ॉल्ट रूप से, 768 से 1024 को डिफ़ॉल्ट तौर पर सेट कर दिया गया है. इसे ऐसा लगा जैसे वेब डिज़ाइनर और हार्डवेयर बनाने वाली कंपनियों के बीच एक हथियार हो.
चाहे वह 640, 800, या 1024 पिक्सल का हो, डिज़ाइन के लिए एक खास चौड़ाई चुनने को, फ़िक्स्ड-विथ डिज़ाइन कहा गया.
अगर आपने अपने लेआउट के लिए कोई चौड़ाई तय की है, तो आपका लेआउट उस खास चौड़ाई पर ही अच्छा दिखेगा. अगर आपकी साइट पर आने वाले किसी व्यक्ति की स्क्रीन, आपकी चुनी गई चौड़ाई से ज़्यादा चौड़ी है, तो स्क्रीन पर वह जगह बर्बाद हो जाएगी. अपने पेजों के कॉन्टेंट को बीच में करके, उस जगह को ज़्यादा समान रूप से डिस्ट्रिब्यूट किया जा सकता है (एक ओर खाली जगह होने के बजाय) ऐसा करने से भी आपको उपलब्ध जगह का पूरा फ़ायदा नहीं मिल पाएगा.
इसी तरह, अगर कोई विज़िटर आपकी चुनी गई चौड़ाई से ज़्यादा छोटी स्क्रीन पर आता है, तो आपका कॉन्टेंट हॉरिज़ॉन्टल तौर पर फ़िट नहीं होगा. ब्राउज़र, एक क्रॉलबार जनरेट करता है, जो स्क्रोलबार के बराबर होता है. साथ ही, उपयोगकर्ता को पूरा कॉन्टेंट देखने के लिए, पूरे पेज को बाईं और दाईं ओर घुमाना होता है.
लिक्विड लेआउट
ज़्यादातर डिज़ाइनर, तय चौड़ाई वाले लेआउट का इस्तेमाल करते हैं. हालांकि, कुछ डिज़ाइनरों ने अपने लेआउट को सुविधाजनक बनाया. अपने लेआउट के लिए तय चौड़ाई का इस्तेमाल करने के बजाय, आप अपने कॉलम की चौड़ाई के लिए प्रतिशत का इस्तेमाल करके सुविधाजनक लेआउट बना सकते हैं. ये डिज़ाइन, तय चौड़ाई वाले लेआउट के मुकाबले ज़्यादा स्थितियों में काम करते हैं. यह लेआउट सिर्फ़ एक खास साइज़ में दिखता है.
इन्हें लिक्विड लेआउट कहा जाता था. हालांकि, लिक्विड लेआउट कई तरह की चौड़ाई में अच्छा दिखेगा, लेकिन समय के साथ यह खराब होना शुरू हो जाएगा. चौड़ी स्क्रीन पर लेआउट फैला हुआ दिखता है. छोटी स्क्रीन पर, लेआउट साफ़ नहीं दिखता है. दोनों स्थितियां सही नहीं हैं.
अपने लेआउट के लिए, min-width और max-width का इस्तेमाल करके, इन समस्याओं को कम किया जा सकता है.
इसका मतलब है कि कम से कम चौड़ाई से कम या ज़्यादा से ज़्यादा चौड़ाई वाले साइज़ पर, आपको वही समस्याएं आ सकती हैं जो तय चौड़ाई वाले लेआउट में होती हैं.
चौड़ी स्क्रीन पर इस्तेमाल नहीं होने वाली जगह बर्बाद हो जाएगी.
छोटी स्क्रीन पर, सब कुछ देखने के लिए उपयोगकर्ता को पूरे पेज को बाईं और दाईं ओर ले जाना होगा.
इस तरह के लेआउट के बारे में बताने के लिए इस्तेमाल किए जाने वाले शब्दों में से, लिक्विड शब्द सिर्फ़ एक शब्द है. इस तरह के डिज़ाइन को फ़्लूइड लेआउट या फ़्लेक्सिबल लेआउट भी कहा जाता है. शब्दावली, तकनीक की तरह ही सरल थी.
छोटी स्क्रीन वाले डिवाइस
21वीं सदी में, वेब का दायरा बढ़ता गया और बड़ा होता गया. साथ ही, मॉनिटर करने वालों ने भी ऐसा ही किया. हालांकि, ऐसी नई स्क्रीन आए जो किसी भी डेस्कटॉप डिवाइस से छोटी थीं. सभी सुविधाओं वाले वेब ब्राउज़र वाले मोबाइल फ़ोन आने के बाद, डिज़ाइनरों के सामने एक दुविधा का सामना करना पड़ा. वे यह कैसे पक्का कर सकते हैं कि उनके डिज़ाइन, डेस्कटॉप कंप्यूटर और मोबाइल फ़ोन पर अच्छे दिखें? उन्हें 240 पिक्सल चौड़ी स्क्रीन और हज़ारों पिक्सल जितनी बड़ी स्क्रीन के लिए, कॉन्टेंट को स्टाइल करने के तरीके की ज़रूरत थी.
अलग-अलग साइटें
मोबाइल विज़िटर के लिए एक अलग सबडोमेन बनाना एक विकल्प है. हालांकि, इसके बाद आपको दो अलग-अलग कोडबेस और डिज़ाइन बनाए रखने पड़ते हैं. और मोबाइल डिवाइस पर विज़िटर को रीडायरेक्ट करने के लिए, आपको उपयोगकर्ता एजेंट स्निफ़िंग, जो गलत हो सकता है और आसानी से झूठे नाम से मेल भेजा जा सकता है. Chrome, निजता को ध्यान में रखते हुए अपनी उपयोगकर्ता-एजेंट स्ट्रिंग को बंद कर रहा है. साथ ही, मोबाइल और गैर-मोबाइल के बीच कोई स्पष्ट रेखा नहीं है. आप किस साइट पर टैबलेट डिवाइस भेजते हैं?
अडैप्टिव लेआउट
अलग-अलग सबडोमेन पर अलग-अलग साइटें रखने के बजाय, तो दो या तीन तय-चौड़ाई वाले लेआउट वाली एक ही साइट हो सकती है.
जब मीडिया क्वेरी का इस्तेमाल पहली बार सीएसएस के तौर पर हुआ, तब इसने लेआउट को ज़्यादा सुविधाजनक बनाने के तरीके आज़माए. हालांकि, कई डेवलपर अब भी तय चौड़ाई वाले लेआउट बनाने में ज़्यादा सहज थे. एक तकनीक में, तय चौड़ाई पर कुछ तय चौड़ाई वाले लेआउट के बीच स्विच करना शामिल था. कुछ लोग इसे अडैप्टिव डिज़ाइन कहते हैं.
अडैप्टिव डिज़ाइन की मदद से, डिज़ाइनर ऐसे लेआउट मुहैया करा पाते हैं जो अलग-अलग साइज़ में अच्छे दिखते हैं. लेकिन इन साइज़ों के बीच देखने पर डिज़ाइन कभी ठीक नहीं लगा. ज़्यादा जगह की समस्या बनी रही. हालांकि, यह समस्या, फ़िक्स्ड-विथ वाले लेआउट जितना खराब नहीं थी.
सीएसएस मीडिया क्वेरी का इस्तेमाल करके, लोगों को ऐसा लेआउट दिया जा सकता है जो उनके ब्राउज़र की चौड़ाई के सबसे करीब हो. हालांकि, डिवाइस के अलग-अलग साइज़ को देखते हुए, हो सकता है कि ज़्यादातर लोगों को लेआउट बिलकुल सही न दिखे.
प्रतिक्रियाशील वेब डिज़ाइन
अगर अडैप्टिव लेआउट, मीडिया क्वेरी और तय चौड़ाई वाले लेआउट का मिला-जुला रूप होता है, तो रिस्पॉन्सिव वेब डिज़ाइन, मीडिया क्वेरी और लिक्विड लेआउट का मैशअप होता है.
इस शब्द का इस्तेमाल ईथन मार्कोट ने किया था साल 2010 में, A List Aपार्ट में एक लेख शामिल किया गया था.
ईथन ने रिस्पॉन्सिव डिज़ाइन के लिए तीन शर्तें तय की हैं:
- फ़्लूइड ग्रिड
- फ़्लूइड मीडिया
- मीडिया क्वेरी
रिस्पॉन्सिव साइट के लेआउट और इमेज, किसी भी डिवाइस पर अच्छी दिखेंगी. हालांकि, एक समस्या थी.
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 एलिमेंट की मदद से, डिज़ाइनर स्क्रीन के अनुपात के आधार पर कला से जुड़े फ़ैसले लेने में मदद करते हैं.
देखें कि आपको कितना समझ आया है
रिस्पॉन्सिव वेब डिज़ाइन के बारे में अपनी जानकारी को परखें
क्या 2021 में, फ़िक्स चौड़ाई में वेब पेज डिज़ाइन करना सुरक्षित रहेगा?
लिक्विड लेआउट आम तौर पर, स्क्रीन के किस साइज़ में मुश्किल होते हैं?
प्रतिक्रियाशील डिज़ाइन के लिए मूल तीन मानदंड हैं?
रिस्पॉन्सिव डिज़ाइन, संभावनाओं से भरी एक रोमांचक दुनिया है. बाकी कोर्स में, आपको इन टेक्नोलॉजी के बारे में जानकारी मिलेगी. साथ ही, यह भी बताया जाएगा कि इन टेक्नोलॉजी का इस्तेमाल करके खूबसूरत, सभी के लिए रिस्पॉन्सिव वेबसाइट बनाने में मदद करती है.