Responsive design checker: रिस्पॉन्सिव डिज़ाइन टेस्ट करने का सही तरीका

रिस्पॉन्सिव डिज़ाइन को ठीक से टेस्ट करने के लिए तीन राउंड करें: viewport को लगभग 320 px से 1920 px तक धीरे-धीरे चौड़ा करें ताकि पता चले लेआउट कहाँ टूटता है, नाम वाले डिवाइस को उनके असली user agent और pixel ratio के साथ जाँचें, और लंबे कंटेंट व 200% ज़ूम से लेआउट पर दबाव डालें। ज़्यादातर रिस्पॉन्सिव bugs breakpoints के बीच और ऐसे कंटेंट में होते हैं जिसके लिए डिज़ाइन बना ही नहीं था, इसलिए सिर्फ़ तीन तय साइज़ (“फ़ोन, टैबलेट, डेस्कटॉप”) जाँचने से वे छूट जाते हैं।

सिर्फ़ तीन साइज़ जाँचना काफ़ी क्यों नहीं

लेआउट कुछ चौड़ाइयों पर डिज़ाइन होता है, लेकिन इस्तेमाल हर चौड़ाई पर होता है। जो हेडिंग 375 px पर ठीक बैठती है, वह 344 px (कुछ फ़ोल्ड होने वाले फ़ोन बंद हालत में) पर बुरी तरह टूट सकती है। जो नेविगेशन बार 1024 px पर फ़िट है, वह किसी मेन्यू आइटम के लंबा होते ही 1100 px पर बाहर निकल सकता है। Bugs अक्सर यहाँ मिलते हैं:

• हर breakpoint के ठीक नीचे और ठीक ऊपर
• उन चौड़ाइयों पर जिनके लिए किसी ने डिज़ाइन नहीं किया, जैसे 600–700 px (छोटे टैबलेट, स्प्लिट-स्क्रीन विंडो)
• असली कंटेंट के साथ, जो डिज़ाइन मॉकअप से लंबा होता है

राउंड 1: चौड़ाई का स्वीप

1. Chrome DevTools खोलें, device toolbar चालू करें (Ctrl + Shift + M, या Mac पर Cmd + Shift + M) और Responsive चुनें।
2. चौड़ाई 320 px पर रखें और दाएँ किनारे को धीरे-धीरे उस सबसे बड़ी चौड़ाई तक खींचें जिसे आप सपोर्ट करते हैं।
3. इन पर नज़र रखें: हॉरिज़ॉन्टल स्क्रॉलबार, एक-दूसरे पर चढ़ता टेक्स्ट, दो लाइन में टूटते बटन, खिंचती इमेज, grid में अकेला छूटा कार्ड, और breakpoint बदलते समय उछलते एलिमेंट।
4. जब कुछ टूटे, तो टूलबार में दिख रही ठीक चौड़ाई नोट करें।

device toolbar के मेन्यू में Show media queries चालू करें, ताकि आपके breakpoints viewport के ऊपर रंगीन पट्टियों के रूप में दिखें। किसी पट्टी पर क्लिक करने से उसी चौड़ाई पर पहुँच जाते हैं। device mode की स्टेप-बाय-स्टेप मदद Chrome मोबाइल एमुलेटर गाइड में है।

एक अच्छी आदत: हर breakpoint को उसकी ठीक वैल्यू पर और उससे एक पिक्सेल कम पर टेस्ट करें। max-width: 768px और min-width: 768px के बीच एक पिक्सेल की ग़लतियाँ आम हैं।

राउंड 2: असली डिवाइस प्रोफ़ाइल

फ़ोन सिर्फ़ चौड़ाई नहीं बताता। डिवाइस मोबाइल user agent भी भेजते हैं, उनका device pixel ratio 2 या 3 होता है, और वे सर्वर या JavaScript में अलग व्यवहार शुरू कर सकते हैं। अपने अहम पेजों को नाम वाली प्रोफ़ाइल पर जाँचें:

• छोटा फ़ोन (लगभग 360–375 px चौड़ा)
• मौजूदा iPhone (393–402 px) और बड़ा iPhone (430–440 px); वैल्यू iPhone viewport चार्ट में हैं
• Android फ़ोन (360–412 px)
• दोनों ओरिएंटेशन में टैबलेट (iPad और टैबलेट गाइड)

इसके लिए DevTools के डिवाइस प्रीसेट काम करते हैं। लेकिन जब बहुत सारे पेज क्लिक करके देखने हों, तो Mobile View Extension जैसा responsive design tester एक्सटेंशन तेज़ है: यह टैब को डिवाइस के user agent, स्क्रीन साइज़ और pixel ratio के साथ रीलोड करता है, दूसरे पेज पर जाने पर भी वही डिवाइस रखता है, और एक ही पेज के व्यू साथ-साथ तुलना करने देता है।

राउंड 3: कंटेंट पर दबाव डालें

मॉकअप में कंटेंट परफ़ेक्ट होता है। असली साइटों में नहीं। ये आज़माएँ:

• लंबे शब्द और स्ट्रिंग: लंबा प्रोडक्ट नाम, जर्मन अनुवाद, पतले कॉलम में ईमेल पता या URL। जहाँ ज़रूरत हो, overflow-wrap: anywhere जोड़ें।
• ज़्यादा या कम आइटम: पाँच की जगह आठ आइटम वाला मेन्यू, छह की जगह सात कार्ड वाला grid।
• ग़ायब इमेज: जब इमेज लोड न हो या अभी लोड हो रही हो, तब कार्ड कैसा दिखता है?
• बड़ा टेक्स्ट: ब्राउज़र का डिफ़ॉल्ट फ़ॉन्ट साइज़ 20 px या उससे ज़्यादा करें। rem से बने लेआउट बढ़ जाने चाहिए; तय ऊँचाई वाले बॉक्स टेक्स्ट को काट देंगे।
• डेस्कटॉप पर 200% और 400% ज़ूम: ज़ूम से CSS viewport पतला हो जाता है, इसलिए 400% पर 1280 px की विंडो 320 px की स्क्रीन जैसा बर्ताव करती है। WCAG 2.2 के मुताबिक़ उस साइज़ पर कंटेंट बिना दो दिशाओं में स्क्रॉल के फिर से व्यवस्थित होना चाहिए, मैप और डेटा टेबल जैसे कंटेंट को छोड़कर।

राउंड 4: स्क्रीनशॉट ऑटोमेट करें

हाथ से की गई जाँच bugs को एक बार पकड़ती है, और टिकट के साथ लगा मोबाइल स्क्रीनशॉट ठीक वही चौड़ाई दिखाता है जहाँ कुछ टूटा। ऑटोमैटिक स्क्रीनशॉट उन्हें वापस आते समय पकड़ते हैं। Playwright जैसे टूल से एक छोटी स्क्रिप्ट आपके अहम पेजों को, मान लीजिए, 360, 768, 1024 और 1440 px पर Chromium, Firefox और WebKit में खोल सकती है और हर pull request पर पिछले वर्शन से स्क्रीनशॉट की तुलना कर सकती है। ऐसा visual regression testing डिज़ाइन सिस्टम और बार-बार बदलने वाले मार्केटिंग पेजों के लिए अच्छा है।

ऑनलाइन responsive design checker

जो वेबसाइटें आपका URL एक साथ कई फ़्रेम में दिखाती हैं, वे सरसरी नज़र डालने के लिए अच्छी हैं। उनकी सीमाएँ हैं: वे आपका पेज अपने सर्वर से या iframe में लोड करती हैं, इसलिए localhost या लॉगिन के पीछे वाले पेज तक नहीं पहुँच सकतीं, कई साइटें फ़्रेम में खुलने से ख़ुद को रोकती हैं, और फ़्रेम आम तौर पर सिर्फ़ चौड़ाई बदलते हैं, user agent नहीं। इन्हें एक झलक के लिए इस्तेमाल करें, आख़िरी मंज़ूरी के लिए नहीं।

रिस्पॉन्सिव डिज़ाइन टेस्टिंग चेकलिस्ट

लेआउट से आगे, लॉन्च से पहले की बड़ी जाँच (फ़ॉर्म, स्पीड, SEO) के लिए मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट इस्तेमाल करें।

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

वेबसाइट की रिस्पॉन्सिवनेस जल्दी कैसे जाँचें?

Chrome DevTools खोलें, device toolbar में Responsive मोड चुनें और चौड़ाई को 320 px से ऊपर खींचें। जो कुछ भी बाहर निकले या एक-दूसरे पर चढ़े, वह रिस्पॉन्सिवनेस का bug है।

रिस्पॉन्सिव डिज़ाइन के लिए कौन-से स्क्रीन साइज़ टेस्ट करें?

320 px से सभी चौड़ाइयों का स्वीप करें, फिर फ़ोन के लिए 360, 375, 390–402, 412 और 430–440 px, टैबलेट के लिए लगभग 768–834 px और 1024 px, और डेस्कटॉप के लिए 1280–1920 px जाँचें।

क्या ब्राउज़र विंडो छोटी करना सही रिस्पॉन्सिव टेस्ट है?

CSS breakpoints के लिए यह सही टेस्ट है, लेकिन डेस्कटॉप ब्राउज़र लगभग 500 px पर छोटे होना बंद कर देते हैं और मोबाइल user agent नहीं भेजते। फ़ोन की चौड़ाई के लिए device mode या मोबाइल व्यू एक्सटेंशन इस्तेमाल करें।