মোবাইল-ফার্স্ট ডিজাইন কেন জরুরি
বেশিরভাগ ওয়েবসাইট এখনো বানানো হয় বড় কম্পিউটার স্ক্রিনে, বড় স্ক্রিনের জন্য। তারপর শেষ মুহূর্তে কেউ জিজ্ঞেস করে, "মোবাইলে কেমন দেখায়?" তখন দেখা যায় মেনু ভেঙে গেছে, লেখা পড়া যাচ্ছে না, বাটন আঙুলের তুলনায় ছোট, আর টেবিল ডানদিকে স্ক্রিনের বাইরে চলে গেছে।
অথচ আমাদের দেশে অনেক ওয়েবসাইটের বেশিরভাগ ভিজিটর আসেন মোবাইল থেকে।
মোবাইল-ফার্স্ট মানে কী
ডিজাইন শুরু করুন সবচেয়ে ছোট স্ক্রিন দিয়ে। তারপর বড় স্ক্রিনে জায়গা বেশি পেলে বাড়তি জিনিস যোগ করুন। উল্টোটা (বড় থেকে ছোট) করলে প্রায় সবসময় জিনিস "কাটছাঁট" করতে হয়, আর গুরুত্বপূর্ণ কিছু হারিয়ে যায়।
ছোট স্ক্রিন অগ্রাধিকার ঠিক করতে বাধ্য করে
ফোনে জায়গা কম। তাই প্রশ্ন করতে হয়: এই পাতায় আসল কাজটা কী? ব্যবহারকারী কী চান? বাকি সব পরে। এটা আসলে ভালো ডিজাইনের অনুশীলন, যার সুফল বড় স্ক্রিনেও পাওয়া যায়।
CSS এ মোবাইল-ফার্স্ট
প্রথমে মোবাইলের জন্য সাধারণ স্টাইল, তারপর বড় স্ক্রিনের জন্য min-width মিডিয়া কোয়েরি:
.products {
display: grid;
grid-template-columns: 1fr; /* মোবাইলে এক কলাম */
gap: 16px;
padding: 16px;
}
@media (min-width: 640px) {
.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.products { grid-template-columns: repeat(4, 1fr); }
}আর HTML এ এই লাইনটা অবশ্যই রাখুন, না হলে মোবাইল ব্রাউজার পাতাকে ছোট করে দেখাবে:
<meta name="viewport" content="width=device-width, initial-scale=1">মোবাইলের জন্য বিশেষ খেয়াল
- আঙুলের মাপের বাটন: কমপক্ষে প্রায় ৪৪ পিক্সেল উচ্চতা, আর বাটনগুলোর মাঝে জায়গা।
- পড়ার মতো লেখা: মূল লেখা অন্তত ১৬ পিক্সেল।
- আনুভূমিক স্ক্রল না: পুরো পাতা কখনো পাশে স্ক্রল হওয়া উচিত না।
- সঠিক কিবোর্ড: ফোন নম্বরে
type="tel", ইমেইলেtype="email"। ব্যবহারকারীর কাজ অর্ধেক সহজ হয়। - হালকা পাতা: অনেকে সীমিত ডেটা প্যাকেজ ব্যবহার করেন। বিশাল ছবি আর অপ্রয়োজনীয় স্ক্রিপ্ট মানে তাদের টাকা খরচ।
- গুরুত্বপূর্ণ কাজ আঙুলের নাগালে: স্ক্রিনের নিচের অংশ বুড়ো আঙুলে সহজে পৌঁছায়।
ছবি হালকা রাখুন
<img src="product-800.webp"
srcset="product-400.webp 400w, product-800.webp 800w"
sizes="(max-width: 640px) 100vw, 25vw"
loading="lazy" alt="লাল সুতির শাড়ি">ব্রাউজার নিজেই স্ক্রিনের মাপ অনুযায়ী ছোট বা বড় ছবি বেছে নেবে, আর পাতার নিচের ছবি তখনই লোড হবে যখন দরকার।
পরীক্ষা করুন আসল ফোনে
ব্রাউজারের ডেভেলপার টুলে মোবাইল ভিউ কাজের, কিন্তু যথেষ্ট না। একটা পুরনো, সস্তা অ্যান্ড্রয়েড ফোনে, ধীর ইন্টারনেটে সাইটটা খুলে দেখুন। সেখানেই আসল সমস্যাগুলো ধরা পড়ে, আর সেখানেই আপনার অনেক ব্যবহারকারী আছেন।
শেষ কথা
মোবাইল-ফার্স্ট কোনো ট্রেন্ড না; এটা বাস্তবতার স্বীকৃতি। আমাদের দেশে অনেকের কাছে ইন্টারনেট মানেই ফোন। যে সাইট ফোনে ভালো চলে না, সে আসলে তার বেশিরভাগ ব্যবহারকারীকে দরজা থেকেই ফিরিয়ে দিচ্ছে।