🐨 ◀️ 👈🏿 उत्तरदायी वेब डिज़ाइन के लिए सशर्त डाउनलोड ☄️ 😴 🔑

पॉल हैमंड ने एक बेहतरीन लेख लिखा, स्पीड अप योर साइट विथ डिलीटेड कंटेंट । अपनी सामग्री में, उन्होंने प्रारंभिक पृष्ठ लोड के बाद, टिप्पणियों में उपयोगकर्ता प्रोफ़ाइल अवतारों की छवियों जैसे सामग्री के कुछ हिस्सों को लोड करने के लिए एक तकनीक की रूपरेखा तैयार की, जो पृष्ठ को लोड करते समय एक अच्छा प्रदर्शन को बढ़ावा देता है।

ऐसी अन्य परिस्थितियां हैं जहां सामग्री लोडिंग में देरी हो सकती है, उदाहरण के लिए, उत्तरदायी वेब डिज़ाइन में ।

उत्तरदायी वेब डिज़ाइन शुरू में व्यक्तिगत कंप्यूटर वेबसाइटों पर लागू किया गया था ताकि उन्हें छोटे स्क्रीन रिज़ॉल्यूशन के लिए अनुकूल बनाया जा सके। लेकिन अब उत्तरदायी वेब डिज़ाइन " मोबाइल पहले " नामक एक नए दृष्टिकोण के लिए अधिक उपयोग किया जाता है।

अनुकूली वेब डिज़ाइन का उपयोग करते हुए वेबसाइट विकास के लिए एक प्रारंभिक दृष्टिकोण में व्यक्तिगत कंप्यूटर और बड़ी स्क्रीन के साथ उपकरणों के लिए एक बड़ी, बहुआयामी वेबसाइट का विकास शामिल था, इसके बाद मोबाइल उपकरणों के लिए अनुकूलन। उसी समय, साइट की कार्यक्षमता का हिस्सा (अतिरिक्त मेनू, सहायक पैनल, उन्नत उपकरण, आदि) बाद में मीडिया प्रश्नों का उपयोग करने वाले उपयोगकर्ताओं से छिपा हुआ था। एक ही समय में उपयोगकर्ता ने केवल वही देखा जो मोबाइल उपकरणों पर प्रदर्शन के लिए है। इस दृष्टिकोण का नुकसान यह है कि सामग्री का हिस्सा (और अक्सर सबसे) अभी भी उपयोगकर्ता के ब्राउज़र में लोड होता है, जिससे पेज लोड समय बढ़ता है और ट्रैफ़िक का उपभोग होता है।

मोबाइल के पहले दृष्टिकोण का एक मुख्य लाभ यह है कि यह दृष्टिकोण आपको अपने पृष्ठ की मुख्य सामग्री पर ध्यान केंद्रित करता है। शायद इस दृष्टिकोण को और भी अधिक सही ढंग से " सामग्री-पहले " कहा जाएगा। इस दृष्टिकोण में, आप केवल अपने पृष्ठ का सार प्रदर्शित करते हैं और एक बड़ी, पूर्ण आकार की साइट की सभी अतिरिक्त आवश्यकताओं को फेंक देते हैं जो कि सारहीन हैं, या अतिरिक्त, लेकिन वैकल्पिक कार्यक्षमता का परिचय देते हैं।

लेकिन जब आपके पृष्ठ को अपने पर्याप्त प्रदर्शन रिज़ॉल्यूशन के कारण अतिरिक्त साइट कार्यक्षमता प्रदर्शित करने में सक्षम डिवाइस पर लोड होता है तो आपको क्या करना चाहिए? आप अजाक्स तकनीक और अपने लेख में वर्णित ट्रिक पॉल हैमंड के उपयोग से ऐसी अतिरिक्त वैकल्पिक कार्यक्षमता डाउनलोड कर सकते हैं। एकमात्र अंतर यह है कि आपको यह निर्धारित करने के लिए पहले एक त्वरित परीक्षण चलाने की आवश्यकता है कि क्या डिवाइस का दृश्य क्षेत्र जिस पर आपका पृष्ठ लोड अतिरिक्त सामग्री को समायोजित करने के लिए पर्याप्त है।

इस स्थिति की कल्पना करें: मैंने बिल्लियों के बारे में एक लेख प्रकाशित किया था और साइडबार तत्वों में विषय पर बिल्लियों के बारे में प्रासंगिक समाचार शामिल करना चाहूंगा, लेकिन केवल तभी जब इस साइडबार के लिए स्क्रीन पर पर्याप्त जगह हो।

