साइटों के मोबाइल संस्करण बनाने के लिए तरीकों की तुलना

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

ऐसा लगता है कि निकट भविष्य में मोबाइल साइट बनाने की तकनीक के बारे में बहस कम नहीं होगी। इन मामलों में, उदाहरण के लिए, Google, उत्तरदायी वेब डिज़ाइन के विकास का पालन ​​करता है, जबकि एक प्रसिद्ध प्रयोज्य सलाहकार जैकब नीलसन, अलग मोबाइल साइटों के निर्माण की वकालत करता है ।
तीसरा विकल्प, जो पहले से ही लोकप्रिय हो रहा है, वह है जब वेब सर्वर URL से प्राप्त मापदंडों के अनुसार डिवाइस के आधार पर उपयुक्त HTML और CSS उत्पन्न करता है।

इस लेख में, हम इनमें से प्रत्येक तरीके को देखेंगे और वास्तविक दुनिया के उदाहरण देंगे।

परीक्षण के लिए, आईओएस 4 का उपयोग आईओएस 5.0 के साथ किया गया था।

उत्तरदायी वेब डिज़ाइन

उत्तरदायी वेब डिज़ाइन आमतौर पर व्यूपोर्ट के आकार के आधार पर वेब पेज के लेआउट को अनुकूलित करने के लिए CSS3 मीडिया क्वेरीज़ का उपयोग करता है। आप डेस्कटॉप, टैबलेट, मोबाइल डिवाइस, टीवी आदि के लिए विभिन्न वेब पेज लेआउट प्रदर्शित करने के लिए एक ही HTML का उपयोग कर सकते हैं।

लाभ

• सामग्री सुरक्षा : आपकी साइट उपयोग की गई डिवाइस की परवाह किए बिना सामग्री और HTML मार्कअप को बचाती है। यह दृष्टिकोण तेजी से महत्वपूर्ण हो जाएगा क्योंकि अधिक लोग स्मार्टफोन का उपयोग वेब के उपयोग के अपने प्राथमिक साधन के रूप में करते हैं।
• वेब पेजों के लिए एक URL : यह सामग्री साझा करने की प्रक्रिया को सुविधाजनक बनाता है और विभिन्न उपकरणों के लिए सबसे अच्छा पेज उपस्थिति प्राप्त करने के लिए (व्यक्तिगत मोबाइल साइटों के विपरीत) अनावश्यक अनावश्यक को समाप्त करता है।

कमियों

• मोबाइल उपकरणों के लिए सामग्री पूरी तरह से अनुकूलित नहीं होगी : यदि आप एक दृष्टिकोण का उपयोग नहीं करते हैं जिसमें पृष्ठ मुख्य रूप से मोबाइल के लिए डिज़ाइन किया गया है, तो आपकी साइट में उसके डेस्कटॉप भाई के समान जानकारी होगी। इसकी तुलना एक स्टैंडअलोन मोबाइल साइट से करें, जहाँ आप अपने वेब पेजों की सामग्री को केवल मोबाइल उपयोगकर्ताओं के लिए दर्ज़ कर सकते हैं।
• धीमी गति से काम : जनवरी’13 के आंकड़ों के अनुसार, आज के औसत वेब पेज का वजन लगभग 1.3 एमबी है। सैद्धांतिक रूप से, इस आकार को अनुकूली डिजाइन का उपयोग करके टाला जा सकता है, लेकिन व्यवहार में, "रबर साइटों" का 86% सिर्फ इतना, या इससे भी अधिक वजन का होता है।
• साइट को नेविगेट करना मुश्किल हो सकता है : मोबाइल उपयोगकर्ताओं के कार्य आमतौर पर सामान्य लोगों से अलग होते हैं। इसके अलावा, वे इंटरफ़ेस के मोबाइल संस्करण का उपयोग करने से अधिक परिचित हो सकते हैं, और यदि आप प्रत्येक डिवाइस के लिए एक नेविगेशन संरचना के बारे में नहीं सोचते हैं, तो प्रयोज्य के साथ समस्याएं हो सकती हैं।

