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

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

Table of Contents

রেসপনসিভ কি?

আমরা অনেকেই রেসপনসিভ ওয়েব ডিসাইন এর কথা শুনেছি। আমরা অনেকেই হয়ত জানিনা না রেসপনসিভ ওয়েবসাইট জিনিষটা কি? কোন সাইটকে রেসপনসিভ করার মানে হল-ওই ওয়েবসাইট কন্টেন্ট সব ঠিক রেখে সাইটের মূল লেয়াউট বিভিন্ন ডিভাইস যেমন ডেক্সটপ, ট্যাব, ল্যাপটপ, ট্যাবলেট, স্মার্টফোন, ফিচারফোনের ব্রাউজারের জন্য সুবিধাজনকভাবে ভিজিটরের কাছে প্রদর্শিত করা। এটাই হলো রেসপনসিভ। অর্থাৎ বিভিন্ন স্ক্রিন সাইজের ডিভাইস থেকেই সহজে এবং ঠিকঠাক দেখা যায়, সেরকম করে ওয়েবসাইট তৈরী করাকে আমরা বলছি রেসপন্সিভ ওয়েব ডিজাইন।

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

রেস্পন্সিভ ডিজাইন বেশ আগের একটি ধারণা। বিভিন্ন ধরনের ওয়েব  ব্রাউজারের ভিউপোর্টের প্রস্থের সাথে খাপ খাইয়ে নিতে পারে এমন একটি ওয়েবসাইটের লেআউট সর্বপ্রথম ২০০২ সালের দিকে ডিজাইন করা হয়েছিলো। মূলত এ কারণেই আজকাল ওয়েবের জন্য ডিজাইন করার মানেই হচ্ছে অসংখ্য স্ক্রিন সাইজের কথা মাথায় রেখে ডিজাইন করা যাকে রেস্পন্সিভ ডিজাইন বলা হচ্ছে।

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

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

একটা সময় ইন্টারনেট ব্যবহার করা হতো শুধুমাত্র কম্পিউটার থেকে; কিন্তু এখন অবস্থা ভিন্ন। এখন সবার হাতে হাতে স্মার্টফোন। কিন্তু কম্পিউটার উপযোগী ওয়েব সাইটটি সব কম্পিউটারে ভালোভাবে দেখা গেলেও মোবাইল উপযোগী সাইটগুলো বেশিভাগ মোবাইলেই ঠিকমতো দেখা যাবে না। কারন বিভিন্ন মডেলের মোবাইলের স্কিন সাইজ ও রেজলুশন বিভিন্ন হয়ে থাকে।
২০১৪ সালে করা একটি সার্ভেতে দেখা যায়, ইন্টারনেট ব্যবহারকারীদের প্রায় এক তৃতীয়াংশ বা ৩৩% মানুষ স্মার্টফোন থেকে ইন্টারনেট ব্যবহার করছে এবং ক্রমান্নয়ে তা বেড়েই চলেছে।
আরেকটি পরিসংখ্যানে দেখা যায়, আমেরিকানদের ৪৫% স্মার্টফোন এবং ৩১% ট্যাবলেট কম্পিউটার ব্যবহার করে থাকে। ২০১৪ সাল এবং আমেরিকার অবস্থাই যদি এই হয়, তাহলে এখনকার এবং আমাদের দেশের ইন্টারনেট ব্যবহারকারীদের অবস্থা সহজেই অনুমেয়।

এখন কথা হচ্ছে, এই যে বিপুল সংখ্যক মোবাইল ইন্টারনেট ব্যবহারকারী রয়েছে, তাদের জন্য নিশ্চয়ই কম্পিউটারের বড় স্ক্রিনের জন্য তৈরী করা একটি ওয়েবসাইট উপযুক্ত নয়। মোবাইলের স্ক্রিনে দেখতে হলে সেটিকে জুম করতে হবে। একটি ওয়েবসাইটকে জুম করে কিংবা ডানে বামে সোয়াইপ করে দেখতে যেমন সময় নষ্ট হয়, তেমনি বিরক্তিকর আর তথ্য বোঝাও অনেক সময় কঠিন হয়ে ওঠে। মানুষ চায় সহজে এবং সাবলীলভাবে তথ্য পেতে; আর এজন্য রেসপন্সিভ ওয়েব ডিজাইনের গুরুত্বপূর্ন। Freelance Marketplace গুলোতেও responsive design এর কাজগুলোর চাহিদা বাড়ছে হু হু করে।

রেস্পন্সিভ ওয়েব ডিজাইনের সুবিধা

আপনি যদি এই বিপুল সংখ্যক মোবাইল ইউজার বা সব ধরণের ডিভাইস ব্যবহারকারীদের কাছে আপনার ওয়েবসাইটকে উপস্থাপন করতে চান, তাহলে অবশ্যই ওয়েবসাইটিকে রেসপন্সিভ করে তৈরি করতে হবে। রেস্পন্সিভ ওয়েব ডিজাইনের সুবিধা বহুবিধ। এটা আপনার ওয়েবসাইটের এসইও, কনভার্সন রেট, ইউজার এক্সপেরিয়েন্স উপর ইতিবাচক প্রভাব ফেলবে। এখানে রেস্পন্সিভ ওয়েব ডিজাইনের ১২ টি গুরুত্বপূর্ণ বৈশিষ্ট্য ও সুবিধা দেয়া হলো।

১। ইউজার এক্সপেরিয়েন্স বৃদ্ধি করে

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

কিন্তু ওয়েবসাইটটি যদি স্ক্রিন সাইজের সাথে সাথে পরিবর্তিত হয়ে যায়, তাহলে আপনার ভিজিটরদের মেনু, লিঙ্ক বাটন এবং ফর্ম পূরণ করতে কোনও সমস্যা হবে না। ফলে তারা আরো ভালো ইউজার এক্সপেরিয়েন্স পাবে এবং আপনার সাইটে আরো বেশি সময় কাটাবে। এর মাধ্যমে ভিজিটর যে ডিভাইস থেকেই আপনার ওয়েব সাইটি ব্রাউজ করুক না কেন, জুম, সোয়াইপ এবং কোনরকম ভাঙাচোরা ছাড়াই খুব স্বাভাবিকভাবে এই সাইটগুলো দেখতে পাবেন। ডানে বামে সোয়াইপ করার কোন বাধ্যবাধকতা থাকা যাবে না।

২। মোবাইল ট্রাফিক বৃদ্ধি করে

মোবাইল ডিভাইস থেকে কি পরিমাণ দর্শক আপনার ওয়েবসাইটে আসে এবং কত সময় তারা আপনার সাইটে ব্যয় করে তা বের করুন। তারপর রেস্পন্সিভ ডিজাইন ইমপ্লিমেন্ট করে দুটো সংখ্যাকে তুলনা করে মূল পরিবর্তনটি বের করতে পারেন। যখন আপনার ওয়েবসাইট সব ধরণের ভিউপোর্টে দেখা যাবে, তখন আপনি মোবাইল ডিভাইস থেকে ট্রাফিক বৃদ্ধি পাওয়ার বিষয়টি লক্ষ্য করবেন এবং একই ব্যবহারকারী আপনার ওয়েবসাইটে অনেক সময় ধরে থাকবে।

৩। সহজ রক্ষণাবেক্ষণ

কম্পিউটার ও মোবাইল দুটো ভার্শনের ওয়েবসাইটে আপনার স্টাফ অথবা ডেভেলপমেন্ট টিমকে আলাদা করে দুটো ওয়েবসাইটের জন্য সময় দিতে হবে। অথচ রেস্পন্সিভ ওয়েবসাইটের মাধ্যমে, আপনার ওয়েবসাইট রক্ষনাবেক্ষনের পিছনে কম সময় ব্যয় করবে এবং মার্কেটিং, A/B টেস্টিং, কাস্টমার সার্ভিস, প্রোডাক্ট অথবা কনটেন্ট ডেভেলপমেন্ট ও অন্যান্য কাজে আরো বেশি সময় ব্যয় করার সুযোগ পাবে।

৪। ডুপ্লিকেট কনটেন্ট পেনাল্টিতে পড়ার সম্ভাবনা কমায়

আপনার ওয়েবসাইটের দুটি সংস্করণের সাথে মনে রাখার মত আরেকটি বিষয় হল যে, আপনি মূলত সদৃশ সামগ্রী/কন্টেন্ট তৈরি করছেন। যদিও সার্চ ইঞ্জিনগুলি দিনে দিনে আরো বেশি স্মার্ট হয়ে উঠছে, কিন্তু এখনও এগুলো, কোন ওয়েবসাইট সংস্করণটি বেশি গুরুত্বপূর্ণ তা বুঝতে পারেনা। আপনি যদি আপনার সাইটের একটি মোবাইল সংস্করণ ব্যবহার করেন, তবে URL টি আলাদা হলেও আপনার বিষয়বস্তু/কন্টেণ্ট একই থাকবে।

এটি আপনার ওয়েবসাইটের উভয় সংস্করণকে সার্চ ইঞ্জিনে নিচের দিকে র‍্যাঙ্কিং করতে পারে, কারণ সার্চ ইঞ্জিন কোন কন্টেন্ট সর্বাধিক প্রাসঙ্গিক তা বুঝতে পারে না। আপনি যদি আপনার সাইটের উভয় সংস্করণের জন্য ভাল র‍্যাঙ্ক চান, আপনাকে দুটি পৃথক এসইও কৌশল এবং প্রচারাভিযান তৈরি করতে হবে এবং আপনার সাইটের ডেস্কটপ এবং মোবাইল সংস্করণ উভয়ের জন্য আসল এবং অনন্য সামগ্রী তৈরির ক্ষেত্রে উল্লেখযোগ্য পরিমাণ অর্থ বিনিয়োগ করতে হবে।

দুইটি পৃথক এসইও কৌশল থাকার কারণে অনেক বেশি সময় এবং অর্থ প্রয়োজন, বেশিরভাগ ওয়েবসাইট মালিক ডেস্কটপ সংস্করণের দিকে নির্দেশ করে তাদের মোবাইল ওয়েবসাইটে একটি ক্যাননিক্যাল ট্যাগ ব্যবহার করে। ফলস্বরূপ, বেশিরভাগ পৃথক মোবাইল ওয়েবসাইটগুলি সার্চ ইঞ্জিনগুলিতে একেবারেই দেখায় না। রেস্পন্সিভ ওয়েব সাইটের মাধ্যমে উপরের সবগুলো সমস্যা সফলভাবে এড়ানো যায়।

৫। ওয়েবসাইট বিশ্লেষণ সহজ করে

যদি আপনার ওয়েবসাইটের একই রকম দুটি ভার্সন থাকে, তাহলে কোথা থেকে আপনার ভিজিটররা আসে এবং কিভাবে তারা আপনার কন্টেন্টসমূহ ব্যবহার করে থাকে তা বের করতে আপনাকে দুই সেট ওয়েবসাইট অ্যানালিটিক্স ট্র্যাক করতে হবে। এর মানে হচ্ছে, একাধিক সাইনআপ এবং থ্যাংক ইউ পেজ ও কনভার্শন পয়েন্ট, ফানেল এবং অন্যান্য বিষয়গুলো আপনাকে আলাদাভাবে ট্র্যাক করতে হবে।

অপরদিকে রেসপনসিভ ওয়েব সাইটের মাধ্যমে আপনি আপনার ওয়েবসাইটের বর্তমান অবস্থা খুব সহজভাবে মাত্র এক সেট ডাটা ব্যবহার করেই বের করতে পারবেন। এই অবস্থাতেও আপনি কোন ডিভাইস থেকে ভিজিটররা আপনার ওয়েবসাইট ব্যবহার করছে, কোন পেইজ থেকে তারা চলে যাচ্ছে এবং কতক্ষণ সময় তারা আপনার সাইটে থাকছে তার হিসাব নিকাশ বের করতে পারবেন, কিন্তু এ কাজে আপনাকে সঠিক চিত্র বের করতে একাধিক তথ্য ও রিপোর্টসমূহ দেখতে হবে না‌।

৬। ওয়েবসাইট লোডিং স্পিড বাড়বে

যেসব ওয়েবসাইট রেস্পন্সিভ সেগুলো সাধারণত সব ধরনের ডিভাইসে দ্রুত লোড হয়। বিশেষ করে স্মার্টফোন ও ট্যাবলেটে সবচেয়ে বেশি দ্রুত গতিতে লোড হয়ে থাকে। এজন্য রেস্পন্সিভ ইমেজ এবং ফ্লুইড গ্রিড এর ফলে কোন পেইজ লোড হতে খুব কম সময় লাগে যা আপনার ইউজারদের পেইজ ভিজিট করার সময়ের উপর সরাসরি প্রভাব ফেলে। রিসার্চ অনুসারে, ৫৩% মোবাইল ভিজিটর কোন পেইজ লোড হতে ৩ সেকেন্ডের বেশি সময় লাগলে সেই পেজটি ছেড়ে চলে যায়। একই রিসার্চে দেখা গেছে যে, যেসব ওয়েবসাইট দ্রুত লোড হয় তাতে অনেক সময় ধরে ভিজিটররা থাকে এবং এর ফলে কনভার্শন রেট বৃদ্ধি পায়। ওয়েব সাইটে ইমেজ থাকলে সবচেয়ে বেশি ব্যান্ডউইড্থ খরচ হয়। রেসপনসিভ ওয়েব ডিজাইনের মাধ্যমে আপনি সার্ভারের ব্যান্ডউইথের খরচের পরিমান কমাতে পারেন। এর ফলে রেসপনসিভ ওয়েব ডিজাইন এর গুরুত্ব সম্পর্কে আমরা খুব সহজেই অনুধাবন করতে পারি।

৭। বাউন্স রেট কমাতে সাহায্য করে

বাউন্স রেট দ্বারা বোঝানো হয় কত পার্সেন্ট ভিজিটর কোন ওয়েবসাইটের মাত্র একটি পেইজ দেখার পর তা ছেড়ে চলে গেছে। আগেই আমরা উল্লেখ করেছি যে রেসপনসিভ ওয়েব সাইট এর মানে হচ্ছে ভিজিটররা আপনার ওয়েবসাইটে অনেক সময় ধরে থাকবে যা আপনার বাউন্স রেট কমাবে। এর ফলে ভিজিটররা আরো বেশি পেইজে ক্লিক করতে আগ্রহী হবে এবং আপনার সাইটের অন্যান্য পেজসমূহ পড়বে ও আপনি যে সব অফার দিয়েছেন তা বিস্তারিতভাবে দেখতে আগ্রহী হবে।

৯। উচ্চ কনভার্সন রেট

আপনার সাইটে অধিক সময় ব্যয় করা এবং বাউন্স রেট এর পরিমাণ কম হওয়ার কারণে আপনার ভিজিটরদের জন্য ইতিবাচক ইউজার এক্সপেরিয়েন্স তৈরি হবে। এর ফলে কনভার্শন রেট বৃদ্ধি পাবে। কনভার্শন রেট নির্ধারিত হতে পারে আপনার নিউজলেটার এর জন্য সাইন আপ করা, ওয়েবসাইট থেকে কোন কিছু কেনা অথবা কল করার উপর ভিত্তি করে। ডেক্সটপ এর তুলনায় স্মার্টফোনের কনভার্শন রেট ৬৪% বেশি হয়ে থাকে এবং এতেই বুঝা যায় রেসপনসিভ ওয়েব সাইট কেন অবশ্যই দরকার।

১০। সার্চ ইঞ্জিনের জন্য ভালো

