অ্যাডাপ্টিভ ওয়েবসাইট ডিজাইন হল অনলাইনে বিভিন্ন ধরনের ডিভাইসে একই ওয়েবসাইট প্রদর্শনের জন্য একটি সুবিধাজনক সিস্টেম। সহজ কথায়, এটি একটি ল্যাপটপ, স্মার্টফোন এবং অন্যান্য গ্যাজেটে একটি ওয়েব পৃষ্ঠা দেখার ক্ষমতা৷
লোকেরা বিভিন্ন ফর্ম্যাটের ইন্টারনেট-সক্ষম গ্যাজেট পাওয়ার পর থেকেই ওয়েব প্রতিক্রিয়াশীলতা একটি প্রয়োজনীয়তা হয়ে উঠেছে৷ কোম্পানি, অনলাইন স্টোর এবং এমনকি তথ্যপূর্ণ সাইটগুলি তাদের শ্রোতাদের খুশি করার চেষ্টা করে, প্রতিটি সম্ভাব্য উপায়ে এটির সাথে খাপ খাইয়ে নেয়। প্রতিক্রিয়াশীল নকশা সুবিধার সমস্যা সমাধান করে, তাই এটি একটি অপরিহার্য কাজের আইটেম।
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের বৈশিষ্ট্য
নকশাটির সুবিধাটি বিভিন্ন প্রধান মানদণ্ড দ্বারা চিহ্নিত করা হয়৷
- আকার। বিভিন্ন ডিভাইসে পৃষ্ঠাটি প্রদর্শন করার সময় প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইনে ছোটখাটো পার্থক্য থাকা উচিত, তাই ছবি, পাঠ্য এবং অন্যান্য উপাদানের আকারগুলি ডিভাইসের আকারের সাথে মিলে যাওয়া উচিত। এটি করার জন্য, ওয়েব ডেভেলপাররা ডিজাইনটিকে মানিয়ে নেয় যাতে এটির একাধিক ভিউ সংস্করণ থাকে৷
- কন্টেন্ট অভিযোজন। উপাদান যা সাইটটি পূরণ করে (ছবি, ভিডিওএবং অন্যান্য মাল্টিমিডিয়া উপাদানগুলি) অবশ্যই ডিসপ্লের গুণমান না হারিয়ে প্রয়োজনীয় স্ক্রীন রেজোলিউশনের সাথে মেলে।
- নকশা নমনীয়তা। উপাদানগুলির বিকাশে অন্তর্ভুক্তি যা আপনি যে ওয়েব পৃষ্ঠাটি দেখছেন তা পরিবর্তন করার সময় আপনাকে দ্রুত সাইটের নকশা সামঞ্জস্য করতে দেয়৷ উদাহরণস্বরূপ, ব্যবহারকারী পৃষ্ঠাটি উপরে এবং নীচে স্ক্রোল করে, বিভিন্ন বিভাগে নেভিগেট করে, বা স্ক্রিনের অবস্থান উল্লম্ব থেকে অনুভূমিক এবং বিপরীতে পরিবর্তন করে।
- ভালো ব্যবহারযোগ্যতার জন্য ডিভাইস অনুসারে আইটেমগুলি সরল করুন।
- ছোট স্ক্রিনে গুরুত্বহীন ব্লক লুকান।
বেসিক
ওয়েবসাইট বিল্ডিং অবশ্যই প্রোগ্রামিং ভাষাগুলির সাথে সম্পর্কিত, কারণ আপনি তাদের ছাড়া করতে পারবেন না। HTML এবং CSS ব্যবহার করে, ব্রাউজার বস্তুর গঠন এবং ক্রম (টেক্সট, ইলাস্ট্রেশন, ভিডিও) সনাক্ত করে - এইভাবে সাইটটি গঠিত হয়।
CSS রঙ, শৈলী, আকার, ফন্ট, প্রান্তিককরণ, প্যাডিং, ব্যাকগ্রাউন্ড উপাদান, ফর্ম ইত্যাদির জন্য দায়ী। সাইটের সামগ্রিক বিষয়বস্তু এবং কাঠামোর জন্য এইচটিএমএল দায়ী। এইভাবে, একটি ওয়েব রিসোর্স দুটি সবচেয়ে গুরুত্বপূর্ণ বর্ণনা পদ্ধতির সমন্বয়ে তৈরি করা হয়েছে।
CSS, অন্যদিকে, একটি অপরিহার্য ডিজাইন টুল। এইচটিএমএল থেকে উন্নত বৈশিষ্ট্যের একটি বড় সেট রয়েছে:
- একাধিক পৃষ্ঠা, সাইটের উপস্থিতি জুড়ে ডিজাইনের সামঞ্জস্য প্রদান করে এবং HTML নথির প্রদর্শন নিয়ন্ত্রণ করে।
- আপনাকে একই সাথে ডিজাইন এবং কন্টেন্ট করার সুযোগ দেয়।
- একাধিক শৈলী এবং ক্ষমতা প্রয়োগ করেবিভিন্ন ডিভাইসে দেখা হচ্ছে।
- জটিল ডিজাইনের সিদ্ধান্ত নেয়।
- উচ্চ গতির দ্বারা চিহ্নিত৷
একটি ওয়েবসাইট তৈরি করতে, আপনাকে কিছু মৌলিক ধারণা জানতে হবে।
একটি CSS নির্বাচককে একটি শৈলীর নাম দ্বারা চিহ্নিত করা হয় যা বৈশিষ্ট্য এবং বিন্যাস বিকল্পগুলিকে সংজ্ঞায়িত করে। এটি ব্রাউজারকে বলে যে কোন নির্দিষ্ট উপাদানের জন্য বৈশিষ্ট্যগুলি প্রযোজ্য৷
একটি সম্পত্তি একটি কাঠামোগত একক। এটি বাহ্যিক পরামিতি (আকার, অবস্থান, রঙ, আকৃতি, ইত্যাদি) সংজ্ঞায়িত করে এবং একটি নির্দিষ্ট কোডে প্রকাশ করা হয়৷
সংজ্ঞায়িত CSS বৈশিষ্ট্যের একটি সেট রয়েছে যা একটি একক বস্তুর চেহারা এবং অবস্থান বর্ণনা করে।
একসাথে, এই উপাদানগুলি নিম্নলিখিত স্কিম গঠন করে:
নির্বাচক { সম্পত্তি1: মান; সম্পত্তি2; মান }।
লেআউট আকার এবং রেজোলিউশন
ডিজাইন ডেভেলপমেন্ট শুরু হয় ফটোশপ বা অন্যান্য গ্রাফিক প্রোগ্রামে লেআউট তৈরির মাধ্যমে। সুবিধার জন্য, মডুলার গ্রিডের বিশেষ চিহ্নগুলি ক্যানভাসে প্রবর্তন করা হয়, বিশেষ ইন্ডেন্টগুলি পর্যবেক্ষণ করা হয়। এইভাবে, ওয়েব ডিজাইনার লেআউট ডিজাইনারকে ভবিষ্যতের সাইট গঠনের নীতি এবং ওয়েব উপাদানগুলির সঠিক বিন্যাস দেখায়৷
প্রধান ডিভাইস প্রকারের জন্য প্রতিক্রিয়াশীল ওয়েব ডিজাইন রেজোলিউশন এবং আকার:
- এই ডিজাইনটি মোবাইলের অনুমতি নিয়ে কাজ শুরু করার নীতি মেনে চলে। স্মার্টফোনের জন্য লেআউটটি 460 × 960 px আকারে তৈরি করা হয়েছে।
- ট্যাবলেট লেআউটের আকার হল ৭৬৮ × ১০২৪।
- নোটবুকের আকার 1280 × 802।
- PC সাইজ হল 1600 × 992।
সাইটের মোবাইল সংস্করণেসমস্ত প্রধান ফাংশন বজায় রাখার সময় যতটা সম্ভব সরলীকৃত হওয়া উচিত। যদি লেআউটটি একটি অনলাইন স্টোরের জন্য প্রস্তুত করা হয়, ব্যবহারে সমস্ত সরলীকরণ সহ, এটিতে একটি প্রধান বিবরণ, একটি পণ্যের ক্যাটালগ, একটি অর্ডার বিকল্প, একটি শপিং কার্ট, ইত্যাদি থাকা উচিত - পূর্ণাঙ্গ কার্যকারিতার জন্য প্রয়োজনীয় সমস্ত উপাদান, পিসিতে পূর্ণ বিন্যাস দেখার মতো। মোবাইল সংস্করণের সুবিধা হল এখানে আপনি লোড করার সময় সময় বাঁচাতে অতিরিক্ত পৃষ্ঠাগুলি এড়াতে পারেন৷
অ্যাডাপ্টিভ কন্টেন্টে, এইচটিএমএল কোড ব্যবহার করে, আপনি এমন কিছু উপাদান লুকিয়ে রাখতে পারেন যা আসলেই প্রয়োজন নেই। উদাহরণস্বরূপ, উচ্চ রেজোলিউশনে, সাইটটি তার বিবরণ, মূল্য, বিতরণ তথ্য এবং "ঝুড়ি" যোগ করার ক্ষমতা সহ একটি পণ্য কার্ড প্রদর্শন করে। মোবাইল রেজোলিউশনে, প্রক্রিয়াটিকে একটি ফটো, একটি মূল্য এবং একটি কেনার বোতামে সরল করা হয়েছে৷
প্রতিক্রিয়াশীল ডিজাইনের জন্য মাঝারি এবং ন্যূনতম রেজোলিউশনগুলি ব্যবহারকারীর পড়া এবং দেখার সহজতার বিষয়টি বিবেচনায় নেওয়া উচিত৷
লেআউট
অ্যাডাপ্টিভ ডিজাইন লেআউটের উদ্দেশ্য হল একটি নমনীয় লেআউট তৈরি করা, অথবা এটাও বলা প্রচলিত: "রাবার টেমপ্লেট"। নীচের লাইনটি একক-সংখ্যার পৃষ্ঠা আকারে নয়, তবে সমস্ত ডিভাইসে সহজে দেখার জন্য টেমপ্লেটের আনুপাতিক সংকোচনের মধ্যে রয়েছে৷
এটি মূলত CSS এর উপর নির্মিত। বিকাশের সময়, স্ক্রীনের মাত্রার নিয়ন্ত্রণ পয়েন্টগুলি নির্ধারিত হয়। এইভাবে, অবশিষ্ট বস্তুর প্রস্থ নির্ধারণ করা হয়। এটি করার জন্য, পৃষ্ঠার প্রস্থ css max-width বৈশিষ্ট্য দ্বারা সেট করা হয়, এই মানদণ্ডের উপর নির্ভর করে, অন্যান্য উপাদানের আকার শতাংশ হিসাবে নির্বাচিত হয়। উদাহরণস্বরূপ, প্রধান উপর ব্লক আকারপৃষ্ঠাটি 600px, এবং সাইডবার ব্লকের প্রস্থ (সাইট সাইডবার) যথাক্রমে 400px, বিষয়বস্তুর প্রস্থ হবে 60%, এবং সাইডবারের প্রস্থ 40%।
বিভিন্ন ধরণের প্রতিক্রিয়াশীল লেআউট রয়েছে। বৈশিষ্ট্য এবং নির্মাণের উপর নির্ভর করে প্রতিটি পৃথকভাবে নির্বাচিত হয়৷
ভিউ:
- একটি লেআউট টাইপ যা স্ক্রীন রেজোলিউশন কমে গেলে ব্লকগুলিকে মোড়ানোর অনুমতি দেয়৷ মাল্টি-কলাম সাইটগুলিতে, অতিরিক্ত ব্লকগুলি স্ক্রিনের নীচে সরানো হয়৷
- যখন প্রতিটি অনুমতির জন্য একটি পৃথক প্যাটার্ন তৈরি করা হয়। এই ধরনের প্রতিক্রিয়াশীল ডিজাইন বেশি সময় নেয় কিন্তু সবচেয়ে বেশি পঠনযোগ্য।
- একটি সাধারণ ধরণের ডিজাইন যার লক্ষ্য সমস্ত উপাদানকে স্কেল করা। এটা নমনীয় নয়।
- প্যানেলের ধরনটি মোবাইল অ্যাপ্লিকেশনে ব্যবহারের জন্য সুবিধাজনক, যখন স্ক্রিনের অবস্থান পরিবর্তন করার সময় অতিরিক্ত ফাংশন উপস্থিত হয়৷
প্রতিক্রিয়াশীল স্তর তৈরি করা কাজের মাত্র একটি অংশ। অভিযোজিত চিত্রগুলি একটি পৃথক ক্ষেত্রে, যার নিজস্ব সমস্যা এবং সেগুলি সমাধানের পদ্ধতি রয়েছে৷
একক ছবি স্পষ্টভাবে বিভিন্ন স্ক্রীন রেজোলিউশনে প্রদর্শিত হতে হবে। এখানে একটি সমস্যা রয়েছে - রেজোলিউশনের পরিবর্তন নির্বিশেষে ছবিটি সর্বদা একই থাকে তা কীভাবে নিশ্চিত করবেন। এই ক্ষেত্রে একটি সাধারণ CSS কোড প্রবেশ করা যথেষ্ট হবে না।
উদাহরণ: img {max-width: 250px;} - এখানে আপনাকে এমন একটি পদ্ধতি প্রয়োগ করতে হবে যাতে চিত্রটি থাকা ধারকটির আকার সীমিত থাকে, এবং চিত্রটি নয়। এটি দেখতে এরকম কিছু হবে: div img {max-width: 250px;}। এই পদ্ধতিটি সমস্যার সমাধান করেছোট ছবির বিন্যাস, কিন্তু বড় চিত্রের জন্য উপযুক্ত নয়।
অতএব, অনেক ডেভেলপার জাভাস্ক্রিপ্ট ভাষা ব্যবহার করতে পছন্দ করে যা আপনাকে সার্ভারকে ওভারলোড না করে যেকোন ইমেজ মানিয়ে নিতে দেয়। জাভাস্ক্রিপ্ট প্রচুর সংখ্যক বিকল্প স্ক্রিপ্ট অফার করে৷
প্রতিক্রিয়াশীল লেআউটের সুবিধা এবং অসুবিধা
ইতিবাচক:
- সমস্ত উপাদানের অবস্থান সংরক্ষণ করুন। ব্যবহারকারী যখন সাইটের সম্পূর্ণ সংস্করণে অভ্যস্ত হয় তখন এটি সুবিধাজনক৷
- ডোমেন এবং ঠিকানা সংরক্ষণ করুন।
- অন্যান্য অনুমতি বিন্যাসের জন্য সম্পূর্ণ কাস্টমাইজেশন।
নেতিবাচক:
- কার্যকর নমনীয়তা হারিয়ে গেছে
- যেকোন তথ্যপূর্ণ ওভারলোড একটি ওয়েব রিসোর্সের দীর্ঘ লঞ্চে পরিপূর্ণ, যা অনেক ব্যবহারকারীকে দ্রুত বিকল্পগুলিতে স্যুইচ করতে বাধ্য করে৷
একটি ওয়েবসাইট তৈরি করা হচ্ছে
সাইটের কাঠামোটি কয়েকটি বিভাগ এবং ব্লকে বিভক্ত। ঐতিহ্যগতভাবে, লেআউটে সাইটের উপরের অংশ (হেডার), লোগো, মেনু, বিষয়বস্তু ব্লক এবং সাইটের চূড়ান্ত অংশ থাকে (উদাহরণস্বরূপ, বিস্তারিত যোগাযোগের তথ্য)। চলুন দেখে নেই কিভাবে একটি সাধারণ টেমপ্লেট থেকে রেসপন্সিভ ওয়েবসাইট ডিজাইন করা যায়।
লেখার জন্য সহায়ক ট্যাগ:
- wrapper - ট্যাগ যা সমস্ত টেমপ্লেট উপাদানকে একত্রিত করে;
- হেডার h1 - লোগো;
- শিরোনাম - মেনু এবং অন্যান্য গুরুত্বপূর্ণ উপাদানগুলির জন্য শিরোনাম;
- সামগ্রী - ব্লক;
- colleft - সামগ্রীর আকার;
- colRight - সাইডবার (পার্শ্বের কলাম);
- ফুটার - সাইটের চূড়ান্ত অংশ;
- মিডিয়া স্ক্রিন - সেটপছন্দসই রেজোলিউশন।
একটি সাইট লেখার সময়, এই উপাদানগুলি প্রয়োজনের উপর নির্ভর করে একটি ভিন্ন ক্রমে সরাতে পারে। উদাহরণস্বরূপ, উচ্চ রেজোলিউশনে, মেনুটি উল্লম্বভাবে প্রদর্শিত হতে পারে। মোবাইল সংস্করণে, লেআউটটি এমনভাবে তৈরি করা যেতে পারে যাতে মেনুটি অনুভূমিক অবস্থানে স্লাইড হয়ে যায়।
- viewport - একটি ট্যাগ যা আপনাকে ডিজাইনের একটি ছোট সংস্করণে পাঠ্যের আকার সংরক্ষণ করতে দেয়। এটি ট্যাগগুলির মধ্যে অবস্থিত।
- সর্বোচ্চ-প্রস্থ - 1000 পিক্সেলের বেশি রেজোলিউশনে প্রসারিত হওয়া এড়াতে সাইটটি অপ্টিমাইজ করতে।
লেআউট বাস্তবায়ন করার সময়, jQuery লাইব্রেরি অনেক সাহায্য করে যখন আপনাকে ব্লকের শৈলী এবং গঠন পরিবর্তন করতে হবে।
প্রতিক্রিয়াশীল এবং মোবাইল ডিজাইনের মধ্যে পার্থক্য কী
সম্পূর্ণ বোঝার জন্য, কয়েকটি দৃষ্টান্তমূলক উদাহরণ বিবেচনা করুন, কারণ এই দুটি ধারণার মধ্যে বিভ্রান্তি অস্বাভাবিক নয়৷
আপনাকে বুঝতে হবে যে মোবাইল সংস্করণটি একটি সাবডোমেন সহ প্রাথমিক সাইটের একটি অ্যানালগ। সাইটের বাহ্যিক উপস্থাপনা সম্পূর্ণরূপে শৈলী এবং কার্যকারিতা পুনরাবৃত্তি করে, যদিও এর গঠন এবং বিষয়বস্তু মূল সংস্করণ থেকে ভিন্ন হতে পারে, যেহেতু সংস্করণটি প্রয়োজনীয় উপাদানগুলিতে কাটা হয়েছে৷
প্রতিক্রিয়াশীল ডিজাইন সমস্ত ডিভাইস রেজোলিউশনের জন্য সর্বোত্তম। এটি পরিমাপযোগ্য এবং দেখার শর্ত নির্বিশেষে সঠিকভাবে রেন্ডার করে৷
এগুলি সাইটের দুটি ভিন্ন উপস্থাপনা, যার চারপাশে বিরোধ অক্লান্তভাবে উত্তেজিত হয় কোনটি ভাল৷ উল্লেখ্য, এখনো কোনো সুনির্দিষ্ট সিদ্ধান্ত হয়নি। কেউ এই ডিজাইনের প্রশংসা করে, ফ্যাশন প্রবণতা এবং অনেক সুবিধাগুলি নির্দেশ করে।মোবাইল সংস্করণে বেশ কিছু সুবিধা রয়েছে যা প্রতিক্রিয়াশীল ডিজাইনে নেই। অতএব, শুরু করার জন্য, আপনার মৌলিক চাহিদাগুলি বোঝা উচিত।
সুবিধা
কিভাবে প্রতিক্রিয়াশীল ডিজাইন মোবাইলের চেয়ে ভালো?
বহুমুখীতা। আমাদের সময়ে, বাজারের এই ধরনের উন্মত্ত বৃদ্ধির সাথে, ভোক্তাদের ইচ্ছাকে সন্তুষ্ট করে একটি ভিন্ন উপায়ে তথ্য উপস্থাপন করা প্রয়োজন। প্রতিক্রিয়াশীল ডিজাইন এই সমস্যার সমাধান করে।
সার্চ ইঞ্জিনে কার্যকর প্রচার। অভিযোজিত ডিভাইসের প্রধান সুবিধাগুলির জন্য কী দায়ী করা যায় না। সার্চ ইঞ্জিন ব্যবহারকারীদের প্রতিক্রিয়াশীল ওয়েবসাইট দিতে পছন্দ করে।
ব্যবহারযোগ্যতা। প্রতিক্রিয়াশীল ডিজাইন সাধারণত সেরা ডিজাইন সমাধানে ডিজাইন করা হয়, যা ব্যবহারকারীদের ভিজ্যুয়াল উপলব্ধির জন্য একটি চমৎকার উপহার।
প্রকল্প বাস্তবায়ন এবং ব্যবহার উভয় ক্ষেত্রেই সহজ ও সরলতা।
ভাল রূপান্তর হার। যেহেতু অভিযোজিত ডিজাইনের সাথে প্রদর্শনের আরও সুযোগ রয়েছে, তাই রূপান্তর নিজেই বৃদ্ধি পায়।
অর্থনীতি। এটি একটি পৃথক মোবাইল সংস্করণ তৈরি এবং প্রচারের চেয়ে তুলনামূলকভাবে সস্তা৷
মোবাইল সংস্করণের সুবিধা এবং অসুবিধা
একটি প্রতিক্রিয়াশীল মোবাইল ডিজাইন তৈরি করতে বহুমুখিতা এবং ধারাবাহিকতা প্রয়োজন। প্রথমত, রেফারেন্সের শর্তাবলী বিশদভাবে লেখার সুপারিশ করা হয়, যা অবশ্যই অপ্রয়োজনীয় কাজ এড়াতে এবং সময় বাঁচাতে সাহায্য করবে, সেইসাথে সার্ভারের বৈশিষ্ট্যগুলিকে বিবেচনা করবে যেখানে সাইটটি হোস্ট করা হবে।.
মোবাইল প্রতিক্রিয়াশীল ডিজাইনের কিছু সুবিধা এবং অসুবিধা রয়েছে।
সুবিধা:
- আপনার যদি একটি রেডিমেড সাইট থাকে, তাহলে স্ক্র্যাচ থেকে মোবাইল সংস্করণের জন্য কোনও ডিজাইন তৈরি করার দরকার নেই৷ এই লেআউটটিকে অপ্রয়োজনীয় কার্যকারিতা থেকে মুক্ত করে শুধুমাত্র কয়েকটি পরিবর্তন করা যেতে পারে।
- সব ধরনের সরলীকরণের কারণে, ডাউনলোড করার সময় মোবাইল সংস্করণটিকে দ্রুত বিবেচনা করা হয়।
- ব্যবহারকারী সমস্ত বিষয়বস্তুর সবচেয়ে গুরুত্বপূর্ণ তথ্য দেখেন।
- দ্রুত বাস্তবায়ন। এমন প্লাগইন আছে যার সাহায্যে আপনি ট্যাগ এবং কোড না জানলেও মোবাইল অভিযোজন বাস্তবায়ন করতে পারবেন।
- সার্চ ইঞ্জিন পছন্দগুলি অভিযোজিত সংস্করণগুলির পক্ষে কারণ তারা বিশ্লেষণ করতে কম সময় নেয়৷
অপরাধ:
- সব মোবাইল সংস্করণ মোবাইল ডিভাইস রেজোলিউশনের সাথে মেলে না। সাইট, অবশ্যই, খুলবে, কিন্তু পর্দা রেজোলিউশন সবসময় লেআউট মেলে না. কখনও কখনও একটি ভাল ডিজাইন করা স্মার্টফোনের ডিজাইন যখন ট্যাবলেট হিসাবে খোলা হয় তখন অন্যরকম দেখতে পারে৷
- মোবাইল সংস্করণের জন্য আলাদা অর্থপ্রদত্ত ডোমেন প্রয়োজন।
- কন্টেন্ট পোস্ট করার ক্ষেত্রে কিছু ছোটখাটো সমস্যা আছে। যদি একবারে একাধিক সংস্করণ থাকে, তাহলে বিষয়বস্তু একবারে সব ফরম্যাটের জন্য সামঞ্জস্য করা উচিত। মূল সাইটে নতুন উপাদান জমা দেওয়া এবং মোবাইল সংস্করণে অনুলিপি করা চুরি বলে বিবেচিত হতে পারে। এই সমস্যা এড়াতে, আপনাকে সম্পদের সংযোগ প্রমাণ করতে হতে পারে।
বাস্তবায়নের পদ্ধতি
প্রধান বাস্তবায়ন পদ্ধতি:
- লেআউট এবং লেআউটের নকশা তৈরি করার পরে, এটি ব্যবহার করে প্রয়োজনীয় মাত্রাগুলিতে লোড করা হয়অপারেটর সাইট এবং প্রধান কোড। এটি মাঝারি এবং ছোট সংস্করণ (ট্যাবলেট, স্মার্টফোন, ইত্যাদি) তৈরি করার সময় ব্যবহৃত একটি ক্লাসিক পদ্ধতি।
- বুটস্ট্র্যাপ হল অভিযোজন সরঞ্জামগুলির একটি সহজ এবং স্পষ্ট সেট৷ ল্যান্ডিং পৃষ্ঠা এবং অন্যান্য খুব জটিল নয় এমন ওয়েব প্রকল্পের সংস্করণ তৈরির জন্য উপযুক্ত। এটি ইন্টারফেস ফাংশনে বিভিন্ন শৈলী প্রয়োগ করার একটি ভাল সুযোগ দেয়৷
- প্রতিক্রিয়াশীল গ্রিড সিস্টেম বহুমুখী সরঞ্জামগুলির একটি জনপ্রিয় সেট। প্রয়োগ করা সহজ এবং গভীর জ্ঞানের প্রয়োজন নেই। বিভিন্ন ধরনের ইনফোগ্রাফিক্স অন্তর্ভুক্ত।
- GUMBY - একটি CSS ফ্রেমওয়ার্ক যা নমনীয় প্রতিক্রিয়াশীলতা এবং দুর্দান্ত টুলিং নিয়ে গর্ব করে।
- কুকিজ - আপনাকে প্রতিক্রিয়াশীল চিত্রগুলি বাস্তবায়ন করতে দেয়। স্বয়ংক্রিয়ভাবে ব্রাউজার দ্বারা অনুরোধ করা ফাইলের সাথে থাকে৷
- ExpressionEngine হল প্রতিক্রিয়াশীল ছবি তৈরি করার আরেকটি উপায়। ডিভাইসটি মোবাইল কিনা তা নির্ধারণ করে, প্রয়োজনীয় রেজোলিউশনে ছবি পরিবর্তন করতে সক্ষম।
- ProtoFluid - দ্রুত প্রোটোটাইপিং প্রদান করে। সব ধরনের ডিভাইসের জন্য উপযুক্ত।
