শুরু থেকেই, ওয়ার্ল্ড ওয়াইড ওয়েব অজ্ঞেয়বাদী হওয়ার জন্য ডিজাইন করা হয়েছিল। আপনি কি হার্ডওয়্যার পেয়েছেন তা বিবেচ্য নয়। আপনার ডিভাইসটি কোন অপারেটিং সিস্টেমে চলছে তা বিবেচ্য নয়। যতক্ষণ আপনি ইন্টারনেটের সাথে সংযোগ করতে পারেন, ওয়ার্ল্ড ওয়াইড ওয়েব আপনার কাছে অ্যাক্সেসযোগ্য।
ওয়েবের প্রথম দিনগুলিতে, বেশিরভাগ মানুষ ডেস্কটপ কম্পিউটার ব্যবহার করত। আজকাল ওয়েব ডেস্কটপ, ল্যাপটপ, ট্যাবলেট, ফোল্ডেবল ফোন, ফ্রিজ এবং গাড়িতে পাওয়া যায়। লোকেরা ঠিকই আশা করে যে ওয়েবসাইটগুলি তারা যে ডিভাইস ব্যবহার করছে তা বিবেচনা না করেই ভাল দেখাবে৷ প্রতিক্রিয়াশীল নকশা এটি সম্ভব করে তোলে।
প্রতিক্রিয়াশীল ডিজাইন ওয়েবসাইট ডিজাইন করার প্রথম পদ্ধতি নয়। প্রতিক্রিয়াশীল ডিজাইনের আগের বছরগুলিতে, ওয়েব ডিজাইনার এবং বিকাশকারীরা বিভিন্ন কৌশল চেষ্টা করেছিলেন।
স্থির-প্রস্থ নকশা
1990 এর দশকের গোড়ার দিকে, যখন ওয়েব প্রথম জনপ্রিয় হয়ে উঠছিল, বেশিরভাগ মনিটরের স্ক্রীনের মাত্রা ছিল 640 পিক্সেল চওড়া এবং 480 পিক্সেল লম্বা। এগুলি ছিল উত্তল ক্যাথোড রশ্মির টিউব, আমাদের এখনকার সমতল তরল স্ফটিক প্রদর্শনের মতো নয়।
প্রারম্ভিক ওয়েব ডিজাইনের প্রাথমিক দিনগুলিতে, 640 পিক্সেল প্রস্থের ওয়েব পৃষ্ঠাগুলি ডিজাইন করা একটি নিরাপদ বাজি ছিল। কিন্তু ফোন এবং ক্যামেরার মতো অন্যান্য প্রযুক্তি যখন ক্ষুদ্রাকৃতির ছিল, তখন স্ক্রিনগুলি বড় হয়ে উঠছিল (এবং অবশেষে, চাটুকার)। অনেক আগে, বেশিরভাগ স্ক্রিনের মাত্রা ছিল 800 বাই 600 পিক্সেল। ওয়েব ডিজাইন সেই অনুযায়ী পরিবর্তিত হয়েছে। ডিজাইনার এবং ডেভেলপাররা ধরে নিতে শুরু করে যে 800 পিক্সেল একটি নিরাপদ ডিফল্ট ছিল।
তারপর আবার পর্দা বড় হয়েছে। 1024 দ্বারা 768 ডিফল্ট হয়ে ওঠে। এটি ওয়েব ডিজাইনার এবং হার্ডওয়্যার নির্মাতাদের মধ্যে একটি অস্ত্রের প্রতিযোগিতার মতো অনুভূত হয়েছিল।
এটি 640, 800, বা 1024 পিক্সেলই হোক না কেন, ডিজাইন করার জন্য একটি নির্দিষ্ট প্রস্থ বেছে নেওয়াকে বলা হত ফিক্সড-প্রস্থ ডিজাইন।
আপনি যদি আপনার লেআউটের জন্য একটি নির্দিষ্ট প্রস্থ উল্লেখ করেন, তাহলে আপনার লেআউটটি শুধুমাত্র সেই নির্দিষ্ট প্রস্থে ভালো দেখাবে। আপনার সাইটের একজন দর্শকের যদি আপনার বেছে নেওয়া প্রস্থের চেয়ে চওড়া স্ক্রীন থাকে, তাহলে স্ক্রিনে জায়গা নষ্ট হবে। আপনি আপনার পৃষ্ঠাগুলির বিষয়বস্তুকে কেন্দ্র করে সেই স্থানটিকে আরও সমানভাবে বিতরণ করতে পারেন (একপাশে খালি স্থানের পরিবর্তে) তবে আপনি এখনও উপলব্ধ স্থানটির সম্পূর্ণ সুবিধা গ্রহণ করবেন না।
একইভাবে, যদি একজন দর্শক আপনার পছন্দের প্রস্থের চেয়ে সংকীর্ণ স্ক্রীন নিয়ে আসে, তাহলে আপনার বিষয়বস্তু অনুভূমিকভাবে ফিট হবে না। ব্রাউজারটি একটি ক্রলবার তৈরি করে—একটি স্ক্রলবারের অনুভূমিক সমতুল্য—এবং ব্যবহারকারীকে সমস্ত বিষয়বস্তু দেখার জন্য পুরো পৃষ্ঠাটি বামে এবং ডানদিকে সরাতে হবে৷
তরল লেআউট
যদিও বেশিরভাগ ডিজাইনার স্থির-প্রস্থ লেআউট ব্যবহার করেন, কেউ কেউ তাদের লেআউটগুলি নমনীয় করতে বেছে নেন। আপনার লেআউটের জন্য নির্দিষ্ট প্রস্থ ব্যবহার করার পরিবর্তে আপনি আপনার কলামের প্রস্থের জন্য শতাংশ ব্যবহার করে একটি নমনীয় লেআউট তৈরি করতে পারেন। এই ডিজাইনগুলি একটি নির্দিষ্ট-প্রস্থ লেআউটের চেয়ে বেশি পরিস্থিতিতে কাজ করে যা শুধুমাত্র একটি নির্দিষ্ট আকারে সঠিক দেখায়।
এগুলোকে তরল লেআউট বলা হতো। কিন্তু যখন একটি তরল বিন্যাস বিস্তৃত প্রস্থ জুড়ে ভাল দেখাবে, এটি চরম পর্যায়ে খারাপ হতে শুরু করবে। একটি প্রশস্ত পর্দায় লেআউট প্রসারিত দেখায়। একটি সরু স্ক্রিনে লেআউটটি স্কোয়াশ দেখায়। উভয় পরিস্থিতিই আদর্শ নয়।
আপনি আপনার লেআউটের জন্য min-width এবং max-width ব্যবহার করে এই সমস্যাগুলি প্রশমিত করতে পারেন। কিন্তু তারপরে ন্যূনতম প্রস্থের নীচে বা সর্বোচ্চ প্রস্থের উপরে যে কোনও আকারে আপনি একটি নির্দিষ্ট-প্রস্থ লেআউটের সাথে একই সমস্যাগুলি পেয়েছেন। একটি প্রশস্ত স্ক্রিনে অব্যবহৃত স্থান নষ্ট হয়ে যাবে। একটি সংকীর্ণ স্ক্রিনে, ব্যবহারকারীকে সবকিছু দেখতে পুরো পৃষ্ঠাটি বামে এবং ডানদিকে সরাতে হবে।
তরল শব্দটি এই ধরণের বিন্যাস বর্ণনা করতে ব্যবহৃত পদগুলির মধ্যে একটি। এই ধরনের ডিজাইনকে ফ্লুইড লেআউট বা নমনীয় লেআউটও বলা হত। পরিভাষাটি কৌশলের মতোই তরল ছিল।
ছোট পর্দা
একবিংশ শতাব্দীতে, ওয়েব আরও বড় হতে থাকে। মনিটররাও তাই করেছে। কিন্তু নতুন স্ক্রিন এসেছে যা যেকোনো ডেস্কটপ ডিভাইসের চেয়ে ছোট। সম্পূর্ণ বৈশিষ্ট্যযুক্ত ওয়েব ব্রাউজার সহ মোবাইল ফোনের আগমনের সাথে, ডিজাইনাররা একটি দ্বিধাদ্বন্দ্বের মুখোমুখি হয়েছিল। কিভাবে তারা নিশ্চিত করতে পারে যে তাদের ডিজাইন একটি ডেস্কটপ কম্পিউটার এবং একটি মোবাইল ফোনে ভাল দেখাবে? তাদের 240 পিক্সেল চওড়া এবং হাজার হাজার পিক্সেল চওড়া স্ক্রীনের জন্য তাদের বিষয়বস্তু স্টাইল করার একটি উপায় প্রয়োজন।
আলাদা সাইট
একটি বিকল্প হল মোবাইল দর্শকদের জন্য একটি পৃথক সাবডোমেন তৈরি করা। কিন্তু তারপর আপনাকে দুটি পৃথক কোডবেস এবং ডিজাইন বজায় রাখতে হবে। এবং মোবাইল ডিভাইসে দর্শকদের পুনঃনির্দেশিত করার জন্য, আপনাকে ব্যবহারকারী-এজেন্ট স্নিফিং করতে হবে, যা অবিশ্বস্ত হতে পারে এবং সহজেই স্পুফ করা যায়। গোপনীয়তার কারণে Chrome তার ব্যবহারকারী-এজেন্ট স্ট্রিংকে অবমূল্যায়ন করবে। এছাড়াও, মোবাইল এবং নট-মোবাইলের মধ্যে কোন স্পষ্ট লাইন নেই। আপনি কোন সাইটে ট্যাবলেট ডিভাইস পাঠান?
অভিযোজিত বিন্যাস
বিভিন্ন সাবডোমেনে আলাদা সাইট থাকার পরিবর্তে, আপনার কাছে দুই বা তিনটি ফিক্সড-প্রস্থ লেআউট সহ একটি একক সাইট থাকতে পারে।
যখন মিডিয়া প্রশ্নগুলি প্রথম CSS-এ আসে, তারা লেআউটগুলিকে আরও নমনীয় করার দরজা খুলে দেয়। কিন্তু অনেক ডেভেলপার এখনও ফিক্সড-প্রস্থ লেআউট তৈরি করতে সবচেয়ে স্বাচ্ছন্দ্য বোধ করেন। একটি কৌশল নির্দিষ্ট প্রস্থে মুষ্টিমেয় নির্দিষ্ট-প্রস্থ লেআউটগুলির মধ্যে স্যুইচিং জড়িত। কিছু লোক এটি একটি অভিযোজিত নকশা কল.
অভিযোজিত নকশা ডিজাইনারদের এমন লেআউট সরবরাহ করতে দেয় যা কয়েকটি ভিন্ন আকারে ভাল দেখায়, কিন্তু সেই আকারগুলির মধ্যে দেখা হলে নকশাটি কখনই সঠিক দেখায় না। অতিরিক্ত স্থানের সমস্যাটি অব্যাহত ছিল যদিও এটি একটি নির্দিষ্ট-প্রস্থ লেআউটের মতো খারাপ ছিল না।
CSS মিডিয়া প্রশ্ন ব্যবহার করে, আপনি লোকেদের তাদের ব্রাউজার প্রস্থের সবচেয়ে কাছাকাছি লেআউট দিতে পারেন। কিন্তু ডিভাইসের আকারের বৈচিত্র্যের কারণে, লেআউটটি বেশিরভাগ লোকের জন্য নিখুঁত থেকে কম দেখাবে।
প্রতিক্রিয়াশীল ওয়েব ডিজাইন
যদি অভিযোজিত লেআউটগুলি মিডিয়া প্রশ্ন এবং নির্দিষ্ট-প্রস্থ লেআউটগুলির একটি ম্যাশআপ হয়, প্রতিক্রিয়াশীল ওয়েব ডিজাইন হল মিডিয়া প্রশ্ন এবং তরল লেআউটগুলির একটি ম্যাশআপ।
শব্দটি 2010 সালে এ লিস্ট অ্যাপার্টের একটি নিবন্ধে ইথান মারকোট দ্বারা তৈরি করা হয়েছিল।
ইথান প্রতিক্রিয়াশীল ডিজাইনের জন্য তিনটি মানদণ্ড সংজ্ঞায়িত করেছেন:
- তরল গ্রিড
- তরল মিডিয়া
- মিডিয়া প্রশ্ন
একটি প্রতিক্রিয়াশীল সাইটের বিন্যাস এবং চিত্রগুলি যে কোনও ডিভাইসে ভাল দেখাবে৷ কিন্তু একটা সমস্যা ছিল।
viewport জন্য একটি meta উপাদান
মোবাইল ফোনের ব্রাউজারগুলিকে এমন ওয়েবসাইটগুলির সাথে মোকাবিলা করতে হয়েছিল যেগুলি বিস্তৃত স্ক্রিনের জন্য নির্দিষ্ট-প্রস্থ লেআউট দিয়ে ডিজাইন করা হয়েছিল। ডিফল্টরূপে মোবাইল ব্রাউজারগুলি ধরে নেয় যে 980 পিক্সেল হল প্রস্থ যা লোকেরা ডিজাইন করছে (এবং তারা ভুল ছিল না)। সুতরাং আপনি একটি তরল লেআউট ব্যবহার করলেও, ব্রাউজারটি 980 পিক্সেলের প্রস্থ প্রয়োগ করবে এবং তারপর রেন্ডার করা ওয়েব পৃষ্ঠাটিকে স্ক্রিনের প্রকৃত প্রস্থে স্কেল করবে।
আপনি যদি প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করেন তবে আপনাকে ব্রাউজারকে সেই স্কেলিং না করতে বলতে হবে। আপনি ওয়েব পৃষ্ঠার head একটি meta উপাদান দিয়ে এটি করতে পারেন:
<meta name="viewport" content="width=device-width, initial-scale=1">
কমা দ্বারা পৃথক দুটি মান আছে। প্রথমটি হল width=device-width . এটি ব্রাউজারকে বলে যে ওয়েবসাইটটির প্রস্থ ডিভাইসের প্রস্থের সমান (ওয়েবসাইটের প্রস্থ 980 পিক্সেল ধরে নেওয়ার পরিবর্তে)। দ্বিতীয় মান হল initial-scale=1 । এটি ব্রাউজারকে কতটা বা কত কম স্কেলিং করতে হবে তা বলে। একটি প্রতিক্রিয়াশীল ডিজাইনের সাথে, আপনি ব্রাউজারটি একেবারেই কোনো স্কেলিং করতে চান না।
সেই meta উপাদানের সাথে, আপনার ওয়েব পৃষ্ঠাগুলি প্রতিক্রিয়াশীল হতে প্রস্তুত।
আধুনিক প্রতিক্রিয়াশীল নকশা
আজ আমাদের কাছে এমন ওয়েবসাইট তৈরি করার ক্ষমতা রয়েছে যা ভিউপোর্টের আকারের বাইরে অনেক বেশি প্রতিক্রিয়াশীল। মিডিয়া বৈশিষ্ট্যগুলি বিকাশকারীদের ব্যবহারকারীর পছন্দগুলিতে অ্যাক্সেস দেয় এবং কাস্টমাইজড অভিজ্ঞতা সক্ষম করে। কন্টেইনার প্রশ্নগুলি উপাদানগুলিকে তাদের নিজস্ব প্রতিক্রিয়াশীল তথ্যের মালিক হতে সক্ষম করে। picture উপাদানটি ডিজাইনারদের স্ক্রীন অনুপাতের উপর ভিত্তি করে শিল্প-নির্দেশের সিদ্ধান্ত নেওয়ার ক্ষমতা দেয়।
আপনার উপলব্ধি পরীক্ষা করুন
প্রতিক্রিয়াশীল ওয়েব ডিজাইন সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন
2021 সালে, একটি নির্দিষ্ট প্রস্থে ওয়েব পৃষ্ঠাগুলি ডিজাইন করা একটি নিরাপদ বাজি?
তরল লেআউটগুলি সাধারণত কোন ধরণের পর্দার আকারে লড়াই করে?
রেসপনসিভ ডিজাইনের মূল তিনটি মানদণ্ড কি?
প্রতিক্রিয়াশীল নকশা একটি উত্তেজনাপূর্ণ, সম্ভাবনার ক্রমবর্ধমান বিশ্ব। এই কোর্সের বাকি অংশে, আপনি এই প্রযুক্তিগুলি সম্পর্কে এবং প্রত্যেকের জন্য সুন্দর, প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করতে কীভাবে তাদের ব্যবহার করবেন তা শিখবেন।