আপনার ওয়েবসাইট ডিজাইন করার সময়, স্ক্রিনের আকার এবং আকৃতি নির্বিশেষে যেকোনো ডিভাইসে এটি দুর্দান্ত দেখাচ্ছে তা নিশ্চিত করা গুরুত্বপূর্ণ। প্রতিক্রিয়াশীল ওয়েবসাইটগুলি কম্পিউটার, ফোন, ট্যাবলেট, টিভি, পরিধানযোগ্য এবং এমনকি গাড়ির স্ক্রিনের মতো আধুনিক ডিভাইসগুলিতে ভাল দেখতে ডিজাইন করা হয়েছে। একটি ওয়েবসাইটকে প্রতিক্রিয়াশীল করার জন্য, আপনাকে নির্দিষ্ট অবস্থার উপর নির্ভর করে স্বয়ংক্রিয়ভাবে এর উপাদানগুলির আকার পরিবর্তন করতে আপনার CSS এবং HTML কোড পরিবর্তন করতে হবে। এই উইকিহো আপনাকে শেখায় কিভাবে মৌলিক প্রতিক্রিয়াশীল ওয়েব ডিজাইন পরিকল্পনা এবং বাস্তবায়ন করতে হয়।
ধাপ
পদ্ধতি 3 এর 1: প্রতিক্রিয়াশীল নকশা পরিকল্পনা
ধাপ 1. আপনার দর্শকরা কীভাবে আপনার ওয়েবসাইট ব্যবহার করে তা সন্ধান করুন।
আজকাল, বেশিরভাগ মানুষ ওয়েব ব্রাউজ করছে মোবাইল ফোন এবং ট্যাবলেট থেকে। একটি সাইট প্রতিক্রিয়াশীল হওয়ার জন্য, আপনাকে অবশ্যই নিশ্চিত করতে হবে যে এটি যেখানেই দেখা হোক না কেন এটি সঠিকভাবে প্রদর্শন করে। যদি সময় এবং অর্থের সারমর্ম থাকে, তাহলে আপনার ব্যবহারকারীদের কাছে যে ধরনের ডিভাইসগুলি সবচেয়ে বেশি জনপ্রিয় (যদি এই তথ্যটি পাওয়া যায়) এবং তারা কীভাবে আপনার সাইট ব্যবহার করে তার উপর ফোকাস করুন। আপনার বিশ্লেষণ সফটওয়্যার বা অন্য কোন গবেষণার পদ্ধতি ব্যবহার করে, খুঁজে বের করুন:
- মোবাইল ফোন/ট্যাবলেট/কম্পিউটার ব্র্যান্ড এবং স্ক্রিন/রেজোলিউশনের আকারের প্রতি বিশেষ মনোযোগ দিয়ে ওয়েবসাইট দেখার জন্য তারা কোন ধরনের ডিভাইস ব্যবহার করে?
- কোন ব্রাউজারগুলি আপনার ব্যবহারকারীদের কাছে সবচেয়ে জনপ্রিয়। যতদূর বিশ্বব্যাপী পরিসংখ্যান সম্পর্কিত, গুগল ক্রোম বিশ্বব্যাপী সবচেয়ে জনপ্রিয় ওয়েব ব্রাউজার, কিন্তু সাফারি একটি দ্বিতীয় সেকেন্ড।
- আপনার ভিজিটররা আপনার ওয়েবসাইট কিভাবে ব্যবহার করে, যেমন তারা এটি দেখার জন্য কতটা সময় ব্যয় করে, তারা কোথায় দেখছে এবং কোন বিষয়বস্তু সবচেয়ে জনপ্রিয়। এটি আপনাকে কোন ধরণের বিষয়বস্তু অন্তর্ভুক্ত করা গুরুত্বপূর্ণ এবং কোনটি বাদ দেওয়া যেতে পারে তা নির্ধারণ করতে সহায়তা করতে পারে।
ধাপ 2. বিভিন্ন ডিভাইসের জন্য বিভিন্ন লেআউট ডিজাইন করুন।
আপনি ব্যবহারকারীর ডিভাইস, সেইসাথে তার ক্ষমতা (এটি জাভা, ফ্ল্যাশ ইত্যাদি সমর্থন করে কিনা) সনাক্ত করতে CSS এবং জাভাস্ক্রিপ্টের সমন্বয় ব্যবহার করতে পারেন এবং সেই অনুযায়ী আপনার সাইটের একটি বিশেষ সংস্করণ প্রদর্শন করতে পারেন। সিএসএস মিডিয়া প্রশ্নগুলি ডিভাইসের আকার/রেজোলিউশন নির্ধারণের জন্য বিশেষভাবে দরকারী।
ধাপ 3. বিভিন্ন ধরনের মিথস্ক্রিয়া জন্য অ্যাকাউন্ট।
আপনার দর্শনার্থী আপনার ওয়েবসাইটের সাথে একটি মাউস, একটি কীবোর্ড, একটি টাচস্ক্রিন বা এমনকি দৃষ্টি প্রতিবন্ধীদের জন্য একটি স্ক্রিন-রিডার ব্যবহার করে যোগাযোগ করতে পারে। এটি বিবেচনা করে, আপনার ওয়েবসাইটকে মাউস ক্লিক, কীবোর্ড কী (ট্যাব, এন্টার, রিটার্ন, ইত্যাদি) এবং স্ক্রিন ফিঙ্গার-টাচগুলিতে সাড়া দেওয়া উচিত।
মাউস ছাড়া অন্য কিছু দিয়ে হোভার-ওভার ইফেক্ট কাজ করে না। এই প্রভাবগুলি ব্যবহারের পরিবর্তে, আপনি পূর্বে মাউস হোভারে যা প্রদর্শিত হয়েছিল তা প্রদর্শনের জন্য একটি বোতাম বা আইকনে ক্লিক করার জন্য দর্শনার্থীর প্রয়োজন ব্যবহার করতে পারেন।
ধাপ 4. একটি সামগ্রী ব্যবস্থাপনা সিস্টেম (সিএমএস) ব্যবহার করার কথা বিবেচনা করুন।
আপনার সাইটের ডিজাইন প্রতিক্রিয়াশীল তা নিশ্চিত করার একটি সহজ উপায় হল একটি পূর্বনির্মিত প্রতিক্রিয়াশীল থিম সহ একটি CMS ব্যবহার করা। জুমলা, ড্রুপাল বা ওয়ার্ডপ্রেসের মতো একটি সিএমএস ব্যবহার করে আপনি নিজের ওয়েবসাইটকে প্রতিক্রিয়াশীল উপাদানগুলিকে কোড না করেই সমস্ত ডিভাইসে দুর্দান্ত দেখায় তা নিশ্চিত করতে পারবেন। আপনার সেবার সাথে কোন CMS সরঞ্জাম পাওয়া যায় তা দেখতে আপনার ওয়েব হোস্টিং প্রদানকারীর সাথে যোগাযোগ করুন।
ধাপ 5. আপনার ওয়েবসাইট পরীক্ষা করার জন্য অনলাইন টুল ব্যবহার করুন।
এখন যে প্রতিক্রিয়াশীল ওয়েব ডিজাইন জনপ্রিয়তা বৃদ্ধি পেয়েছে, সেখানে বিভিন্ন ধরনের বিনামূল্যে সরঞ্জাম আছে যা আপনি আপনার ওয়েবসাইট পরীক্ষা করতে ব্যবহার করতে পারেন। আপনি যদি ইতিমধ্যে আপনার ওয়েবসাইট কোডড করে থাকেন, তাহলে বিভিন্ন পরিস্থিতিতে এটি কেমন দেখায় তা পরীক্ষা করার জন্য এই সরঞ্জামগুলি ব্যবহার করুন যাতে আপনি জানতে পারবেন যে আপনাকে কোথায় প্রতিক্রিয়াশীলতা উন্নত করতে হবে:
- গুগল দ্বারা মোবাইল-বন্ধুত্বপূর্ণ পরীক্ষা: আপনাকে জানাতে দেয় যে আপনার সাইট মোবাইল ডিভাইসে যেমন কাজ করে তেমনি কম্পিউটার স্ক্রিনেও কাজ করে।
- resizeMyBrowser: আপনাকে বিভিন্ন রেজুলেশনে আপনার সাইট দেখতে দেয়।
- রেসপন্সিয়েটর: আপনার সাইটটি বিভিন্ন ডিভাইসের স্ক্রিনে বিভিন্ন লেআউটে (পাশের বা ডান দিকের আপ) প্রদর্শন করে।
3 এর 2 পদ্ধতি: পৃষ্ঠা লেআউটকে প্রতিক্রিয়াশীল করা
ধাপ 1. একটি বিনামূল্যে প্রতিক্রিয়াশীল স্টাইল শীট কাঠামো বিবেচনা করুন।
একটি কাঠামো হল এইচটিএমএল, সিএসএস এবং/অথবা জাভাস্ক্রিপ্টের একটি পূর্ব লিখিত সেট যা আপনি আপনার সাইটের জন্য কঙ্কাল হিসেবে ব্যবহার করতে পারেন। ফ্রেমওয়ার্কগুলি সমস্ত ব্রাউজারের সাথে কাজ করার জন্য সমস্ত পরীক্ষিত এবং অপ্টিমাইজ করা হয়েছে, তাই আপনাকে যা করতে হবে তা হ'ল আপনার সামগ্রী সন্নিবেশ করানো, আপনার মিডিয়া এবং রঙ পছন্দগুলি যুক্ত করা এবং আপনার সাইট প্রকাশ করা। কিছু জনপ্রিয় কাঠামো হল:
- বুটস্ট্র্যাপ
- কঙ্কাল
- ফাউন্ডেশন
ধাপ 2. একটি মেটা ট্যাগ দিয়ে ভিউপোর্ট সেট করুন।
আপনি যদি কোন কাঠামো ব্যবহার না করেন, তাহলে আপনি একটি প্রতিক্রিয়াশীল ওয়েবসাইট কোডিংয়ের সবচেয়ে গুরুত্বপূর্ণ দিক দিয়ে শুরু করতে চান: ভিউপোর্ট। ভিউপোর্ট হল ওয়েবসাইটের অংশ যা ব্যবহারকারীর কাছে দৃশ্যমান। স্ক্রিনের আকার নির্বিশেষে আপনার সাইটটি সঠিকভাবে প্রদর্শন করার চাবিকাঠি হল মেটা ট্যাগে ভিউপোর্টের আকার স্কেল করা। এটি করার জন্য, সাইটের প্রতিটি পৃষ্ঠার শীর্ষে এই ট্যাগটি অন্তর্ভুক্ত করুন:
ধাপ the. ভিউপোর্টের সাথে টেক্সটের আকার উল্লেখ করুন।
একবার আপনার ভিউপোর্ট সেট হয়ে গেলে, আপনার পৃষ্ঠার পাঠ্যটি স্ক্রিনের সাথে মানানসই হবে। যাইহোক, ফন্টগুলি খুব বড় বা খুব ছোট প্রদর্শন করতে পারে যদি তাদের আকারগুলি ভিউপোর্টের সাথে সম্পর্কিত না হয়। আপনি vw ইউনিটের সাথে ভিউপোর্টের একটি নির্দিষ্ট শতাংশ হিসাবে ফন্টের আকার নির্ধারণ করে এটি করতে পারেন। এই উদাহরণটি H1 শিরোনামগুলিকে ভিউপোর্টের প্রস্থের 10% প্রদর্শন করতে বলে, তার আকার যাই হোক না কেন:
উইকিহাউ
ধাপ 4. বিভিন্ন পর্দার আকারের জন্য বিভিন্ন স্টাইল দেখানোর জন্য মিডিয়া প্রশ্নগুলি ব্যবহার করুন।
মিডিয়া প্রশ্নগুলি আপনাকে পর্দার আকারের উপর নির্ভর করে নির্দিষ্ট CSS উপাদান প্রদর্শন করবে কিনা তা চয়ন করতে দেয়। আপনি আপনার CSS ফাইলে আপনার মিডিয়া ক্যোয়ারীর সুনির্দিষ্ট উল্লেখ করতে পারেন। এই উদাহরণে, ব্যবহারকারীর স্ক্রিনের আকার 480px বা বড় হলে শরীরের ব্যাকগ্রাউন্ডের রঙ লাল হয়ে যাবে:
উইকিহাউ
@মিডিয়া স্ক্রিন এবং (মিনি-প্রস্থ: 480px) {বডি {ব্যাকগ্রাউন্ড-কালার: অ্যাকুয়া; }}
3 এর 3 পদ্ধতি: ছবিগুলি প্রতিক্রিয়াশীল করা
ধাপ 1. ছবিগুলি স্কেল করার জন্য CSS প্রস্থ সম্পত্তি ব্যবহার করুন।
ছবিটির প্রস্থকে নির্দিষ্ট পরিমাণ পিক্সেল (যেমন, 500px) -এ সেট করার পরিবর্তে, শতাংশ ব্যবহার করুন (যেমন, 100%) যাতে ছবিটি তার পিতামাতার প্রস্থের দিকে তাকিয়ে থাকে এবং সেই অনুযায়ী সামঞ্জস্য হয়। একটি ছবির প্রস্থকে 100% নির্ধারণ করা দর্শকের স্ক্রিনের আকারের উপর নির্ভর করে ছবিটিকে স্কেল আপ এবং ডাউন করতে বাধ্য করে। এই লাইন করতে:
পদক্ষেপ 2. ছবির প্রকৃত আকার স্কেলিং সীমাবদ্ধ করতে সর্বাধিক প্রস্থের সম্পত্তি ব্যবহার করুন।
যদি আপনি পূর্ববর্তী ধাপে প্রস্থ সম্পত্তি ব্যবহার করে একটি চিত্রকে 100% পর্যন্ত স্কেল করেন, তাহলে ছবিটি বড় হবে বা সঙ্কুচিত হবে তার কন্টেইনারের 100% মাপসই হোক না কেন। এর মানে হল যে যদি ছবিটি ছোট দিকে থাকে তবে এটি তার মূল আকারের চেয়ে বড় আকারের হবে এবং কম মানের দেখাবে। এটি যাতে না ঘটে তার জন্য, ছবির সর্বাধিক স্কেলিং আকার 100% (এর প্রকৃত আকার) সেট করতে সর্বোচ্চ-প্রস্থ ব্যবহার করুন। এখানে কিভাবে:
ধাপ different. বিভিন্ন পর্দার আকারে বিভিন্ন ছবি প্রদর্শনের জন্য HTML ছবি উপাদান ব্যবহার করুন।
আপনি যদি বিভিন্ন আকারের স্ক্রিনে প্রদর্শনের জন্য কাস্টম আকারের ছবি তৈরি করতে চান, তাহলে আপনি আপনার HTML কোডে কোন ছবি প্রদর্শন করবেন তা নির্দিষ্ট করতে পারেন। বিভিন্ন আকারের ছবি তৈরি করুন, এবং তারপর 600px এবং 1500px প্রস্থের স্ক্রিনে কোন ছবিটি ব্যবহার করবেন তা নির্দিষ্ট করার জন্য এই কোডটি উদাহরণ হিসেবে ব্যবহার করুন:
