আমরা জানি যে সর্বোত্তম মাল্টি-ডিভাইস অভিজ্ঞতা প্রদানের জন্য প্রতিক্রিয়াশীলভাবে ডিজাইন করা একটি ভাল ধারণা, তবে প্রতিক্রিয়াশীল ডিজাইন অ্যাক্সেসযোগ্যতার জন্য একটি জয়ও দেয়৷
Udacity মত একটি সাইট বিবেচনা করুন:
একজন স্বল্প-দৃষ্টিসম্পন্ন ব্যবহারকারী যার ছোট মুদ্রণ পড়তে অসুবিধা হয় সে পৃষ্ঠাটি জুম করতে পারে, সম্ভবত 400%। যেহেতু সাইটটি প্রতিক্রিয়াশীলভাবে ডিজাইন করা হয়েছে, তাই UI নিজেকে "ছোট ভিউপোর্ট" (আসলে বৃহত্তর পৃষ্ঠার জন্য) জন্য পুনর্বিন্যাস করবে, যা ডেস্কটপ ব্যবহারকারীদের জন্য দুর্দান্ত, যাদের স্ক্রীন ম্যাগনিফিকেশন প্রয়োজন এবং মোবাইল স্ক্রিন রিডার ব্যবহারকারীদের জন্যও। এটা একটা জয়-জয়। এখানে একই পৃষ্ঠাটি 400% পর্যন্ত বড় করা হয়েছে:
আসলে, শুধুমাত্র প্রতিক্রিয়াশীলভাবে ডিজাইন করে, আমরা WebAIM চেকলিস্টের নিয়ম 1.4.4 পূরণ করছি, যা বলে যে একটি পৃষ্ঠা "... পাঠ্যের আকার দ্বিগুণ হলে পাঠযোগ্য এবং কার্যকরী হওয়া উচিত।"
সমস্ত প্রতিক্রিয়াশীল ডিজাইনের উপর যাওয়া এই গাইডের সুযোগের বাইরে, তবে এখানে কয়েকটি গুরুত্বপূর্ণ টেকওয়ে রয়েছে যা আপনার প্রতিক্রিয়াশীল অভিজ্ঞতাকে উপকৃত করবে এবং আপনার ব্যবহারকারীদের আপনার সামগ্রীতে আরও ভাল অ্যাক্সেস দেবে।
ভিউপোর্ট মেটা ট্যাগ ব্যবহার করুন
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width সেট করা ডিভাইস-স্বাধীন পিক্সেলে স্ক্রিনের প্রস্থের সাথে মিলবে এবং initial-scale=1 সেট করা CSS পিক্সেল এবং ডিভাইস-স্বাধীন পিক্সেলের মধ্যে 1:1 সম্পর্ক স্থাপন করে। এটি করা ব্রাউজারকে আপনার সামগ্রীকে স্ক্রীনের আকারের সাথে মানানসই করার নির্দেশ দেয়, যাতে ব্যবহারকারীরা কেবল একগুচ্ছ স্ক্র্যাঞ্চ-আপ পাঠ্য দেখতে পান না।
আরও জানতে ভিউপোর্ট করতে সাইজ কন্টেন্ট দেখুন।
ব্যবহারকারীদের জুম করার অনুমতি দিন
maximum-scale=1 বা user-scaleable=no সেট করে জুমিং প্রতিরোধ করতে ভিউপোর্ট মেটা ট্যাগ ব্যবহার করা সম্ভব। এটি করা এড়িয়ে চলুন, এবং আপনার ব্যবহারকারীদের প্রয়োজন হলে তাদের জুম বাড়াতে দিন।
নমনীয়তা সঙ্গে নকশা
নির্দিষ্ট স্ক্রিনের মাপ টার্গেট করা এড়িয়ে চলুন এবং এর পরিবর্তে একটি নমনীয় গ্রিড ব্যবহার করুন, যখন বিষয়বস্তু নির্দেশ করে তখন লেআউটে পরিবর্তন করুন। যেমনটি আমরা উপরে উডাসিটির উদাহরণ দিয়ে দেখেছি, এই পদ্ধতিটি নিশ্চিত করে যে ডিজাইনটি সাড়া দেয় যে ছোট স্ক্রিনের কারণে বা উচ্চতর জুম স্তরের কারণে জায়গা কমে গেছে।
আপনি প্রতিক্রিয়াশীল ওয়েব ডিজাইন বেসিক নিবন্ধে এই কৌশলগুলি সম্পর্কে আরও পড়তে পারেন।
পাঠ্যের জন্য আপেক্ষিক ইউনিট ব্যবহার করুন
আপনার নমনীয় গ্রিড থেকে সেরাটি পেতে পিক্সেল মানের পরিবর্তে টেক্সট আকারের মতো জিনিসগুলির জন্য em বা rem এর মতো আপেক্ষিক ইউনিটগুলি ব্যবহার করুন৷ কিছু ব্রাউজার শুধুমাত্র ব্যবহারকারীর পছন্দ অনুযায়ী টেক্সট রিসাইজ করা সমর্থন করে এবং আপনি যদি টেক্সটের জন্য পিক্সেল মান ব্যবহার করেন, তাহলে এই সেটিং আপনার কপিকে প্রভাবিত করবে না। তবে, আপনি যদি আপেক্ষিক ইউনিটগুলি সর্বত্র ব্যবহার করে থাকেন, তাহলে ব্যবহারকারীর পছন্দ প্রতিফলিত করতে সাইটের অনুলিপি আপডেট হবে।
এটি ব্যবহারকারীর জুম করার সাথে সাথে পুরো সাইটটিকে রিফ্লো করতে সক্ষম করবে, আপনার সাইটটি ব্যবহার করার জন্য তাদের প্রয়োজনীয় পড়ার অভিজ্ঞতা তৈরি করবে।
উৎস ক্রম থেকে চাক্ষুষ দৃশ্য সংযোগ বিচ্ছিন্ন করা এড়িয়ে চলুন
একজন দর্শক যে কীবোর্ড দিয়ে আপনার সাইটে ট্যাব করছে সে HTML নথিতে বিষয়বস্তুর ক্রম অনুসরণ করবে। ফ্লেক্সবক্স এবং গ্রিডের মতো আধুনিক লেআউট পদ্ধতি ব্যবহার করার সময়, ভিজ্যুয়াল রেন্ডারিং সোর্স অর্ডারের সাথে মেলে না। এটি কীবোর্ড ব্যবহার করে ঘুরে বেড়ানোর জন্য পৃষ্ঠার চারপাশে বিরক্তিকর লাফ দিতে পারে।
বিষয়বস্তুর মাধ্যমে ট্যাব করে প্রতিটি ব্রেকপয়েন্টে আপনার নকশা পরীক্ষা করা নিশ্চিত করুন, পৃষ্ঠার মাধ্যমে প্রবাহ কি এখনও অর্থপূর্ণ?
উৎস এবং ভিজ্যুয়াল ডিসপ্লে সংযোগ বিচ্ছিন্ন সম্পর্কে আরও পড়ুন।
স্থানিক সংকেত সঙ্গে যত্ন নিন
মাইক্রোকপি লেখার সময় পৃষ্ঠায় একটি উপাদানের অবস্থান নির্দেশ করে এমন ভাষা ব্যবহার করা এড়িয়ে চলুন। উদাহরণস্বরূপ, যখন নেভিগেশনটি স্ক্রিনের শীর্ষে থাকে তখন মোবাইল সংস্করণে "আপনার বাম দিকে" নেভিগেশন উল্লেখ করার কোন মানে হয় না৷
টাচস্ক্রিন ডিভাইসগুলিতে ট্যাপ লক্ষ্যগুলি যথেষ্ট বড় তা নিশ্চিত করুন৷
টাচস্ক্রিন ডিভাইসগুলিতে নিশ্চিত করুন যে আপনার ট্যাপ লক্ষ্যগুলি যথেষ্ট বড় যাতে অন্য লিঙ্কগুলিকে আঘাত না করে সক্রিয় করা সহজ হয়৷ যেকোনও ট্যাপযোগ্য উপাদানের জন্য একটি ভাল মাপ হল 48px, ট্যাপ টার্গেট সম্পর্কে আরও নির্দেশিকা পড়ুন।