Responsive design মানে একটা design যা ভিন্ন screen আকারের সাথে খাপ খায়, প্রতিটা device-এর জন্য আলাদা design বানানোর বদলে। Mobile-first এটার কাছে যাওয়ার একটা নির্দিষ্ট উপায়: সবচেয়ে ছোট, সবচেয়ে সীমাবদ্ধ screen প্রথমে design করা, তারপর প্রসারিত করা।
| Breakpoint | সাধারণ প্রস্থ | সাধারণ device |
|---|---|---|
| Mobile | < 600px | ফোন |
| Tablet | 600–1024px | Tablet, ছোট laptop |
| Desktop | 1024px+ | Laptop, desktop monitor |
সবচেয়ে ছোট screen প্রথমে design করা শুরু থেকেই আসল priority নির্ধারণ করতে বাধ্য করে — "সবকিছু" ফিট করার জায়গা নেই, তাই শুধু যা আসলে গুরুত্বপূর্ণ তাই টিকে থাকে। Desktop-first design করে তারপর mobile-এ গুঁজে দেওয়ার চেষ্টা একটা এলোমেলো, আপোসকৃত mobile অভিজ্ঞতা তৈরি করার ঝোঁক রাখে, কারণ কিছুই কাটা হয়নি, শুধু সংকুচিত।
| Element | সাধারণত কীভাবে খাপ খায় |
|---|---|
| Navigation | Desktop-এ পূর্ণ menu bar প্রায়ই mobile-এ একটা hamburger menu-তে সংকুচিত হয় |
| Grid column | একটা 3-4 column desktop layout প্রায়ই mobile-এ একটা একক column হয়ে যায় (আগের grid systems lesson দেখুন) |
| Touch target | Touchscreen-এ button আর tap-করা-যায় এমন এলাকা বড় হতে হবে — একটা mouse cursor একটা আঙুলের ডগার চেয়ে অনেক বেশি নিখুঁত |
| Image | প্রায়ই প্রতি breakpoint-এ শুধু সমানভাবে scale না, ভিন্নভাবে crop বা resize করা |
যখন সম্ভব আসল জিনিসে পরীক্ষা করুন
একটা আসল ফোনে design আর পরীক্ষা করুন, শুধু একটা desktop-এ resize করা browser window না — আসল touch target, আসল বুড়ো আঙুলের নাগাল, আর mobile data-তে আসল load time একটা desktop preview কখনো প্রকাশ করবে না এমন সমস্যা প্রকাশ করে।