प्रतिक्रियाशील वेब डिज़ाइन

प्रतिक्रियाशील वेब डिज़ाइन (रिस्पॉन्सिव वेब डिज़ाइन या RWD) एक ऐसा सेटअप है जहां सर्वर हमेशा सभी डिवाइस पर एक ही HTML कोड भेजता है और डिवाइस पर पेज की रेंडरिंग बदलने के लिए CSS का इस्तेमाल किया जाता है. अगर सभी Googlebot उपयोगकर्ता एजेंट को पेज और उसके एसेट (CSS, JavaScript और इमेज) को क्रॉल करने की इजाज़त है, तो Google का एल्गोरिद्म इस सेटअप को अपने आप पहचानने के काबिल होना चाहिए.

प्रतिक्रियाशील डिज़ाइन, स्क्रीन के आकार के हिसाब से एडजस्ट होने वाले सभी डिवाइस पर एक ही कोड दिखाता है.

कम शब्दों में कहा जाए तो...

  • सामग्री को एडजस्ट करने का तरीका ब्राउज़र को बताने के लिए meta name="viewport" टैग का इस्तेमाल करें.
  • दूसरे दस्तावेज़ों के लिए हमारी 'वेब की बुनियादी बातें' साइट देखें.

meta name="viewport" का इस्तेमाल करना

ब्राउज़र को यह संकेत भेजने के लिए कि आपका पेज सभी डिवाइस के हिसाब से काम करेगा, दस्तावेज़ में सबसे ऊपर मेटा टैग जोड़ें:

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

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

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

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

प्रतिक्रियाशील इमेज के लिए, <picture> एलीमेंट शामिल करें.

सामान्य नियम के हिसाब से, अगर आपकी साइट हाल के ब्राउज़र जैसे कि Google Chrome या Apple Mobile Safari में काम करती है, तो यह हमारे एल्गोरिद्म के साथ काम करेगी.

प्रतिक्रियाशील डिज़ाइन क्यों

