रिस्पॉन्सिव वेब डिज़ाइन

रिस्पॉन्सिव वेब डिज़ाइन एक ऐसा सेटअप है जहां सर्वर हमेशा सभी डिवाइस पर एक ही एचटीएमएल कोड भेजता है और डिवाइस पर पेज की रेंडरिंग बदलने के लिए सीएसएस का इस्तेमाल किया जाता है. अगर सभी Googlebot उपयोगकर्ता एजेंट को पेज और उसके एसेट (सीएसएस, 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 की मदद कर सकता है.

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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