স্টার্ট আপ সিস্টেম : রেসপনসিভ ওয়েব ডিজাইনের

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

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

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

অনেকেই এ বিষয়ে প্রথমে বুঝতে অসুবিধায় পরেন| আশা করি , এ ব্যাপারটা বুঝতে পারলে অনায়াসেই আপনি যেকোন সাইট কে রেসপনসিভ করতে পারবেন|

রেসপনসিভ চালু করার নিয়মঃ

১) সাইটের head Tag এর মাঝে      এই মেটা কোডটি যোগ করতে হবে।

যেমনঃ

এবার আপনার সাইটের index page-এ head tag এর মাঝে যেখানে মূল css যোগ করেছেন ঠিক তার নিচে রেসপনসিভ করার জন্য রেসপনসিভ css ফাইল যোগ করতে হবে। ধরলাম আমাদের সাইটে দুইটা সাধারণ css ফাইল আছে যাদের নাম style.css এবং menustyle.css আর আমাদের রেসপনসিভ করার জন্য css ফাইলটির নাম হবে responsivedev.css এখন আমাদের এই responsivedev.css কে অবশ্যই আগের দুইটা css কল করার পরে কল করতে হবে নয়তো অনেক ফাংশন কাজ করবেনা।

যেমনঃ

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

কোডঃ responsivedev.css ফাইলঃ

/* Default Layout: 992px.  */

#container{width:960px;height:300px;background:#DDD;color:red}

/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {

#container{width:768px;height:300px;background:navy;} }

/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {

#container{width:480px;height:300px;background:yellow;}

}

/* Mobile Layout: 320px. */

@media only screen and (min-width: 320px) and (max-width: 479px) {

#container{width:320x;height:300px;background:purple;}

}

উপরের কোডে চারটি সাইজের ডিভাইসের উপযোগী করে কোড দেওয়া আছে। প্রথমটি ডেস্কটপের জন্য আর সেটা ডিফল্ট সাইজ।

পরের কোডটি Tablet Layout এর কন্য। অর্থাৎ Tablet এ আপনার সাইটটি দেখলে কেমন দেখাবে তা এই জাইগায় css এর মাধ্যমে বলে দিতে হবে।

তারপরের টি Wide Mobile Layout: 480px. জন্য  এবং শেষেরটি  Mobile Layout: 320px. এর জন্য। কোড লিখার নিয়ম একই। শুধু আপনি যে ডিভাইসের উপযোগী করতে চান তার স্ক্রিন সাইজ অনুযায়ী লিখলেই হবে।

কোড লিখার নিয়মঃ

@media only screen and (min-width: 320px) and (max-width: 479px) {

}

প্রথমে @media only screen and (min-width:আপনার ডিভাইসের মিনিমাম উইড পিক্সেলে ) and (ম্যাক্সিমাম উইড পিক্সেলে ){

দ্বিতীয় বন্ধনীর মাঝে অর্থাৎ এখানে ডিভাইসের সাইজ অনুযায়ী সকল কোড লিখতে হবে।

}

আপনি এখন যেকোন ডিভাইসের জন্য উপযোগী করে সাইট বানাতে পারবেন। শুধু যেই ডিভাইসের জন্য রেসপনসিভ করবেন তার মিনিমাম এবং ম্যাক্সিমাম স্ক্রীন সাইজ জেনে নিবেন। আইফোনের স্ক্রীন সাইজ একটাই তাই সেখানে শুধু width দিলেই হবে, মিনিমাম আর ম্যাক্সিমামের দরকার নেই। জেমনঃ

@media only screen and (width: 300px) {

এখানে উইড একটাই তাই শুধু উইড দিলেই হবে । আর এখানে অর্থাৎ দ্বিতীয় বন্ধনীর মাঝে বাকি কোড গুলো লিখতে হবে।

}

তাছাড়া Less Framework দিয়েও এ কাজটি করতে পারেন| আর Twitter Bootstrap দিয়ে যেকোন সাইটকে সম্পূর্ণভাবে রেসপনসিভ করতে পারবেন | সেজন্য Twitter Bootstrap এর অফিসিয়াল সাইট অথবা ভিডিও tutorial দেখেও শিখতে পারেন| আজ এ পর্যন্তই , ভুল ভ্রান্তি থাকলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন|