কিভাবে একটি ওয়েবসাইট প্রতিক্রিয়াশীল করতে?

স্মার্টফোন এবং ট্যাবলেটের গণতন্ত্রীকরণের সাথে, একটি ওয়েবসাইট তৈরি করা প্রতিক্রিয়াশীল অপরিহার্য হয়ে উঠেছে. একটি প্রতিক্রিয়াশীল সাইট স্বয়ংক্রিয়ভাবে বিভিন্ন ব্রাউজিং ডিভাইসের সাথে মানিয়ে নিতে সক্ষম - ডেস্কটপ, মোবাইল, ট্যাবলেট - একটি সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে। একটি প্রতিক্রিয়াশীল ওয়েবসাইট এছাড়াও জন্য ভাল ওয়েব রেফারেন্সিং।

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

আজকাল, তথাকথিত "ওয়েব সাইট" এর ডিজাইনপ্রতিক্রিয়াশীল” (বা অভিযোজিত) অপরিহার্য হয়ে উঠেছে। কিন্তু আসলে এটার মানে কি? আপনি কিভাবে একটি ওয়েবসাইটকে সমস্ত স্ক্রীন আকারের জন্য অপ্টিমাইজ করবেন?

প্রতিক্রিয়াশীল ডিজাইনে এমন একটি সাইট তৈরি করা থাকে যা লেআউট এবং মাত্রার পরিপ্রেক্ষিতে স্বয়ংক্রিয়ভাবে মানিয়ে নিতে সক্ষম হয় যাতে সমস্ত ডিভাইসে সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করা যায়: ডেস্কটপ 🖥️, ট্যাবলেট 💻, স্মার্টফোন 📱।

একটি নিখুঁতভাবে প্রতিক্রিয়াশীল সাইট তৈরি করতে এখানে মূল সেরা অনুশীলনগুলি রয়েছে:

🚀 CSS-এ পিক্সেলের পরিবর্তে আপেক্ষিক ইউনিট (%, em, rem) ব্যবহার করুন

উপাদানগুলির সম্পূর্ণ অভিযোজন করার অনুমতি দেওয়ার জন্য, পরিমাপের আপেক্ষিক ইউনিটগুলি যেমন ব্যবহার করার পরামর্শ দেওয়া হয় %, em বা rem আপনার সিএসএস নিয়মে নির্দিষ্ট পিক্সেলের পরিবর্তে। শতাংশ স্ক্রীনের আকারের উপর ভিত্তি করে স্বয়ংক্রিয় আকার পরিবর্তনের অনুমতি দেয়।

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

এটি তথাকথিত আপেক্ষিক ইউনিট পছন্দ করার সুপারিশ করা হয় শতাংশ (%), em বা rem জায়গায়. বিশেষ করে % বক্স, টেক্সট, মার্জিন ইত্যাদির স্বয়ংক্রিয় আকার পরিবর্তনের অনুমতি দেবে। পর্দার আকারের উপর নির্ভর করে।

উদাহরণস্বরূপ, একটি প্রস্থ সেট করুন CSS-এ 50% এটি নিশ্চিত করবে যে উপাদানটি সর্বদা উপলব্ধ প্রস্থের 50% গ্রহণ করবে, তা পিসি, ট্যাবলেট বা স্মার্টফোন স্ক্রিনেই হোক না কেন। এই তরল পদ্ধতিটি নমনীয় লেআউট তৈরি করার জন্য আদর্শ যা পুরোপুরি মানিয়ে যায়।

🚀 CSS স্টাইলশীটে মিডিয়া প্রশ্ন সংজ্ঞায়িত করুন

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

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

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

🚀 ছবিকে প্রতিক্রিয়াশীল করুন

ইমেজ এছাড়াও আবশ্যক অভিযোজিত করা নির্দিষ্ট ডিভাইসে অসামঞ্জস্যপূর্ণভাবে প্রসারিত করা থেকে তাদের প্রতিরোধ করতে। তাই আবশ্যক এসইও এর জন্য আপনার ছবি অপ্টিমাইজ করুন. একটি সহজ সর্বোত্তম অনুশীলন হল তাদের প্রস্থকে HTML কোডে বা CSS এর মাধ্যমে শতাংশ হিসাবে সেট করা।

আমরা CSS প্রপার্টিও ব্যবহার করতে পারি "সর্বোচ্চ-প্রস্থ: 100%" যাতে চিত্রটি তার অনুপাত বজায় রেখে তার পাত্রের সাথে খাপ খায়। একই চিত্রের বিভিন্ন সংস্করণকে বিভিন্ন রেজোলিউশনে সংজ্ঞায়িত করার এবং " বৈশিষ্ট্যের মাধ্যমে পর্দার আকারের উপর নির্ভর করে কোন সংস্করণটি পরিবেশন করা হবে তা ব্রাউজারকে নির্দেশ করার পরামর্শ দেওয়া হয়srcset"।

