যখন আপনার ডিজাইন একটি মোবাইল ডিভাইসে প্রদর্শিত হয়, তখন আপনাকে নিশ্চিত করতে হবে যে বোতাম বা লিঙ্কগুলির মতো ইন্টারেক্টিভ উপাদানগুলি যথেষ্ট বড়, এবং তাদের চারপাশে পর্যাপ্ত জায়গা রয়েছে, যাতে অন্য উপাদানগুলির উপর ভুলবশত ওভারল্যাপ না করে চাপানো সহজ হয়৷ এটি সমস্ত ব্যবহারকারীদের উপকৃত করে, তবে মোটর দুর্বলতার জন্য বিশেষভাবে সহায়ক।
একটি সঠিকভাবে সেট করা মোবাইল ভিউপোর্ট সহ একটি সাইটে ন্যূনতম প্রস্তাবিত টাচ টার্গেট সাইজ প্রায় 48 ডিভাইস স্বাধীন পিক্সেল। উদাহরণস্বরূপ, যখন একটি আইকনের প্রস্থ এবং উচ্চতা শুধুমাত্র 24px হতে পারে, আপনি ট্যাপ টার্গেটের আকার 48px পর্যন্ত আনতে অতিরিক্ত প্যাডিং ব্যবহার করতে পারেন। 48x48 পিক্সেল এলাকা প্রায় 9 মিমি এর সাথে মিলে যায়, যা একজন ব্যক্তির আঙুলের প্যাড এলাকার আকারের প্রায়।
ডেমোতে, আমি সমস্ত লিঙ্কে প্যাডিং যুক্ত করেছি যাতে তারা ন্যূনতম আকার পূরণ করে তা নিশ্চিত করতে।
টাচ টার্গেটগুলি অনুভূমিকভাবে এবং উল্লম্বভাবে প্রায় 8 পিক্সেলের ব্যবধানে থাকা উচিত, যাতে ব্যবহারকারীর আঙুলটি একটি ট্যাপ টার্গেটে টিপলে অসাবধানতাবশত অন্য ট্যাপ টার্গেট স্পর্শ না করে।
আপনার স্পর্শ লক্ষ্য পরীক্ষা করা হচ্ছে
যদি আপনার টার্গেট টেক্সট হয় এবং আপনি টেক্সট সাইজ করার জন্য em বা rem এর মতো আপেক্ষিক মান ব্যবহার করে থাকেন এবং যেকোনো প্যাডিং, তাহলে আপনি DevTools ব্যবহার করে সেই এলাকার গণনা করা মান যথেষ্ট বড় কিনা তা পরীক্ষা করতে পারেন। নীচের উদাহরণে আমি আমার পাঠ্য এবং প্যাডিংয়ের জন্য em ব্যবহার করছি।
লিঙ্কের a পরিদর্শন করুন, এবং Chrome DevTools-এ গণনা করা ফলকে স্যুইচ করুন যেখানে আপনি বাক্সের বিভিন্ন অংশ পরিদর্শন করতে পারেন এবং দেখতে পারেন যে তারা কোন পিক্সেলের আকার নির্ধারণ করে। Firefox DevTools-এ একটি লেআউট প্যানেল আছে। সেই প্যানেলে আপনি পরিদর্শিত উপাদানটির প্রকৃত আকার পাবেন।
টাচস্ক্রিন ব্যবহার সনাক্ত করতে মিডিয়া ক্যোয়ারী ব্যবহার করে
কেবলমাত্র ভিউপোর্টের মাত্রা পরীক্ষা করার পরিবর্তে, এবং তারপর অনুমান করা যে ছোট মাত্রাগুলি ফোন বা ট্যাবলেট হতে পারে, যা একটি টাচস্ক্রিন ব্যবহার করে, এখন প্রকৃত ডিভাইসের ক্ষমতার উপর ভিত্তি করে আপনার নকশাকে মানিয়ে নেওয়ার আরও শক্তিশালী উপায় রয়েছে।
মিডিয়া ক্যোয়ারীগুলির মাধ্যমে আমরা এখন যে মিডিয়া বৈশিষ্ট্যগুলির জন্য পরীক্ষা করতে পারি তা হল ব্যবহারকারীর প্রাথমিক ইনপুটটি একটি টাচস্ক্রিন ( pointer ) এবং বর্তমানে সনাক্ত করা ইনপুটগুলির মধ্যে কোনও একটি টাচস্ক্রিন ( any-pointer ) কিনা। pointer এবং any-pointer বৈশিষ্ট্যগুলি fine বা coarse হবে। একটি সূক্ষ্ম পয়েন্টার হবে একজন মাউস বা ট্র্যাকপ্যাড ব্যবহার করে, এমনকি যদি সেই মাউসটি ব্লুটুথের মাধ্যমে ফোনে সংযুক্ত থাকে। একটি coarse পয়েন্টার একটি টাচস্ক্রিন নির্দেশ করে, যা একটি মোবাইল ডিভাইস হতে পারে তবে এটি একটি ল্যাপটপ স্ক্রিন বা বড় ট্যাবলেটও হতে পারে।
টাচ টার্গেট বাড়ানোর জন্য আপনি যদি মিডিয়া কোয়েরির মধ্যে আপনার CSS সামঞ্জস্য করে থাকেন, তাহলে একটি মোটা পয়েন্টার পরীক্ষা করলে আপনি সমস্ত টাচস্ক্রিন ব্যবহারকারীদের জন্য ট্যাপ টার্গেট বাড়াতে পারবেন। এটি ডিভাইসটি একটি ফোন বা বড় ডিভাইস কিনা তা বৃহত্তর ট্যাপ এলাকা দেয়।
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
আপনি প্রতিক্রিয়াশীল ওয়েব ডিজাইন বেসিক নিবন্ধে পয়েন্টারের মতো ইন্টারঅ্যাকশন মিডিয়া বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে পারেন।