Mobile website testing चेकलिस्ट: लॉन्च से पहले 30 जाँचें

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

शुरू करने से पहले: टेस्ट डिवाइस तैयार करें

आपको तीन तरह के व्यू चाहिए:

1. डेस्कटॉप पर जल्दी वाला मोबाइल व्यू, कई पेजों के लेआउट की जाँच के लिए: Chrome DevTools का device mode या Mobile View Extension जैसा मोबाइल व्यू एक्सटेंशन। दोनों का फ़र्क़ मोबाइल सिम्युलेटर एक्सटेंशन बनाम DevTools में है।
2. असली मोबाइल इंजन (और क्रॉस ब्राउज़र टेस्टिंग चेकलिस्ट वाले डेस्कटॉप ब्राउज़र): Xcode Simulator या असली iPhone से iOS Safari, और Android पर Chrome। देखें iPhone पर टेस्टिंग और Android पर टेस्टिंग।
3. कम-से-कम एक असली, मध्यम दर्जे का फ़ोन, touch, कीबोर्ड और स्पीड के लिए।

कम-से-कम ये चौड़ाइयाँ टेस्ट करें (इन संख्याओं का मतलब viewport size क्या है में समझाया गया है): portrait में 360 px, 390–402 px और 430–440 px, साथ में एक landscape साइज़ और एक टैबलेट साइज़।

1. लेआउट और पढ़ने में आसानी

1. किसी भी पेज पर हॉरिज़ॉन्टल स्क्रॉलिंग नहीं। अगर पेज साइड में स्क्रॉल होता है, तो स्क्रीन से चौड़ा एलिमेंट ढूँढें; तय चौड़ाई, लंबे URL और चौड़ी टेबल आम वजहें हैं।
2. मुख्य टेक्स्ट कम-से-कम 16 px का है और लाइनें स्क्रीन से चौड़ी नहीं।
3. हेडिंग साफ़ तरीके से अगली लाइन में जाती हैं, किसी लाइन में अकेला शब्द नहीं छूटता।
4. इमेज स्क्रीन के हिसाब से छोटी-बड़ी होती हैं और अपना aspect ratio बनाए रखती हैं।
5. कॉलम ऊपर-नीचे होने पर कंटेंट का क्रम समझ में आता है। सबसे ज़रूरी कंटेंट किसी लंबे साइडबार के नीचे नहीं धकेला गया।
6. landscape में notch या home indicator के पीछे कुछ नहीं छिपता (किनारे तक फैले लेआउट में env(safe-area-inset-*) जाँचें)।
7. पेज में सही viewport meta tag है। इसके बिना फ़ोन ज़ूम-आउट डेस्कटॉप पेज दिखाते हैं। देखें viewport meta tag क्या है।

2. नेविगेशन

8. मेन्यू एक टैप में खुलता और बंद होता है, और कोई लिंक चुनने पर बंद हो जाता है।
9. मेन्यू का हर आइटम, अंदर वाले भी, बिना hover के पहुँच में है।
10. हर पेज पर लोगो या होम लिंक है।
11. landscape में sticky हेडर स्क्रीन की ऊँचाई का छोटा-सा हिस्सा ही लेते हैं।
12. Back बटन (और Android का back gesture) उम्मीद वाली जगह पर लौटाता है, single-page ऐप में भी।

3. Touch और इंटरैक्शन

13. टैप टारगेट काफ़ी बड़े और एक-दूसरे से दूर हैं। WCAG 2.2 न्यूनतम 24 × 24 CSS पिक्सेल तय करता है; Apple और Google की डिज़ाइन गाइडलाइन लगभग 44–48 px सुझाती हैं।
14. Carousel और slider स्वाइप से चलते हैं और उनके कंट्रोल दिखते हैं।
15. पॉप-अप और cookie बैनर आसानी से बंद होते हैं और आते ही पूरी स्क्रीन नहीं ढकते।
16. टेक्स्ट के अंदर के लिंक बिना hover के पहचाने जा सकते हैं।

4. फ़ॉर्म

17. हर इनपुट सही कीबोर्ड दिखाता है: type="email", type="tel", inputmode="numeric"।
18. इनपुट में टेक्स्ट कम-से-कम 16 px है, ताकि फ़ोकस होने पर iOS Safari ज़ूम न करे।
19. ऑन-स्क्रीन कीबोर्ड उस फ़ील्ड को नहीं ढकता जिसमें टाइप हो रहा है, न ही सबमिट बटन को।
20. नाम, ईमेल, पते और पेमेंट के फ़ील्ड में autofill काम करता है (autocomplete attributes)।
21. Error मैसेज फ़ील्ड के पास दिखते हैं और बिना स्क्रॉल किए नज़र आते हैं।

