दृश्य जाँच: हर स्क्रीन पर कॉलम, टेक्स्ट और फ़ोटो
पेज पर ओवरफ़्लो न होने पर भी उसे पढ़ना कठिन हो सकता है। बदलाव प्रकाशित करने से पहले अनुपात, लंबे कंटेंट और इंटरैक्शन की जाँच करें।
दोहराने योग्य छह जाँच
प्रतिनिधि पेज चुनें
होम, श्रेणी, लेख, सेवा, फ़ॉर्म और टेबल जाँचें। लंबा शीर्षक, दाएँ से बाएँ लिखी जाने वाली भाषा और कई फ़ोटो वाला पेज शामिल करें।
कॉलम की तुलना करें
320, 390, 768, 1280, 1440 और 1920 px चौड़ाई पर संरेखण, पढ़ने का क्रम और अंतर जाँचें। ओवरफ़्लो छिपाकर लेआउट की समस्या न छिपाएँ।
टेक्स्ट बड़ा करें
टेक्स्ट को 200 % पर और सामग्री का पुनर्विन्यास 320 CSS पिक्सेल चौड़ाई पर जाँचें। जानकारी और नियंत्रण उपलब्ध रहें; टेबल अलग स्क्रॉल क्षेत्र रख सकती है।
फ़ोटो जाँचें
क्रॉप, विषय, आयाम और क्रेडिट देखें। पास के टेक्स्ट की ऊँचाई के अनुसार फ़ोटो न खींचें। दिखाई देने वाली सामग्री बताएँ और स्टॉक फ़ोटो पहचानें।
इंटरैक्शन आज़माएँ
मेनू, फ़िल्टर, सवाल और फ़ॉर्म कीबोर्ड से चलाएँ। असली संदेश भेजे बिना फ़ोकस, त्रुटियाँ और त्रुटि के बाद इनपुट सुरक्षित रहने की जाँच करें।
प्रमाण रखें
URL, भाषा, चौड़ाई, ब्राउज़र, दोष और सुधार का परिणाम लिखें। पर्याप्त ट्रैफ़िक होने पर लैब माप में वास्तविक उपयोगकर्ता डेटा जोड़ें।
सहेजने योग्य जाँच रिकॉर्ड
- URL और भाषा
- स्क्रीन और ज़ूम स्तर
- दोष और स्क्रीनशॉट
- सुधार और दोबारा जाँच का परिणाम
यह काम करने की विधि है, अनुपालन प्रमाणपत्र नहीं। दायरा समायोजित करें और अपवाद दर्ज करें।
प्रकाशन से पहले: छह कार्यात्मक जाँचें
- मेनू, लिंक, डाउनलोड और भाषा बदलने की प्रक्रिया चलाएँ; वास्तविक गंतव्य जाँचें।
- काल्पनिक डेटा इस्तेमाल करें: खाली फ़ील्ड, गलत पते, अलग अक्षर और लंबे पाठ।
- जाँचें कि त्रुटियाँ फ़ील्ड का नाम बताती हैं, कीबोर्ड से उपलब्ध हैं और उपयोगी इनपुट बचाती हैं।
- सर्वर पर सत्यापन भी जाँचें; ब्राउज़र की जाँचों को दरकिनार किया जा सकता है।
- प्राप्ति पुष्टि और वास्तविक डिलीवरी में अंतर करें; अधिकृत परीक्षण गंतव्य इस्तेमाल करें।
- JavaScript के बिना व्यवहार, अस्वीकृति और दोबारा शुरू करना जाँचें; प्रमाण में गोपनीय जानकारी न रखें।
स्थितियाँ और उपयुक्त जाँच
छोटी स्क्रीन पर तालिका को क्षैतिज स्क्रॉल करें। कीबोर्ड से तालिका पर फ़ोकस लाकर तीर कुंजियाँ इस्तेमाल करें।
| स्थिति | इसका अर्थ | उपयोगी सत्यापन |
|---|---|---|
| पाठ 200% करने पर नियंत्रण गायब है। | बढ़े पाठ के साथ कार्य सुलभ नहीं रहता। | लेआउट बदलकर कीबोर्ड से फिर जाँचें। |
| डेस्कटॉप पर फोटो खिंचती है या बड़ा खाली स्थान छोड़ती है। | अनुपात पास की सामग्री को असंतुलित करता है। | आकार की सीमा और पढ़ने का क्रम जाँचें। |
| overflow: hidden तालिका काटता है। | डेटा छिपता है। | तालिका को अपना कीबोर्ड-सुलभ स्क्रॉल क्षेत्र दें और कोशिकाओं में पाठ लपेटें। |
| दूसरी भाषा का शीर्षक कटता है। | एक भाषा की जाँच पर्याप्त नहीं। | लंबे पाठ, RTL भाषाएँ और वास्तविक भाषा बदलना जाँचें। |
काल्पनिक उदाहरण
काल्पनिक सेवा पृष्ठ 1,440 पिक्सेल पर सही लगता है। 320 पर लंबा अनुवादित शीर्षक कटता है; पाठ 200% करने पर FAQ नियंत्रण उपलब्ध नहीं रहता।
फोटो सीमित करें, स्तंभ सिकुड़ने और पाठ लपेटने दें। 320, 390, 768 और 1,440 पिक्सेल पर पाठ बढ़ाकर और कीबोर्ड से कार्य दोहराएँ। बचे दोष दर्ज करें और सुधार के बाद फिर जाँचें।
स्वीकृति के मानदंड
- प्रतिनिधि चौड़ाइयों और भाषाओं में सूचना व नियंत्रण पढ़े जा सकते हैं।
- पाठ बढ़ाने और कीबोर्ड से कार्य पूरा होता है।
- संस्करण, ब्राउज़र, भाषा और पुनः जाँच के परिणाम दर्ज हैं।
व्यावहारिक प्रश्न
क्या स्क्रीनशॉट पर्याप्त है?
नहीं। वह एक स्थिति दिखाता है। लंबे कंटेंट, कीबोर्ड और खुले, फ़िल्टर किए गए तथा त्रुटि वाले राज्यों को भी जाँचें।
क्या एक फ़ॉन्ट आकार सबके लिए सही है?
नहीं। पठनीयता, पंक्ति की लंबाई, ज़ूम और कंट्रास्ट देखें। केवल आकार से सुलभता या संतुलन सुनिश्चित नहीं होता।
Core Web Vitals कैसे समझें?
अच्छे अनुभव की सीमाएँ 75वें प्रतिशतक पर LCP ≤ 2.5 s, INP ≤ 200 ms और CLS ≤ 0.1 हैं। ये लोडिंग, इंटरैक्शन और स्थिरता मापते हैं, दृश्य जाँच की जगह नहीं लेते।
हर संभावित उपकरण का स्क्रीनशॉट चाहिए?
मुख्य पृष्ठ प्रकार, उपयोगी कार्य और अंतर दिखाने वाले ब्राउज़र चुनें। कवरेज की सीमा दर्ज करें; कुछ चित्र सभी उपकरणों की पुष्टि नहीं करते।
दृश्य सुधारों को प्राथमिकता कैसे दें?
पहले अवरुद्ध कार्य, छिपा डेटा और पठनीयता ठीक करें। फिर अनुपात, संरेखण और दूरी सुधारें, अन्य पृष्ठों का काम जाँचते हुए।