রেসপনসিভ ওয়েব সাইট এর আরেকটি সুবিধা হচ্ছে সার্চ ইঞ্জিনের র্যাঙ্কিং বৃদ্ধি পাওয়া। গুগল সার্চ ইঞ্জিনে ওয়েব সাইট র‍্যাংকিং এর জন্য বেশ কিছু অ্যালগরিদম এর মধ্যে একটি হলো ওয়েবসাইটকে ভালো র‍্যাংক পেতে হতে অবশ্যই সেটিকে মোবাইল ফ্রেন্ডলি হতে হবে। এসব কারণেই বর্তমানে রেসপন্সিভ ভাবে ওয়েব ডিজাইনের চাহিদা আকাশচুম্বী। এটি যে শুধু আপনার ভিজিটরদের সুবিধা দেবে ব্যাপারটি তা নয়। এতে করে বিভিন্ন সার্চ ইঞ্জিনেও আপনার ওয়েবসাইটের র‍্যাংক বাড়তে সাহায্য করবে অর্থাৎ এসইওতে ভালো করতে পরেবেন। যার ফলে ওয়েবসাইটের ট্রাফিক বেড়ে যাবে। এটি একটি গুরুত্বপূর্ণ  র্যাঙ্কিং সিগনাল। যদি আপনার ওয়েবসাইট রেস্পন্সিভ না হয় তাহলে আপনার ওয়েবসাইটের তথ্য সমূহ সার্চ ইঞ্জিন রেজাল্ট পেইজের নিচের দিকে দেখাবে। যদি এটা মোবাইল ফ্রেন্ডলি টেস্ট অনুযায়ী রেস্পন্সিভ হতো, তাহলে এটা পেজের শুরুতে দেখাতো।

১১। সোশ্যাল শেয়ারিং বৃদ্ধি পাওয়া

রেসপনসিভ ওয়েব ডিজাইন এর আরেকটি সুবিধা হল সঠিকভাবে করা হলে রেসপনসিভ ওয়েব ডিজাইন আপনার কনটেন্ট এর সোশ্যাল শেয়ার বাড়াতে সাহায্য করবে। রেস্পন্সিভ কনটেন্ট এর সাথে সাথে রেস্পন্সিভ সোশ্যাল মিডিয়া বাটনের ব্যবহার আপনার সাইটের পেজসমূহ ছোট স্ক্রিনেও শেয়ার করা সহজ করে তুলবে। এটা আপনার সাইটের অডিয়েন্স পেতে সাহায্য করবে যার ফলে আরো বেশি ট্রাফিক ও কনভার্শন পাবেন। একই সাথে সোশ্যাল সিগনাল আপনার সার্চ ইঞ্জিন রেংক এর উপর পরোক্ষভাবে প্রভাব ফেলবে কারণ সার্চ ইঞ্জিন ক্রমাগত বৃদ্ধি পাওয়া এনগেজমেন্ট ও সার্চ ডিমান্ড বুঝতে পারে।

১২। ভালো ব্যাকলিঙ্ক

রেসপনসিভ ওয়েব সাইট ভালো ব্যাকলিংক তৈরিতে আপনাকে সহায়তা করতে পারে। ভালো ব্যাক লিংক  এসইও এর ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা রাখে। কারণ ভালো ব্যাক লিংক সার্চ ইঞ্জিনকে বুঝতে সাহায্য করে যে অন্যান্য ওয়েবসাইট আপনার সাইটকে একটি উল্লেখযোগ্য তথ্য সূত্র হিসেবে কতটা গভীরভাবে বিবেচনা করে থাকে। যদি আপনার সাইটটি রেস্পন্সিভ না হয়, তাহলে অন্যান্য ওয়েবসাইট সমূহ আপনার সাথে লিংক তৈরি করতে আগ্রহী হবে না। কারন এমন কোন ওয়েবসাইটের সাথে লিংক করা ভালো নয় যা ভালো ইউজার এক্সপেরিয়েন্স প্রদান করে না। এর ফলে তাদের সাইটের রেপুটেশন কমে যাবে।

রেসপনসিভ ওয়েব ডিজাইন এর মূলনীতি