उदाहरण:

स्टारबक्स

स्टारबक्स वेबसाइट उत्तरदायी वेब डिज़ाइन के पेशेवरों और विपक्षों का एक बड़ा उदाहरण है। उनकी सभी सामग्री मोबाइल उपकरणों पर उपलब्ध है, प्रत्येक पृष्ठ एक ही URL का उपयोग करता है, कोई रीडायरेक्ट नहीं है।
दुर्भाग्य से, उनकी साइट को लोड करना मुश्किल है (3 जी स्मार्टफोन पर लगभग 15 सेकंड), और पूरे पृष्ठ को पढ़ने के लिए आपको बहुत स्क्रॉल करने की आवश्यकता है।

परिणाम :
औसत लोड समय: 14.99 सेकंड
औसत पृष्ठ का आकार: 1,193.88 KB
HTTP अनुरोधों की संख्या: 142

विश्व वन्यजीव कोष

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

परिणाम :
औसत लोड समय: 6.91 सेकंड
औसत पृष्ठ का आकार: 885.97 KB
HTTP अनुरोधों की संख्या: 72

बस्टन ग्लोब

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

परिणाम:
औसत लोड समय: 5.55 सेकंड
औसत पृष्ठ का आकार: 605.27 KB
HTTP अनुरोधों की संख्या: 87

अलग मोबाइल साइट

मोबाइल उपयोगकर्ताओं के लिए साइट को सुविधाजनक बनाने के लिए, कुछ वेबमास्टर अलग साइट बनाते हैं। सबसे आम कहानी है जब मोबाइल उपयोगकर्ताओं को एक विशेष उपडोमेन (उदाहरण के लिए, mobile.examplesite.com for example.com) पर पुनर्निर्देशित किया जाता है।

फायदे:

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

नुकसान:

• प्रत्येक पृष्ठ के लिए कई पते : सोशल नेटवर्क पर एक वेब पेज साझा करना एक समस्या बन जाता है क्योंकि मोबाइल उपयोगकर्ता मोबाइल URL को साझा करेंगे, जबकि सामान्य उपयोगकर्ता भी लिंक पर क्लिक कर सकते हैं और मोबाइल संस्करण पर स्विच कर सकते हैं। डुप्लिकेट सामग्री से बचने के लिए, एसईओ पेशेवरों को rel = "वैकल्पिक" और rel = "canonical" मेटा टैग का उपयोग करने की आवश्यकता है। इसके अलावा, जब कोई Google मोबाइल उपयोगकर्ता परिणामों में लिंक पर क्लिक करता है, तो उसे डेस्कटॉप संस्करण में ले जाया जाएगा या मोबाइल पर पुनर्निर्देशित किया जाएगा। लेकिन अगर इस पृष्ठ का मोबाइल संस्करण मौजूद नहीं है, तो यह एक त्रुटि संदेश प्राप्त करेगा।
• सामग्री और कार्यक्षमता में अंतर : एक अलग मोबाइल साइट के निर्माण का अर्थ है सामग्री और कार्यक्षमता के भाग से छुटकारा पाना, जिसके परिणामस्वरूप पूरी तरह से अलग उपयोगकर्ता व्यवहार होता है। इसके अलावा, आपके पास सामग्री के दो अलग-अलग सेट हो सकते हैं जो आपकी समग्र सामग्री रणनीति को नकारात्मक रूप से प्रभावित कर सकते हैं।
• रीडायरेक्ट की आवश्यकता : मोबाइल उपयोगकर्ताओं को एक अनुकूलित संस्करण पर भेज दिया जाना चाहिए और इसके विपरीत। पुनर्निर्देश पृष्ठ लोड समय में जोड़ते हैं। आपकी साइट के लिए उनके एसईओ निहितार्थ भी हो सकते हैं।

समर्पित मोबाइल साइटों के उदाहरण

वॉल-मार्ट

(Mobile.walmart.com)

