मेरी वेबसाइट मोबाइल पर टूटी हुई क्यों दिखती है

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

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

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

वेबसाइट मोबाइल पर टूटी हुई क्यों दिखती है?

मोबाइल पर वेबसाइट के टूटने की कोई एक वजह नहीं है। समस्या आमतौर पर पांच बुनियादी वजहों में से एक होती है, और कुछ मामलों में एक से ज़्यादा का मेल। यह समझना कि आपकी साइट पर कौन सी वजह है, तय करता है कि कौन सा हल लगेगा।

साइट रिस्पॉन्सिव डिज़ाइन से नहीं बनी थी

रिस्पॉन्सिव वेबसाइट अपना लेआउट उस स्क्रीन की चौड़ाई के हिसाब से अपने आप बदल लेती है जिस पर वह दिख रही है। डेस्कटॉप पर कंटेंट तीन कॉलम में दिख सकता है। टैबलेट पर दो में। फ़ोन पर एक स्क्रॉल होने वाले कॉलम में। यह बदलाव CSS नियमों से होता है जिन्हें मीडिया क्वेरी कहते हैं, जो ब्राउज़र को बताते हैं कि अलग-अलग स्क्रीन साइज़ पर कंटेंट को कैसे दोबारा सजाना है।

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

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

इमेज मोबाइल स्क्रीन के हिसाब से साइज़ की नहीं गई हैं

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

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

फ़िक्स्ड-विड्थ एलिमेंट स्क्रीन से बाहर निकल जाते हैं

फ़िक्स्ड-विड्थ एलिमेंट वे कंटेनर, div, टेबल या दूसरे HTML एलिमेंट हैं जिन्हें स्टाइलशीट में प्रतिशत या लचीली यूनिट की जगह एक खास पिक्सेल चौड़ाई दी गई है। 900 पिक्सेल चौड़ाई पर सेट किया गया कंटेनर डेस्कटॉप पर ठीक दिखेगा, पर फ़ोन स्क्रीन के किनारे से आगे निकल जाएगा, जिससे यूज़र को पूरा कंटेंट देखने के लिए हॉरिज़ॉन्टल स्क्रॉल करना पड़ेगा। वेबसाइट पर हॉरिज़ॉन्टल स्क्रॉलिंग लगभग हमेशा फ़िक्स्ड-विड्थ ओवरफ़्लो की समस्या का संकेत है।

टेबल अक्सर इसकी वजह होती हैं। फ़िक्स्ड कॉलम के साथ HTML में बनी प्राइसिंग टेबल या तुलना चार्ट मोबाइल पर बुरी तरह बिखर सकता है, और टेक्स्ट ऐसे ढेर हो जाता है कि पढ़ना नामुमकिन हो जाता है। यही साइडबार, एम्बेडेड विजेट और हर उस एलिमेंट पर लागू होता है जो साफ़ पिक्सेल चौड़ाई के साथ कोड किया गया है और फ़ोन स्क्रीन की उपलब्ध जगह से ज़्यादा है।

फ़ॉन्ट साइज़ ज़ूम किए बिना पढ़ने के लिए बहुत छोटे हैं

जो टेक्स्ट डेस्कटॉप स्क्रीन पर 14 पिक्सेल पर अच्छा पढ़ा जाता है, वह फ़ोन पर, खासकर हाई-डेंसिटी डिस्प्ले पर जहां असली पिक्सेल की गिनती लॉजिकल डिस्प्ले साइज़ से कहीं ज़्यादा होती है, पढ़ने लायक नहीं रह सकता। अगर विज़िटर को आपका कंटेंट पढ़ने के लिए पिंच करके ज़ूम करना पड़े, तो लेआउट तकनीकी रूप से सही होने पर भी अनुभव टूटा हुआ है।

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

नेविगेशन बुरी तरह सिमटता है या टच पर काम नहीं करता

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

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

कैसे जांचें कि आपकी वेबसाइट मोबाइल-फ़्रेंडली है या नहीं

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

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

Google का मोबाइल-फ़्रेंडली टेस्ट, जो Google Search Console से मिलता है, आपके पेजों का आकलन करता है और मोबाइल इस्तेमाल की खास समस्याएं बताता है। यह ऐसी समस्याएं पहचानता है जैसे पढ़ने के लिए बहुत छोटा टेक्स्ट, बहुत पास-पास क्लिक होने वाले एलिमेंट, और वह कंटेंट जो व्यूपोर्ट में नहीं समाता। रिपोर्ट पेज स्तर की जानकारी देती है ताकि आप पहचान सकें कि कौन से खास पेज फ़ेल हो रहे हैं और कौन से पास।

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

मोबाइल पर टूटी दिखने वाली वेबसाइट को कैसे ठीक करें

सही हल इस पर निर्भर करता है कि समस्या कौन सी वजह पैदा कर रही है। ऊपर की पांचों वजहों का एक-एक हल है।

रिस्पॉन्सिव लेआउट पर जाएं

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

इमेज का साइज़ बदलें और उन्हें सीमित करें

इमेज उस असली डिस्प्ले साइज़ पर अपलोड करनी चाहिए जिसकी ज़रूरत है, मूल एक्सपोर्ट रेज़ोल्यूशन पर नहीं। ज़्यादातर वेबसाइट इमेज के लिए 1,200 पिक्सेल की अधिकतम चौड़ाई हाई-डेंसिटी डिस्प्ले के लिए काफ़ी है और फ़ाइल साइज़ भी संभले रहते हैं। इमेज पर max-width: 100% सेट करने वाले CSS नियम पक्का करते हैं कि वे स्क्रीन की चौड़ाई कुछ भी हो, अपने कंटेनर से बाहर कभी न निकलें। यह अकेला नियम अलग-अलग इमेज का साइज़ बदले बिना इमेज ओवरफ़्लो की ज़्यादातर समस्याएं सुलझा देता है।

फ़िक्स्ड चौड़ाई की जगह लचीली यूनिट इस्तेमाल करें

कंटेनर, टेबल और दूसरे लेआउट एलिमेंट की फ़िक्स्ड पिक्सेल चौड़ाई की जगह प्रतिशत वाली चौड़ाई या em, rem या vw जैसी लचीली CSS यूनिट रखनी चाहिए। width: 900px की जगह width: 90% पर सेट कंटेनर हर स्क्रीन साइज़ पर ठीक से स्केल होगा। टेबल के लिए, ऐसा CSS नियम जोड़ना जो टेबल को अपने कंटेनर में हॉरिज़ॉन्टली स्क्रॉल होने लायक बनाए, उन्हें संकरी स्क्रीन पर पूरा लेआउट बिगाड़ने से रोकता है।

मोबाइल के लिए फ़ॉन्ट साइज़ बढ़ाएं

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

होवर-आधारित नेविगेशन की जगह मोबाइल मेन्यू लगाएं

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

अगर आपकी साइट पर डिस्प्ले की समस्याओं के साथ टूटे पेज भी हैं, तो पहले विज़ुअल लेआउट ठीक करने से ऑडिट के दौरान हर पेज तक जाना और उसे टेस्ट करना अक्सर आसान हो जाता है।

WEMASY मोबाइल को कैसे संभालता है

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

क्या-क्या शामिल है, यह WEMASY वेबसाइट बिल्डर पर देखें या प्राइसिंग पेज पर उपलब्ध प्लान देखें।

अक्सर पूछे जाने वाले सवाल