Responsive Web Design

আসসালামু আলাইকুম আশা করি সবাই ভালো আছেন। টেকটিউনসে এটাই আমার প্রথম টিউন তাই আমার ভুলগুলো আবশ্যই ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।

আজকে আমি আপনাদের সাথে রিসপনসিব ওয়েব ডিজাইন নিয়ে আলোচনা করব:-

প্রথমেই বলে রাখি রিসপনসিব ওয়েব ডিজাইন সম্পর্কে আমি খুব বেশি জানিনা, তবে যেটুকু জানি সেটুকুই আপনাদের সাথে শেয়ার করতে চায় ; তো আসুন কথা না বাড়িয়ে আলোচনা শুরু করা যাক।

রিসপনসিব ডিজাইন করতে হলে প্রথমে আমাদের জানতে হবে রিসপনসিব ডিজাইন কাকে বলে এবং কেন এটি করা হয় ;

একজন ডিজাইনার যখন একটি ওয়েব সাইট তৈরী করেন স্বভাবতই তিনি চান তার ওয়েব সাইটটি যেন সব ডিভাইসে দ্রুত লোড হয় এবং ভিজিটরের পড়তে সুবিধা হয়। প্রধানত এই উদ্দেশে ওয়েব সাইট রিসপনসিব করা হয়।অর্থাৎ ডিজাইনার যখন একটি ওয়েব সাইট তৈরি করেন ধরুন সেটা মিডিয়াম ডিভাইসে করা হল আর মিডিয়াম ডিভাইসের Width=1280px কিন্তু মোবইল ডিভাইসের Width=320px সেক্ষেত্রে কোন ভিজিটর যদি সেই ওয়েব সাইটটি ভিজিট করেন তাহলে পড়তে সমস্যা হবে, Zoom করে পড়তে হবে এবং ডানে বামে Scroll করে করে পড়তে হবে। অতএব সেটা একটা বিরক্তিকর ব্যাপার। আর ভিজিটরকে বিরক্তিকর ব্যাপার থেকে পরিত্রান দেওয়ার জন্য এই রিসপনসিব ডিজাইন করা হয়।।

ডিভাইস বলতে এখানে সর্বোচ্চ 768px এর screen এর ডিভাইস গুলোকে xtraSmall Device বলা হয় যেমন:- মোবইল ফোন।এরপরেরটা হল 768px থেকে 992 px এটা হল Small Device অর্থাৎ ট্যাবলেট। 992px থকে 1200px এর নিচে এগুলোকে বলা হয় Medium Device অর্থাৎ CRT মনিটরগুলো এছাড়াও আমরা ব্যবহার করি এইসব মনিটরগুলো।এরপর হল 1200px এর উপরে যে ডিভাইসগুলো এগুলোকে বলা হয় Large Device অর্থাৎ HD ডিভাইসগুলো যেমন এখনকার Laptop গুলো এছাড়াও Apple এর রেটিনা-রেডি প্রভৃতি এই জাতীয় ডিভাইসগুলো।

এবার আমরা জানব রিসপনসিব ডিজাইন কিভাবে করা হয়:-

রিসপনসিব ডিজাইন করতে চাইলে প্রথমেই আমাদের লাগবে এই মেটা টা:-

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

এটা আবশ্যই head এর ভিতর কল করতে হবে। শুধু এটা কল করলেই হবে না আমাদেরকে মিডিয়া কুয়েরি ব্যবহার করে সিএসএস লিখতে হবে। এজন্য রিসপনসিব সিএসএস নামে আলাদা একটি সিএসএস নেওয়া ভাল।অবশ্যই খেয়াল রাখতে হবে যেন responsive.css টি style.css এর পরে কল করা হয়।

তানাহলে সমস্যা হবে সেক্ষেত্রে responsive.css এর থেকে style.css টি আগে পাবে।

মিডিয়া কুয়েরি সম্পর্কে জানতে Bootstrap এর Grid System টা একটু পড়লেই হবে।

এরপর responsive.css এ আপনার প্রয়োজন অনুযায়ী css লিখলে আপনার সাইটটি রিসপনসিব হয়ে যাবে।

রিসপনসিব ডিজাইন সম্পর্কে আরও জানতে Google এ সার্চ করুন।

ধন্যবাদ সবাইকে কষ্ট করে টিউনটি পড়ার জন্য।উপকৃত হলে টিউমেন্ট করতে ভুলবেন না।।