রেস্পন্সিভ ডিজাইন এর ক্ষেত্রে বেশ কিছু মূলনীতি আছে যা প্রত্যেক ডিজাইনারের পাশাপাশি প্রত্যেকটি আধুনিক ফ্রেমওয়ার্ক এবং সিএমএস কে মেনে চলতে হয়:

১। ফ্লুইড গ্রিড

ফ্লুইড গ্রিড হচ্ছে রেসপনসিভ ডিজাইনের কেন্দ্রবিন্দু। গ্রিড এর মাধ্যমে আপনি আপনার ওয়েব পেইজে এলিমেন্ট সমূহকে সমান্তরাল করতে পারবেন এবং দেখতে আকর্ষণীয়ভাবে অনুক্রম অনুসারে সাজাতে পারবেন। ফ্লুইড গ্রিডের স্কেল ব্যবহারকারীর স্ক্রীন সাইজ এর উপর নির্ভরশীল এবং এর উপর ভিত্তি করে সকল পেইজ এলিমেন্টগুলো বিভিন্ন স্ক্রীন সাইজের সাথে মানিয়ে যায়। যদিও ডিজাইন এর ক্ষেত্রে গ্রিডের ব্যবহার সবসময়ই ছিলো কিন্তু ওয়েব ডিজাইন এর ক্ষেত্রে ডিজাইনার এবং ডেভেলপারদেরকে ওয়েবসাইট ডিজাইনে সহায়তার জন্য সিম্পল রেস্পন্সিভ গ্রিডসমুহকে বিশেষভাবে তৈরি করা হয়েছে। এইসব রেস্পন্সিভ গ্রিড ছাড়াও ওয়েবে অনেক ধরনের রেস্পন্সিভ ফ্রেমওয়ার্ক রয়েছে এবং যার প্রায় সবগুলোই ফ্লুইড গ্রিডের উপর ভিত্তি করে তৈরি।

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

২। মিডিয়া কুয়েরি

ফ্লুইড গ্রিডের মতই মিডিয়া কুয়েরি রেসপনসিভ ওয়েব ডিজাইনের পেছনের একটি প্রযুক্তি যা রেস্পন্সিভ ডিজাইনের ক্ষেত্রে ব্যাবহার করা হয়। মিডিয়া কুয়েরীর দ্বারা কোনও ওয়েবসাইটে স্ক্রিন সাইজ সম্পর্কিত তথ্যসমূহ একত্র করে রাখা সম্ভব হয়, ফলে যেকোনো ভিজিটর তাঁদের পছন্দমত স্ক্রিনে ওয়েবসাইট ভিজিট করতে পারে। এই তথ্যের কারণে ভিন্ন ভিন্ন শর্তের অধীনে ভিন্ন ভিন্ন স্ক্রিন সাইজ অনুযায়ী সিএসএস স্টাইল শিট ফাইল লোড হয়ে থাকে।

৩। রেস্পন্সিভ ইমেজ এবং মিডিয়া

যদি াপনার ওয়েবসাইটে শুধুমাত্র টেক্সট থাকে, তাহলে রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করা সহজ। তবে, আধুনিক ওয়েবসাইটে ইমেজ এবং ভিডিওর মত অনেক ধরণের মিডিয়া যুক্ত করা হয়, যা অনেক সময় জটিল মনে হতে পারে।

ইমেজ এবং অন্যান্য মিডিয়া ফাইল পরিচালনা করার সবচেয়ে ভালো উপায় হচ্ছে ইমেজ অথবা মিডিয়া ফাইল ডাইমেনশনের পরিবর্তে max-width প্রপার্টি ব্যবহার করা। যেমন নিচের উদাহরণে দেখা যাচ্ছে:

img {
 
    max-width: 100%;
    height: auto;
 
}