समाचार संसाधन के रूप में हम Google समाचार एपीआई का उपयोग करेंगे। सशर्त लोडिंग का उपयोग करने के लिए यह संसाधन बहुत अच्छा है, क्योंकि हम नहीं चाहते हैं कि हमारे पृष्ठ की लोडिंग को धीमा करने के लिए तीसरे पक्ष की सेवाएं हों। इसलिए हम पेज लोड होने के बाद Google समाचार एपीआई को एक अनुरोध भेजेंगे।

समाचार प्राप्त करने के लिए अजाक्स का उपयोग करते हुए एक फ़ंक्शन का एक उदाहरण है।

var searchNews = function(searchterm) { var elem = document.createElement('script'); elem.src = 'http://ajax.googleapis.com/ajax/services/search/news?v=1.0&q='+searchterm+'&callback=displayNews'; document.getElementsByTagName('head')[0].appendChild(elem); };

मैंने एक कॉलबैक फ़ंक्शन डिस्प्लेन्यूज़ भी लिखा है, जो JSON को एक अजाक्स अनुरोध से प्राप्त करता है और न्यूज़रेक्टर पहचानकर्ता के साथ ब्लॉक में सामग्री जोड़ता है।

 var displayNews = function(news) { var html = '', items = news.responseData.results, total = items.length; if (total>0) { for (var i=0; i<total; i++) { var item = items[i]; html+= '<article>'; html+= '<a href="'+item.unescapedUrl+'">'; html+= '<h3>'+item.titleNoFormatting+'</h3>'; html+= '</a>'; html+= '<p>'; html+= item.content; html+= '</p>'; html+= '</article>'; } document.getElementById('newsresults').innerHTML = html; } };

अब मैं अपने पृष्ठ के नीचे समाचार जोड़ने का कार्य कह सकता हूं।

 <script> searchNews('cats'); </script>

अब यदि मैं ब्राउज़र देखने के क्षेत्र के एक निश्चित उपलब्ध रिज़ॉल्यूशन के साथ केवल समाचार प्राप्त करना चाहता हूं, तो मैं फ़ंक्शन को एक ब्लॉक के साथ लपेट सकता हूं।

 <script> if (document.documentElement.clientWidth > 640) { searchNews('cats'); } </script>

यदि ब्राउज़र देखने का क्षेत्र 640 पिक्सल्स से अधिक चौड़ा है, तो न्यूज़रेस्कुल इंडिकेटर के साथ कंटेनर में समाचार प्राप्त करने और जोड़ने का कार्य शुरू हो जाएगा।

 <div id="newsresults"> <!-- search results go here --> </div>

और अब, मोबाइल उपकरणों के उपयोगकर्ताओं को बिल्ली के बच्चे के बारे में समाचार देखने का अवसर छोड़ने के लिए, हम कंटेनर को बदल देंगे, जिससे स्वतंत्र रूप से समाचार प्राप्त करने का अवसर मिलेगा:

 <div id="newsresults"> <a href="http://www.google.com/search?q=cats&tbm=nws">Search Google News</a> </div>

उदाहरण

इसलिए, छोटे स्क्रीन वाले आगंतुक समाचार प्राप्त करने के लिए एक लिंक देखेंगे, और बड़ी स्क्रीन वाले उपयोगकर्ताओं को सीधे समाचारों की एक सूची दिखाई देगी।

इससे पहले, मैं विशेष रूप से HTML और जावास्क्रिप्ट जैसी तकनीकों पर वेब पृष्ठों के विकास पर ध्यान केंद्रित करता था, लेकिन ऊपर प्रस्तुत दृष्टिकोण मुझे सामग्री वितरण रणनीति और सूचना संरचना पर ध्यान केंद्रित करने की अनुमति देता है। सशर्त डाउनलोड की शुरुआत के साथ, सामग्री को न केवल "प्रदर्शित किया जा सकता है" और "छिपाया जा सकता है", लेकिन कुछ शर्तों के तहत "डाउनलोड" भी किया जा सकता है।

यह सिर्फ एक उदाहरण था, लेकिन मुझे उम्मीद है कि यह दिखाता है कि सशर्त लोडिंग उत्तरदायी वेब डिज़ाइन का एक महत्वपूर्ण हिस्सा हो सकता है।

यह लेख जेरेमी कीथ द्वारा जवाबदेह डिजाइन के लिए सशर्त लोड हो रहा है लेख का एक मुफ्त अनुवाद है

उत्तरदायी वेब डिज़ाइन के लिए सशर्त डाउनलोड

More articles: