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

আপনার ওয়েব পেজটি সকল ডিভাইসে সুন্দরভাবে দেখানোর জন্য রেস্পন্সিভ ওয়েব ডিজাইন ব্যবহার করা হয়।

রেস্পন্সিভ ওয়েব ডিজাইন শুধুমাত্র এইচটিএমএল এবং সিএসএস ব্যবহার করে করা যায়।

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

নিচে একটি উদাহরণ দেওয়া হলোঃ

ভিউপোর্ট কি?

ভিউপোর্ট হল ব্যবহারকারীর ডিভাইসে ওয়েব পেজের দৃশ্যমান অংশ।

ভিউপোর্ট ডিভাইসের সাথে সাথে পরিবর্তিত হয়, এবং মোবাইলের ভিউপোর্ট কম্পিউটারের ভিউপোর্টের চেয়ে ছোট হয়।

প্রথমদিকের ওয়েব পেজগুলো শুধুমাত্র কম্পিউারের জন্য ডিজাইন করা হয়েছিল।

অতঃপর ট্যাবলেট এবং মোবাইলে ইন্টারনেট ব্যবহার শুরুর পর থেকে ্কম্পিউটারের জন্য তৈরি ওয়েবপেজগুলো মোবাইল ভিউপোর্টের জন্য খুব বড় হয়ে যেত। এই সমস্যা দূর করতে ঐ সকল ডিভাইসের ব্রাউজারগুলো ওয়েবপেজকে ছোট করে দেখাতো।

ইহা একটি সমাধান ছিল, কিন্তু পূর্ণাংগ সমাধান ছিল না।

ভিউপোর্ট সেট

এইচটিএমএল(৫) ওয়েব ডিজাইনারদের জন্য < meta> ট্যাগের মাধ্যমে ভিউপোর্ট সেট করার একটি পদ্ধতি চালু করেছে।

ওয়েব পেজে ভিউপোর্ট সেট করার জন্য নিম্নলিখিত < meta> ভিউপোর্ট এলিমেন্টটি ব্যবহার করতে

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

একটি < meta> ভিউপোর্ট এলিমেন্ট ওয়েব পেজকে কিভাবে প্রদর্শন করা হবে তা ডিফাইন করে।

width=device-width এই অংশটি ভিন্ন ভিন্ন ডিভাইসের প্রস্থ অনুযায়ী ওয়েব পেজের প্রস্থ নির্ধারণ করে।

initial-scale=1.0 এই অংশটি ব্রাউজার ওয়েব পেজ লোড করার সময় পেজের প্রাথমিক জুম-লেভেল নির্ধারণ করে।

এখানে একটি ওয়েব পেজে ভিউপোর্ট মেটাট্যাগ সহ এবং ভিউপোর্ট মেটাট্যাগ ছাড়া দুইটি উদাহরণ দেওয়া হলঃ

পরামর্শঃ যদি আপনি ব্রাউজিং এর জন্য একটি ফোন বা ট্যাবলেট ব্যবহার করে থাকেন, তাহলে দুইটি লিঙ্কে ক্লিক করে পার্থক্য দেখতে পারবেন।

ভিউপোর্ট অনুযায়ী কন্টেন্ট সেট করুন

কন্টেন্টকে সকল ডিভাইসে সুন্দরভাবে দেখানোর জন্য আমরা আরো তিনটি পদ্ধতি মেনে চলতে পারিঃ

• অনেক বেশি প্রস্থের কোন এলিমেন্ট ব্যবহার করা ঠিক না। কোন এলিমেন্টের প্রস্থ যদি ভিউপোর্টের প্রস্থের চেয়ে বেশি হয় তাহলে হরিজন্টাল স্ক্রলবার তৈরি হয়। তাই এলিমেন্টের প্রস্থ ভিউপোর্ট অনুযায়ী সেট করতে হবে।
• কন্টেন্টকে যেকোন একটি ভিউপোর্টের জন্য সুন্দরভাবে তৈরি করে বসে থাকলে হবে না, কারণ ভিন্ন ভিন্ন ভিউপোর্টে সেগুলো ভিন্ন ধরনের ফলাফল দেখাবে।
• সর্বশেষে মিডিয়া কুয়েরির ব্যবহার করা। সকল ডিভাইসে কন্টেন্টকে সুন্দরভাবে প্রদর্শনের সবচেয়ে ভালো পদ্ধতি হলো মিডিয়া কুয়েরি ব্যবহার করা।

গ্রিড-ভিউ কি?

একটি ওয়েব পেজকে কলামে বিভক্ত করে লে-আউট তৈরি করা যায়, একেই গ্রিড-ভিউ বলা হয়।

