हम जानते हैं कि बेहतरीन मल्टी-डिवाइस अनुभव देने के लिए इसे रिस्पॉन्सिव तरीके से डिज़ाइन करना अच्छा आइडिया है, लेकिन रिस्पॉन्सिव डिज़ाइन, सुलभता के मामले में भी फ़ायदेमंद साबित होता है.
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 जैसी मिलती-जुलती इकाइयों का इस्तेमाल करें. कुछ ब्राउज़र में सिर्फ़ उपयोगकर्ता की पसंद के हिसाब से टेक्स्ट का साइज़ बदलने की सुविधा काम करती है. अगर टेक्स्ट के लिए पिक्सल वैल्यू का इस्तेमाल किया जा रहा है, तो इस सेटिंग से आपकी कॉपी पर कोई असर नहीं पड़ेगा. हालांकि, अगर आपने पूरी अवधि में मिलती-जुलती यूनिट का इस्तेमाल किया है, तो उपयोगकर्ता की प्राथमिकता दिखाने के लिए साइट की कॉपी अपडेट होगी.
इससे उपयोगकर्ता के ज़ूम करने पर पूरी साइट रीफ़्लो के लिए चालू हो जाएगी, जिससे उन्हें आपकी साइट का इस्तेमाल करने के लिए पढ़ने का ज़रूरी अनुभव मिलेगा.
विज़ुअल व्यू को सोर्स ऑर्डर से अलग करने से बचें
आपकी साइट पर कीबोर्ड से टैब करने वाला विज़िटर, एचटीएमएल दस्तावेज़ में कॉन्टेंट के क्रम के मुताबिक होगा. Flexbox और Grid जैसे मॉडर्न लेआउट के तरीकों का इस्तेमाल करते समय, विज़ुअल रेंडरिंग को सोर्स के क्रम से मैच करना आसान होता है. इससे किसी व्यक्ति के पेज को इधर-उधर करने के लिए, कीबोर्ड का इस्तेमाल करने वाले व्यक्ति के लिए, एक ही पेज पर कई बार गड़बड़ी हो सकती है.
हर ब्रेकपॉइंट पर अपने डिज़ाइन की जांच ज़रूर करें. इसके लिए, कॉन्टेंट पर टैब करें. क्या पेज पर फ़्लो करना अब भी सही है?
सोर्स और विज़ुअल डिसप्ले के डिसकनेक्ट होने के बारे में ज़्यादा जानें.
जगह के बारे में बताने वाले संकेतों की मदद से अपना ख्याल रखें
माइक्रोकॉपी लिखते समय, ऐसी भाषा का इस्तेमाल करने से बचें जो पेज पर किसी एलिमेंट के मौजूद होने की जगह बताती हो. उदाहरण के लिए, मोबाइल वर्शन में "बाईं ओर" नेविगेशन का हवाला देने का कोई मतलब नहीं है कि नेविगेशन स्क्रीन के सबसे ऊपर होगा.
पक्का करें कि टचस्क्रीन डिवाइसों पर टैप टारगेट का साइज़ काफ़ी बड़ा हो
टचस्क्रीन डिवाइस पर पक्का करें कि आपके टैप टारगेट इतने बड़े हों ताकि उन्हें दूसरे लिंक पर क्लिक किए बिना आसानी से चालू किया जा सके. टैप किए जा सकने वाले किसी भी एलिमेंट का साइज़ 48 पिक्सल होना चाहिए. टैप टारगेट के बारे में ज़्यादा जानकारी पढ़ें.