1. लेआउट चुनने से पहले पेज का काम चुनें
उन पेजों से शुरू करें जो ग्राहक या व्यवसायिक कार्य लेकर चलते हैं: सेवा पेज, उत्पाद पेज, लीड फॉर्म, बुकिंग, अकाउंट लॉगइन, कार्ट, और सहायता। हर एक के लिए एक समापन वाक्य लिखें, जैसे: “एक पहली बार आने वाला विज़िटर इस सेवा को समझ सके, प्रासंगिक प्रमाण देख सके, और कॉल का अनुरोध कर सके।” यदि पेज के पास एक से अधिक काम हैं तो तय करें कौन सा पहले दिखेगा।
उसकी सामग्री को आवश्यक, सहायक, या वैकल्पिक के रूप में सूचीबद्ध करें। आवश्यक का मतलब संक्षिप्त नहीं होता; विज़िटर को मूल्य संदर्भ, पात्रता, डिलीवरी विवरण, या तुलना जानकारी की आवश्यकता हो सकती है। उस सामग्री को संकीर्ण लेआउट पर स्पष्ट मार्ग दें। Google मोबाइल और डेस्कटॉप पर बराबर प्राथमिक सामग्री रखने की सलाह देता है, जबकि प्रस्तुति अलग—जैसे टैब्स या एकॉर्डियन्स—हो सकती है।
एक संकरे चौड़ाई पर, एक सहकर्मी यह बता पाए कि पेज क्या ऑफ़र करता है, किसकी मदद करता है, और अगला महत्वपूर्ण कदम क्या है।
2. संकरे बेसलाइन को पूरा बनाएं
डेस्कटॉप लेआउट को छोटा करने के बजाय काम करने योग्य एक सिंगल-कॉलम पाथ से शुरू करें। फ्लेक्सिबल कंटेनर उपयोग करें, टेक्स्ट को लपेटने दें, और ऐसा viewport सेटिंग शामिल करें जो ब्राउज़र को डिवाइस चौड़ाई के अनुसार लेआउट साइज करने दे। ज़ूमिंग रोकें नहीं। जाँचें कि मेनू, नोटिस, इमेज, एम्बेड, और फॉर्म त्रुटियाँ व्यूपोर्ट के अंदर रहें; अनपेक्षित पेज-स्तरीय क्षैतिज स्क्रोल सामान्यतः एक दोष है।
साधारण पढ़ने और कार्य सामग्री के लिए एक मांग करने वाला रीफ़्लो चेक 320 CSS pixels उपयोग करें। WCAG 2.2 उस चौड़ाई पर ऊर्ध्वाधर सामग्री प्रस्तुत करने का वर्णन करता है बिना जानकारी या कार्यक्षमता के नुकसान या दो-आयामी स्क्रोलिंग के। एक मानचित्र, चार्ट, या डेटा टेबल को अपना स्क्रोल क्षेत्र चाहिए हो सकता है, पर वह आसपास के पेज को साइडवेज़ स्क्रोल करने का औचित्य नहीं देता।
इमेज को उनके कंटेनर के अनुसार फिट करें और ब्राउज़र को लोड होने से पहले जगह रिज़र्व करने के लिए आयाम प्रदान करें।
3. बेस पाथ को न नाज़ुक बनाते हुए संवर्धन जोड़ें
प्रोग्रेसिव एन्हांसमेंट का मतलब है कि आवश्यक सामग्री और कार्यक्षमता एक बेसलाइन के रूप में काम करें, जबकि सक्षम ब्राउज़र और बड़े स्क्रीन अतिरिक्त सुविधाएँ पाते हैं। पता, उत्पाद विवरण, फॉर्म लेबल, मूल्य व्याख्या, और सबमिट पाथ एनिमेशन, हवर, या लेट स्क्रिप्ट पर निर्भर नहीं होना चाहिए। चौड़े लेआउट में तुलना पैनल, पर्सिस्टेंट नेविगेशन, या समृद्ध फिल्टरिंग जोड़ी जा सकती है बशर्ते कि बेसलाइन अधूरी न हो।
इम्प्लीमेंटर से कहें कि ब्रेकपॉइंट तब जोड़ें जब सामग्री तंग या व्यर्थ दिखे, न कि किसी नामचीन डिवाइस के आने पर। ब्रेकपॉइंट बस वह जगह है जहाँ लेआउट नियम बदलते हैं। संकरे लेआउट का उपयोग सहायक टेक्स्ट, नीति शर्तों, रिव्यू, मेटाडेटा, या महत्वपूर्ण संरचित विवरणों को चुपचाप हटाने के लिए न करें।
पहले एक बेसिक गैलरी इमेज और विवरण दिखाएँ, फिर उनके स्क्रिप्ट उपलब्ध होने पर ज़ूम या स्वाइप नियंत्रण जोड़ें।
4. टच, स्पष्टता और रिकवरी के लिए नियंत्रण डिज़ाइन करें
टच एर्गोनॉमिक्स का मतलब है हाथों के लिए डिज़ाइन करना न कि एक सटीक माउस पॉइंटर के लिए। बटन, चेकबॉक्स, क्लोज़ आइकन, मात्रा सेलेक्टर्स, और फॉर्म विकल्पों को गलत टैप कम करने के लिए पर्याप्त आकार और अलगाव दें। आइकनों को लेबल दें जहाँ उनका अर्थ स्पष्ट नहीं है। कीमत, सबमेनू, स्पष्टीकरण, या क्रिया को केवल हवर पर उजागर न होने दें।
WCAG 2.2 में पॉइंटर टारगेट्स के लिए कम-से-कम 24 बाय 24 CSS पिक्सल का Level AA टारगेट-साइज़ मानदंड शामिल है, जिसमें spacing और इनलाइन लिंक जैसी अपवाद स्थितियाँ बताई गई हैं। इसे न्यूनतम संदर्भ के रूप में लें, न कि आराम का आश्वासन। महत्वपूर्ण क्रियाओं के लिए स्पष्ट लेबल, उदार अंतर, और एक उल्टने योग्य पुष्टि चरण जरूरी है। उच्च-जोखिम जर्नी या औपचारिक अनुरूपता दावों के लिए योग्य एक्सेसिबिलिटी समीक्षा लें।
लेबल दिखाई दें, उपयोगी वैलिडेशन फीडबैक दिखे, और त्रुटि होने पर भरे गए मान बरकरार रहें।
5. मीडिया और एम्बेड्स को विज़िटर जर्नी का हिस्सा मानें
निर्धारित करें कि हर इमेज जानकारीपूर्ण है, प्रेरक है, या केवल सजावटी है। एक जानकारीपूर्ण इमेज को उपयुक्त टेक्स्ट विकल्प और एक संकरे-लेआउट क्रॉप की आवश्यकता होती है जो आवश्यक विवरण को बरकरार रखे। रिस्पॉन्सिव इमेज विकल्प ब्राउज़र को उपयुक्त संसाधन चुनने देते हैं जिससे हर विज़िटर को सबसे बड़ा डेस्कटॉप एसेट डाउनलोड न करना पड़े। हीरो इमेज या वीडियो को पेज के उद्देश्य और प्राथमिक क्रिया को ढकने न दें।
मैप, चैट, वीडियो, भुगतान, समय-सारणी, सहमति, और रिव्यू विजेट्स का इन्वेंटरी बनाएं। संकरे स्क्रीन पर उनके लोडिंग स्टेट, कंट्रोल का आकार, सीमित लेआउट, और व्यावहारिक फॉलबैक मार्ग जाँचें। भुगतान, पहचान, या विनियमित डेटा फ्लो के लिए योग्य सुरक्षा, गोपनीयता, और अनुपालन समीक्षकों को शामिल करें; विज़ुअल परीक्षण सुरक्षा आकलन का विकल्प नहीं है।
प्रत्येक बाहरी कंपोनेंट, उसका मालिक, उसका व्यवसायिक फ़ंक्शन, और यदि वह धीमा या टूटा हो तो स्वीकृत फॉलबैक रिकॉर्ड करें।
6. रिलीज़ से पहले टास्क पाथ टेस्ट करें और मरम्मत की योजना बनाएं
शुरुआत में ब्राउज़र रिस्पॉन्सिव मोड का उपयोग कर संकरे, मध्यम, और चौड़े चौड़ाईयों का निरीक्षण करें। Chrome Device Mode व्यूपोर्ट, टच, ओरिएंटेशन, नेटवर्क, और CPU कंडीशंस का अनुमान लगा सकता है, पर Chrome इसे वास्तविक-डिवाइस निष्पादन का अनुमान बताता है न कि सटीक अनुकरण। जहाँ संभव हो, महत्वपूर्ण पाथ वास्तविक फ़ोन और प्रासंगिक ब्राउज़रों पर पूर्ण करें।
एक स्क्रीनशॉट नहीं बल्कि एक टास्क टेस्ट करें: कोल्ड लोड, नेविगेशन, अमान्य और मान्य फॉर्म सबमिशन, ओरिएंटेशन परिवर्तन, ज़ूम, और तीसरे-पक्ष स्क्रीन से वापसी। URL, ब्राउज़र या डिवाइस, टास्क, अपेक्षित परिणाम, मालिक, और रोलबैक निर्णय रिकॉर्ड करें। प्रमुख टेम्पलेट, चेकआउट, CMS, या निर्भरता परिवर्तनों के लिए रिलीज़ को स्टेज करें और पिछला पाथ बहाल करने की तैयारी रखें बजाय कि दबाव में अनायास समाधान के।
केवल तभी मंजूरी दें जब महत्वपूर्ण टास्क काम कर रहा हो, नियंत्रण उपयोग योग्य हों, पेज-स्तरीय क्षैतिज स्क्रोल मौजूद न हो, और प्रमुख निर्भरताओं के लिए फॉलबैक मौजूद हों।