ওয়েব পেজ ডিজাইনের সময় গ্রিড ভিউ ব্যবহার করা খুবই গুরুত্বপূর্ণ। এটি ওয়েব পেজের মধ্যে এলিমেন্টকে সঠিক জায়গায় স্থাপন করা সহজ করে তোলে।

রেস্পন্সিভ গ্রিড-ভিউতে অধিকাংশ সময় ১২ টি কলাম থাকে, ১২ টি কলাম মিলে এর মোট প্রস্থ হয় ১০০% এবং আপনি ব্রাউজারের আকার পরিবর্তন করার সাথে সাথে ইহা সংকুচিত ও প্রসারিত হবে।

রেস্পন্সিভ গ্রিড-ভিউ

গ্রিড-ভিউ তৈরি

প্রথমে সকল এইচটিএমএল এলিমেন্টের box-sizing প্রোপার্টির ভ্যালু border-box সেট করতে হবে। এর কারণ এলিমেন্টের প্যাডিং এবং বর্ডারসহ সম্পূর্ণ প্রস্থ ও উচ্চতা গণনা করা হবে।

আপনার সিএসএস ফাইলে নিম্নলিখিত কোড যুক্ত করুনঃ

* {
box-sizing: border-box;
}

box-sizing প্রোপার্টি সম্পর্কে আরো জানতে আমাদের সিএসএস(৩) বক্স সাইজিং অধ্যায়টি পড়ুন।

kt_satt_skill_example_id=1818

ওয়েব পেজ দুই কলাম বিশিষ্ট হলে উপরের উদাহরণটিই যথেষ্ট।

আমরা ওয়েব পেজের উপর আরো বেশি নিয়ন্ত্রণ রাখার জন্য ১২ কলামের একটি রেস্পন্সিভ গ্রিড-ভিউ ব্যবহার করতে পারি।

প্রথমে আমরা একটি কলামের জন্য শতকরা বের করিঃ ১০০% / ১২ কলাম = ৮.৩৩%।

তারপর আমরা ১২ টি কলামের প্রতিটির জন্য একটি করে ক্লাস তৈরি করবো class="col-" এবং প্রতিটি ক্লাসের জন্য কলামের প্রস্থ নির্দিষ্ট করে দিব।

kt_satt_skill_example_id=1819

সকল কলাম ব্রাউজারের বাম দিক থেকে শুরু হয়ে ডান দিকে যাবে এবং প্রতিটি কলামে ১৫পিক্সেল করে প্যাডিং ব্যবহার করিঃ

সিএসএসঃ

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

প্রতিটি সারির জন্য একটি < div> এলিমেন্ট ব্যবহার করতে হবে। প্রতিটি সারির ভিতরে কলাম সর্বোচ্চ ১২ পর্যন্ত যোগ করা যায়ঃ

এইচটিএমএলঃ

<div class="row">
   <div class="col-3">...</div>
   <div class="col-9">...</div>
</div>

আমরা একে আরো আকর্ষনীয় করার জন্য কিছু স্টাইল এবং কালার যোগ করতে পারিঃ

kt_satt_skill_example_id=1820

উপরের উদাহরণে আমরা দেখলাম যে ছোট অবস্থায় ব্রাউজার স্ক্রিনটি ভালো দেখায় না। ছোট স্ক্রিনে লিখাটিকে আরো ভালভাবে দেখানোর জন্য পরবর্তী অধ্যায়ে বিস্তারিত দেখানো হবে।

মিডিয়া কুয়েরি কি?

মিডিয়া কুয়েরি হলো সিএসএস(৩) এ সংযোজিত একটি পদ্ধতি যা ওয়েব পেজকে রেস্পন্সিভ করার জন্য ব্যবহার করা হয়।

সিএসএস মিডিয়া কুয়েরি ব্যবহারের জন্য @media ব্যবহার করা হয় এবং একটি প্রস্থ নির্ধারণ করা হয় এবং ঐ প্রস্থের সকল ডিভাইসের জন্য স্টাইল ডিফাইন করা হয়।

kt_satt_skill_example_id=1821

একটি ব্রেকপয়েন্ট যোগ করি

এর আগের টিউটোরিয়ালে সারি এবং কলাম দিয়ে একটি রেস্পন্সিভ ওয়েব পেজ তৈরি করেছিলাম, কিন্তু তা ছোট ডিভাইসে ভালো দেখায়নি।

মিডিয়া কুয়েরির সাহায্যে আমরা তা ঠিক করবোঃ

৭৬৮পিক্সেলের নিচের ডিভাইসের জন্য মিডিয়া কুয়েরি ডিফাইন করিঃ

kt_satt_skill_example_id=1822

মোবাইল ফার্স্ট ডিজাইন

মোবাইল ফার্স্ট মানে হচ্ছে, কম্পিউটার বা অন্যান্য বড় ডিভাইসের পূর্বে মোবাইলের জন্য ডিজাইন করা।