প্রতিক্রিয়াশীল অবস্থায়, সমস্ত ডিভাইসে সর্বোত্তম গুণমান নিশ্চিত করতে চিত্রগুলিকে প্রসারিত করার পরিবর্তে স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করা উচিত।

🚀 একটি প্রতিক্রিয়াশীল CSS ফ্রেমওয়ার্ক ব্যবহার করুন

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

এই ফ্রেমওয়ার্কগুলি ব্যবহার করার জন্য প্রস্তুত CSS ক্লাসগুলি প্রদান করে যা আপনাকে লেআউট তৈরি করতে দেয় নমনীয় এবং প্রতিক্রিয়াশীল পৃষ্ঠা। তারা সাইটটি দেখার জন্য ব্যবহৃত ডিভাইসের স্ক্রীনের আকারের উপর ভিত্তি করে লেআউট এবং শৈলী স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে মিডিয়া কোয়েরির মতো কৌশল ব্যবহার করে।

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

🚀 সমস্ত ডিভাইসে পরীক্ষা রেন্ডারিং

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

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

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

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

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

🚀 নির্দিষ্ট আকারের উপাদানগুলি এড়িয়ে চলুন

একটি ওয়েবসাইটকে প্রতিক্রিয়াশীল করতে, নির্দিষ্ট-আকারের উপাদানগুলি এড়ানো অপরিহার্য৷ এটি অর্জন করার জন্য এখানে কিছু টিপস রয়েছে:

পরিমাপের নমনীয় একক ব্যবহার করুন: উপাদানের আকার নির্ধারণ করতে পিক্সেল (px) ব্যবহার করার পরিবর্তে, পরিমাপের নমনীয় একক যেমন শতাংশ (%) বা ভিউপোর্ট ইউনিট (vh, vw) ব্যবহার করুন। এটি উপাদানগুলিকে পর্দার আকারের সমানুপাতিকভাবে স্কেল করার অনুমতি দেয়।

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

ছবির জন্য নির্দিষ্ট প্রস্থ এড়িয়ে চলুন: ছবির জন্য একটি নির্দিষ্ট প্রস্থ নির্দিষ্ট করার পরিবর্তে, CSS প্রপার্টি "সর্বোচ্চ-প্রস্থ: 100%;" ব্যবহার করুন। ছবিগুলিকে তাদের কন্টেইনারের আকারের সমানুপাতিক আকার পরিবর্তন করার অনুমতি দিতে। এটি নিশ্চিত করে যে ছবিগুলি উপচে পড়া বা বিকৃত না করে বিভিন্ন ডিভাইসে সঠিকভাবে মানিয়ে নেওয়া হয়।

ব্যবহার মিডিয়া প্রশ্ন: মিডিয়া প্রশ্ন হল CSS নিয়ম যা আপনাকে পর্দার আকারের উপর নির্ভর করে বিভিন্ন শৈলী প্রয়োগ করতে দেয়। প্রতিটি ডিভাইসে দেখার অপ্টিমাইজ করতে বিভিন্ন স্ক্রীন রেজোলিউশনের জন্য উপাদানগুলির শৈলী সামঞ্জস্য করতে এগুলি ব্যবহার করুন৷

🚀 মোবাইল নেভিগেশন সহজ করুন

মোবাইল নেভিগেশন সহজ করতে এবং একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, এখানে কিছু টিপস অনুসরণ করতে হবে:

একটি মোবাইল নেভিগেশন মেনু ব্যবহার করুন: একটি মোবাইল নেভিগেশন মেনু, যেমন হ্যামবার্গার মেনু দিয়ে ঐতিহ্যগত নেভিগেশন মেনু প্রতিস্থাপন করুন। এই ধরনের মেনু স্ক্রীনের বিশৃঙ্খলা কমাতে সাহায্য করে এবং মোবাইল ব্যবহারকারীদের জন্য নেভিগেশনকে আরও স্বজ্ঞাত করে তোলে।

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

একক-স্তরের নেভিগেশন ব্যবহার করুন : মোবাইল ডিভাইসে একাধিক স্তরের সাবমেনু সহ জটিল ড্রপ-ডাউন মেনু এড়িয়ে চলুন। পরিবর্তে, একক-স্তরের নেভিগেশন বেছে নিন, যেখানে ব্যবহারকারীরা একাধিক স্তরে নেভিগেট না করে সরাসরি সাইটের প্রধান বিভাগে নেভিগেট করতে পারেন।

