शुरुआत से ही, वर्ल्ड वाइड वेब को आपके चुने गए हार्डवेयर और ऑपरेटिंग सिस्टम से अलग डिज़ाइन किया गया था. जब तक आपके पास इंटरनेट कनेक्शन है, तब तक आपके पास वर्ल्ड वाइड वेब को ऐक्सेस करने का विकल्प है.
वेब के शुरुआती दिनों में, ज़्यादातर लोग डेस्कटॉप कंप्यूटर का इस्तेमाल करते थे. फ़िलहाल, वेब को डेस्कटॉप, लैपटॉप, टैबलेट, फ़ोल्ड किए जा सकने वाले फ़ोन, रेफ्रिजरेटर, और कारों पर इस्तेमाल किया जा सकता है. लोग यह उम्मीद करते हैं कि चाहे वे किसी भी डिवाइस का इस्तेमाल करें, वेबसाइटें अच्छी लगती हैं. रिस्पॉन्सिव डिज़ाइन की वजह से यह मुमकिन है.
रिस्पॉन्सिव डिज़ाइन, वेबसाइटें डिज़ाइन करने का पहला तरीका नहीं है. रिस्पॉन्सिव डिज़ाइन के आने से पहले, वेब डिज़ाइनर और डेवलपर ने कई अलग-अलग तकनीकों को आज़माया.
डिज़ाइन के लिए शुरुआती विकल्प
डेवलपर ने ऐसी वेबसाइटें बनाई हैं जिनका चौड़ाई या लेआउट तय है.
फ़िक्स्ड विड्थ डिज़ाइन
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 है.
इससे ब्राउज़र को यह पता चलता है कि वेबसाइट की चौड़ाई, डिवाइस की चौड़ाई के बराबर है.
दूसरी वैल्यू initial-scale=1 है.
इससे ब्राउज़र को पता चलता है कि स्केलिंग कितनी या कितनी कम करनी है. रिस्पॉन्सिव डिज़ाइन के साथ, आपको ब्राउज़र को स्केलिंग नहीं करनी है.
meta एलिमेंट की मदद से, आपके वेब पेज रिस्पॉन्सिव हो जाते हैं.
आधुनिक रिस्पॉन्सिव डिज़ाइन
अब हम ऐसी वेबसाइटें बना सकते हैं जो व्यूपोर्ट साइज़ के अलावा, कई और तरीकों से रिस्पॉन्सिव हों.
मीडिया की सुविधाओं की मदद से, डेवलपर उपयोगकर्ता की प्राथमिकताओं को ऐक्सेस कर सकते हैं. साथ ही, उपयोगकर्ताओं को उनकी पसंद के मुताबिक अनुभव दे सकते हैं.
कंटेनर क्वेरी की मदद से, कॉम्पोनेंट अपनी रिस्पॉन्सिव जानकारी का इस्तेमाल कर सकते हैं.
picture एलिमेंट की मदद से, डिज़ाइनर स्क्रीन रेशियो के आधार पर आर्ट-डायरेक्शन से जुड़े फ़ैसले ले सकते हैं.
देखें कि आपको क्या समझ आया
रिस्पॉन्सिव वेब डिज़ाइन के बारे में अपनी जानकारी की जांच करना
क्या साल 2021 में, वेब पेजों को तय चौड़ाई में डिज़ाइन करना सही है?
लिक्विड लेआउट आम तौर पर, स्क्रीन के किस साइज़ में मुश्किल होते हैं?
रिस्पॉन्सिव डिज़ाइन के लिए तीन बुनियादी शर्तें क्या हैं?
रिस्पॉन्सिव डिज़ाइन, नई संभावनाओं से भरी एक रोमांचक दुनिया है. इस कोर्स के बाकी बचे दिनों में, आपको इन टेक्नोलॉजी के बारे में जानकारी मिलेगी. साथ ही, यह भी पता चलेगा कि सभी के लिए खूबसूरत और रिस्पॉन्सिव वेबसाइटें बनाने में इनका इस्तेमाल कैसे किया जाता है.