5. मीडिया और फ़ाइलें

22. इमेज स्क्रीन के हिसाब से साइज़ में भेजी जाती हैं (srcset और sizes), डेस्कटॉप साइज़ की फ़ाइलें छोटी करके नहीं।
23. वीडियो आवाज़ के साथ अपने-आप नहीं चलते, और जहाँ चाहिए वहाँ iPhone पर पेज के अंदर ही चलते हैं (playsinline)।
24. आइकन और लोगो हाई-डेंसिटी स्क्रीन पर साफ़ हैं (SVG या 2x/3x इमेज)।

6. स्पीड

25. धीमे कनेक्शन पर भी मुख्य कंटेंट जल्दी दिखता है। PageSpeed Insights में field डेटा देखें और lab टेस्ट चलाएँ; दोनों मोबाइल पेज स्पीड टेस्ट गाइड में समझाए गए हैं।
26. पेज लोड होते समय लेआउट उछलता नहीं (Cumulative Layout Shift)।
27. पेज पहले टैप का जवाब जल्दी देता है (Interaction to Next Paint)।

7. मोबाइल पर SEO और एक्सेसिबिलिटी

28. मोबाइल पेज में डेस्कटॉप जैसा ही मुख्य कंटेंट, हेडिंग, structured data और meta tags हैं। Google मोबाइल वर्शन इंडेक्स करता है।
29. टेक्स्ट को 200% तक ज़ूम करने पर लेआउट नहीं टूटता, और कम-से-कम एक फ़ोन पर स्क्रीन रीडर के साथ पेज इस्तेमाल किया जा सकता है।
30. मोबाइल मोड में Lighthouse ऑडिट कोई गंभीर एक्सेसिबिलिटी या SEO समस्या नहीं दिखाता। स्टेप: Chrome में Lighthouse मोबाइल ऑडिट।

हर रिलीज़ के लिए छोटा वर्शन

हर deploy पर 30 जाँचें कोई नहीं करता। सामान्य रिलीज़ के लिए:

• बदले गए पेजों को 360 px और 430 px पर मोबाइल व्यू में खोलें
• साइड में स्क्रॉलिंग और टूटे मेन्यू देखें
• असली फ़ोन पर एक फ़ॉर्म सबमिट करें
• मुख्य लैंडिंग पेज की स्पीड रिपोर्ट पर नज़र डालें

इसमें लगभग दस मिनट लगते हैं और ज़्यादातर regressions पकड़ में आ जाते हैं।

मोबाइल टेस्टिंग की आम ग़लतियाँ

• सिर्फ़ ब्राउज़र विंडो छोटी करके टेस्ट करना। इससे चौड़ाई बदलती है, लेकिन user agent, pixel ratio या इनपुट का प्रकार नहीं, इसलिए कुछ साइटें असली फ़ोन को अलग पेज भेजती हैं। विस्तार से: डेस्कटॉप पर वेबसाइट का मोबाइल वर्शन कैसे देखें।
• सिर्फ़ नए फ़्लैगशिप फ़ोन पर टेस्ट करना। ज़्यादातर विज़िटर के डिवाइस डेवलपर्स के डिवाइस से धीमे होते हैं।
• landscape और टैबलेट को अनदेखा करना। 768–1024 px के आसपास के breakpoints पर कई लेआउट फ़ेल होते हैं; देखें वेबसाइट को iPad की तरह कैसे देखें।
• सिर्फ़ लॉग-आउट वाले पेज टेस्ट करना। अकाउंट वाले हिस्से और चेकआउट पर अक्सर मोबाइल का सबसे कम ध्यान जाता है।

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

बिना फ़ोन के अपनी वेबसाइट मोबाइल पर कैसे टेस्ट करें?

लेआउट के लिए डेस्कटॉप Chrome में मोबाइल व्यू, Mac पर iPhone Safari के लिए Xcode Simulator, और Android के लिए Android Studio का एमुलेटर इस्तेमाल करें। अहम फ़्लो की आख़िरी जाँच असली फ़ोन पर करें।

मोबाइल वेबसाइट की सबसे आम समस्या क्या है?

स्क्रीन से चौड़ा कंटेंट, जिससे साइड में स्क्रॉलिंग होती है। यह आम तौर पर तय चौड़ाई वाले एलिमेंट, चौड़ी टेबल या बिना max-width: 100% वाली इमेज से आता है।

क्या Google का कोई आधिकारिक मोबाइल टेस्ट है?

Google ने दिसंबर 2023 में अपना Mobile-Friendly Test बंद कर दिया और इसकी जगह Lighthouse की ओर इशारा करता है। विकल्प Google Mobile Friendly Test के विकल्प में दिए गए हैं।