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