1. লেআউট চয়েস করার আগে পৃষ্ঠাটির কাজ নির্ধারণ করুন
সেইসব পৃষ্ঠাগুলো দিয়ে শুরু করুন যেগুলো গ্রাহক বা ব্যবসায়িক কাজ বহন করে: সার্ভিস পেজ, প্রোডাক্ট পেজ, লিড ফর্ম, বুকিং, অ্যাকাউন্ট প্রবেশ, কার্ট এবং হেল্প। প্রতিটির জন্য একটি সম্পন্নকারী বিবৃতি লিখুন, যেমন: “একজন প্রথমবারের ভিজিটর এই সার্ভিসটি বুঝতে পারবে, প্রাসঙ্গিক প্রমাণ দেখবে এবং কল অনুরোধ করতে পারবে।” যদি পৃষ্ঠার একাধিক কাজ থাকে, তাহলে সিদ্ধান্ত নিন কোনটি প্রথম দেখানো হবে।
এর বিষয়বস্তুকে অপরিহার্য, সহায়ক, বা ঐচ্ছিক হিসেবে তালিকাভুক্ত করুন। অপরিহার্য মানে সংক্ষিপ্ত নয়; ভিজিটরকে মূল্য, যোগ্যতা, ডেলিভারি বিস্তারিত, বা তুলনা তথ্যের প্রয়োজন হতে পারে। সেই উপাদানগুলিকে সংকীর্ণ লেআউটে একটি পরিষ্কার রূট দিন। Google পরামর্শ দেয় মোবাইল ও ডেস্কটপে সমমানের প্রধান কনটেন্ট থাকতে পারে, তবে ভিন্ন উপস্থাপনা যেমন ট্যাব বা অ্যাকর্ডিয়ন অনুমোদিত।
একটি সংকীর্ণ প্রস্থে, একজন সহকর্মী বলতে পারা উচিত পৃষ্ঠা কী অফার করে, এটা কার সহায়তা করে, এবং পরবর্তী অর্থবহ ক্রিয়া কী।
2. সংকীর্ণ বেসলাইনকে সম্পূর্ণ করুন
ডেস্কটপ লেআউটকে ছোট করার বদলে একটি কার্যকর এক-কলাম পথ দিয়ে শুরু করুন। ফ্লেক্সিবল কনটেইনার ব্যবহার করুন, টেক্সটকে র্যাপ হতে দিন, এবং এমন একটি viewport সেটিং রাখুন যা ব্রাউজারকে ডিভাইস প্রস্থ অনুযায়ী লেআউট সাইজ করতে দেয়। জুমিং এড়িয়ে দেবেন না। মেনু, নোটিস, ইমেজ, এমবেড, এবং ফর্ম এররগুলো ভিউপোর্টের ভিতরে থাকে কিনা পরীক্ষা করুন; অনিচ্ছাকৃত পেজ-লেভেল অনুভূমিক স্ক্রল সাধারণত একটি ত্রুটি।
সাধারণ পাঠ ও কাজের কনটেন্টের জন্য 320 CSS পিক্সেলকে একটি চ্যালেঞ্জিং রিফ্লো চেক হিসেবে ব্যবহার করুন। WCAG 2.2 সেই প্রস্থে উল্লম্ব কনটেন্ট উপস্থাপন করার বিষয়ে বলে যাতে তথ্য বা কার্যকারিতা হারায় না বা দুই-মাত্রিক স্ক্রলিং দরকার না হয়। একটি মানচিত্র, চার্ট, বা ডেটা টেবিল নিজস্ব স্ক্রল অঞ্চল চাইতে পারে, কিন্তু সেটি চারদিকে ফাঁক করেই পার্শ্ববর্তী পৃষ্ঠাটিকে অনুভূমিকভাবে স্ক্রল করানো যুক্তি দেয় না।
ইমেজগুলোকে তাদের কনটেইনারে ফিট করান এবং এমন মাত্রা দিন যাতে ব্রাউজার লোড হওয়ার আগে জায়গা সংরক্ষণ করতে পারে।
3. বেসলাইনকে ভঙ্গুর না করে উন্নতি যোগ করুন
প্রোগ্রেসিভ এনহ্যান্সমেন্ট মানে অপরিহার্য কনটেন্ট ও কার্যকারিতা বেসলাইন হিসেবে কাজ করবে, আর সক্ষম ব্রাউজার ও বড় স্ক্রিনে অতিরিক্ত ফিচার যোগ করা হবে। ঠিকানা, প্রোডাক্ট বিস্তারিত, ফর্ম লেবেল, মূল্য ব্যাখ্যা, ও সাবমিট পাথ অ্যানিমেশন, হোভার, বা পরে লোড হওয়া স্ক্রিপ্টের উপর নির্ভর করা উচিত নয়। একটি চওড়া লেআউট তুলনা প্যানেল, পার্সিস্টেন্ট ন্যাভিগেশন, বা সমৃদ্ধ ফিল্টারিং যোগ করতে পারে, তবে তা বেসলাইনকে অসম্পূর্ণ করে তুলবে না।
ইমপ্লিমেন্টারকে বলুন যে একটি ব্রেকপয়েন্ট যোগ করতে যখন কনটেন্ট সংকীর্ণ বা অপচয়শীল হয়ে পড়ে, কোন নামকৃত ডিভাইসের উপস্থিতির জন্য নয়। একটি ব্রেকপয়েন্ট কেবল সেই জায়গা যেখানে লেআউট নিয়ম পরিবর্তিত হয়। সহায়ক টেক্সট, নীতিমালা শর্ত, রিভিউ, মেটাডেটা বা গুরুত্বপূর্ণ স্ট্রাকচার্ড বিবরণ নীরবে অপসারণ করতে সংকীর্ণ লেআউট ব্যবহার করবেন না।
প্রথমে একটি বেসিক গ্যালারি ইমেজ এবং বর্ণনা দেখান, তারপর তাদের স্ক্রিপ্ট উপলব্ধ হলে জুম বা সোয়াইপ নিয়ন্ত্রণ যোগ করুন।
4. টাচ, স্পষ্টতা, এবং পুনরুদ্ধারের জন্য কনট্রোল ডিজাইন করুন
টাচ এরগনোমিক্স বলতে এমনভাবে ডিজাইন করা যাতে হাতকে ধরে—একটি সূক্ষ্ম মাউস পয়েন্টারের বদলে। বাটন, চেকবক্স, ক্লোজ আইকন, সংখ্যার সিলেক্টর, এবং ফর্ম অপশনগুলোকে ভুল ট্যাপ কমাতে যথেষ্ট আকার ও আলাদা রাখুন। আইকনগুলো যদি স্পষ্ট না হয় তাহলে লেবেল দিন। মূল্য, সাবমেনু, ব্যাখ্যা, বা অ্যাকশন দেখানোর একমাত্র উপায় হিসেবে হোভার ব্যবহার করবেন না।
WCAG 2.2-এ Level AA টার্গেট-সাইজ মাপকাঠি অন্তত 24 দ্বারা 24 CSS পিক্সেল(pointer targets) নির্দেশ করে, কিছুমাত্রিক ব্যতিক্রম উল্লেখ করা আছে যেমন স্পেসিং এবং ইনলাইন লিংক। এটিকে একটি ন্যূনতম রেফারেন্স হিসেবে বিবেচনা করুন, আরামদায়কতার গ্যারান্টি হিসেবে নয়। সমালোচনামূলক ক্রিয়াগুলো স্পষ্ট লেবেল, পর্যাপ্ত ফাঁক, এবং প্রতিলিপি করতে পারা কনফার্মেশন ধাপ পাওয়া উচিত। উচ্চ-ঝুঁকিপূর্ণ যাত্রা বা আনুষ্ঠানিক অনুপালনের দাবি হলে যোগ্য অ্যাক্সেসিবিলিটি রিভিউ চান।
লেবেল দৃশ্যমান রাখুন, ব্যবহারযোগ্য ভ্যালিডেশন ফিডব্যাক দেখান, এবং এররে ভরা হয়ে গেলে ভর্তিকৃত মানগুলো ধরে রাখুন।
5. মিডিয়া এবং এমবেডকে ভিজিটর যাত্রার অংশ হিসেবে বিবেচনা করুন
প্রতিটি ইমেজ জানুন কি তা ইনফরমেটিভ, পার্সুয়েসিভ, না ডেকোরেটিভ। একটি ইনফরমেটিভ ইমেজের উপযুক্ত টেক্সট বিকল্প এবং সংকীর্ণ-লেআউট ক্রপ থাকা দরকার যাতে প্রয়োজনীয় বিবরণ বজায় থাকে। রেস্পনসিভ ইমেজ অপশন ব্রাউজারকে উপযুক্ত রিসোর্স বেছে নিতে দেয় যাতে প্রতিটি ভিজিটর সর্ববৃহৎ ডেস্কটপ অ্যাসেট ডাউনলোড না করে। একটি হিরো ইমেজ বা ভিডিও পৃষ্ঠার উদ্দেশ্য ও প্রধান অ্যাকশনকে আচ্ছন্ন করতে দিইয়েন না।
মানচিত্র, চ্যাট, ভিডিও, পেমেন্ট, শিডিউলিং, সম্মতি, এবং রিভিউ উইজেটগুলোর তালিকা তৈরি করুন। সংকীর্ণ স্ক্রিনে তাদের লোডিং স্টেট, কন্ট্রোল সাইজ, বাউন্ডেড লেআউট, এবং একটি কার্যকর ফলব্যাক রুট পরীক্ষা করুন। পেমেন্ট, পরিচয়, বা নিয়ন্ত্রিত ডেটা ফ্লোতে যোগ্য সিকিউরিটি, প্রাইভেসি, ও কমপ্লায়েন্স রিভিউয়ারদের জড়াতে হবে; ভিজ্যুয়াল টেস্টিং একটি সিকিউরিটি অ্যাসেসমেন্ট নয়।
প্রতিটি এক্সটার্নাল কম্পোনেন্ট, তার মালিক, তার ব্যবসায়িক কার্য, এবং যদি এটি ধীর বা ভাঙে তখন অনুমোদিত ফলব্যাক রেকর্ড করুন।
6. রিলিজের আগে টাস্ক পথগুলো পরীক্ষা করুন এবং মেরামতের পরিকল্পনা করুন
শুরুতেই ব্রাউজারের রেসপন্সিভ মোড ব্যবহার করে সংকীর্ণ, মধ্যম, এবং চওড়া প্রস্থ পরীক্ষা করুন। Chrome Device Mode ভিউপোর্ট, টাচ, অরিয়েন্টেশন, নেটওয়ার্ক, এবং CPU অবস্থা আনুমানিকভাবে অনুকরণ করতে পারে, কিন্তু Chrome এটিকে বাস্তব-ডিভাইস কার্যনির্বাহের তুলনায় আনুমানিক হিসেবে বর্ণনা করে। সম্ভব হলে গুরুত্বপূর্ণ পাথগুলো বাস্তব ফোন এবং প্রাসঙ্গিক ব্রাউজারে সম্পন্ন করুন।
একটি টাস্ক পরীক্ষা করুন, শুধুমাত্র স্ক্রিনশট নয়: ঠান্ডা লোড, নেভিগেশন, ভ্যালিড ও ইনভ্যালিড ফর্ম সাবমিশন, অরিয়েন্টেশন পরিবর্তন, জুম, এবং তৃতীয়-পক্ষ স্ক্রিন থেকে ফিরে আসা। URL, ব্রাউজার বা ডিভাইস, টাস্ক, প্রত্যাশিত ফলাফল, মালিক, এবং রোলব্যাক সিদ্ধান্ত রেকর্ড করুন। বড় টেমপ্লেট, চেকআউট, CMS, বা ডিপেন্ডেন্সি পরিবর্তনের জন্য রিলিজটি স্টেজ করুন এবং পূর্ববর্তী পাথটি পুনরায় স্থাপন করার প্রস্তুতি নিন, যাতে চাপের মধ্যে ছেঁড়ামোচড় improvisation না করতে হয়।
কেবল তখন অনুমোদন দিন যখন ক্রিটিক্যাল টাস্ক কাজ করে, কন্ট্রোলগুলো ব্যবহারযোগ্য, পেজ-লেভেল অনুভূমিক স্ক্রল অনুপস্থিত, এবং মূল ডিপেন্ডেন্সিগুলির ফলব্যাক রয়েছে।