রেস্পন্সিভ কেন এতো জরুরি ? রেস্পন্সিভ করতে কি কি জানতে হবে ? কোন কোন প্রপার্টি গুলার ব্যবহার বন্ধ করবো এবং কোনগুলা ব্যবহার করবো ?
বর্তমানে রেস্পন্সিভ নিয়ে প্রতিনিয়ত ডেভেলপারগন সমস্যায় পড়েন। আসলে রেস্পন্সিভ বিষয়টি জটিল না অনেক মজার আজকের ব্লগে সেটা বুঝানো চেষ্টা করবো আপনাদের।
রেস্পন্সিভ জিনিসটা বলতে আমরা কি বুঝি ? একটা ওয়েবসাইট আমরা যেভাবে কম্পিউটার থেকে দেখতে কোনো সমস্যা বা কঠিন লাগে না সেইভাবে যেন কোনো ইউজার মোবাইল/টেবলেট থেকে ভিজিট করতে কোনো সমস্যা না আসে সেইজন্য ওয়েবসাইটকে রেস্পন্সিভ করা হয়।
রেস্পন্সিভ কেন এতো জরুরি ?
আপনি একটা ওয়েবসাইট তৈরি করেছেন এবং সেই ওয়েবসাইটটি আপনার কম্পিউটার/লেপটপে ভালো দেখাচ্ছে। কিন্তু আপনি সেই ওয়েবসাইটটি আপনার বন্দুর সাথে শেয়ার করলেন এবং আপনার বন্দু মোবাইল থেকে আপনার ওয়েবসাইটটি ভিজিট করলো এবং সে দেখতে পেলো আপনার ওয়েবসাইটটির একেক জিনিষ একেক জায়গায় রয়েছে এবং সেটা দেখতে একদম ভালো লাগছে না ! কিন্তু আপনি তো ওয়েবসাইটটি খুব সুন্দর করে তৈরি করেছিলেন এবং সেটা দেখতেও অনেক সুন্দর লাগছিলো আপনি সেটা চেক করেছেন আপনার কম্পিউটারে তাহলে আপনার বন্দু কেন বললো সে ওয়েবসাইটটি ভালো মতো দেখতে পারছে না? কারণ আপনি রেস্পনসিভ করেন নি আপনার ওয়েবসাইটটি। আর এর জন্যই আপনার ওয়েবসাইটটি আপনার বন্দু যখন মোবাইল দিয়ে ভিজিট করছে তখন সবকিছু এলোমেলো হয়ে আসছে। শুধু যে মোবাইল এর জন্য রেস্পন্সিভ করবেন তা না পুরো রেস্পন্সিভ মানে হচ্ছে আপনার বানানো ওয়েবসাইটটি যেকোনো ডিভাইসে এবং যেকোনো ব্রাউজারে সুন্দর মতো দেখাবে যাকে বলে ইউজার ফ্রেন্ডলি। তা না হলে আপনি যদি শুধু আপনার মনিটরের স্ক্রীন সাইজ অনুযায়ী ওয়েবসাইটটি সাজান তাহলে যখন আমি আমার মনিটরে আপনার ওয়েবসাইটটি দেখবো তখন আমি কিছুই বুঝতে পারবো না যে আপনার ওয়েবসাইটটে কি কি আছে এবং দেখতে কোথায় কি আছে। সেজন্য দেখবেন যে সব ওয়েবসাইট রেস্পন্সিভ করা হয় এবং এই রেস্পনিভ করাটা আপনি একজন ডেভেলপার হওয়ার কারণে আপনার জন্য ফরজ কাজ। আর কিছু ডেভেলপারগন মনে করেন যে রেস্পন্সিভ মানে শুধু ওই ওয়েবসাইটটি সব রকম ডিভাইসে ভালো মতো দেখালেই হয়, কিন্তু আসলে রেস্পনিভ বলতে শুধু এই জিনিসটা নয় এবং সেটা আমি উপরে বলে দিয়েছি।
রেস্পন্সিভ করার জন্য কি শুরু থেকেই আমাদের রেস্পন্সিভ উয়েতে কোড করতে হবে?
হে অবশ্যই। কারণ আপনি যদি শুরু থেকেই রেস্পন্সিভ উয়েতে কোড না করেন তাহলে পরবর্তীতে যখন রেস্পন্সিভ করতে যাবেন তখন আপনার রেস্পন্সিভ করাটা কষ্টকর হয়ে যাবে। তাই শুরু থেকেই রেস্পন্সিভ উয়েতে কোড করার বেশি চেষ্টা করুন। রেস্পন্সিভ উয়ে কি সেটা নিচের লেখাগুলো পড়লে বুঝতে পারবেন।
কোন কোন প্রপার্টি গুলার ব্যবহার বন্ধ করবো?
আমরা সিএসএস এর মধ্যে অনেক প্রপার্টি পাই যা দিয়ে আমরা আমাদের ওয়েবসাইটগুলো ডিজাইন করে থাকি। কিন্তু আমাদের অনেকের কোডিং করার স্টাইল অনেক রকম হয়ে থাকে এবং যে যার মতো করে কোডিং করে থাকে সবার শেষে দেখা যায় যে বেস্ট উয়েতে কোডিং করে তার ওয়েবসাইটটি অনেক ফাস্ট হয় এবং সিএসএস এরও বেস্ট উয়ে আছে আর সেই উয়েতে কোড করলে রেস্পন্সিভে কোনো সমস্যা হবে না আপনি খুব সহজেই আপনার ওয়েবসাইটটি রেস্পন্সিভ করতে পারবেন।
নিচের প্রপার্টি গুলা আপনি ব্যাবহার করবেন না যদি আপনি চান সুন্দর মতো আপনার ওয়েবসাইটটি রেস্পন্সিভ করতে তাহলেঃ
px
fixed width and fixed height
margin-top padding-top
margin-bottom padding-bottom
margin-left padding-left
margin-right padding-right
don't use width height for the button
etc
কোনগুলা ব্যবহার করবো ?
rem, em, %
margin only padding only
flex, grid
রেস্পন্সিভের জন্য কতটি ব্রেকপয়েন্ট ব্যাবহার করবো?
রেস্পন্সিভ করার জন্য আপনাকে হাজারটা ব্রেকপয়েন্ট ব্যবহার করতে হবে না একটা স্ট্যান্ডার ব্রেকপয়েন্ট লিস্ট আছে। আপনি আপনার ওয়েবসাইটটি মাত্র তিনটি ব্রেকপয়েন্ট ব্যবহার করার মাধ্যমে রেস্পন্সিভ করতে পারবেন। আপনি চাইলে মাত্র দুইটি ব্রেকপয়েন্ট ব্যবহার করার মাধ্যমে আপনার ওয়েবসাইটটি রেস্পন্সিভ করতে পারবেন। তাহলে আসেন দেখে নেই সেই ব্রেকপয়েন্ট গুলাঃ
উপরে যেই ব্রেকপয়েন্ট ব্যবহার করা হয়েছে সেগুলো max-width এর ক্ষেত্রে আপনি যদি min-width ব্যাবহার করেন তাহলে মাত্র দুইটি ব্রেকপয়েন্ট ব্যবহার করে আপনার ওয়েবসাইট রেস্পন্সিভ করতে পারবেন।
❌ ব্রেকপয়েন্ট আপনি চাইলে আপনার ইচ্ছামতোও ব্যাবহার করতে পারেন।
Flex নাকি Grid ব্যবহার করবো? কোনটি ব্যবহার করা উচিত রেস্পন্সিভের জন্য?
প্রথমে আপনাকে বুঝতে হবে ফ্লেক্স এবং গ্রিড এর বিষয়টি।
Flex
আমরা ফ্লেক্স দিয়ে যেকোনো দুইটি সেকশন পাশাপাশি আনতে পারি এবং এবং যে সকল সহজ লেআউট আছে যেগুলা তৈরি করতে পারি ( কমপ্লেক্স গুলাও করা যায়, কিন্তু প্রিফারেবল নয় )।
Grid
আমাদের ওয়েবসাইটে অনেক কমপ্লেক্স লেআউট থাকে যেগুলা আমরা গ্রিদ দিয়ে তৈরি করে থাকি। কারণ তাতে খুব সহজে সেই লেআউট রেস্পন্সিভ করা যায়।
সবশেষে যেটা বুঝানোর চেষ্টা করছি আমি সেটা হলো, আমরা ছোট সহজ লেআউট গুলো ফ্লেক্স দিয়ে করবো এবং যেই লেআউট গুলো কমপ্লেক্স ও কঠিন সেগুলো গ্রিড দিয়ে করবো। কিন্তু ফ্লেক্স অথবা গ্রিড যাই দিয়ে আপনি ওয়েবসাইট তৈরি করেন না কেনো তাতে কোনো সমস্যা নেই আপনি ওয়েবসাইটকে রেস্পন্সিভ করতে পারবেন।