मोबाइल ब्राउजर के लिए वेबसाइट कैसे कन्वर्ट करें

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

सामान्य प्लेटफार्म

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

CSS और HTML का उपयोग करना

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

टच स्क्रीन इंटरएक्टिव विशेषताएं

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

परीक्षण और सत्यापन

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