हम जानते हैं कि अलग-अलग डिवाइसों पर बेहतरीन अनुभव देने के लिए, रिस्पॉन्सिव डिज़ाइन का इस्तेमाल करना एक अच्छा विकल्प है. हालांकि, रिस्पॉन्सिव डिज़ाइन से ऐक्सेसिबिलिटी को भी फ़ायदा मिलता है.
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 पिक्सल का साइज़ सही होता है. टैप टारगेट के बारे में ज़्यादा जानकारी पढ़ें.