পরিষ্কার কর্ম বোতাম ব্যবহার করুন: সুনির্দিষ্ট ক্রিয়াগুলিতে ব্যবহারকারীদের গাইড করতে পরিষ্কার, সহজে ক্লিকযোগ্য অ্যাকশন বোতাম ব্যবহার করুন, যেমন কার্টে একটি পণ্য যোগ করা বা একটি ফর্ম জমা দেওয়া। নিশ্চিত করুন যে বোতামগুলি আপনার আঙুল দিয়ে সহজেই ট্যাপ করার জন্য যথেষ্ট বড়।

স্বজ্ঞাত আইকন ব্যবহার করুন: মোবাইল নেভিগেশন মেনুতে ক্রিয়া বা বিভাগগুলি উপস্থাপন করতে স্বীকৃত আইকনগুলি ব্যবহার করুন৷ সু-পরিকল্পিত আইকনগুলি দীর্ঘ লেবেল না পড়েই ব্যবহারকারীদের দ্রুত নেভিগেশন উপাদানগুলির অর্থ বুঝতে সাহায্য করতে পারে৷

🚀 বন্ধ

এর নকশা প্রতিক্রিয়াশীল সাইটগুলি একটি প্রয়োজনীয়তা হয়ে উঠেছে সমস্ত ডিভাইস জুড়ে একটি গুণমান ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে।

নমনীয় CSS ইউনিট ব্যবহার করে, মিডিয়া ক্যোয়ারী বাস্তবায়ন বা ইমেজ অপ্টিমাইজ করার মত সর্বোত্তম অভ্যাস অনুসরণ করে যেকোন ওয়েবসাইটকে পুরোপুরি মানিয়ে নেওয়া যায়।

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

আরও এগিয়ে যেতে, আমি ব্যবহার করার পরামর্শ দিই ওয়ার্ডপ্রেসে শক্তিশালী WP রকেট প্লাগইন. এটি আপনাকে যতটা সম্ভব অপ্টিমাইজ করার অনুমতি দেবে আপনার সাইটের লোডিং গতি প্রতিক্রিয়াশীল একটি সাইট যা অভিযোজিত এবং অতি-দ্রুত উভয়ই এর চাবিকাঠি ব্যবহারকারীর অভিজ্ঞতা অনবদ্য!

FAQ

প্রশ্ন: প্রতিক্রিয়াশীল নকশা কি?

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

প্রশ্নঃ ওয়েবসাইটকে প্রতিক্রিয়াশীল করা কেন গুরুত্বপূর্ণ?

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

প্রশ্ন: প্রতিক্রিয়াশীল ওয়েব বিকাশের মূল নীতিগুলি কী কী?

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

প্রশ্নঃ একটি প্রতিক্রিয়াশীল CSS ফ্রেমওয়ার্ক কি?

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

প্রশ্নঃ আমি কিভাবে পরীক্ষা করব কিভাবে একটি ওয়েবসাইট বিভিন্ন ডিভাইসে রেন্ডার করে?

উত্তর: একটি ওয়েবসাইট কীভাবে বিভিন্ন ডিভাইসে রেন্ডার করে তা পরীক্ষা করতে, আপনি ব্রাউজারের বিকাশকারী সরঞ্জামগুলি ব্যবহার করতে পারেন যা আপনাকে বিভিন্ন স্ক্রীনের আকার অনুকরণ করতে দেয়৷ এছাড়াও আপনি অনলাইন পরিষেবা, ডিভাইস এমুলেটর বা সিমুলেটর ব্যবহার করতে পারেন বা বাস্তব শারীরিক ডিভাইসে পরীক্ষা করতে পারেন।

প্রশ্ন: মোবাইল নেভিগেশন সহজ করার জন্য সেরা অনুশীলন কি কি?

উত্তর: মোবাইল নেভিগেশন সহজ করার জন্য, একটি মোবাইল নেভিগেশন মেনু ব্যবহার করুন যেমন হ্যামবার্গার মেনু, নেভিগেশন আইটেমের সংখ্যা সীমিত করুন, একক-স্তরের নেভিগেশন ব্যবহার করুন, পরিষ্কার অ্যাকশন বোতাম ব্যবহার করুন, গতি লোড করার জন্য অপ্টিমাইজ করুন, স্বজ্ঞাত আইকন ব্যবহার করুন এবং নিয়মিত বিভিন্ন ন্যাভিগেশন পরীক্ষা করুন ডিভাইস

প্রশ্নঃ আমি কিভাবে আমার বিদ্যমান ওয়েবসাইটকে প্রতিক্রিয়াশীল করতে পারি?

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