Material Design Lite (MDL) একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Material Design এর নীতির ওপর ভিত্তি করে তৈরি। MDL ব্যবহার করে আপনি ওয়েবসাইটের কম্পোনেন্টগুলোকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করতে পারেন। তবে, আজকের মোবাইল ডিভাইসের পরিপ্রেক্ষিতে Mobile Friendly UI তৈরি করা অত্যন্ত গুরুত্বপূর্ণ। MDL-এর কম্পোনেন্টগুলো স্বাভাবিকভাবে responsive থাকে, তবে সঠিকভাবে mobile-friendly করতে কিছু অপটিমাইজেশন এবং কাস্টমাইজেশন প্রয়োজন হতে পারে।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL এর কম্পোনেন্টগুলোর জন্য Mobile Friendly UI তৈরি করা যায়, যাতে ওয়েবসাইট বা অ্যাপ্লিকেশন মোবাইল ডিভাইসেও ভালোভাবে কাজ করে।
MDL এর Mobile Friendly UI তৈরি করা
১. MDL Grid System ব্যবহার করা
MDL-এ Grid System ব্যবহার করে আপনি ওয়েবসাইটের লেআউট মোবাইল ডিভাইসের জন্য রেসপন্সিভ (responsive) করতে পারেন। mdl-grid এবং mdl-cell ক্লাস ব্যবহার করে আপনি বিভিন্ন ডিভাইসের জন্য উপযুক্ত লেআউট তৈরি করতে পারবেন।
উদাহরণ: MDL Grid System
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-cell--6-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 1</h2>
</div>
<div class="mdl-card__supporting-text">
This is a card content.
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-cell--6-col-phone">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Card 2</h2>
</div>
<div class="mdl-card__supporting-text">
This is another card content.
</div>
</div>
</div>
</div>
ব্যাখ্যা:
- mdl-grid: এটি একটি গ্রিড সিস্টেম তৈরি করে, যা বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
- mdl-cell--12-col: মোবাইল ডিভাইসে পূর্ণ প্রস্থ (full width) ব্যবহার করার জন্য ব্যবহৃত।
- mdl-cell--4-col-tablet: ট্যাবলেট ডিভাইসে ৪ কলাম ব্যবহার করতে ব্যবহৃত।
- mdl-cell--6-col-phone: ফোন ডিভাইসে ৬ কলাম ব্যবহার করার জন্য ব্যবহৃত।
এটি একটি রেসপন্সিভ লেআউট তৈরি করবে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সঠিকভাবে কাজ করবে।
২. MDL Components এর জন্য Responsive Media Queries
MDL এর কম্পোনেন্টগুলো স্বাভাবিকভাবেই রেসপন্সিভ, তবে কিছু অতিরিক্ত media queries ব্যবহার করে আপনি কম্পোনেন্টগুলোর আকার এবং পজিশনিং আরও কাস্টমাইজ করতে পারেন।
উদাহরণ: Responsive Media Queries
/* Mobile */
@media (max-width: 600px) {
.mdl-card {
width: 100%;
}
}
/* Tablet */
@media (min-width: 601px) and (max-width: 960px) {
.mdl-card {
width: 48%;
margin: 1%;
}
}
/* Desktop */
@media (min-width: 961px) {
.mdl-card {
width: 30%;
margin: 1%;
}
}
ব্যাখ্যা:
- max-width: 600px: এটি মোবাইল ডিভাইসের জন্য CSS স্টাইল প্রয়োগ করবে, যেখানে mdl-card পুরো প্রস্থ নেবে।
- min-width: 601px and max-width: 960px: এটি ট্যাবলেট ডিভাইসের জন্য প্রযোজ্য, যেখানে আমরা কার্ডগুলোকে ৪৮% প্রস্থ দিবো।
- min-width: 961px: এটি ডেস্কটপের জন্য প্রযোজ্য, যেখানে কার্ডগুলো ৩০% প্রস্থে থাকবে।
এই media queries সাইটের প্রতিটি কম্পোনেন্টকে বিভিন্ন স্ক্রীনে সঠিকভাবে উপস্থাপন করবে।
৩. MDL Buttons এর জন্য Mobile Friendly Design
MDL-এ Buttons এর ডিজাইন কাস্টমাইজ করতে, আপনি padding, font size এবং width সমন্বয় করতে পারেন যাতে তা মোবাইল ডিভাইসে আরও উপযুক্ত হয়ে ওঠে।
উদাহরণ: Mobile Friendly Button
/* Mobile */
@media (max-width: 600px) {
.mdl-button {
font-size: 14px;
width: 100%;
}
}
/* Tablet */
@media (min-width: 601px) and (max-width: 960px) {
.mdl-button {
font-size: 16px;
width: 80%;
}
}
/* Desktop */
@media (min-width: 961px) {
.mdl-button {
font-size: 18px;
width: auto;
}
}
ব্যাখ্যা:
- font-size: মোবাইল ডিভাইসে বাটনের লেখার সাইজ ছোট রাখা হয়েছে, যাতে কম্প্যাক্ট হয়।
- width: মোবাইল ডিভাইসে বাটনটি পুরো প্রস্থে (100%) থাকবে, ট্যাবলেট এবং ডেস্কটপে সাইজ অটোমেটিক থাকবে।
এটি MDL বাটনকে মোবাইল ডিভাইসে আরও ব্যবহারকারী-বান্ধব এবং রেসপন্সিভ করে তোলে।
৪. MDL Navigation Drawer এর জন্য Mobile Friendly UI
MDL-এ Navigation Drawer (সাইড বার) কম্পোনেন্ট ব্যবহার করে আপনি মোবাইল ডিভাইসে একটি off-canvas নেভিগেশন তৈরি করতে পারেন, যা ব্যবহারকারীকে আরও সহজে নেভিগেট করতে সাহায্য করে।
উদাহরণ: MDL Navigation Drawer
<!-- Drawer Trigger -->
<button class="mdl-button mdl-js-button mdl-button--icon" id="menuToggle">
<i class="material-icons">menu</i>
</button>
<!-- Drawer -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">MDL Menu</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Services</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
</div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
var drawer = document.querySelector('.mdl-layout__drawer');
var menuButton = document.getElementById('menuToggle');
menuButton.addEventListener('click', function() {
drawer.classList.toggle('is-visible');
});
</script>
ব্যাখ্যা:
- mdl-layout__drawer: এটি সাইড নেভিগেশন ড্রয়ার তৈরি করে।
- mdl-button--icon: এটি একটি আইকন বাটন তৈরি করে, যা সাইড নেভিগেশন টগল করতে ব্যবহৃত হয়।
এটি মোবাইল ডিভাইসে side navigation তৈরি করবে, যা স্ক্রিনে মেনু আইটেমগুলি সহজে ব্যবহারকারীকে দেখানোর জন্য স্লাইড হবে।
সারাংশ
Material Design Lite (MDL) এর কম্পোনেন্টগুলোর জন্য Mobile Friendly UI তৈরি করা খুবই সহজ। MDL Grid System, Responsive Media Queries, Mobile Friendly Buttons এবং Navigation Drawer ব্যবহার করে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে মোবাইল ডিভাইসে উপযোগী এবং রেসপন্সিভ করে তুলতে পারবেন। MDL-এ তৈরি কম্পোনেন্টগুলো স্বাভাবিকভাবে রেসপন্সিভ হলেও, কিছু কাস্টমাইজেশন এবং অপটিমাইজেশন মোবাইল ব্যবহারকারীদের জন্য আরও ভালো অভিজ্ঞতা প্রদান করতে সহায়তা করে।
Read more
