HTML5 वेब की रिस्पॉन्सिवनेस

HTML5, नवीनतम और लोकप्रिय वेब डिज़ाइनिंग भाषा, ने अचानक डिज़ाइनिंग की दुनिया को एक लहर के साथ ले लिया। पहले हमारे पास HTML था और अब HTML5 है। हालांकि, अगर हम दोनों के बीच प्रमुख अंतर देखें, तो हम पाते हैं कि एक चीज जो वास्तव में HTML5 को HTML से अलग और बेहतर बनाती है, वह है रिस्पॉन्सिवनेस (Responsiveness)।

वेबपेज की रिस्पॉन्सिवनेस का मतलब है ब्राउज़र पर लोड होने के बाद माध्यम के अनुसार वेब पेज से प्राप्त आउटपुट या प्रतिक्रिया।

HTML के साथ, कई सीमाएं हुआ करती थीं, जिससे एक नए संस्करण की आवश्यकता उत्पन्न हुई। वेब डिजाइनरों के पास बदलती तकनीक के साथ वेब पेज बनाने का लचीलापन नहीं था।

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

लिक्विड लेआउट (Liquid Layout)

HTML5, HTML, CSS और JavaScript का एक गुलदस्ता है। यह उपयोगकर्ताओं को पानी की तरह तरल या लचीले लेआउट के साथ वेब पेज बनाने की अनुमति देता है। जैसा कि हम जानते हैं, पानी अपने कंटेनर का आकार ले लेता है, इसी तरह, लिक्विड लेआउट डिजाइनरों को अपनी सामग्री को निर्दिष्ट कंटेनर में फ्लोट करने की अनुमति देता है। वही वेबसाइट, जब iPad पर खोली जाती है, तो उसके आयामों के अनुसार समायोजित हो जाएगी, और यदि उसी URL को मोबाइल पर एक्सेस किया जाता है, तो यह उसके आयामों में फिट हो जाएगी।

हमारे वेब डिजाइनरों की एक और याचिका सामग्री से संबंधित थी। क्या होगा अगर हम मोबाइल स्क्रीन पर अलग सामग्री चाहते हैं, और लैपटॉप स्क्रीन पर अलग? आइए इस अवधारणा के पीछे के मनोवैज्ञानिक सिद्धांत को एक बहुत ही सरल उदाहरण का उपयोग करके समझाएं। मान लीजिए, आप अपने कार्यालय में हैं और अचानक आपकी टीम एक आउटडोर लंच पार्टी की योजना बनाती है। आप अपना फोन निकालते हैं जो आस-पास के रेस्तरां देखने के लिए एक वेबपेज खोलता है (जैसे Zomato, Dineout आदि) अब उन्हें अपने मानदंडों के अनुसार फ़िल्टर करें और वह चुनें जो आपकी आवश्यकताओं के लिए सबसे उपयुक्त हो। अब, क्या होगा यदि आपकी टीम आगामी सप्ताहांत में लंच पार्टी पर जाने की योजना बनाती है। इस स्थिति में, आप शायद अपना लैपटॉप खोलते हैं; उसी वेबसाइट का वेबपेज खोलते हैं, पेज के चारों ओर देखते हैं, वेबसाइट के ऑफ़र, फ्रिल्स और ऐड-ऑन देखते हैं।

इस उदाहरण के साथ, हम मानते हैं कि जो उपयोगकर्ता मोबाइल पर एक वेबपेज खोल रहा है, वह शायद जल्दी में होगा और डिजाइनिंग को देखने के लिए समय नहीं होगा। उपयोगकर्ता डिजाइनर UI के बजाय कार्यक्षमता की तलाश करेगा। हालांकि, जब उसी वेबपेज को लैपटॉप/डेस्कटॉप ब्राउज़र में देखा जाता है, तो उपयोगकर्ता के पास डिजाइनिंग भाग की सराहना करने का समय हो सकता है।

