जब आपका डिज़ाइन मोबाइल डिवाइस पर दिखता है, आपको यह पक्का करना होगा कि बटन या लिंक जैसे इंटरैक्टिव एलिमेंट ज़रूरत के मुताबिक बड़े हों, और उनके आस-पास काफ़ी जगह हो, ताकि उन्हें गलती से अन्य एलिमेंट पर ओवरलैप किए बिना आसानी से दबाया जा सके. इससे सभी उपयोगकर्ताओं को फ़ायदा मिलता है. लेकिन यह खास तौर पर उन लोगों के लिए मददगार है जिन्हें शरीर का कोई अंग पूरी तरह से काम नहीं करता.
टच टारगेट का कम से कम साइज़, डिवाइस के लिए कम से कम 48 इंडिपेंडेंट पिक्सल होना चाहिए सही ढंग से सेट मोबाइल व्यूपोर्ट के साथ साइट पर. उदाहरण के लिए, जबकि किसी आइकॉन की चौड़ाई और ऊंचाई सिर्फ़ 24px हो सकती है, टैप करके टारगेट का साइज़ 48 पिक्सल तक लाने के लिए, अतिरिक्त पैडिंग का इस्तेमाल करें. 48x48 पिक्सल वाला हिस्सा करीब 9 मिलीमीटर होता है, यह किसी व्यक्ति के फ़िंगर पैड एरिया के साइज़ के बारे में है.
डेमो में, मैंने सभी लिंक में पैडिंग (जगह) जोड़ दी है, ताकि यह पक्का किया जा सके कि वे कम से कम साइज़ के हैं.
टच टारगेट (स्क्रीन के वे हिस्से जहां छूने पर कोई कार्रवाई होती है) के बीच करीब 8 पिक्सल का अंतर होना चाहिए. हॉरिज़ॉन्टल और वर्टिकल तौर पर, ताकि उपयोगकर्ता की उंगली एक टैप वाले टारगेट पर दबाकर अनजाने में दूसरे टैप टारगेट को न छुएं.
आपके टच टारगेट की जांच की जा रही है
अगर आपका टारगेट टेक्स्ट है और आपने टेक्स्ट और किसी पैडिंग (जगह) को साइज़ देने के लिए em या rem जैसी मिलती-जुलती वैल्यू का इस्तेमाल किया है,
DevTools का इस्तेमाल करके यह पता लगाया जा सकता है कि उस एरिया की कंप्यूट की गई वैल्यू ज़रूरत के मुताबिक है या नहीं.
नीचे दिए गए उदाहरण में, मैंने अपने टेक्स्ट और पैडिंग के लिए em का इस्तेमाल किया है.
लिंक के a की जांच करें,
Chrome DevTools में कंप्यूट किए गए पैनल पर स्विच करें. यहां बॉक्स के अलग-अलग हिस्सों की जांच की जा सकती है
और देखें कि वे किस पिक्सल साइज़ में काम करते हैं.
Firefox DevTools में एक लेआउट पैनल है.
उस पैनल में, आपको जांच किए गए एलिमेंट का असल साइज़ मिलता है.
टचस्क्रीन के इस्तेमाल का पता लगाने के लिए मीडिया क्वेरी का इस्तेमाल करना
सिर्फ़ व्यूपोर्ट डाइमेंशन की जांच करने और फिर अनुमान लगाने के बजाय फ़ोन या टैबलेट के छोटे डाइमेंशन होने की संभावना होती है. यही वजह है कि टचस्क्रीन का इस्तेमाल करते हैं, तो डिवाइसों को ऑप्टिमाइज़ करने के ज़्यादा बेहतर तरीके उपलब्ध हैं डिज़ाइन भी किया जा सकता है.
एक मीडिया सुविधा जिसे हम अब मीडिया क्वेरी के साथ टेस्ट कर सकते हैं
उपयोगकर्ता का प्राइमरी इनपुट टचस्क्रीन (pointer) है या नहीं और
क्या अभी पता लगाए गए इनपुट में से कोई भी टचस्क्रीन (any-pointer) है.
pointer और any-pointer सुविधाओं के बाद, fine या coarse दिखने लगेंगे.
एक सटीक पॉइंटर वह होगा जो माउस या ट्रैकपैड का इस्तेमाल करता है,
भले ही वह माउस ब्लूटूथ के ज़रिए फ़ोन से कनेक्ट किया गया हो.
coarse पॉइंटर, टचस्क्रीन को दिखाता है.
जो कोई मोबाइल डिवाइस हो सकता है, लेकिन वह लैपटॉप स्क्रीन या बड़ा टैबलेट भी हो सकता है.
अगर टच टारगेट बढ़ाने के लिए, मीडिया क्वेरी में सीएसएस को अडजस्ट किया जा रहा है, मोटे पॉइंटर की जांच करने से, आपको सभी टचस्क्रीन उपयोगकर्ताओं के लिए टैप टारगेट बढ़ाने में मदद मिलती है. इससे, टैप करने वाली बड़ी जगह का पता चलता है. भले ही, डिवाइस कोई फ़ोन हो या बड़ा डिवाइस.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
आपको पॉइंटर जैसी इंटरैक्शन मीडिया सुविधाओं के बारे में ज़्यादा जानकारी मिल सकती है में, रिस्पॉन्सिव वेब डिज़ाइन की बुनियादी बातें लेख में दी गई जानकारी पढ़ें.