রেসপন্সিভ ডিজাইন — viewport আর মোবাইল-ফার্স্ট ভাবনা

১ · রেসপন্সিভ ডিজাইন কেন — একই পাতা, হাজার রকম পর্দা

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

সমস্যাটা হলো পর্দার মাপ কোনো নির্দিষ্ট সংখ্যা নয়। ছোট ফোন, বড় ফোন, ভাঁজ করা ফোন, ট্যাবলেট, ল্যাপটপ, চওড়া মনিটর, এমনকি টিভি — আর প্রতিটি আবার খাড়া বা আড়াআড়ি ধরা যায়। প্রতিটির জন্য আলাদা পাতা বানানো অসম্ভব। Responsive web design-এর উত্তর: একটিই HTML, আর এমন CSS যা নিয়ম দেয়, মাপ মুখস্থ করে না।

এটি শুধু সুন্দর দেখানোর ব্যাপার নয়। ফোনে পাশে স্ক্রল করতে হলে, লেখা চিমটি দিয়ে বড় করতে হলে, বা বোতাম এত ছোট যে আঙুলে লাগে না — মানুষ পাতা ছেড়ে চলে যান। কম দৃষ্টিশক্তির মানুষ বড় পর্দাতেও লেখা বড় করে পড়েন, আর তখন তাঁর কাছে চওড়া মনিটরও “ছোট পর্দা” হয়ে যায় — সেই গল্প অংশ ৯-এ। আর Google এখন মূলত সাইটের মোবাইল রূপ দেখেই সূচি তৈরি করে (mobile-first indexing), তাই SEO-র জন্যও মোবাইলে ঠিক থাকা জরুরি।

২ · ইতিহাস — নির্দিষ্ট চওড়ার পাতা থেকে রেসপন্সিভ ভাবনা

আজকের নিয়মগুলো কেন এমন, বুঝতে হলে একটু পেছনে তাকাতে হবে। প্রতিটি যুগ আগের যুগের একটি সমস্যা সমাধান করেছে — আর নতুন একটি তৈরিও করেছে। “পরে” চেপে এগোন:

৩ · viewport meta — ফোন কেন পাতাকে 980px ভাবে

পর্ব ১৩-এ দেখেছেন, head-এর দ্বিতীয় লাইনটি প্রায় বাধ্যতামূলক:

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

এবার দেখি রেসপন্সিভ CSS-এর সাথে এর সম্পর্ক। প্রথম iPhone (২০০৭) আসার সময় প্রায় সব সাইট ছিল ডেস্কটপের জন্য। তাই মোবাইল ব্রাউজার ধরে নিত পাতাটি প্রায় 980px চওড়া একটি “কল্পিত জানালায়” সাজানো — একে বলে layout viewport — তারপর পুরো ছবিটা ছোট করে ফোনে বসাত। আজও viewport meta না থাকলে বেশিরভাগ মোবাইল ব্রাউজার এটাই করে। আর media query মাপে ঠিক এই layout viewport — আপনার ফোনের আসল চওড়া নয়। নিচের ধাপগুলোতে একটি ৩৬০ CSS px চওড়া ফোন ধরে দেখুন:

2.cards { display: grid; gap: 1rem; }3@media (min-width: 48em) {   /* 768px */4  .cards { grid-template-columns: repeat(3, 1fr); }5}

এখানে “CSS px” কথাটা খেয়াল করুন। ফোনের পর্দায় হয়তো ১০৮০টি আসল বিন্দু, কিন্তু ব্রাউজার বলে চওড়া 360px — কারণ একটি CSS pixel পর্দার একটি বিন্দু নয়, বরং চোখে মোটামুটি একই আকারে দেখানোর একটি মাপ (পর্ব ২০)। এখানে device pixel ratio 3. রেসপন্সিভ CSS-এর সব সংখ্যা এই CSS px-এ — ফোনের বিজ্ঞাপনের “রেজোলিউশন” দিয়ে breakpoint ভাবলে ভুল হবে।

এই পাতার প্রিভিউ কত চওড়া? — একটি সৎ পরীক্ষা

এই কোর্সের প্রতিটি লাইভ এডিটরের প্রিভিউ আসলে একটি <iframe> — পাতার ভেতরে আরেকটি ছোট জানালা। iframe-এর নিজের viewport থাকে, আর তা iframe-এর বাক্সের সমান চওড়া; viewport meta সেখানে কোনো কাজ করে না। তাই প্রিভিউর ভেতরের @media আপনার পর্দা নয়, প্রিভিউ-জানালার চওড়া দেখে — যা এই পাতার লেখার কলামের সমান। নিজেই মেপে দেখুন:

<style>
  .badge { padding: 12px; font-family: sans-serif; background: #fee2e2; }
  @media (min-width: 30em) { .badge { background: #fef3c7; } }  /* 480px */
  @media (min-width: 48em) { .badge { background: #dcfce7; } }  /* 768px */
</style>
<p class="badge">লাল = 480px-এর কম · হলুদ = 480–767px · সবুজ = 768px বা বেশি</p>
<p id="out">মাপা হচ্ছে…</p>
<script>
  function show() {
    document.getElementById('out').textContent =
      'প্রিভিউ-জানালা: ' + innerWidth + 'px · আপনার পুরো পর্দা: ' + screen.width + 'px';
  }
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    show();
    console.log('innerWidth =', innerWidth, '| 30em:', matchMedia('(min-width: 30em)').matches,
                '| 48em:', matchMedia('(min-width: 48em)').matches);
  })();
  addEventListener('resize', show);
</script>

৪ · Fluid layout — px নয়, অনুপাতে ভাবুন

Marcotte-এর প্রথম উপাদান fluid layout: বাক্সের মাপ নির্দিষ্ট px-এ নয়, পাত্রের অনুপাতে। দর্জির উদাহরণ নিন — “পাঞ্জাবির হাতা ২২ ইঞ্চি” সবার গায়ে লাগে না, কিন্তু “হাতা কাঁধ থেকে কবজি পর্যন্ত” সবার গায়েই মাপমতো। আজ এর জন্য তিনটি প্রধান হাতিয়ার:

Marcotte-এর সময়ে Grid ছিল না, তাই তিনি একটি সূত্র দেন: লক্ষ্য ÷ পাত্র = ফল. 960px নকশায় 300px কলাম হলে 300 ÷ 960 = 31.25%. আজ fr আর gap এই হিসাব ব্রাউজারকেই করতে দেয়। নিচের ডটেড বাক্সটি শুরুতে 360px — একটি ছোট ফোনের মতো। ডান-নিচের কোণ ধরে চওড়া করুন:

.fixed { width: 600px; background: #fee2e2; }
.fluid {
  width: 90%;
  max-width: 30rem;
  margin-inline: auto;
  background: #dcfce7;
}
.cols {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 8px;
}
/* দেখানোর জন্য: কোণ টেনে চওড়া বদলানো যায় */
.frame { resize: horizontal; overflow: auto; width: 360px;
         max-width: 100%; box-sizing: border-box;
         border: 2px dashed #64748b; padding: 8px; font-family: sans-serif; }
.frame div { padding: 8px; margin-block: 6px; border-radius: 6px; }
.cols div { background: #e0f2fe; margin: 0; }

৫ · নমনীয় ছবি — max-width: 100% আর height: auto

দ্বিতীয় উপাদান flexible image. একটি ছবি replaced element — তার নিজের একটি স্বাভাবিক মাপ আছে। 1280px চওড়া ছবি 360px ফোনে রাখলে সে নিজের মাপেই থাকতে চায়, আর পুরো পাতাকে পাশে ঠেলে দেয়। দুই লাইনের সমাধানটি প্রায় প্রতিটি CSS reset-এ থাকে:

img {
  max-width: 100%;   /* পাত্রের চেয়ে বড় হবে না */
  height: auto;      /* চওড়া কমলে উচ্চতাও অনুপাতে কমবে */
  display: block;
}
/* দেখানোর জন্য */
.frame { resize: horizontal; overflow: auto; width: 320px;
         max-width: 100%; box-sizing: border-box;
         border: 2px dashed #64748b; padding: 8px; font-family: sans-serif; }

তাহলে HTML-এ width আর height লিখব কেন, যদি CSS মাপ বদলেই দেয়? কারণ আধুনিক ব্রাউজার এই দুটি সংখ্যা থেকে ছবির aspect ratio আগেই জেনে নেয়, আর ছবি ডাউনলোড হওয়ার আগেই ঠিক মাপের জায়গা রেখে দেয়। ফলে ছবি এসে লেখা নিচে ঠেলে দেয় না — layout shift কমে (পর্ব ৬)। ভিডিও বা iframe-এর জন্যও একই চিন্তা: width: 100%; height: auto; অথবা aspect-ratio: 16 / 9;.

তবে একটি প্রশ্ন থেকে যায়: ফোনে তো ছবিটি ৩২০px-এ দেখানো হচ্ছে, অথচ ডাউনলোড হচ্ছে পুরো 1280px-এর ফাইল — মোবাইল ডেটার অপচয়। ছোট পর্দায় ছোট ফাইল পাঠানোর কৌশল (srcset, sizes, <picture>) পর্ব ৩২-এর বিষয়। আজকের নিয়মটি শুধু নিশ্চিত করে যে ছবি লেআউট ভাঙবে না।

৬ · মোবাইল-ফার্স্ট CSS — ছোট থেকে বড়

তৃতীয় উপাদান media query — “এই শর্ত মিললে এই নিয়মগুলো খাটাও।” কিন্তু শর্ত কোন দিক থেকে লিখবেন, তা নিয়েই দুটি পদ্ধতি:

পার্থক্যটা শুধু রুচির নয়। এক কলামের লেআউট HTML-এর normal flow-এ প্রায় বিনা খরচে পাওয়া যায় — block element এমনিতেই ওপর-নিচে বসে। তাই মোবাইল-ফার্স্ট CSS ছোট পর্দায় প্রায় কিছুই “উল্টাতে” হয় না। আর যে পুরোনো বা দুর্বল ব্রাউজার media query বোঝে না, সে অন্তত সরল, পড়ার উপযোগী এক কলামের পাতা পায় — এটাই progressive enhancement. ধাপে ধাপে দেখুন, তিন রকম চওড়ায় ব্রাউজার কোন নিয়মগুলো খাটায়:

1.page  { padding: 1rem; }2.cards { display: grid; gap: 1rem; }3nav ul { display: flex; flex-wrap: wrap; }4@media (min-width: 30em) {   /* 480px */5  .cards { grid-template-columns: 1fr 1fr; }6}7@media (min-width: 60em) {   /* 960px */8  .page  { display: grid; grid-template-columns: 15rem 1fr; }9  .cards { grid-template-columns: repeat(3, 1fr); }10}

কথায় না বলে নিজের হাতে দেখুন। নিচের এডিটরে “ফোন”-টি আসলে প্রিভিউর ভেতরে আরেকটি ছোট iframe — তাই তার ভেতরের @media সত্যিই ফোনের চওড়া দেখে, প্রিভিউর নয়। ডান-নিচের কোণ টেনে চওড়া করুন:

<style>
  .device { resize: horizontal; overflow: auto; width: 320px; min-width: 240px;
            max-width: 100%; border: 3px solid #334155; border-radius: 12px; }
  .device iframe { display: block; width: 100%; height: 250px; border: 0; }
</style>
<div class="device"><iframe title="ছোট পর্দার নমুনা"></iframe></div>
<template id="shop">
  <style>
    body { margin: 0; font-family: sans-serif; }
    nav { background: #0f766e; color: #fff; padding: 8px; }
    nav::after { content: " · ছোট পর্দা"; }
    .cards { display: grid; gap: 8px; padding: 8px; }
    .cards p { margin: 0; padding: 12px; background: #dcfce7; border-radius: 8px; }
    @media (min-width: 25em) {
      .cards { grid-template-columns: 1fr 1fr; }
      nav::after { content: " · মাঝারি"; } }
    @media (min-width: 37.5em) {
      .cards { grid-template-columns: repeat(3, 1fr); }
      nav::after { content: " · বড় পর্দা"; } }
  </style>
  <nav>হাটবাজার (কাল্পনিক)</nav>
  <div class="cards"><p>চাল</p><p>ডাল</p><p>তেল</p><p>পেঁয়াজ</p><p>আলু</p><p>লবণ</p></div>
</template>
<script>
  document.querySelector('.device iframe').srcdoc = document.getElementById('shop').innerHTML;
</script>

আধুনিক লেখার রূপ — range syntax

Media Queries Level 4 শর্তটি গণিতের মতো লেখার সুযোগ দেয়: @media (width >= 30em), বা মাঝামাঝি পরিসরে @media (30em <= width < 60em). পুরোনো min-width/max-width রূপে “max-width: 59.99em” জাতীয় ভগ্নাংশের কৌশল লাগত, যাতে ঠিক 60em-এ দুটি নিয়ম একসাথে না মেলে; নতুন রূপে < আর <=-এর পার্থক্যই সেটা সামলায়। এই range syntax এখন Baseline Widely available; খুব পুরোনো ব্রাউজারের কথা ভাবতে হলে min-width রূপটিও পুরোপুরি বৈধ আর এখনো সবচেয়ে বেশি দেখা যায়। media query-র বাকি সব বৈশিষ্ট্য আর container query পর্ব ৩১-এ।

৭ · Breakpoint বাছুন content দেখে, ফোনের মডেল দেখে নয়

Breakpoint মানে যে চওড়ায় লেআউটের নিয়ম বদলায়। নতুনরা প্রায়ই জনপ্রিয় ডিভাইসের তালিকা থেকে সংখ্যা নেন — “iPhone 375, iPad 768, ল্যাপটপ 1024.” সমস্যা হলো বাজারে হাজারো মাপের ডিভাইস, প্রতি বছর নতুন আসে, আর ব্রাউজারের জানালা যেকোনো মাপে টেনে রাখা যায়। ডিভাইসের তালিকা কখনো সম্পূর্ণ হয় না।

পেশাদার পদ্ধতি উল্টো: সবচেয়ে সরু পর্দা থেকে শুরু করে পাতাটি ধীরে ধীরে চওড়া করুন। যেখানে নকশা “ভাঙে” — লাইন অস্বস্তিকর লম্বা, কার্ড অযথা বিশাল, অনেক ফাঁকা জায়গা — ঠিক সেখানে একটি breakpoint. ডিভাইস নয়, content ঠিক করে সংখ্যাটা:

media query ছাড়াই রেসপন্সিভ — আগে এগুলো চেষ্টা করুন

পর্ব ২৮ আর ২৯-এ দেখেছেন, অনেক কম্পোনেন্ট নিজের জায়গা দেখে নিজেই মানিয়ে নিতে পারে — একে বলে intrinsic layout. এর বড় সুবিধা: কার্ডের তালিকা চওড়া main-এ বসুক বা সরু sidebar-এ, একই কোড দুই জায়গাতেই ঠিক আচরণ করে, কারণ সিদ্ধান্ত নেয় পাত্র, পর্দা নয়। নিচের বাক্সটি টেনে দেখুন:

.tags {
  display: flex;
  flex-wrap: wrap;        /* না আঁটলে পরের লাইনে */
  gap: 6px;
  list-style: none; padding: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 8px;
}
/* সাজসজ্জা আর টেনে বড়-ছোট করার বাক্স */
.tags li { background: #e0f2fe; border-radius: 999px; padding: 2px 10px; }
.grid p { margin: 0; padding: 14px; background: #dcfce7; border-radius: 8px; }
.frame { resize: horizontal; overflow: auto; width: 300px; max-width: 100%;
         box-sizing: border-box; border: 2px dashed #64748b;
         padding: 8px; font-family: sans-serif; }

৮ · আঙুলের জন্য নকশা — touch target আর hover

মাউসের ডগা এক বিন্দু; আঙুলের ডগা বেশ মোটা, আর যা চাপছেন সেটা আঙুলের নিচে ঢাকা পড়ে যায়। চলন্ত বাসে বা রিকশায় হাত কাঁপে। তাই ফোনের জন্য নকশায় দুটি প্রশ্ন জরুরি: চাপার জায়গা কত বড়, আর মাউসের hover-এর ওপর কতটা নির্ভর করছেন।

Touch target-এর মাপ

যে জায়গায় আঙুল বা মাউস দিয়ে চাপলে কাজ হয়, তা touch target. WCAG 2.2-এর success criterion 2.5.8 Target Size (Minimum) (AA স্তর) বলে: চাপার জায়গা অন্তত 24×24 CSS px হবে — অথবা ছোট হলে আশপাশে এমন ফাঁকা জায়গা থাকবে যাতে 24px ব্যাসের একটি বৃত্ত পাশের target-কে না ছোঁয়। কিছু ব্যতিক্রম আছে, যেমন বাক্যের ভেতরের লিংক। এটি সর্বনিম্ন সীমা। আরও কঠোর AAA শর্ত 2.5.5 চায় 44×44, আর Apple-এর নির্দেশিকা প্রায় 44pt, Google-এর Material Design প্রায় 48dp সুপারিশ করে। কাজের নিয়ম: প্রধান বোতাম আর মেনুর লিংক 44–48px উঁচু রাখুন।

<style>
  body { font-family: sans-serif; }
  nav a { color: #0f766e; }
  .small a { font-size: 13px; margin-inline-end: 4px; }
  .big { display: flex; flex-wrap: wrap; gap: 8px; }
  .big a {
    display: inline-flex; align-items: center;
    min-block-size: 44px; padding-inline: 14px;
    border: 1px solid #94a3b8; border-radius: 8px; text-decoration: none;
  }
  .status::after { content: "এই ডিভাইসে hover নেই — touch বা অন্য কিছু"; }
  @media (hover: hover) and (pointer: fine) {
    .big a:hover { background: #ccfbf1; }
    .status::after { content: "এই ডিভাইসে মাউসের মতো hover আছে"; }
  }
</style>
<nav class="small"><a href="#a">হোম</a><a href="#b">অফার</a><a href="#c">অর্ডার</a></nav>
<nav class="big"><a href="#a">হোম</a><a href="#b">অফার</a><a href="#c">অর্ডার</a></nav>
<p class="status"></p>

Hover বনাম touch

মাউসে কোনো কিছুর ওপর পয়েন্টার রাখলেই :hover হয়; touch-পর্দায় “ওপরে রাখা” বলে কিছু নেই। অনেক ফোন ব্রাউজার প্রথম চাপে hover দেখায়, দ্বিতীয় চাপে লিংক খোলে — বিভ্রান্তিকর। তাই দুটি নিয়ম:

• জরুরি কিছু hover-এ লুকাবেন না। দাম, মুছে ফেলার বোতাম, মেনু — hover ছাড়াও দেখা বা পাওয়া যেতে হবে। hover শুধু বাড়তি সাজ।
• hover-এর সাজ শর্ত দিয়ে দিন। @media (hover: hover) মানে মূল পয়েন্টার দিয়ে সহজে hover করা যায়; (pointer: fine) মানে মূল পয়েন্টার সূক্ষ্ম (মাউস), (pointer: coarse) মানে মোটা (আঙুল)। এই interaction media feature-গুলো Baseline Widely available. কিন্তু “hover নেই” মানেই “ফোন” নয় — touch ল্যাপটপ, স্টাইলাস, টিভির রিমোট সবই আছে; পুরো ছবি পর্ব ৩১-এ।

৯ · পরীক্ষা — DevTools, আসল ফোন, ধীর নেটওয়ার্ক আর ৩২০px

রেসপন্সিভ পাতা “বানিয়েছি” বলা আর “পরীক্ষা করেছি” বলা এক কথা নয়। চারটি স্তরে পরীক্ষা করুন:

320px পরীক্ষায় পাতা পাশে নড়লে কোন বাক্সটি দায়ী, তা খুঁজতে Elements প্যানেলের Styles-এ একটি অস্থায়ী নিয়ম যোগ করুন — * { outline: 1px solid red; }. সব element-এর চারপাশে লাল দাগ পড়বে, আর যে বাক্সটি ডান কিনারা পেরিয়ে গেছে, সেটি সাথে সাথে চোখে পড়বে। সাধারণ অপরাধী: নির্দিষ্ট width, max-width ছাড়া ছবি, না ভাঙা লম্বা URL, আর padding-সহ width: 100%. overflow-x: hidden দিয়ে লুকাবেন না — তাতে সমস্যা কাটে না, শুধু কাটা পড়া অংশ অদৃশ্য হয় (পর্ব ২৩)।

১০ · AI-এর যুগে — রেসপন্সিভ কাজ AI-কে দিলে কী দেখবেন

AI টুল প্রায় সবসময় “রেসপন্সিভ” লেখা কোড দেয়, আর ল্যাপটপে খুললে ঠিকঠাক দেখায়ও। কিন্তু AI নিজে কোনো ফোনে পাতাটি খুলে দেখে না; সে ইন্টারনেটের নানা যুগের কোড মিলিয়ে লেখে — তাই পুরোনো টেমপ্লেটের অভ্যাস, ডিভাইসভিত্তিক breakpoint আর অ্যাক্সেসিবিলিটির ভুল প্রায়ই ঢুকে পড়ে।

AI সাধারণত যেসব রেসপন্সিভ-ভুল করে

AI-এর দেওয়া রেসপন্সিভ কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• viewport meta-তে zoom বন্ধ করার কিছু নেই, আর validator.w3.org-এ HTML-এ কোনো error নেই
• DevTools device toolbar-এ 320px থেকে চওড়া পর্যন্ত টেনে দেখেছি — কোথাও পাশে স্ক্রল, কাটা লেখা বা গায়ে লাগা বোতাম নেই
• ব্রাউজারে ৪০০% পর্যন্ত zoom করেছি — লেখা আর লেআউট এক কলামে নেমে এসেছে (WCAG 1.4.10)
• আসল ফোনে আঙুল দিয়ে প্রতিটি লিংক-বোতাম চেপেছি, আর Network panel-এ ধীর সংযোগে লোড করে দেখেছি
• Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি, আর অচেনা CSS পেলে MDN আর Can I use-এ Baseline অবস্থা মিলিয়েছি