रिस्पॉन्सिवनेस वेब डिजाइनरों को पेज को डिवाइस के स्क्रीन क्षेत्र में फिट करने के लिए निचोड़ने या खींचने और इमेज या टैग को छिपाने/दिखाने की अनुमति देती है।

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

रिस्पॉन्सिव वेब डिजाइनिंग (RWD) में लेआउट लचीले या तरल लेआउट पैरामीटर्स (जैसे ems और प्रतिशत) का उपयोग करके किया जाता है, बजाय परिमित मानों (जैसे पिक्सेल, पॉइंट्स आदि) के।

अपने पेजों में रिस्पॉन्सिवनेस की अनुमति देने के लिए, पेज की संरचना बदल जाती है और HTML5 की मूल अवधारणा तस्वीर में आती है। HTML5 में कोड लिखने के लिए मूल दिशानिर्देश हैं:

• सामग्री HTML फ़ाइलों में जाती है
• दिखावट और प्लेसमेंट CSS फ़ाइलों में जाती है
• वैलिडेशन JavaScript फ़ाइलों में जाती है

इसलिए, रिस्पॉन्सिवनेस प्राप्त करने के लिए, हमें डिवाइस के स्क्रीन आकार में परिवर्तन के साथ CSS फ़ाइलों को बदलने की आवश्यकता है, जबकि हमारी सामग्री (जो HTML पेजों में है) वही रहती है।

RWD रणनीति

रिस्पॉन्सिव वेब डिजाइनिंग पारंपरिक ग्रेसफुल डिग्रेडेशन के बजाय प्रोग्रेसिव एन्हांसमेंट का उपयोग करती है।

ग्रेसफुल डिग्रेडेशन नवीनतम और सबसे उन्नत ब्राउज़रों के लिए संगत वेब पेज बनाने पर जोर देती है। आगे बढ़ते हुए, पुराने ब्राउज़रों के लिए समर्थन प्रदान किया जाता है लेकिन अपेक्षित गड़बड़ियां पैकेज का हिस्सा होंगी।

जबकि, प्रोग्रेसिव एन्हांसमेंट ब्राउज़रों के बजाय सामग्री पर केंद्रित है। इस अवधारणा को कंटेंट-आउट दृष्टिकोण के रूप में लें, जैसे पीनट M&M चॉकलेट के मामले में।

• पीनट: रिच सेमांटिक HTML में मार्कअप की गई सामग्री
• रिच क्रीमी CSS के साथ लेपित

JS को हार्ड कैंडी शेल के रूप में जोड़ा गया

RWD फ्रेमवर्क

एक HTML5 फ्रेमवर्क सिर्फ पूर्व-निर्मित टेम्पलेट है जिसमें पूर्व-निर्धारित पुन: प्रयोज्य CSS और JS फ़ाइलें और पेज पर डमी टेक्स्ट के रूप में सामग्री होती है। वे नवोदित डेवलपर्स को बुनियादी डिजाइनिंग के साथ किक स्टार्ट करने में मदद करते हैं। लेआउट परिभाषित हैं और डिज़ाइन बनाए गए हैं।

रिस्पॉन्सिवनेस को लागू करने के लिए बाजार में कई फ्रेमवर्क उपलब्ध हैं। सबसे लोकप्रिय और लागू करने में आसान है - Twitter Bootstrap। सूची में जोड़ने के लिए, Foundation, Skeleton, Boilerplate, Kickstart और कई अन्य। इनमें से अधिकांश फ्रेमवर्क प्रारंभिक लेआउट विकास के लिए ग्रिड सिस्टम बेस का उपयोग करते हैं।

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

रिस्पॉन्सिव वेब डिजाइनिंग सबसे वांछित तकनीक है और धीरे-धीरे किसी भी वेबसाइट के लिए मानक आवश्यकता बनती जा रही है। कार्यान्वयन के लिए ऑनलाइन पर्याप्त समर्थन उपलब्ध है और कई टूल उपलब्ध हैं जिनसे खेला जा सकता है।