वे टैप टारगेट जिन्हें ऐक्सेस किया जा सकता है

डेव गैश

मेगिन किर्नी

पैट्रिक एच॰ लौक

रेचल ऐंड्रू

रॉब डॉडसन

जब आपका डिज़ाइन मोबाइल डिवाइस पर दिखता है, तब आपको यह पक्का करना चाहिए कि बटन या लिंक जैसे इंटरैक्टिव एलिमेंट का साइज़ काफ़ी बड़ा हो. साथ ही, इनके आस-पास काफ़ी जगह हो. इससे दूसरे एलिमेंट को गलती से ओवरलैप किए बिना, आसानी से दबाया जा सकता है. इससे सभी लोगों को फ़ायदा होता है, लेकिन यह खास तौर पर उन लोगों के लिए फ़ायदेमंद होता है जिन्हें मोटर इंपेयरमेंट (ऐसे लोग जिनके शरीर का कोई अंग पूरी तरह से काम नहीं करता या ठीक तरह से काम नहीं करता) से पीड़ित लोग.

सही तरह से सेट मोबाइल व्यूपोर्ट वाली साइट पर कम से कम 48 डिवाइस इंडिपेंडेंट पिक्सल का सुझाव दिया जाता है. उदाहरण के लिए, किसी आइकॉन की चौड़ाई और ऊंचाई सिर्फ़ 24 पिक्सल की हो सकती है. हालांकि, टैप टारगेट का साइज़ 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;
  }
}

रिस्पॉन्सिव वेब डिज़ाइन की बुनियादी बातें लेख में आपको पॉइंटर जैसी इंटरैक्शन मीडिया सुविधाओं के बारे में ज़्यादा जानकारी मिल सकती है.