ওয়েবসাইটকে মোবাইল-রেসপনসিভ কীভাবে বানাবেন

ওয়েবসাইটকে মোবাইল-রেসপনসিভ করতে একটি ভিউপোর্ট মেটা ট্যাগ যোগ করুন, মোবাইল-ফার্স্ট পদ্ধতিতে নমনীয় প্রস্থ দিয়ে লেআউট বানান, এবং বড় স্ক্রিনে লেআউট সাজাতে CSS ব্রেকপয়েন্ট ব্যবহার করুন — কলাম ওপর-নিচে সাজানো, মেনু গুটিয়ে ফেলা, ছবি মানানো। তারপর প্রতিটি পেজ ফোন প্রস্থে দেখুন: পাশে স্ক্রল হচ্ছে কি না, লেখা খুব ছোট কি না, বা বাটনে আঙুল দিয়ে ট্যাপ করা কঠিন কি না। AI দিয়ে বানানো সাইটে একটি স্পষ্ট প্রম্পট ও ফোন-আকারের প্রিভিউতে একবার যাচাই করলেই বেশিরভাগ সমস্যা ঠিক হয়ে যায়।

রেসপনসিভ ডিজাইন আসলে কী

একটি রেসপনসিভ সাইটে একই পেজ ও ইউআরএলের সেট থাকে, যা স্ক্রিনের সঙ্গে মানিয়ে নেয়। আলাদা "m." সাইটের বদলে কিছু প্রস্থে CSS লেআউট বদলায়। এর মূল উপাদানগুলো:

• ভিউপোর্ট মেটা ট্যাগ মোবাইল ব্রাউজারকে ডিভাইসের আসল প্রস্থ ব্যবহার করতে বলে।
• ফ্লুইড লেআউট স্থির পিক্সেল প্রস্থের বদলে শতাংশ, flexbox ও grid ব্যবহার করে।
• মিডিয়া কোয়েরি (বা Tailwind-এর md:-এর মতো ফ্রেমওয়ার্ক ক্লাস) একটি নির্দিষ্ট প্রস্থের ওপরে লেআউট বদলায়।
• নমনীয় মিডিয়া — ছবি ও ভিডিও যা নিজের কন্টেইনারে মানিয়ে নেয়।

এটি গুরুত্বপূর্ণ, কারণ আপনার অনেক ট্রাফিক ফোন থেকে আসতে পারে, এবং Google আপনার পেজের মোবাইল সংস্করণ ইনডেক্স করে। কনটেন্ট বা লিংক যদি শুধু ডেস্কটপে থাকে, Google-ও সেগুলো দেখতে পাবে না।

বিকল্প ও ট্রেড-অফ

মোবাইল-ফার্স্ট সাধারণত সহজ: একটি কলাম সবচেয়ে সহজ লেআউট, আর জায়গা বাড়লে কলাম যোগ করা, কমাতে থাকার চেয়ে কম কাজ।

যেখানে সাধারণত ভেঙে যায়

ভিউপোর্ট ট্যাগ

ফোনে পেজ যদি একটি ছোট ডেস্কটপ সাইটের মতো দেখায়, তাহলে ভিউপোর্ট ট্যাগ নেই:

<meta name="viewport" content="width=device-width, initial-scale=1">

maximum-scale=1 বা user-scalable=no যোগ করবেন না। পিঞ্চ-জুম বন্ধ করলে দৃষ্টিপ্রতিবন্ধী মানুষদের জন্য সাইট ব্যবহার কঠিন হয়।

স্থির প্রস্থ ও পাশে স্ক্রল

সবচেয়ে সাধারণ রেসপনসিভ বাগ হলো স্ক্রিনের চেয়ে চওড়া কিছু: একটি স্থির width: 1200px কন্টেইনার, একটি চওড়া টেবিল, একটি লম্বা URL বা কোড ব্লক, max-width: 100% ছাড়া একটি ছবি। তখন পুরো পেজ পাশে স্ক্রল করে। width-এর বদলে max-width ব্যবহার করুন, লেখাকে মোড়ানোর অনুমতি দিন, আর চওড়া জিনিসগুলোর নিজস্ব স্ক্রল এলাকা দিন।

নেভিগেশন

ডেস্কটপের পাঁচটি মেনু লিংক সাধারণত ফোনে ধরে না। সাধারণ সমাধান হলো একটি মেনু বাটন যা একটি প্যানেল খোলে। সবচেয়ে গুরুত্বপূর্ণ দুই-তিনটি কাজ দৃশ্যমান রাখুন — "বুক", "কার্ট", "সাইন ইন" — এবং নিশ্চিত করুন মেনু কীবোর্ডে কাজ করে ও সহজে বন্ধ হয়।

লেখা ও ট্যাপ টার্গেট

