हम जानते हैं कि बेहतरीन मल्टी-डिवाइस अनुभव देने के लिए प्रतिक्रियाशील रूप से डिज़ाइन करना अच्छा विचार है, लेकिन प्रतिक्रियाशील डिज़ाइन भी सुलभता के लिए फ़ायदेमंद है.
Udacity जैसी साइट का इस्तेमाल करें:
कम दृष्टि वाला एक उपयोगकर्ता, जिसे छोटा प्रिंट पढ़ने में परेशानी होती है, वह पेज ज़ूम इन कर सकता है, 400% तक की बढ़ोतरी देखी जा सकती है. साइट को रिस्पॉन्सिव तरीके से डिज़ाइन किया गया है. यूज़र इंटरफ़ेस (यूआई) खुद को "छोटे व्यूपोर्ट" के लिए फिर से व्यवस्थित करेगा (वास्तव में बड़े पेज के लिए), यह डेस्कटॉप का इस्तेमाल करने वाले उन लोगों के लिए बहुत बढ़िया है जिन्हें स्क्रीन पर ज़ूम करने की सुविधा की ज़रूरत होती है इस्तेमाल करने वाले लोगों के लिए भी है. हर हाल में आपका ही लाभ है. यहां वही पेज दिया गया है जिसे 400% ज़ूम किया गया था:
असल में, सिर्फ़ रिस्पॉन्सिव डिज़ाइन में डिज़ाइन किया गया, हम WebAIM चेकलिस्ट के 1.4.4 नियम का पालन कर रहे हैं, इसमें यह कहा गया है कि टेक्स्ट के साइज़ को दोगुना करने पर, पेज "... पढ़ने लायक और सही तरीके से काम करने वाला होना चाहिए."
सभी रिस्पॉन्सिव डिज़ाइन पर गौर करना इस गाइड के दायरे से बाहर है, हालाँकि, यहाँ कुछ ज़रूरी बातें बताई गई हैं जिनसे आपका रिस्पॉन्सिव एक्सपीरियंस बेहतर होगा और अपने उपयोगकर्ताओं को अपने कॉन्टेंट का बेहतर ऐक्सेस दें.
व्यूपोर्ट मेटा टैग का इस्तेमाल करना
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width को सेट करने पर, स्क्रीन की चौड़ाई डिवाइस-इंडिपेंडेंट पिक्सल के हिसाब से सेट होगी,
और initial-scale=1 सेट करने से सीएसएस पिक्सल और डिवाइस-इंडिपेंडेंट पिक्सल के बीच 1:1 का संबंध बनता है.
ऐसा करने से ब्राउज़र आपके कॉन्टेंट को स्क्रीन साइज़ के हिसाब से फ़िट करने के निर्देश देता है,
ताकि उपयोगकर्ताओं को सिर्फ़ व्यवस्थित किया गया टेक्स्ट न दिखे.
ज़्यादा जानने के लिए, व्यूपोर्ट के हिसाब से कॉन्टेंट का साइज़ तय करना देखें.
उपयोगकर्ताओं को ज़ूम करने की अनुमति दें
व्यूपोर्ट मेटा टैग का इस्तेमाल करके ज़ूम करना रोका जा सकता है,
maximum-scale=1 या user-scaleable=no सेट करें.
ऐसा करने से बचें और ज़रूरत पड़ने पर अपने उपयोगकर्ताओं को ज़ूम इन करने दें.
आसानी से डिज़ाइन करें
खास स्क्रीन साइज़ को टारगेट करने से बचें. इसके बजाय, सुविधाजनक ग्रिड का इस्तेमाल करें, लेआउट में उस समय बदलाव किया जा सकता है जब कॉन्टेंट अपने हिसाब से निर्देश दे. जैसा कि हमने ऊपर दिए गए Udacity उदाहरण में देखा, यह तरीका पक्का करता है कि डिज़ाइन भले ही, स्पेस कम होने की वजह से स्क्रीन का साइज़ कम हो या ज़्यादा ज़ूम करने की वजह से.
रिस्पॉन्सिव (स्क्रीन के हिसाब से आकार बदलने वाले) वेब डिज़ाइन की बुनियादी बातें लेख में इन तकनीकों के बारे में ज़्यादा पढ़ा जा सकता है.
टेक्स्ट के लिए मिलती-जुलती इकाइयों का इस्तेमाल करें
अपनी सुविधाजनक ग्रिड का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए टेक्स्ट के साइज़ के लिए, पिक्सल वैल्यू के बजाय, em या rem जैसी मिलते-जुलते यूनिट का इस्तेमाल करें. कुछ ब्राउज़र केवल उपयोगकर्ता प्राथमिकताओं में टेक्स्ट का आकार बदलने की सुविधा देते हैं, और अगर आप टेक्स्ट के लिए पिक्सल वैल्यू का इस्तेमाल कर रहे हैं, तो यह सेटिंग आपकी कॉपी पर असर नहीं डालेगी. हालांकि, यदि आपने पूरे समय में सापेक्ष इकाइयों का उपयोग किया है, तो उपयोगकर्ता की प्राथमिकता दिखाने के लिए साइट कॉपी अपडेट हो जाएगी.
इससे पूरी साइट, उपयोगकर्ता के ज़ूम करने पर रीफ़्लो हो जाएगी, बनाने के लिए डिज़ाइन किया जा सकता है जो उन्हें आपकी साइट का इस्तेमाल करने के लिए चाहिए.
विज़ुअल व्यू को सोर्स ऑर्डर से डिसकनेक्ट करने से बचें
वेबसाइट पर आने वाला ऐसा व्यक्ति जो कीबोर्ड की मदद से आपकी साइट पर टैब कर रहा है HTML दस्तावेज़ में सामग्री के क्रम का पालन करेगा. Flexbox और Grid जैसे आधुनिक लेआउट के तरीकों का इस्तेमाल करते समय, यह आसान है कि विज़ुअल रेंडरिंग, सोर्स ऑर्डर से मैच न करे. इसकी वजह से, हो सकता है कि किसी व्यक्ति को कीबोर्ड का इस्तेमाल करके पेज पर इधर-उधर जाने की परेशानी न हो.
हर ब्रेकपॉइंट पर अपने डिज़ाइन की जांच ज़रूर करें. इसके लिए, कॉन्टेंट टैब पर जाएं, क्या पेज पर फ़्लो करने से अब भी कोई मतलब निकल रहा है?
सोर्स और विज़ुअल डिसप्ले के डिसकनेक्ट होने के बारे में ज़्यादा जानें.
स्पेशल क्लू की मदद से सावधानी बरतें
माइक्रोकॉपी लिखते समय, ऐसी भाषा का इस्तेमाल करने से बचें जो पेज पर मौजूद किसी एलिमेंट की जगह के बारे में बताती हो. उदाहरण के लिए, "आपकी बाईं ओर" नेविगेशन का संदर्भ देते हुए का मोबाइल वर्शन समझ में नहीं आता जब नेविगेशन स्क्रीन के सबसे ऊपरी हिस्से में हो.
पक्का करें कि टचस्क्रीन डिवाइसों पर टैप टारगेट बड़े हों
टचस्क्रीन डिवाइसों पर पक्का करें कि आपके टैप टारगेट का साइज़ ज़रूरत के मुताबिक हो ताकि वे आसानी से चालू हो सकें, इसके लिए किसी दूसरे लिंक पर क्लिक न करें. टैप किए जा सकने वाले किसी भी एलिमेंट का साइज़ 48 पिक्सल होता है, टैप टारगेट के बारे में ज़्यादा जानकारी पढ़ें.