এর অর্থ এই যে আমাদের সিএসএস-এ কিছু পরিবর্তন করতে হবে।

স্ক্রিন সাইজ ৭৬৮ পিক্সেলের চেয়ে ছোট হলে স্টাইল পরিবর্তন না করে,৭৬৮ পিক্সেলের চেয়ে বড় হলে পরিবর্তন করবো। এটা আমাদের ডিজাইনকে মোবাইল ফার্স্ট করবেঃ

kt_satt_skill_example_id=1823

ট্যাবলেটের জন্য ডিজাইন

আমরা ট্যাবলেট এবং মোবাইল ফোনের মাঝেও একটি ব্রেকপয়েন্ট যোগ করবো।

এই রকম করার জন্য আমরা আরেকটি মিডিয়া কুয়েরি (৬০০পিক্সেলে) এবং একসেট নতুন ক্লাস ব্যবহার করবো ৬০০ পিক্সেলের বড় (কিন্তু ৭৬৮ পিএক্সেলের ছোট) ডিভাইসের জন্যঃ

kt_satt_skill_example_id=1824

ইহা দেখতে অদ্ভুত হলেও আমরা একই রকম দুই সেট ক্লাস ব্যবহার করেছি,কিন্তু ইহা আমাদেরকে প্রতিটি ব্রেকপয়েন্টে কি ঘটবে তা নিয়ন্ত্রণ করার সুযোগ করে দিয়েছেঃ

এইচটিএমএল

<div class="row">
   <div class="col-3 col-m-3">...</div>
   <div class="col-6 col-m-9">...</div>
   <div class="col-3 col-m-12">...</div>
</div>

উদাহরণের বর্ণনা

কম্পিউটারের জন্যঃ

প্রথম ও তৃতীয় সেকশন উভয়ে ৩ টি কলামে ভাগ হবে, আর মাঝেরটি ৬টি কলামে ভাগ হবে।

ট্যাবলেটের জন্যঃ

প্রথম সেকশন ৩টি কলামে ভাগ হবে, দ্বিতীয়টি ৯টি কলামে ভাগ হবে এবং তৃতীয়টি 12 টি কলামে ভাগ হবে আর প্রথম ও দ্বিতীয় কলামটির নিচে প্রদর্শিত হবে।

ওরিয়েন্টেশনঃ Portrait / Landscape

ব্রাউজার ওরিয়েন্টেশনের ফলে পেজের লে-আউট পরিবর্তন করতে মিডিয়া কুয়েরি ব্যবহার করা যায়ঃ

আপনি একসেট সিএসএস প্রোপার্টি রাখতে পারেন যেগুলো "Landscape" ওরিয়েন্টেশন বা ব্রাউজার উইন্ডোর উচ্চতা যখন প্রস্থের চেয়ে কম হবে তখন কাজ করবেঃ

kt_satt_skill_example_id=1825

width প্রোপার্টি

ইমেজের width প্রোপার্টির ভ্যালু 100% ব্যবহার করে ইমেজকে রেস্পন্সিভ করা যায়ঃ

kt_satt_skill_example_id=1839

উপরের উদাহরণে ইমেজটিকে তার প্রস্থের চেয়ে বড় করা যায়। এই সমস্যা সমাধানের একটি ভালো উপায় max-width প্রোপার্টি ব্যবহার করা।

max-width প্রোপার্টি

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

kt_satt_skill_example_id=1838

ওয়েব পেজে ইমেজের ব্যবহার

kt_satt_skill_example_id=1837

ব্যাকগ্রাউন্ড ইমেজ

ব্যাকগ্রাউন্ড ইমেজকে স্কেলিং এবং রিসাইজ করা যেতে পারে। এখানে আমরা তিনটি ভিন্ন মেথড দেখবোঃ

১. যদি background-size প্রোপার্টির মান "contain" হয়, ব্যাকগ্রাউন্ড ইমেজটি DIV এলিমেন্টের এরিয়ার মধ্যে সেট থাকবে এবং ইমেজটি তার প্রস্থ এবং দৈর্ঘ্যের আনুপাতিক হার ঠিক রাখবেঃ

kt_satt_skill_example_id=1836

২. যদি background-size প্রোপার্টির মান 100% 100% হয়, ব্যাকগ্রাউন্ড ইমেজ সমগ্র DIV এলিমেন্ট দখল করবেঃ

kt_satt_skill_example_id=1835

৩. যদি background-size প্রোপার্টির মান "cover" সেট করা হয়, ব্যাকগ্রাউন্ড ইমেজ এলিমেন্টের সম্পূর্ণ এরিয়া দখল করবে। "cover" ব্যবহারের কারণে অানুপাতিক হার ঠিক থাকবে এবং ইমেজের কিছু অংশ বাদ পরতে পারেঃ

