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