वॉलमार्ट का स्टैंडअलोन मोबाइल साइट अविश्वसनीय रूप से तेजी से डाउनलोड समय दिखाता है - सिर्फ 1.35 सेकंड

परिणाम:
औसत लोड समय: 1.35 सेकंड
औसत पृष्ठ का आकार: 272.29 KB
HTTP अनुरोधों की संख्या: 45

वीरांगना

(www.amazon.com / GP / AW / h.html)

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

परिणाम:
औसत लोड समय: 2.25 सेकंड
औसत पृष्ठ का आकार: 103.66 KB
HTTP अनुरोधों की संख्या: 16

बीबीसी

(www.bbc.co.uk / मोबाइल)

मोबाइल उपकरणों के लिए बीबीसी साइट के पृष्ठ अनुकूली वाले (3.40 सेकंड) की तुलना में तेज़ी से लोड होते हैं, लेकिन इस समय का लगभग आधा उपयोगकर्ता पुनर्निर्देशन (1.65 सेकंड) द्वारा लिया जाता है।
अमेज़ॅन साइट के विपरीत, यदि आप डेस्कटॉप कंप्यूटर से मोबाइल उपकरणों के लिए पृष्ठ तक पहुंचने का प्रयास करते हैं, तो आपको साइट के "बड़े" संस्करण में स्वचालित रूप से पुनः निर्देशित किया जाएगा।

परिणाम:
औसत लोड समय: 3.40 सेकंड
औसत पृष्ठ का आकार: 56.04 KB
HTTP अनुरोधों की संख्या: 22

RESS: एक ही URL पर अलग HTML और CSS आउटपुट

मोबाइल साइटों को बनाने का यह तरीका विभिन्न उपकरणों के लिए CSS और HTML बनाने के लिए सर्वर-साइड प्रोग्रामिंग का उपयोग करता है। अर्थात्, मोबाइल उपयोगकर्ताओं को कोड का एक सेट प्राप्त होता है, जबकि डेस्कटॉप कंप्यूटर के उपयोगकर्ताओं को कोड का एक अलग सेट प्राप्त होता है।

यह साइट के प्रदर्शन को बेहतर बनाने के लिए किया गया था और अनुकूली लेआउट के साथ संयोजन के रूप में सबसे अच्छा काम करता है।
इस पद्धति को उत्तरदायी वेब डिज़ाइन + सर्वर-साइड सॉफ़्टवेयर (RESS) कहा जाता था।
इस पद्धति का उपयोग करते समय, यह महत्वपूर्ण है कि वैरी HTTP हेडर टाइप को सक्षम किया गया है (अधिक जानकारी के लिए, Google सहायता, अनुकूलित वेबसाइट बनाने के लिए एक गाइड देखें), ताकि खोज रोबोट डेस्कटॉप और मोबाइल दोनों संस्करणों पर जाएँ।

फायदे:

• नेविगेट करने में आसान : मोबाइल और डेस्कटॉप कंप्यूटर से किए गए विभिन्न कार्यों के लिए नेविगेशन संरचना को अनुकूलित किया जा सकता है।
• प्रति पृष्ठ पर कम तत्व : मोबाइल उपकरणों के लिए छिपे हुए पृष्ठ तत्व बनाने के बजाय, उन्हें HTML या CSS से हटाया जा सकता है। इससे डाउनलोड किए गए डेटा की मात्रा कम हो जाएगी और लोडिंग समय में तेजी आएगी।
• फास्ट लोडिंग समय : अनावश्यक जावास्क्रिप्ट को HTML से हटाया जा सकता है, जो मोबाइल डिवाइस पर सीपीयू, मेमोरी और कैश को मुक्त करता है।

नुकसान:

• अतिरिक्त सर्वर संसाधनों की आवश्यकता होती है : डायनेमिक HTML निर्माण सर्वर पर लोड बढ़ाएगा।
• उपकरणों की परिभाषा आवश्यक है : मोबाइल उपयोगकर्ताओं को किसी तरह गणना की जानी चाहिए, और उपकरणों की पहचान करने की तकनीक अभी तक पर्याप्त रूप से विश्वसनीय नहीं है।

