রেসপন্সিভ ওয়েবসাইট ডিজাইন করার পদ্ধতি

একটি রেসপন্সিভ ওয়েবসাইট হলো এমন একটি ওয়েবসাইট যা সকল ডিভাইসে অর্থাৎ ডেস্কটপ, ট্যাবলেট এবং মোবাইল ফোনে ভালো এবং আকর্ষণীয় দেখায়। একটি ওয়েবসাইটের রেসপন্সিভ ডিজাইন থাকতে হয় যাতে সেটি রেসপন্সিভ হয়। এটি HTML এবং CSS-এর সাথে খেলার মতো — সাইজ পরিবর্তন, লুকানো বা বড় করা।

একটি উদাহরণ দেখি এবং রেসপন্সিভ কী বোঝাতে পারি ওয়েবসাইট রিসাইজ করার সময়:

ডেস্কটপ

ডেস্কটপে ওয়েবসাইট ডিজাইন:

ট্যাবলেট

ট্যাবলেটে ওয়েবসাইট ডিজাইন এরকম দেখায়। উপরের ডেস্কটপ স্ক্রিনশটের সাথে সহজে তুলনা করা যাবে:

মোবাইল

মোবাইলে ওয়েবসাইট ডিজাইন এরকম দেখায়:

একটি রেসপন্সিভ ওয়েবসাইট ডেভেলপ করতে, যা ডিভাইস সাইজ নির্বিশেষে ভালো দেখায়, নিচের কনসেপ্টগুলোতে কাজ করতে হবে:

ভিউপোর্ট (Viewport)

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

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

এখানে:

width=device-width পেজের চওড়া সেট করে যাতে ডিভাইসের স্ক্রিন-চওড়ার সাথে ফলো করে। initial-scale=1.0 ইনিশিয়াল জুম লেভেল সেট করে। এটি তখন সাহায্য করে যখন ওয়েব ব্রাউজার প্রথমবার পেজ লোড করে।

মিডিয়া কুয়েরি (Media Queries)

মিডিয়া কুয়েরির মাধ্যমে একটি ব্রেকপয়েন্ট যোগ করা যায় যেখানে ডিজাইনের কিছু অংশ ব্রেকপয়েন্টের দুই পাশে আলাদা আচরণ করে।

ইমেজের width এবং height প্রপার্টি

ইমেজগুলো রেসপন্সিভ बनाने کے लिये width প্রপার্টি ১০০% এবং height auto সেট করতে হবে।