আপনি যদি অন্যান্য মিডিয়া টাইপ যুক্ত করতে চান, তাহলে স্টাইল করার পদ্ধতিটি আরো সুক্ষ্ম ও জটিল হয়ে উঠবে। এক্ষেত্রে height প্রপার্টি কাজ করবে না, তাই কোনও কনটেইনারের নিচে প্যাডিং যুক্ত করতে হবে, তারপর মিডিয়াটি সেই কণ্টেইনারের ভিতর স্থাপন করতে হবে। এই পদ্ধতিটি এখন পর্যন্ত অন্যান্য মিডিয়ার ক্ষেত্রে সবচেয়ে শক্তিশালী উপায়।

.wrapper-with-intrinsic-ratio {
    position: relative;
  padding-bottom: 20%;
    height: 0;
}
 
.element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

একবার আপনি আপনার CSS কোডে এটি যুক্ত করলে, সমস্ত চিত্র এবং মিডিয়া ফাইলগুলি আপনার ব্রাউজারের সাথে স্কেল করবে এবং তাদের কনটেইনারের বাইরে প্রসারিত হবে না।

আরও পড়ুনঃ ওয়েব ডিজাইন কিভাবে শিখবেন? ক্যারিয়ার গাইডলাইন

মোবাইলের জন্য মোবাইল ভার্শন তৈরি করবেন না রেসপনসিভ ডিজাইন করবেন?

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

কিন্তু রেসপনসিভ ওয়েব ডিজাইনে CSS এর কোড ব্যবহার করে এমনভাবে ডিজাইন করা হয় যেন সাইটটি যে কোনো স্কিনেই পূর্নাঙ্গভাবে প্রদর্শিত হয়। এর ফলে সাইটটির আলাদা ভার্সন তৈরির প্রয়োজন পড়ে না একটি ডিজাইন দিয়েই সব ডিভাইস উপযোগী করে তোলা যায়। এর ফলে কোনো সাইট তৈরি জন্য খরচও প্রায় অর্ধেকে নেমে আসে।

আরও পড়ুনঃ স্ট্যাটিক এবং ডাইনামিক ওয়েবসাইটের মধ্যে পার্থক্য।

কিভাবে ওয়েবসাইটকে রেসপন্সিভ করতে হয়?

রেসপনসিভ ওয়েব ডিজাইন (RWD) এমন একটি সেট-আপ যেখানে সার্ভার সব ডিভাইসে একই HTML কোড পাঠায় এবং ডিভাইসে কোনও পৃষ্ঠার রেন্ডারিং পরিবর্তন করতে CSS ব্যবহার করা হয়।
সব ডিভাইসে ওয়েব সাইটের পেজগুলো সঠিক ভাবে দেখানোর জন্য ওয়েব সাইটের হেড সেকশনে একটি মেটা ট্যাগ যোগ করতে:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
ডিভাইসের চওড়ার সাথে পেজের আকার এবং স্কেলিং কিভাবে অ্যাডজ্যাস্ট করবে সে সম্পর্কে ব্রাউজারকে মেটা ভিউপোর্ট ট্যাগ নির্দেশ দেয়।

বর্তমানে যে সব ওয়েবসাইট তৈরী করা হয়, তার প্রায় সবগুলোই ডিজাইন করা হয়ে থাকে রেসপন্সিভভাবে। তাই ওয়েবসাইটকে ব্যবহারকারিদের সুবিধা এবং জনপ্রিয়তা বৃদ্ধির জন্য রেসপন্সিভ ওয়েব ডিজাইন করা জরুরী।

Recommended For You

About the Author: Soikat Singha

আমি একজন ফুলস্টেক ওয়েব ডেভেলপার। ডোমেইন এবং হোষ্টিং প্রোভাইডার হিসেবে কাজ করছি বহু বছর। আমার বিশ্বাস আপনি ফ্রিল্যান্সিং বা অনলাইন ক্যারিয়ার বিষয়ে শিখতে চান। আমার লেখা বাংলা টিউটোরিয়াল আপনার ক্যারিয়ার ডেভেলপমেন্টে একটুও সাহায্য করতে পারলেই আমার সার্থকতা। ফেসবুকে আমার সাথে যুক্ত থাকুনঃ https://www.facebook.com/soikatsingha24

Leave a Reply

Your email address will not be published. Required fields are marked *