• ফোনে মূল লেখার ন্যূনতম আকার প্রায় ১৬ px রাখা যুক্তিসঙ্গত। ছোট লেখার ইনপুটে iPhone ট্যাপ করলে জুম করে।
• বাটন ও লিংক সহজে ট্যাপযোগ্য করুন। WCAG 2.2 AA-এর ন্যূনতম মান ২৪ বাই ২৪ CSS পিক্সেল (বা যথেষ্ট ফাঁক); আঙুলের জন্য প্রায় ৪৪ পিক্সেল বেশি আরামদায়ক।
• পাশাপাশি লিংকের মধ্যে ফাঁক রাখুন, যাতে মানুষ ভুল লিংকে ট্যাপ না করে।

টেবিল ও ডেটা

চওড়া টেবিল একটি রেসপনসিভ অ্যাপের সবচেয়ে কঠিন অংশ। পছন্দের ক্রমে বিকল্পগুলো: ফোনে কম কলাম দেখানো, প্রতিটি সারিকে একটি কার্ড বানানো, অথবা টেবিলটিকে অনুভূমিকভাবে স্ক্রলযোগ্য কন্টেইনারে রাখা যেখানে প্রথম কলাম স্থির থাকে। মানুষের কী তুলনা করতে হবে তার ওপর ভিত্তি করে বাছুন।

ছবি ও মিডিয়া

max-width: 100% ও height: auto ব্যবহার করুন, srcset দিয়ে ছোট স্ক্রিনে ছোট ফাইল দিন, এবং লেআউট লাফানো এড়াতে প্রস্থ ও উচ্চতা সেট করুন। এমবেড করা ভিডিও ও ম্যাপে একটি রেসপনসিভ র‍্যাপার লাগে, যাতে আকৃতির অনুপাত ঠিক থাকে। ছোট ছবি পেজকেও দ্রুত করে — দেখুন ওয়েবসাইট কীভাবে দ্রুত করবেন।

ফর্ম

লেবেল ফিল্ডের ওপরে রাখুন, ফিল্ড পূর্ণ প্রস্থে করুন, এবং সঠিক ইনপুট টাইপ ব্যবহার করুন (type="email", type="tel", inputmode="numeric"), যাতে ফোন সঠিক কীবোর্ড দেখায়। সাবমিট বাটনটি এমন জায়গায় রাখুন যেখানে আঙুল পৌঁছায়, এবং কীবোর্ড খুললেও যেন দৃশ্যমান থাকে।

শুধু হোভারে কাজ করা ইন্টারঅ্যাকশন

ফোনে হোভার নেই। শুধু হোভারে দেখানো টুলটিপ, ড্রপডাউন বা প্রিভিউ স্পর্শ-ব্যবহারকারীদের কাছে অদৃশ্য। সেগুলো ট্যাপেও কাজ করুন।

কাজ করে এমন প্রম্পট

নতুন বানানোর জন্য শুরুতেই বলুন:

এটি মোবাইল-ফার্স্ট বানান। ফোনে এক কলাম, ট্যাবলেট প্রস্থ থেকে দুই কলাম, ডেস্কটপে পূর্ণ লেআউট। ৩২০ px প্রস্থে কোনো অনুভূমিক স্ক্রল নয়, মূল লেখা অন্তত ১৬ px, ট্যাপ টার্গেট অন্তত ৪৪ px, ছোট স্ক্রিনে একটি মেনু বাটন, আর ফোনে টেবিল কার্ডে রূপান্তরিত হবে।

বিদ্যমান পেজের জন্য যা দেখছেন তা বর্ণনা করুন:

ফোনে /pricing পেজ পাশে স্ক্রল করে এবং তিনটি প্ল্যান কার্ড পাশাপাশি চাপা হয়ে থাকে। ৭৬৮ px-এর নিচে কার্ড উপর-নিচে সাজান, তুলনা টেবিলটি নিজের কন্টেইনারে অনুভূমিকভাবে স্ক্রল হোক এবং ফিচার কলামটি স্থির থাকুক, আর ডেস্কটপ লেআউট অপরিবর্তিত রাখুন।

প্রতিটি পেজ ৩৭৫ px প্রস্থে যাচাই করুন। যা উপচে পড়ছে, ওভারল্যাপ করছে, ১৬ px-এর চেয়ে ছোট লেখা বা ৪৪ px-এর চেয়ে ছোট ট্যাপ টার্গেট, অথবা যা শুধু হোভারে কাজ করে, তার তালিকা করুন, তারপর প্রতিটি ঠিক করুন।

ধাপে ধাপে

