X

X

X

HTML Responsive Web Design (রেসপনসিভ ওয়েব ডিজাইন)


রেসপনসিভ ওয়েব ডিজাইন বলতে কি বোঝায়?

রেসপনসিভ ওয়েবডিজাইন একটি ওয়েবপেজকে যেকোনো ডিভাইসে স্বয়ংক্রিয়ভাবে সুন্দরভাবে প্রদর্শণ করে। আরও একটি বিশদভাবে ব্যাখ্যা করি। সব ডিভাইসের স্ক্রিনসাইজ কিন্তু একই রকম নয়। ডেস্কটপ, ল্যাপটপ, মোবাইল , ট্যাবলেট এদের প্রত্যেকের স্ক্রিন সাইজ আলাদা আলাদা।
এখন একই ওয়েবপেজ যদি বিভিন্ন সাইজের ডিভাইস থেকে ভিজিট করা হয়, তাহলে পেজের ইলামেন্টগুলোকে প্রত্যেকের সাইজের জন্য আলাদাভাবে ডিজাইন করা উচিৎ!!!
এক্ষেত্রে যদি একই স্টাইলশিট দিয়ে সব স্ক্রিনের জন্য ডিজাইন সেট করে দেওয়া যায়, তবে সেটি কিন্তু অনেক ভালো হয়। এই কাজটিকে বলে রেসপনসিভ ওয়েব ডিজাইন।

বি:দ্র:যেকোনো ওয়েবপেজ যেকোনো সাইজের ডিভাইসে সুন্দর ও সাবলীলভাবে উপস্থাপিত হওয়া উচিৎ!

ভিউপোর্ট সেট করার নিয়ম

রেসপনসিভ ওয়েব পেজ করার সময়, প্রথম পদক্ষেপ হচ্ছে head ইলামেন্টে <meta> ট্যাগ যোগ করতে হবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণটি ওয়েবপেজের ভিউপোর্টের মান নির্ধারণ করবে এবং ব্রাউজারকে নির্দেশনা দিবে কিভাবে পেজের dimension ও scaling নিয়ন্ত্রণ করতে হবে।
নিচে ভিউপোর্ট ও ভিউপোর্ট ছাড়া একটি ওয়েবপেজের উদাহরণ দেওয়া হলো।

ভিউপোর্ট ছাড়া meta ট্যাগ:
ভিউপোর্ট সহ meta ট্যাগ:
টিপস:  যদি এই পেজটি আপনি ফোন কিংবা ট্যাবলেট দিয়ে ব্রাউজ করছেন , তবে উপরে দুটি লিংকে ক্লিক করে পেজ দুটোর পার্থক্য দেখতে পারেন।

রেসপনসিভ ইমেজ

রেসপনসিভ ইমেজ বলতে বোঝায়, যে ইমেজ বিভিন্ন সাইজের স্ক্রিনে স্বয়ংক্রিয়ভাবে রিসাইজ এবং প্রদর্শিত হয়।

width Property – এর ব্যবহার

যদি width property ১০০% সেট করা হয় তবে ইমেজ নিজে থেকে সবসময় রিসাইজ হবে।


Code Example

<img src="img_girl.jpg" style="width:100%;">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণটি লক্ষ্য করুণ, ছবিটি তার মূল সাইজের তুলনায় বড় আকরে প্রদর্শিত হতে পারে। এক্ষেত্রে ভালো মানের একটি সমাধান হচ্ছে, max-width property ব্যবহার করা।

max-width Property এর ব্যবহার

যদি max-width property 100% সেট করা হয়, তাহলে এটি আকারে ছোট হলেও হতে পারে কিন্তু কখনই তার কন্টেইনারের চেয়ে বড় আকারের হবে না।

Code Example

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ব্রাউজারের প্রস্থের উপর ভিত্তি করে ভিন্ন ভিন্ন ছবি প্রদর্শণ

HTML এ ব্রাউজারের বিভিন্ন প্রস্থের উপর ভিত্তি করে বিভিন্ন ছবি উপস্থাপণ করা যায়। ব্রাউজারটি রিসাইজ করে দেখুন ব্রাউজারের প্রস্থের উপর ভিত্তি করে কিভাবে বিভিন্ন ছবি প্রদর্শিত হয়।

Flowers

Code Example

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


রেসপনসিভ টেক্সট সাইজ

টেক্সেটর সাইজকে রেসপনসিভ করার জন্য vw” unit ব্যবহার করতে হবে। এর অর্থ “viewport width”। যখন ব্রাউজার স্ক্রিন পরিবর্তিত হবে টেক্সটের আকারও পরিবর্তিত হবে।
নিচে একটি উদাহরণ দেওয়া হলো।

Hello World

স্ক্রিনের আকার পরিবর্তন করুন নিচের Hello World লেখাটির আকারও পরিবর্তিত হবে।

Code Example

<h1 style="font-size:10vw;">Hello World</h1>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Media কুয়েরি

ব্রাউজারের স্ক্রিনের আকারের উপর ভিত্তি করে, বিভিন্ন ইলামেন্টের স্টাইল নির্ধারণ করা যায়। অর্থাৎ, এটি মূলত এক প্রকার কন্ডিশনাল সিএসএস।

উদাহরণ: ব্রাউজারের স্ক্রিন সাইজ পরিবর্তন করুন, এবং দেখুন কিভাবে ইলামেন্টগুলো তাদের অবস্থান পরিবর্তন করে।

Main Content
Right Content

Code Example

<style>
* {
  box-sizing: border-box;
}
.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%;/*The width is 20%, by default*/
}
.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%;/*The width is 60%, by default*/
}
.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%;/*The width is 20%, by default*/
}

/*Use a media query to add a break point at 800px:*/
@media (max-width:800px) {
  .left, .main, .right {
    width:100%;/*The width is 100%, when the viewport is 800px or smaller*/
  }
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।



রেসপনসিভ পেজ ডেস্কটপ, মোবাইল, ল্যাপটপ ইত্যাদি সকল সাইজের ডিভাইসে সুন্দরভাবে উপস্থাপিত হবে।


নিজে নিজে চেষ্টা করুন »


রেসপনসিভ ওয়েব ডিজাইন – ফ্রেমওয়ার্ক

বেশকিছু CSS ও javascript এর সমন্বয়ে তৈরি ফ্রেমওয়ার্ক রয়েছে যেগুলো দিয়ে খুব সহজে রেসপনসিভ ওয়েব পেজ তৈরি করা যায়। এগুলো ফ্রি এবং ব্যবহার করা সোজা।

W3.CSS

খুবই ভালো মানের একটি সিএসএস ফ্রেমওয়ার্ক। খুব চমৎকার রেসপনসিভ ওয়েবপেজ তৈরি করা যায় এটি দ্বারা। বিস্তারিত জানুন এখানে –  W3.CSS

W3.CSS Demo

Resize the page to see the responsiveness!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Code Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-green">
  <h1>W3Schools Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>

<div class="w3-row-padding">
  <div class="w3-third">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p> 
    <p>The Paris area is one of the largest population centers in Europe,
    with more than 12 million inhabitants.</p>
  </div>

  <div class="w3-third">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।



Bootstrap

আরও একটি জনপ্রিয় ফ্রেমওয়ার্ক হচ্ছে Bootstrap । নিচের উদাহরণটি লক্ষ্য করুন।

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বিস্তারিত জানুন এখানে –  Bootstrap Tutorial.