हम प्रतिक्रियाशील वेब डिज़ाइन का इस्तेमाल करने की सलाह देते हैं क्योंकि यह:

  • इस्तेमाल करने वालों के लिए एक ही यूआरएल से आपकी सामग्री शेयर करना और लिंक करना आसान बनाता है.
  • Google के एल्गोरिद्म को पेज के लिए सही तरीके से इंडेक्सिंग प्रॉपर्टी असाइन करने में मदद करता है. इसके लिए डेस्कटॉप/मोबाइल पेज के मौजूद होने का संकेत देने की ज़रूरत नहीं होती है.
  • एक जैसी सामग्री के लिए कई पेज बनाए रखने के लिए कम इंजीनियरिंग समय की ज़रूरत होती है.
  • मोबाइल साइट पर असर डालने वाली सामान्य गलतियों की संभावना कम करता है.
  • इस्तेमाल करने वालों को डिवाइस के लिए ऑप्टिमाइज़ किया गया व्यू देखने के लिए किसी रीडायरेक्शन की ज़रूरत नहीं होती, जो लोड होने में लगने वाले समय को कम करता है. साथ ही, उपयोगकर्ता एजेंट के हिसाब से होने वाले रीडायरेक्शन में गड़बड़ी की संभावना होती है और इससे आपकी साइट का उपयोगकर्ता अनुभव खराब हो सकता है (जानकारी के लिए उपयोगकर्ता एजेंट का पता लगाने के दौरान होने वाली गलतियां" सेक्शन देखें).
  • उस समय संसाधनों की बचत होती है, जब Googlebot आपकी साइट को क्रॉल करता है. प्रतिक्रियाशील वेब डिज़ाइन वाले पेजों के लिए, सामग्री के सभी वर्शन पाने के लिए अलग-अलग Googlebot उपयोगकर्ता एजेंट के साथ कई बार क्रॉल करने के बजाय, सिर्फ़ एक Googlebot उपयोगकर्ता एजेंट को आपके पेज को एक बार क्रॉल करना पड़ता है. क्रॉल करने की क्षमता में यह सुधार इंडायरेक्ट (अप्रत्यक्ष) तरीके से आपकी साइट की सामग्री को ज़्यादा से ज़्यादा इंडेक्स करने और समय-समय पर इसे अपडेट करने में Google की मदद कर सकता है.

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

JavaScript

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

इस सेक्शन में JavaScript का इस्तेमाल करने के अलग-अलग तरीकों के बारे में जानकारी दी गई है. इसमें बताया गया है कि कैसे ये तरीके प्रतिक्रियाशील वेब डिज़ाइन का इस्तेमाल करने की Google की सलाह से जुड़े हैं.

सामान्य कॉन्फ़िगरेशन

मोबाइल फ़्रेंडली साइटों के लिए JavaScript को तीन लोकप्रिय तरीकों से इस्तेमाल किया जाता है:

  • JavaScript की ज़रूरत के हिसाब से: इस कॉन्फ़िगरेशन में, सभी डिवाइस पर एक ही HTML, CSS और JavaScript सामग्री दिखाई जाती है. डिवाइस पर JavaScript का इस्तेमाल करते समय, साइट की रेंडरिंग या व्यवहार बदल दिया जाता है. अगर किसी वेबसाइट के लिए JavaScript की ज़रूरत है, तो Google इस कॉन्फ़िगरेशन का इस्तेमाल करने का सुझाव देता है.
  • मिलकर पहचानना: इस कॉन्फ़िगरेशन में, वेबसाइट की ओर से अलग-अलग डिवाइस पर अलग-अलग सामग्री देने की JavaScript और डिवाइस की क्षमताओं के बारे में सर्वर-साइड पहचान, दोनों का इस्तेमाल किया जाता है.
  • डायनामिक तरीके से काम करने वाली JavaScript: इस कॉन्फ़िगरेशन में, सभी डिवाइस में एक जैसे HTML का इस्तेमाल किया जाता है, लेकिन JavaScript को ऐसा यूआरएल दिया जाता है जो डिवाइस के उपयोगकर्ता-एजेंट पर निर्भर करते हुए डायनामिक तरीके से अलग JavaScript कोड देता है.

आइए, इनमें से हर एक कॉन्फ़िगरेशन के बारे में औअच्छे से जानते हैं.

JavaScript की ज़रूरत के हिसाब से

इस कॉन्फ़िगरेशन में, यूआरएल सभी डिवाइस पर एक जैसी सामग्री (HTML, CSS, JavaScript, इमेज) दिखाता है. डिवाइस पर JavaScript का इस्तेमाल किए जाने पर ही साइट की रेंडरिंग या उसका व्यवहार बदला जाता है. यह ठीक वैसे ही काम करता है, जैसे CSS मीडिया क्वेरी का इस्तेमाल करके प्रतिक्रियाशील वेब डिज़ाइन काम करता है.

उदाहरण के तौर पर, पेज सभी डिवाइस पर एक जैसा HTML दिखाता है जिसमें <script> एलीमेंट शामिल है जो JavaScript दिखाने वाले किसी बाहरी यूआरएल का अनुरोध करता है. JavaScript के यूआरएल का अनुरोध करने वाले सभी डिवाइस को एक ही कोड मिलता है. इस्तेमाल किए जाने पर, JavaScript डिवाइस की पहचान करता है और पेज के बारे में कुछ बदलने का फ़ैसला करता है, जैसे कि डेस्कटॉप विकल्पों के बजाय स्मार्टफ़ोन फ़्रेंडली इमेज या विज्ञापन कोड शामिल करना.

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

मिलकर पहचानना

'मिलकर पहचानने' वाला कॉन्फ़िगरेशन ऐसा सेटअप है जहां सर्वर क्लाइंट के JavaScript के साथ मिलकर काम करता है ताकि वह डिवाइस की क्षमताओं को पहचान सके और दिखाई जा रही सामग्री में बदलाव कर सके.

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

यह देखते हुए कि सर्वर अलग-अलग उपयोगकर्ता-एजेंट को अलग-अलग HTML देता है, 'मिलकर पहचानने' वाले कॉन्फ़िगरेशन को डायनमिक तरीके से काम करने वाले कॉन्फ़िगरेशन का एक प्रकार माना जाता है. 'डायनमिक तरीके से दिखाने की सुविधा' सेक्शन में पूरी जानकारी दी गई है, लेकिन कम शब्दों में यह कहा जा सकता है कि जब अलग-अलग उपयोगकर्ता-एजेंट के लिए अलग-अलग HTML सामग्री दिखाने वाले यूआरएल का अनुरोध किया जाता है तो वेबसाइट में “Vary: User-agent” HTTP रिस्पॉन्स हेडर शामिल होना चाहिए.

डायनामिक तरीके से दिखाया जाने वाला JavaScript

इस कॉन्फ़िगरेशन में, सभी डिवाइस पर एक जैसा HTML दिखाया जाता है जिसमें बाहरी JavaScript फ़ाइल को शामिल करने वाला <script> एलीमेंट शामिल होता है. इसमें अनुरोध करने वाले उपयोगकर्ता-एजेंट के आधार पर अलग सामग्री हो सकती है. इसका मतलब है कि JavaScript कोड डायनमिक तरीके से दिया जाता है.

ऐसा होने पर, हमारी सलाह है कि JavaScript फ़ाइल को “Vary:User-agent” HTTP हेडर के साथ दिया जाए. यह इंटरनेट कैश और Googlebot के लिए संकेत होता है कि JavaScript अलग-अलग उपयोगकर्ता एजेंट के लिए अलग-अलग हो सकता है. साथ ही यह Googlebot के लिए अलग-अलग Googlebot उपयोगकर्ता-एजेंट का इस्तेमाल करके JavaScript फ़ाइल क्रॉल करने का संकेत होता है.

निम्न के बारे में फ़ीडबैक भेजें...