1. ভিউপোর্ট ট্যাগ পেজের হেডে আছে কি না নিশ্চিত করুন।
2. ৩২০–৩৭৫ px প্রস্থে পরীক্ষা করুন ব্রাউজারের ডিভাইস মোডে বা ফোন-আকারের প্রিভিউতে। প্রতিটি পেজ ওপর থেকে নিচ পর্যন্ত স্ক্রল করুন।
3. প্রথমে অনুভূমিক স্ক্রল ঠিক করুন। যে উপাদানটি খুব চওড়া তা খুঁজুন; সেটি না গেলে বাকি কিছু বিচার করা কঠিন।
4. নেভিগেশন ঠিক করুন: মেনু বাটন, মূল কাজগুলো দৃশ্যমান।
5. প্রতিটি মূল প্রবাহে লেখা, ট্যাপ টার্গেট ও ফর্ম পরীক্ষা করুন — সাইন আপ, সার্চ, চেকআউট, যোগাযোগ।
6. টেবিল ও মিডিয়া সামলান: কার্ড বা স্ক্রল কন্টেইনার, রেসপনসিভ ছবি ও এমবেড।
7. মাঝের আকারগুলো যাচাই করুন। ফোন থেকে ডেস্কটপ পর্যন্ত প্রস্থ ধীরে টেনে দেখুন; ট্যাবলেট প্রস্থের আশপাশে লেআউট প্রায়ই ভাঙে।
8. একটি বাস্তব ফোনে পরীক্ষা করুন। এমুলেটর অনেক কিছু ধরতে পারে না, যেমন অন-স্ক্রিন কীবোর্ড বাটন ঢেকে দেওয়া, নচ, এবং মোবাইল ডেটায় সাইট কতটা দ্রুত মনে হয়।

সাধারণ ভুল

• একটিমাত্র ফোন-আকারে পরীক্ষা। একটি ছোট ফোন, একটি বড় ফোন ও একটি ট্যাবলেট দেখুন।
• মোবাইলে কনটেন্ট লুকানো যাতে সেটি ফিট হয়। Google মোবাইল সংস্করণ ইনডেক্স করে, আর ফোনের ব্যবহারকারীরাও একই তথ্য চান।
• ভিউপোর্ট ট্যাগে জুম বন্ধ করা।
• ফোনে ডেস্কটপ-আকারের ছবি, যা লোড সময় ও ডেটা খরচ বাড়ায়।
• ফিক্সড-পজিশন উপাদানের স্তূপ: একটি স্টিকি হেডার, একটি কুকি ব্যানার ও একটি চ্যাট বাবল মিলে ফোনের অর্ধেক স্ক্রিন ঢেকে ফেলতে পারে।
• বন্ধ করা যায় না এমন পপ-আপ ছোট স্ক্রিনে, কারণ বন্ধ করার বাটনটি স্ক্রিনের বাইরে।

মোবাইল চেকলিস্ট

• ভিউপোর্ট মেটা ট্যাগ আছে; জুম বন্ধ করা নেই
• কোনো পেজে ৩২০ px-এ অনুভূমিক স্ক্রল নেই
• মূল লেখা প্রায় ১৬ px; ইনপুট জুম ট্রিগার করে না
• ট্যাপ টার্গেট যথেষ্ট বড় ও ফাঁকযুক্ত
• মেনু ফোনে ও কীবোর্ডে কাজ করে
• টেবিল ফোনে পড়া যায় (কার্ড, কম কলাম বা স্ক্রল কন্টেইনার)
• ছবি ও এমবেড মানিয়ে নেয়; সঠিক আকারের ফাইল দেওয়া হয়
• ফর্মে সঠিক ইনপুট টাইপ; সাবমিট বাটনে পৌঁছানো যায়
• গুরুত্বপূর্ণ কিছু হোভারের ওপর নির্ভর করে না
• অন্তত একটি বাস্তব ফোনে পরীক্ষা করা হয়েছে

রেসপনসিভ লেআউট অ্যাক্সেসিবিলিটির অংশও: WCAG চায় কনটেন্ট ৩২০ px প্রস্থে ও ২০০% জুমে কাজ করুক। যদি এমন অ্যাপ বানান যা মানুষ প্রতিদিন ফোনে ব্যবহার করবে, কীভাবে মোবাইল-ফ্রেন্ডলি ওয়েব অ্যাপ বানাবেন আরও গভীরে যায়, যার মধ্যে ইনস্টলযোগ্য PWA-ও আছে।

Mythex-এ রেসপনসিভ ডিজাইন

Mythex রেসপনসিভ ওয়েব অ্যাপ বানায়, আর Pro-তে সেগুলো Android ও iPhone অ্যাপ হিসেবে মুড়ে দিতে পারে। ওয়ার্কস্পেসে Preview-এর ওপরের ফোন আইকনে ক্লিক করুন (Switch to Mobile) আপনার অ্যাপ ফোন-আকারের ফ্রেমে দেখতে, এবং ফ্রেমের কিনারা টেনে অন্য প্রস্থ চেষ্টা করুন (Preview and Code)। ছোট স্ক্রিনের লেআউট ঠিক করার একটি শুরুর প্রম্পট ডকসে আছে mobile-responsive প্রম্পট-এ। একটি বাস্তব ফোনেও যাচাই করুন — প্রকাশিত ইউআরএল খুলুন, অথবা একটি প্রিভিউ লিংক শেয়ার করে আপনার ফোনে খুলুন।

প্রশ্নোত্তর