kt_satt_skill_example_id=1834

ডিভাইসভেদে ভিন্ন ইমেজ প্রদর্শন

আমরা একটি বড় ইমেজকে কম্পিউটারে প্রদর্শনের জন্য ব্যবহার করি এবং ঐ বড় ইমেজকেই ছোট ডিভাইসের জন্য ছোট আকারে প্রদর্শন করি। যেহেতু আমরা ছোট ডিভাইসের জন্য ছোট আকারের ইমেজ প্রদর্শন করবো তাহলে একটি বড় ইমেজ ব্যবহার করে পেজ লোড হওয়ার সময় বৃদ্ধি করার কোন মানে হয় না।

আমরা মিডিয়া কুয়েরি ব্যবহার করে ছোট ডিভাইসের জন্য একটি ছোট আকারের ইমেজ ব্যবহার করতে পারি, এতে আমাদের পেজের পারফরমেন্স অনেক বৃদ্ধি পাবে।

নিচে একই ইমেজকে দুইটি ডিভাইসে প্রদর্শনের জন্য দুইটি আকারে দেখানো হলোঃ

kt_satt_skill_example_id=1833

আপনি মিডিয়া কুয়েরিতে min-width এর পরিবর্তে min-device-width ব্যবহার করতে পারেন, ইহা ব্রাউজারের প্রস্থের পরিবর্তে ডিভাইসের প্রস্থ পরিমাপ করবে। তখন আপনি ব্রাউজারের আকার পরিবর্তন করলেও ইমেজ পরিবর্তন হবে নাঃ

kt_satt_skill_example_id=1832

এইচটিএমএল(৫) এলিমেন্ট

এইচটিএমএল(৫) এর < picture> এলিমেন্ট ব্যবহার করে আপনি একাধিক ইমেজ যোগ করতে পারবেন।

< picture> এলিমেন্ট < video> এবং < audio> এলিমেন্টের মতই কাজ করে। আপনি এক সাথে একাধিক উৎস সেট করতে পারেন এবং প্রথম যে উৎসের ফাইলটি ব্রাউজারের সাথে মানানসই হবে সেটিই ব্যবহার করা হবেঃ

kt_satt_skill_example_id=1831

srcset এট্রিবিউটটি বাধ্যতামূলক এবং ইহাই ইমেজের উৎসগুলো ডিফাইন করে।

যেসব ব্রাউজারে < picture> এলিমেন্ট সাপোর্ট করেনা, তাদের জন্য আপনাকে < img> এলিমেন্টটি ডিফাইন করতে হবে।

width প্রোপার্টি

ভিডিও এলিমেন্টের width প্রোপার্টির মান 100% দিয়ে, ভিডিও প্লেয়ারটিকে রেস্পন্সিভ করা হয় এবং প্লেয়ারটি উপরে ও নিচে বাড়তে/কমতে থাকেঃ

kt_satt_skill_example_id=1828

max-width প্রোপার্টি

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

kt_satt_skill_example_id=1829

ওয়েব পেজে ভিডিও যোগ করি

আমরা আমাদের উদাহরণ পেজে একটি ভিডিও যোগ করতে চাই যা কিনা সম্পূর্ন জায়গা দখল করবেঃ

kt_satt_skill_example_id=1830

রেস্পন্সিভ ডিজাইন করার ফ্রেমওয়ার্কের ব্যবহার করা বুদ্ধিমানের কাজ। বর্তমানে অনেক ধরনের সিএসএস ফ্রেমওয়ার্ক রয়েছে।

সেগুলো বিনামূল্যে পাওয়া যায় এবং ব্যবহার করা সহজ।

W3.CSS ব্যবহার

রেস্পন্সিভ ডিজাইন তৈরি করার একটি সহজ উপায় হলো একটি রেস্পন্সিভ স্টাইল শীট ব্যবহার করা, যেমন W3.CSS

W3.CSS ব্যবহার অনেক সহজ। আপনি ইচ্ছা করলে আজকেই চেষ্টা করে দেখুনঃ

kt_satt_skill_example_id=1826

বুটস্ট্রাপ

আরেকটি জনপ্রিয় ফ্রেমওয়ার্ক বুটস্ট্রাপ। ইহা এইচটিএমএল, সিএসএস এবং জেকুয়েরি ব্যবহার করে রেস্পন্সিভ ওয়েব পেজ তৈরি করার জন্য জনপ্রিয়ঃ

kt_satt_skill_example_id=1827

বুটস্ট্রাপ সম্পর্কে আরো জানতে, আমাদের বুটস্ট্রাপ টিউটোরিয়াল পড়ুন।