আমরা জানি যে সর্বোত্তম মাল্টি-ডিভাইস অভিজ্ঞতা প্রদানের জন্য প্রতিক্রিয়াশীলভাবে ডিজাইন করা একটি ভালো ধারণা, তবে প্রতিক্রিয়াশীল ডিজাইন অ্যাক্সেসিবিলিটির জন্যও একটি লাভ বয়ে আনে।
Udacity এর মতো একটি সাইট বিবেচনা করুন:
একজন কম দৃষ্টিশক্তি সম্পন্ন ব্যবহারকারী, যার ছোট অক্ষর পড়তে সমস্যা হয়, তিনি পৃষ্ঠাটি জুম করতে পারেন, সম্ভবত ৪০০% পর্যন্ত। যেহেতু সাইটটি প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করে, তাই ইন্টারফেসটি "ছোট ভিউপোর্ট" (আসলে বৃহত্তর পৃষ্ঠার জন্য) এর জন্য নিজেকে পুনর্বিন্যাস করে, যা ডেস্কটপ ব্যবহারকারীদের জন্য দুর্দান্ত যাদের স্ক্রিন ম্যাগনিফিকেশন প্রয়োজন এবং মোবাইল স্ক্রিন রিডার ব্যবহারকারীদের জন্যও দুর্দান্ত। এটি উভয়ের জন্যই লাভজনক। এখানে একই পৃষ্ঠাটি ৪০০% পর্যন্ত ম্যাগনিফাই করা হয়েছে:
আসলে, শুধুমাত্র প্রতিক্রিয়াশীলভাবে ডিজাইন করার মাধ্যমে, আমরা 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 সেট করে। এটি করা এড়িয়ে চলুন এবং প্রয়োজনে আপনার ব্যবহারকারীদের জুম করতে দিন।
নমনীয়তার সাথে ডিজাইন করুন
নির্দিষ্ট স্ক্রিনের আকার লক্ষ্য করা এড়িয়ে চলুন এবং পরিবর্তে একটি নমনীয় গ্রিড ব্যবহার করুন, যখন বিষয়বস্তু নির্দেশ করে তখন লেআউটে পরিবর্তন করুন। যেমনটি আমরা Udacity উদাহরণে দেখেছি, এই পদ্ধতিটি নিশ্চিত করে যে ডিজাইনটি স্থান হ্রাস পেয়েছে তা ছোট স্ক্রিনের কারণে হোক বা উচ্চ জুম স্তরের কারণে হোক।
এই কৌশলগুলি সম্পর্কে আরও পড়ুন রেসপন্সিভ ওয়েব ডিজাইনের মূল বিষয়গুলিতে ।
টেক্সটের জন্য আপেক্ষিক একক ব্যবহার করুন
আপনার নমনীয় গ্রিড থেকে সর্বোত্তম সুবিধা পেতে পিক্সেল মানের পরিবর্তে টেক্সট সাইজের মতো জিনিসের জন্য em বা rem এর মতো আপেক্ষিক ইউনিট ব্যবহার করুন। কিছু ব্রাউজার শুধুমাত্র ব্যবহারকারীর পছন্দ অনুসারে টেক্সটের আকার পরিবর্তন সমর্থন করে এবং আপনি যদি টেক্সটের জন্য পিক্সেল মান ব্যবহার করেন, তাহলে এই সেটিং আপনার কপিকে প্রভাবিত করে না। তবে, যদি আপনি সারা বিশ্বে আপেক্ষিক ইউনিট ব্যবহার করে থাকেন, তাহলে সাইটটি ব্যবহারকারীর পছন্দ প্রতিফলিত করার জন্য আপডেট কপি করে।
এটি ব্যবহারকারীর জুম করার সাথে সাথে পুরো সাইটটিকে রিফ্লো করতে সক্ষম করে, যা আপনার সাইটটি ব্যবহার করার জন্য প্রয়োজনীয় পড়ার অভিজ্ঞতা তৈরি করে।
উৎস ক্রম থেকে ভিজ্যুয়াল ভিউ সংযোগ বিচ্ছিন্ন করা এড়িয়ে চলুন
আপনার সাইটে ট্যাব করা কীবোর্ড ব্যবহারকারীরা আপনার HTML ডকুমেন্টের কন্টেন্টের ক্রম অনুসরণ করেন। Flexbox এবং Grid এর মতো লেআউট পদ্ধতি ব্যবহার করার সময়, আপনি উপাদানগুলির ভিজ্যুয়াল ক্রম পরিবর্তন করতে পারেন, যার ফলে উৎস ক্রম অমিল হতে পারে। এর ফলে ব্যবহারকারী প্রতিটি ট্যাব নিয়ে পৃষ্ঠায় ঝাঁপিয়ে পড়তে পারেন।
প্রতিটি ব্রেকপয়েন্টে কন্টেন্টটি ভালো করে দেখে আপনার নকশা পরীক্ষা করুন। নিজেকে জিজ্ঞাসা করুন, "পৃষ্ঠার মধ্য দিয়ে যাওয়া প্রবাহ কি এখনও যুক্তিসঙ্গত?"
উৎস এবং ভিজ্যুয়াল ডিসপ্লের মধ্যে সংযোগ বিচ্ছিন্নতা সম্পর্কে আরও পড়ুন।
স্থানিক সূত্রের ব্যাপারে সতর্ক থাকুন
মাইক্রোকপি লেখার সময়, পৃষ্ঠায় কোনও উপাদানের অবস্থান নির্দেশ করে এমন ভাষা ব্যবহার করা এড়িয়ে চলুন। দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের ক্ষেত্রে, তাদের সেই ভাগ করা প্রেক্ষাপট নাও থাকতে পারে, এবং সঠিক উপাদানের অনুলিপি সনাক্তকরণের মাধ্যমে এটি অনুসন্ধানযোগ্য করে তোলা আরও ভালভাবে উপকৃত হবে।
এটি সকল ব্যবহারকারীর জন্যও সহায়ক, কারণ মোবাইল সংস্করণে নেভিগেশনকে "আপনার বামে" বলা অর্থহীন হতে পারে, যেখানে নেভিগেশন অন্য কোনও স্থানে স্থানান্তরিত হতে পারে।
টাচস্ক্রিন ডিভাইসে ট্যাপ টার্গেটগুলি যথেষ্ট বড় কিনা তা নিশ্চিত করুন
টাচস্ক্রিন ডিভাইসগুলিতে নিশ্চিত করুন যে আপনার ট্যাপ টার্গেটগুলি যথেষ্ট বড় যাতে অন্য লিঙ্কগুলিতে আঘাত না করেই সেগুলি সক্রিয় করা সহজ হয়। যেকোনো ট্যাপযোগ্য উপাদানের জন্য একটি ভাল আকার হল 48px, ট্যাপ টার্গেট সম্পর্কে আরও নির্দেশিকা পড়ুন।