RESS उदाहरण

सीएनएन

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

परिणाम:
औसत लोड समय: 3.46 सेकंड
औसत पृष्ठ का आकार: 163.12 KB
HTTP अनुरोधों की संख्या: 28

eHow

CNN की तरह, eHow का मोबाइल संस्करण HTML और CSS से कॉन्फ़िगर किया गया है। शीर्ष-स्तरीय नेविगेशन दोनों साइटों के लिए समान है, खोज और सात मुख्य श्रेणियों पर जोर देने के साथ।

परिणाम:
औसत लोड समय: 6.15 सेकंड
औसत पृष्ठ का आकार: 188.95 KB
HTTP अनुरोधों की संख्या: 31

SlideShare

SlideShare के मोबाइल और डेस्कटॉप संस्करण पूरी तरह से अलग हैं। मोबाइल संस्करण उत्तरदायी वेब डिज़ाइन का उपयोग करता है, जबकि डेस्कटॉप संस्करण नहीं करता है। प्रत्येक साइट विभिन्न HTML और CSS का उपयोग करती है। उदाहरण के लिए, मोबाइल संस्करण में जावास्क्रिप्ट बहुत कम मौजूद है। प्रत्येक साइट विभिन्न नेविगेशन संरचनाओं का भी उपयोग करती है।

परिणाम:
औसत लोड समय: 6.15 सेकंड
औसत पृष्ठ का आकार: 188.95 KB
HTTP अनुरोधों की संख्या: 31

सारांश

सिद्धांत रूप में, उत्तरदायी वेब डिज़ाइन सबसे अच्छा समाधान है। लेकिन व्यवहार में, इन साइटों में से अधिकांश को सही तरीके से लागू नहीं किया जाता है और लोड समय में वृद्धि होती है।
मेरे परीक्षणों से पता चलता है कि मोबाइल साइटों के पास सबसे अच्छा लोडिंग समय है, लेकिन ऐसे कार्य कार्यान्वयन में महत्वपूर्ण कमियां हैं।
मेरी राय में, उत्तरदायी वेब डिज़ाइन और RESS के संयोजन का उपयोग करना सबसे अच्छा है। इस मामले में, हमें "रबर टाइपसेटिंग" के सभी फायदे मिलते हैं और दो बड़ी समस्याओं को हल करते हैं: कई फाइलों का उपयोग और धीमी गति से लोडिंग।

---

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

लेकिन ऐसी साइटें हैं जो शुरू में अनुकूली रूप से बेहतर हैं। उदाहरण के लिए, ये कॉर्पोरेट व्यवसाय कार्ड या जटिल कार्यक्षमता के बिना अन्य साइटें हैं। और हम मानते हैं कि डेवलपर के पास एक विकल्प होना चाहिए। इसलिए, नेटकैट चलाने वाली साइट तीन मोड में से एक में काम कर सकती है: एक नियमित साइट, एक नियमित साइट का एक मोबाइल संस्करण और एक अनुकूली साइट (और सिस्टम के सभी मॉड्यूल भी इन मोड का समर्थन करते हैं)।

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

सारांश: मेरा मानना ​​है कि अधिकांश कार्यों के लिए "सामान्य साइट प्लस मोबाइल संस्करण" दृष्टिकोण कम से कम प्रतिरोध का मार्ग है, क्योंकि आधुनिक सीएमएस नाटकीय रूप से दूसरी साइट बनाने की लागत को कम कर सकते हैं। लेकिन निकट भविष्य में प्रतिस्पर्धा के किसी भी दृष्टिकोण के लिए कोई निश्चित जीत नहीं होगी। ”

मोबाइल साइट बनाने के लिए आप किन तरीकों का इस्तेमाल करते हैं? इस विषय पर अपने विचारों को टिप्पणियों में साझा करें या मतदान विकल्प को चिह्नित करें।