কিভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট বানাবেন? এখানে আপনি আজকের ওয়েব মডেলগুলির উপর ভিত্তি করে এই অভিযোজিত কৌশল সম্পর্কে তথ্য পেতে পারেন, যার অর্থ হল একটি একক ডিজাইনের অধীনে, একটি ওয়েব পোর্টাল অ্যাক্সেস করা যায় এবং যেকোনো কম্পিউটার বা ইলেকট্রনিক ডিভাইস থেকে সঠিকভাবে দেখা যায়।
¿কিভাবে একটি রেসপন্সিভ ওয়েবসাইট বানাবেন?
একটি ওয়েবসাইটকে প্রতিক্রিয়াশীল বা সম্ভাব্য অভিযোজনের প্রতি সংবেদনশীল করা খুবই সুবিধাজনক। এ ছাড়া যেকোনো ইলেকট্রনিক প্ল্যাটফর্ম থেকে ইন্টারনেটে সঠিকভাবে কাজ করার সাফল্যের নিশ্চয়তা। নিম্নলিখিত লাইনগুলিতে, একটি প্রতিক্রিয়াশীল ওয়েব তৈরির উপায় স্পষ্ট করা হয়েছে, যা ওয়েব পৃষ্ঠাগুলির অভিযোজনযোগ্যতার প্রকৃতি থেকে কল্পনা করা হয়েছে। অতএব, প্রতিক্রিয়াশীল মডেলের অধীনে একটি ওয়েব পৃষ্ঠা ডিজাইন করার সময়, নেভিগেশনের জন্য ব্যবহৃত ইলেকট্রনিক ডিভাইসের উপর নির্ভর করে উল্লিখিত ওয়েবের চেহারা বা চিত্র সামঞ্জস্য করা এবং দেখা যাবে।
ইন্টারনেটে নেভিগেট করার জন্য বর্তমানে বিদ্যমান বহুবিধ সরঞ্জাম বা ইলেকট্রনিক ডিভাইসগুলি সম্পর্কে কেউই অজানা নয়, যেমন: কম্পিউটার, ট্যাবলেট, স্মার্টফোন, ল্যাপটপ ইত্যাদি। ইন্টারনেটের প্রথম দিকে, ওয়েবসাইট ডেভেলপাররা পিক্সেলের একটি সাধারণ প্রস্থের সাথে পৃষ্ঠাগুলি তৈরি করতে অভ্যস্ত হয়েছিল। উদাহরণস্বরূপ, 90-এর দশকে, যে মনিটরগুলি বিদ্যমান ছিল সেগুলির একটি একক স্ক্রীনের আকার ছিল 14" এর একটি নির্দিষ্ট প্রস্থ 640 পিক্সেল। ওয়েব পেজ ডিজাইনাররা তাদের ডিজাইনগুলিকে শুধুমাত্র বিদ্যমান মনিটরের স্ট্যান্ডার্ড মাত্রায় ফিট করে।
2000 সালের শুরুর দিকে এবং 2010 এর আগমন পর্যন্ত, মনিটরের মডেল এবং পিক্সেল প্রস্থে বৈচিত্র্য ছিল। ওয়েব ডিজাইন প্রতিটি বৈচিত্রের সাথে সামঞ্জস্য করা হয়েছিল। এটি ছিল 2010 সাল থেকে যে মহান প্রযুক্তিগত বিপ্লব ঘটেছিল, যার ফলে ওয়েব পেজ ডিজাইনের দৃশ্যে ভারসাম্যহীনতা দেখা দেয়। ইন্টারনেটের ক্ষেত্রে মোবাইল টেলিফোনির মাধ্যমে নেভিগেশন চালু হয়। নতুন এই টেলিফোনটিতে কম্পিউটারের মতো ব্রাউজার ব্যবহার করা হয়েছে। এই মহান প্রযুক্তিগত বিপ্লবের সাথে, সময় এসেছে রেসপন্সিভ ডিজাইন বা ওয়েব পেজের অ্যাডাপটিভ ডিজাইন নামে পরিচিত।
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েব তৈরি করতে হয় তা জানার গুরুত্ব
এটা খুবই গুরুত্বপূর্ণ যে ওয়েব পেজ ডেভেলপাররা জানে কিভাবে একটি প্রতিক্রিয়াশীল ওয়েব তৈরি করতে হয়; এমনকি ইন্টারনেটে বড় প্রতিপত্তির কোম্পানি গুগল এটিকে অত্যন্ত প্রয়োজনীয় কিছু হিসাবে নির্দেশ করে। কারণ প্রতিক্রিয়াশীল মডেলের অধীনে ডিজাইন করা একটি ওয়েব পৃষ্ঠা নেভিগেশন অপ্টিমাইজেশানের অনুমতি দেয়, ডুপ্লিকেট সামগ্রী এড়িয়ে যায় এবং একটি অসাধারণ স্থিতিশীল চিত্রের গুণমান প্রদান করে। একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করার সময় গুরুত্বপূর্ণ অন্যান্য দিকগুলি হল:
- হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ (এইচটিএমএল) এবং সিএসএস ভাষার একটি একক অভিযোজন সহ, এটি যেকোনো স্ক্রীন রেজোলিউশনকে কভার করার জন্য অর্জন করা যেতে পারে। এইভাবে প্রতিটি ধরণের ডিভাইসের জন্য একটি ওয়েব পৃষ্ঠা তৈরি করা এড়ানো যা আপনাকে এটি দেখার বা ব্রাউজ করার অনুমতি দেয়। এই দিকটি ডিজাইনের সময়ও হ্রাস করে।
- ব্রাউজ করার সময় এটি স্বয়ংক্রিয়ভাবে মানিয়ে নেয়, প্রতিটি নির্দিষ্ট সফরে পড়া এবং মিথস্ক্রিয়া সম্ভব করে তোলে।
- তারা সার্চ ইঞ্জিনে নিজেদেরকে আরও ভাল এবং দ্রুত অবস্থান করতে পরিচালনা করে। যেহেতু এই ধরনের ডিজাইন ডুপ্লিকেশন এবং রিডাইরেক্ট এড়িয়ে যায়।
- এই ডিজাইনের অধীনে তৈরি করা ওয়েব পৃষ্ঠাগুলি তাদের বিষয়বস্তুগুলিকে আরও দ্রুত ভাইরাল হওয়ার অনুমতি দেয়, তাদের মূল এবং সহজভাবে শেয়ার করার কারণে।
একটি প্রতিক্রিয়াশীল ওয়েব ডিজাইন কি?
প্রতিক্রিয়াশীল ওয়েব ডিজাইন, যা অভিযোজিত ওয়েব ডিজাইন নামেও পরিচিত, ওয়েব পৃষ্ঠাগুলি ডিজাইন বা বিকাশ করার একটি উপায়। এই সিস্টেমের বিশেষত্ব একটি একক ডিজাইনের অধীনে তৈরি করা ওয়েবসাইটটিকে যে কোনো কম্পিউটার বা ইলেকট্রনিক প্ল্যাটফর্ম থেকে পরিদর্শন বা অ্যাক্সেস করার অনুমতি দেয়। প্রতিক্রিয়াশীল নামটি একটি ইংরেজি শব্দ যা এমন কিছুকে বোঝায় যা প্রতিক্রিয়াশীল, অভিযোজনযোগ্য, অনুধাবনযোগ্য, দৃশ্যমান ইত্যাদি।
প্রতিটি স্ক্রীনের প্রস্থ পরিমাপের সাথে সামঞ্জস্য করার জন্য এই ধরণের ওয়েবসাইটের ক্ষমতার কারণে এই কৌশলটি এই নামটি পেয়েছে। ন্যাভিগেশনের জন্য ব্যবহৃত ডিভাইসে কোনো পার্থক্য না করেই এর প্রদর্শন এবং সঠিক অপারেশন সম্ভব করে তোলা।
ইমেজ এবং বিষয়বস্তুর সংগঠন, সেইসাথে প্রতিক্রিয়াশীল ওয়েব মেনুর সরলতার জন্য এটি সম্ভব হয়েছে। যে চারটি প্রধান যোগ্যতা নির্ধারণ করে এবং এই ধরনের ওয়েব পেজ ডিজাইনকে খুব জনপ্রিয় করে তোলে সেগুলো হল:
- সরল
- অর্থনৈতিক
- দ্রুত
- এবং উপরের সমস্ত উপরে, তারা সম্পূর্ণরূপে কার্যকরী
কিভাবে একটি রেসপনসিভ ডিজাইন ওয়েব তৈরি করবেন এবং এর জটিলতা
ওয়েব পৃষ্ঠাগুলির নকশা এবং বিকাশ সংক্রান্ত জটিলতা 2010 এর দশক থেকে উদ্ভূত হয়েছিল, যখন নেভিগেশন সহ মোবাইল ফোনগুলি ইন্টারনেট দৃশ্যে উপস্থিত হতে শুরু করেছিল। যেটি পিসির মতোই গুগল, ফায়ারফক্স, এক্সপ্লোরারসহ অন্যান্য ব্রাউজার ব্যবহার করে। বিভিন্ন ওয়েব সাইট পরিদর্শনের নতুন সম্ভাবনার মধ্যে এই ভাবে হয়ে উঠছে. এই সময়ে ইন্টারনেট অ্যাক্সেস সহ প্রথম ইলেকট্রনিক ট্যাবলেটগুলিও উপস্থিত হতে শুরু করে।
সেখান থেকে ওয়েব পেজের ডিজাইনের প্রয়োজনীয়তা আরও জটিল হয়ে ওঠে। ওয়েবসাইটগুলির প্রদর্শন এবং পরিচালনার জন্য বিদ্যমান বিভিন্ন ধরণের স্ক্রীনের আকারের কারণে। আপনাকে এমন একটি নকশা খুঁজে বের করতে হবে যা যেকোনো ধরনের ডিভাইসের জন্য কাজ করবে এবং স্বয়ংক্রিয়ভাবে সামঞ্জস্য করবে।
আপনি আর এক, দুই, বা তিনটি প্রধান স্ক্রীন রেজোলিউশনের জন্য ডিজাইন করতে পারবেন না। এটি বোঝার প্রয়োজন ছিল যে ডিভাইসগুলির রেজোলিউশনগুলি ক্রমবর্ধমান পরিবর্তনশীল হবে, একটি কম্পিউটার মনিটরের চেয়ে অনেক ছোট হওয়ার পাশাপাশি।
এই মুহূর্তটি ওয়েব ডিজাইনের অনমনীয়তার সমাপ্তি চিহ্নিত করেছে। এবং কেবলমাত্র বিভিন্ন ধরণের ডিভাইসেই নয়, তাদের প্রত্যেকটির নির্দিষ্ট বৈশিষ্ট্য রয়েছে, যেমন:
- স্ক্রিন সাইজ
- স্ক্রিন রেজল্যুশন
- CPU শক্তি
- অপারেটিং সিস্টেম
- অন্যদের মধ্যে মেমরি ক্ষমতা.
তারপরে নতুন ওয়েব ডিজাইন মডেলটি চালু করা হয়, যার উদ্দেশ্য হল যে একটি একক ডিজাইনের সাথে, ব্রাউজিং ডিভাইস নির্বিশেষে এর সঠিক ভিজ্যুয়ালাইজেশন সম্ভব হবে। যাইহোক, এই ধরনের ওয়েবসাইট ডেভেলপ করার জটিলতা রয়েছে।
একটি রেসপন্সিভ ওয়েব তৈরিতে জটিলতার কারণ কী?
প্রতিক্রিয়াশীল নামক অভিযোজনযোগ্যতার নকশার অধীনে একটি ওয়েবসাইট তৈরি করার ক্ষেত্রে আজও জটিলতা রয়েছে। দুটি প্রধান কারণের কারণে, যা নীচে নির্দেশ করা হয়েছে:
1-এটি এমন একটি প্রযুক্তি যা দীর্ঘদিন ধরে বিকাশ করা হয়নি এবং প্রয়োগের একাধিক উপায়ের কারণে, সমস্ত বিকল্পের মধ্যে কোনটি সেরা হতে পারে তা নির্ধারণ করা সম্ভব হয়নি। উদ্ভাবন সর্বদা এই ধরনের ওয়েব ডিজাইন সম্পর্কে উদ্ভাবন করা হয়. অতএব, সর্বোত্তম কাঠামো বা সহায়তা প্রযুক্তি নির্ধারণ করা কঠিন, না এমন একটি সাধারণ নিয়ম যা সম্ভাব্য সর্বাধিক সংখ্যক বাধার সমাধান নিশ্চিত করে। এই ধরনের ওয়েবসাইট ডেভেলপ করা সহজ করার জন্য।
2- দ্বিতীয় কারণ হল অভিযোজিত নকশা সিস্টেম শুধুমাত্র প্রযুক্তিগত দৃষ্টিকোণ থেকে ভিত্তিক নয়। উপায় হিসাবে সাইট বিভিন্ন পর্দা বা ডিভাইস অনুযায়ী পরিবর্তিত হবে. বরং, প্রতিটি সম্ভাব্য নেভিগেশন পরিস্থিতিতে এটি কীভাবে কাজ করবে তার একটি ধারণা দিয়ে এটি ডিজাইন করা উচিত। এই কারণটি প্রতিক্রিয়াশীল ওয়েব ডিজাইন মডেলে উচ্চ স্তরের জটিলতা যোগ করে যা সাইট ডেভেলপার হিসাবে কাজ করে এমন লোকেদের দ্বারা পরিষ্কার করা হবে।
অভিযোজিত বা প্রতিক্রিয়াশীল ওয়েব ডিজাইনের সাথে কাজ করার জন্য ব্যায়াম করা এবং পর্যাপ্ত দক্ষতা অর্জনের জন্য অন্য যেকোনো ধরনের ওয়েব ডিজাইনের চেয়ে বেশি সময় প্রয়োজন। তবে আশা করা যায়, কম্পিউটিংয়ে অগ্রগতির সাথে সাথে জটিলতার মাত্রা কম হবে। এই বিষয়ে আরও বিকশিত হওয়ার জন্য, প্রতিক্রিয়াশীল ডিজাইনের প্রকারের সাথে জড়িত ওয়েবসাইট জ্ঞান সহ কর্মীদের থেকে, পেশাদার কর্মীরা যেমন:
- লেআউট
- ডিজাইনার
- প্রোগ্রামাররা
- বাণিজ্যিক এবং ডিজিটাল মার্কেটিং কর্মীরা
ডিজাইনের সময় কমিয়ে দিন
পূর্ববর্তী দুটি কারণ সমাধান করা হলে, সম্ভবত এটি একটি প্রতিক্রিয়াশীল ওয়েবের বিকাশ বা সৃষ্টির সময়কাল হ্রাস করবে। একই সাথে এটি সাধারণ ওয়েবসাইট ব্যবহারের জন্য উপলব্ধ করা সম্ভব।
এদিকে, আজ আমাদের যা আছে, মোবাইল ডিভাইসের জন্য স্ক্র্যাচ থেকে একটি নতুন ওয়েব ডিজাইন তৈরি করা দ্রুততর হতে পারে; ওয়েবকে অভিযোজনযোগ্য বা প্রতিক্রিয়াশীল করতে রূপান্তরিত বা পুনরায় ডিজাইন করা। সর্বদা আশা থাকবে যে একদিন কেউ এটি করার উপায় খুঁজে পাবে এবং এটি অর্জন করবে, আসুন সেই আশা করি।
এদিকে, কি করা যায়?
আমাদের ওয়েবে থাকা একটি সম্পূর্ণ সাইট পুনরায় ডিজাইন করা, এটিকে মানিয়ে নেওয়ার জন্য এটি এখনও খুব জটিল। এর মানে এই নয় যে আমরা সাইটে কিছু ছোট পরিবর্তন করা বন্ধ করে দিই। এটিকে উন্নত করতে এবং বিভিন্ন ব্রাউজারে পাশাপাশি বিভিন্ন ইলেকট্রনিক ডিভাইসে অভিযোজনে প্রতিক্রিয়াশীল করে তুলতে।
ন্যাভিগেশন সাইটে কি ধরনের ওয়েব ডিজাইন আছে তা যাচাই করার জন্য প্রথমেই কাজটি করতে হবে। প্রধানত চেক করুন:
- ওয়েবসাইটের বিন্যাস
- এইচটিএমএল এবং সিএসএস এর পরিপ্রেক্ষিতে এর গঠন কী?
এই দুটি মৌলিক পয়েন্ট বিশ্লেষণ করে, এটি প্রতিষ্ঠিত করা যেতে পারে যে ওয়েবসাইট উন্নত করার জন্য ছোট পরিবর্তন করা যেতে পারে।
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েব তৈরি করতে হয় তা জানতে পূর্ববর্তী বিবেচনাগুলি বিবেচনা করতে হবে
যদি এমন হয় যে আপনার কাছে ইতিমধ্যেই একটি ওয়েব পোর্টাল, একটি ল্যান্ডিং পৃষ্ঠা বা একটি বিষয়বস্তু ব্লগ রয়েছে, যা একটি সাধারণ ডিজাইনের অধীনে তৈরি করা হয়েছে এবং আপনি এটিকে একটি প্রতিক্রিয়াশীল বা অভিযোজনযোগ্য ডিজাইনের ওয়েবসাইটে রূপান্তর করতে চান৷ এটি কেবল সিদ্ধান্ত নেওয়া এবং এটি অর্জনের জন্য প্রথম পদক্ষেপ নেওয়া, এটি করার সিদ্ধান্ত নেওয়া!
একটি ওয়েবসাইটকে প্রচলিত ডিজাইন থেকে প্রতিক্রিয়াশীলে রূপান্তরিত করার অর্থ এই নয় যে সমস্ত মূল কাজ হারিয়ে যাবে। যেহেতু সমস্ত বিষয়বস্তু বাতিল করা হবে না, তবে এতে সামান্য এবং ছোট পরিবর্তন হবে। বিষয়বস্তু যেমন চিত্র, পাঠ্য এবং বিদ্যমান সাইটের অন্য কিছু উপাদান ব্যবহার করা যেতে পারে এবং রূপান্তরের সাথে সঠিকভাবে কাজ করতে পারে।
যাইহোক, সাইটটিকে মানিয়ে নেওয়া এবং উন্নত করার বিকল্প দেওয়া হয়েছে, কিছু পূর্বের বিবেচনাগুলি জেনে রাখা সুবিধাজনক যা কাজটি গ্রহণের পক্ষে হবে৷
বিদ্যমান ওয়েব মুভমেন্ট চেক করুন
বিদ্যমান ওয়েবে কোনো পরিবর্তন করার আগে, এটিতে থাকা ট্রাফিক যাচাই করার পরামর্শ দেওয়া হয়। অর্থাৎ ওয়েবসাইট ভিজিট করা লোকের সংখ্যা সংক্রান্ত পরিসংখ্যান। এই তথ্যের উপর ভিত্তি করে, আমরা আরও বেশি সাফল্য এবং আরও ভাল অনুসন্ধান অবস্থানের লক্ষ্যে নকশাটি পরিবর্তন করার জন্য কাজ করব। ওয়েবের রিডিজাইন এবং অভিযোজনে এটি সম্পর্কে জানা সুবিধাজনক এসইও টুলস, কারণ নেটওয়ার্কে আরও ভালো অবস্থান পাওয়ার ক্ষেত্রে তারাই সেরা।
একটি ভাল অনুপ্রেরণা প্রয়োজন
এটি একবার দেখে নেওয়া এবং একটি তৈরি করার পরামর্শ দেওয়া হচ্ছে প্রতিদ্বন্দ্বী বিশ্লেষণ অথবা ওয়েবসাইটের অনুরূপ বিষয়বস্তু সহ পৃষ্ঠাগুলি যেখানে প্রতিক্রিয়াশীল ওয়েব ডিজাইনের দিকে পরিবর্তনগুলি প্রয়োগ করা হবে৷ এই পূর্বরূপ সম্ভাব্য বিষয়বস্তু উন্নতির জন্য গবেষণা চালানোর উদ্দেশ্যে করা হয়েছে. কিন্তু সেই অনুরূপ পৃষ্ঠাগুলি কীভাবে বিভিন্ন ডিভাইসে কাজ করে। সাইট নির্বাচনের জন্য যে দিকগুলিকে বিবেচনায় নিতে হবে যেগুলি উন্নতির ক্ষেত্রে অনুপ্রেরণা বা মডেল হতে পারে৷ তারা সেই পৃষ্ঠাগুলিতে নেভিগেশন সহজ হবে এবং যেগুলির জন্য কম জুম বা স্ক্রল করার প্রয়োজন হয়৷ এখানে আপনি জন্য সেরা কৌশল খুঁজে পেতে পারেন এসইও উন্নত করুন ভাল কন্টেন্ট অর্জন করার জন্য তাদের প্রয়োগ করুন!
শব্দার্থিক এইচটিএমএল পক্ষে
শব্দার্থিক এইচটিএমএল ব্যবহার নির্দেশ করে যে মূল ওয়েবসাইটের বিন্যাস সঠিকভাবে প্রতিষ্ঠিত হয়েছিল। এটির পক্ষে বা মহান সাহায্য, কারণ শুধুমাত্র প্রয়োজনীয় এইচটিএমএল উপাদানগুলি ব্যবহার করা হয়েছিল৷ ওয়েবের বিকাশের সময় মাথায় রেখে, একই ওয়েবের ডিজাইনের উপরে প্রতিটি ট্যাগের শব্দার্থবিদ্যা। ক্লাস এবং আইডি অনুযায়ী ডিজাইনের নিজস্ব কাজ CSS-এর কাছে ছেড়ে দেওয়া।
একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করার প্রক্রিয়া চলাকালীন, উপাদান যেমন:
- DIV
- P
- UL
- LI, অন্যদের মধ্যে
যাইহোক, যদি এটি মডেলের সম্পূর্ণ নকশার সাথে বিতরণের পদক্ষেপ মেনে চলতে হয়। কারণ আপনি একটি অনুপ্রবেশকারী CSS ব্যবহার করতে পারবেন না, অর্থাৎ কোডের মধ্যে কোনো শৈলী বৈশিষ্ট্য ব্যবহার করবেন না। যেহেতু আরও পরিমার্জিত এবং কম DIV সহ, এইচটিএমএল, এটি অভিযোজনগুলিকে সহজতর করতে বা ওয়েবকে আরও সংবেদনশীল করতে সাহায্য করবে৷ কারণ প্রাপ্ত ফলাফলে সিএসএস উন্নত হবে।
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করতে হয় তার উপর জুম সঠিকভাবে সেট করুন
ওয়েবসাইটগুলির সম্পূর্ণ প্রদর্শন অর্জনের জন্য মোবাইল ব্রাউজারগুলিতে জুমের সঠিক পছন্দ বাঞ্ছনীয়। প্রতিক্রিয়াশীল ওয়েব ডিজাইনের বিকাশ শুরু হওয়ার আগে মোবাইল ডিভাইসে ব্রাউজারগুলি পূর্ব-বিদ্যমান ছিল। এই ডিভাইসগুলিতে ওয়েবসাইটগুলি সম্পূর্ণ দেখার জন্য, ব্রাউজারগুলিকে জুম সরঞ্জামগুলি অবলম্বন করতে হবে৷ তাই মোবাইল ডিভাইস থেকে ঐতিহ্যগতভাবে ডিজাইন করা ওয়েবসাইট অ্যাক্সেস করার সময়। মোবাইলের স্বাভাবিক রেজোলিউশন দেখা যাবে না, তবে 960 পিক্সেলের প্রস্থে সামঞ্জস্য না করা পর্যন্ত একটি জুম টুল দ্বারা পরিচালিত একটি অভিযোজন প্রদর্শিত হবে।
কারণ এটি করার অন্য কোন উপায় ছিল না, বিকাশকারীরা এইচটিএমএল তৈরি করছিল যা জুমের পরিবর্তন বা সমন্বয় করে। এইভাবে, ডিভাইসগুলিতে রেজোলিউশনের অভিযোজন করার সময়, দলকে অবশ্যই অন্য ধরণের স্কেলিং ব্যবহার করতে বলা উচিত। ব্যবহারের জন্য একটি উপযুক্ত প্রকার হল মেটা ট্যাগ যা একটি ভিউপোর্ট নামে পরিচিত, যা ওয়েবসাইটের মাথায় প্রবেশ করানো হয়। এই মেটা ট্যাগের সাহায্যে আপনি রূপান্তরিত ওয়েবে ব্রাউজারটি চালানোর পদ্ধতির বিস্তারিত বিবরণ দিতে পারেন। নিম্নলিখিত সিনট্যাক্স দেখুন, লিখিত শব্দগুচ্ছ:
ভিউপোর্ট মেটা ট্যাগের এই প্রতীকী বিন্যাসটি প্রতিক্রিয়াশীল ওয়েব ডিজাইনে সবচেয়ে বেশি ব্যবহৃত হয়। যাইহোক, এই উদ্দেশ্যে ব্যবহার করা যেতে পারে যে অন্যান্য অনেক কনফিগারেশন আছে. শুধুমাত্র উপস্থাপিত সিনট্যাক্সে দুটি ভেরিয়েবল রয়েছে যা মোবাইল ব্রাউজারটিকে ওয়েবের সাথে খাপ খাইয়ে নেয় এবং অন্যভাবে নয়। এই ভেরিয়েবল হল:
ডিভাইস-প্রস্থ বা ডিভাইসের প্রস্থ
পরিবর্তনশীল width=device-width কনফিগারেশনে অন্তর্ভুক্ত করা হয়েছে যাতে স্ক্রীনের পিক্সেলের প্রস্থ মোবাইল ডিভাইসের প্রস্থের সাথে মিলে যায়। এইভাবে, মোবাইলের নিজস্ব রেজুলেশন প্রদর্শিত হয়।
সর্বোত্তম সম্ভাব্য ব্যবহার প্রদানের জন্য, মোবাইল ব্রাউজারগুলি ডেস্কটপ স্ক্রিনের প্রস্থের মতো পৃষ্ঠাটি প্রদর্শন করে। এই প্রস্থ মোবাইল ডিভাইসের উপর নির্ভর করে পরিবর্তিত হতে পারে। কিন্তু প্রায়শই এটি প্রায় 980 পিক্সেলের মধ্যে একটি। পরবর্তীকালে, এটি ফন্টের আকার বড় করে বিষয়বস্তুর চেহারা অপ্টিমাইজ করার চেষ্টা করে, সেইসাথে সামগ্রীর স্কেল পরিবর্তন করে যাতে এটি ডিভাইসের স্ক্রিনের সাথে মানানসই হয়।
এর ফলে ব্যবহারকারীরা এটিকে কিছুটা অসংলগ্ন বা বিভ্রান্তিকর খুঁজে পেতে পারে এবং তারপর বিষয়বস্তুর সাথে যুক্ত হতে জুম ইন করতে ডবল-ট্যাপ করতে হবে। ভিউপোর্ট মেটা ট্যাগ ভেরিয়েবল ব্যবহার করা: width=device-width প্রস্থ সামঞ্জস্য করার জন্য লেআউটে একটি পদক্ষেপের দাবি করে। এমনভাবে যাতে পৃষ্ঠাটি বিভিন্ন স্ক্রীনের মাত্রার সাথে মানানসই করার জন্য বিষয়বস্তুকে পুনরায় সামঞ্জস্য করতে পারে, তা একটি ছোট সেল ফোনে বা পিসি মনিটরে প্রদর্শিত হোক না কেন।
প্রাথমিক-স্কেল বা প্রাথমিক স্কেল
ডিভাইসের উপর নির্ভর করে CSS পিক্সেল এবং মোবাইল পিক্সেলের মধ্যে একটি রিলেশনাল স্কেল নির্ধারণ করতে প্রাথমিক-স্কেল= পরিবর্তনশীলটি কনফিগারেশনে অন্তর্ভুক্ত করা হয়েছে। উপরে দেখানো কনফিগারেশনে এটি প্রাথমিক স্কেলের জন্য নির্দেশিত হয়েছে: প্রাথমিক-স্কেল=1.0। এখানে সিনট্যাক্স ইঙ্গিত করছে যে পিক্সেলের মধ্যে অনুপাত হল 1:1, একটি CSS পিক্সেল একটি ডিভাইস পিক্সেলের সাথে পড়া হয়। তারপরে মোবাইল ব্রাউজারকে জুমের জন্য এই মানটি গ্রহণ করার জন্য আদেশ দেওয়া হয় এবং এটি ডিভাইস দ্বারা ব্যবহৃত হবে। যাইহোক, আসুন নিম্নলিখিত দুটি বিকল্প দেখুন:
- যখন প্রারম্ভিক-স্কেল ভেরিয়েবলটি 1.0 এর সমান হয়, তখন এটি জুম ছাড়াই একটি প্রদর্শনকে বোঝায়, কারণ এটি এক থেকে এক।
- যেখানে প্রাথমিক-স্কেল=2.0 হলে, ভেরিয়েবলটি পুরো পৃষ্ঠায় দ্বিগুণ আকারে বড় হওয়া একটি জুমকে বোঝায়।
অতএব, একটি মোবাইলের প্রস্থের সাথে মানানসই করার জন্য ডিজাইন করা একটি ওয়েবসাইটে ব্যবহার করার উপযুক্ত বিকল্পটি প্রথম হবে৷ এটি ডিভাইসটিকে কোনো জুম প্রয়োগ না করার নির্দেশ দেয়। কিন্তু এছাড়াও, এমন কিছু ক্ষেত্রেও হতে পারে যেখানে এই পরিবর্তনশীলটি অন্তর্ভুক্ত করা বা প্রয়োগ না করাই সেরা বিকল্প হবে। এইভাবে ছেড়ে যাওয়া যে একই মোবাইলটি এমন একটি যেটি নিজেই জুমকে অভিযোজিত করে, ডিজাইনে নির্দেশিত প্রস্থের সাথে।
মৌলিক ভিউপোর্ট কনফিগারেশন - অ্যাপ্লিকেশন উদাহরণ:
আপনার প্রস্থ 500 পিক্সেল হোক এবং একটি প্রাথমিক-স্কেল কমান্ড দেওয়া হোক না কেন, ওয়েবটি 500 পিক্সেলের প্রস্থের স্ক্রীনের চেহারা নেয়। যাইহোক, মোবাইলে, এর আসল কনফিগারেশনটি ওয়েবের মোট 320 পিক্সেলের 500 পিক্সেলের আনুমানিক সমতুল্য অনুপাতের সাথে প্রদর্শিত হবে।
এখন, যদি, অন্য দিকে, একটি প্রাথমিক-স্কেল অর্ডার দেওয়া না হয়, পুরো ওয়েবটি প্রদর্শিত হয়, অর্থাৎ 500 পিক্সেল, একটি অভিযোজিত জুমের অধীনে। ভিউপোর্ট ট্যাগের এই দুটি সাধারণ কনফিগারেশনের সিনট্যাক্স, পাঠ্যভাবে নিম্নরূপ হবে:
পূর্ববর্তী কনফিগারেশনটি মোবাইল রেজোলিউশনের সাথে সঠিকভাবে অভিযোজিত একটি প্রতিক্রিয়াশীল ডিজাইন সহ একটি ওয়েবসাইটের জন্য হবে৷ মোবাইল রেজোলিউশনে সম্পূর্ণরূপে অভিযোজিত হয়নি এমন একটি ওয়েবসাইটের জন্য, কনফিগারেশনটি নিম্নরূপ হবে:
সাধারণের পাশাপাশি, কিছু অন্যান্য কনফিগারেশন আছে। এর মধ্যে একটি হল মোবাইলের প্রস্থ দিয়ে একটি ওয়েবসাইট ডিজাইন করা, জুম প্রয়োগ করা। কিন্তু এই ধরনের ডিজাইন ব্যবহারকারীর জন্য খুবই অদ্ভুত এবং বিভ্রান্তিকর হবে।
কীভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করবেন – মিডিয়া প্রশ্ন
আপনি যখন একটি প্রতিক্রিয়াশীল ওয়েবসাইট বা একটি অভিযোজিত পৃষ্ঠা তৈরি করতে জানতে চান, তখন আপনার জানা উচিত যে মিডিয়া কোয়েরি নামে পরিচিত সিস্টেমটি আপনাকে প্রয়োগ করতে হবে। এই কৌশলটি আপনাকে একটি শর্তের মাধ্যমে, পর্দার রেজোলিউশনের উপর নির্ভর করে বিভিন্ন আকার বা শৈলী স্থাপন করতে দেয়। কিন্তু মিডিয়া প্রশ্ন কি?
মিডিয়া প্রশ্ন
মিডিয়া প্রশ্ন হল একটি কৌশল যা CSS বাক্য গঠন করে। যেটির সাহায্যে আপনি ওয়েব ডিজাইনের ক্ষেত্রে প্রযোজ্য বিবৃতি দিতে পারেন, যতক্ষণ না আগে থেকে প্রদত্ত বা প্রতিষ্ঠিত কিছু শর্ত পূরণ করা হয়। এই মিডিয়া ক্যোয়ারী বিবৃতিগুলি মূলত ওয়েবে দুটি পয়েন্টে প্রয়োগ করা যেতে পারে:
- প্রথমত, CSS ফাইলে কল করার সময়, প্রতিটিতে উল্লেখ করুন যে এটি লোড করার শর্ত কী। উদাহরণ:
- দ্বিতীয়ত, একই CSS ফাইলে, একটি পৃথক স্থান স্থাপন করা যেখানে CSS ভগ্নাংশগুলি ব্যবহার করা হবে। উদাহরণ:
@মিডিয়া স্ক্রিন এবং (মিনিমাম-প্রস্থ:320px) এবং (সর্বোচ্চ-প্রস্থ:480px){
/*এই প্রস্থ পরিসরের জন্য শৈলী ঘোষণা */
বাস্তবে, মিডিয়া ক্যোয়ারী হল একটি শক্তিশালী টুল যা রেসপনসিভ ওয়েব ডিজাইন ত্যাগ করার, ওয়েবের মধ্যে অন্যান্য বিভিন্ন সমস্যা সমাধানের সুযোগ দেয়। পরে ডকুমেন্ট করা ভাল, মিডিয়া প্রশ্নের এই কৌশল সম্পর্কে একটু বেশি।
এদিকে, আপাতত মিডিয়া ক্যোয়ারী সিস্টেম সম্পর্কে দুটি পয়েন্ট জানা যথেষ্ট:
- সিএসএস ফাইলে মিডিয়া প্রশ্নের ঘোষণা করার উপায়
- পুরানো দিনের ইন্টারনেট ব্রাউজারগুলিতে মিডিয়া প্রশ্নের কৌশলের এনডোমেন্টের সাথে কীভাবে আপডেট করবেন
মিডিয়া কোয়েরি ঘোষণা
পূর্ববর্তী অনুচ্ছেদগুলিতে মিডিয়া প্রশ্নগুলি চালানোর দুটি উপায় পর্যবেক্ষণ করা সম্ভব ছিল। প্রথমত একটি বাহ্যিক স্টাইল পৃষ্ঠায় এবং দ্বিতীয় উপায়ে সরাসরি স্টাইল পৃষ্ঠায় লিখুন।
কীভাবে একটি প্রতিক্রিয়াশীল ওয়েব ডিজাইন তৈরি করা যায় সে প্রসঙ্গে, এটি বোঝা উচিত যে একটি মিডিয়া ক্যোয়ারী হল একটি CSS ঘোষণা যা মোবাইলের পরিমাপ বা মানগুলির উপর ভিত্তি করে কখন অন্য স্টাইল ঘোষণা করা উচিত সে সম্পর্কে সচেতন হওয়ার জন্য একটি সূচক হিসাবে ব্যবহৃত হয়। অথবা অন্য ডিভাইস যেখানে ওয়েব প্রদর্শিত হবে।
উদাহরণ, একটি CSS ভগ্নাংশ ঘোষণা করার উপায়, যা একটি মিডিয়া ক্যোয়ারী দ্বারা সংজ্ঞায়িত একটি শর্তসাপেক্ষের ভিতরে রয়েছে, নিম্নলিখিত সিনট্যাক্স কনফিগারেশন রয়েছে:
@মিডিয়া স্ক্রিন এবং ([শর্ত]) {
/* এই স্ক্রিনের প্রস্থ বা কম সহ আমাদের নতুন নিয়ম */
}
একইভাবে, পর্দার প্রস্থের উপর নির্ভর করে, তিন ধরনের মিডিয়া ক্যোয়ারী স্টেটমেন্ট তৈরি করা যেতে পারে। এইভাবে আপনি প্রতিটি ক্ষেত্রে আপনার আবেদন সম্পর্কে নিশ্চিত হতে পারেন
-প্রথম ঘোষণাটি কেবলমাত্র সেই রেজোলিউশনে প্রয়োগ করা হবে যেগুলির প্রস্থ পিক্সেলের চেয়ে কম = X:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ:[WIDTH]px) {
/* এই স্ক্রিনের প্রস্থ বা কম সহ আমাদের নতুন নিয়ম */
}
-দ্বিতীয় ঘোষণাটি শুধুমাত্র সেই রেজোলিউশনে প্রয়োগ করা হবে যেগুলি পিক্সেলের প্রস্থের চেয়ে বেশি = X:
@মিডিয়া স্ক্রীন এবং (মিনিট-প্রস্থ:[WIDTH]px) {
/* এই স্ক্রিনের প্রস্থ বা তার বেশি সহ আমাদের নতুন নিয়ম */
}
-তৃতীয় ঘোষণাটি সেই রেজোলিউশনগুলিতে প্রয়োগ করা হবে যেগুলির মধ্যে X এবং Y-এর মধ্যে সংজ্ঞায়িত পিক্সেলগুলির মধ্যে একটি প্রস্থ রয়েছে:
@মিডিয়া স্ক্রীন এবং (মিনিমাম-প্রস্থ:[WIDTH X]px) এবং (সর্বোচ্চ-প্রস্থ:[WIDTH Y]px) {
/* এই স্ক্রিনের প্রস্থ বা তার বেশি সহ আমাদের নতুন নিয়ম */
}
তিনটির মধ্যে কোনটি?
সিদ্ধান্ত হবে বিকাশকারীর রুচির উপর ভিত্তি করে। আরও, যাইহোক, উপরে দেখানো প্রথম মিডিয়া ক্যোয়ারী স্টেটমেন্ট প্রয়োগ করা সাধারণ। শুধুমাত্র এটি ক্রমবর্ধমানভাবে প্রয়োগ করার সুপারিশ করা হয়। এমনভাবে যে প্রতিবার প্রস্থ ছোট করা হয়, নকশার উপাদানগুলো পরিবর্তন করা হয়।
ইন্টারনেট এক্সপ্লোরারের সাথে মিডিয়া কোয়েরিগুলিকে সামঞ্জস্যপূর্ণ করুন৷
ইন্টারনেট এক্সপ্লোরার ওয়েবে বিদ্যমান প্রথম ব্রাউজারগুলির মধ্যে একটি। অতএব, এটা খুবই সম্ভব যে এই ব্রাউজারটি নেটওয়ার্ক ব্যবহারকারীদের দ্বারা প্রায়শই ব্যবহৃত অনেক সিস্টেম, প্যারামিটার বা কৌশলগুলির সাথে সমর্থন করে না বা সামঞ্জস্যপূর্ণ। কিন্তু ওয়েব ডেভেলপমেন্টে প্রচুর কারিগরি কর্মী রয়েছে, যারা উদ্ভাবনের অনুসন্ধানে সম্পূর্ণভাবে জড়িত। যা এই পুরানো ব্রাউজারগুলিকে সক্ষম এবং সামঞ্জস্যপূর্ণ করতে বিভিন্ন লাইব্রেরি তৈরি করেছে।
ইন্টারনেট এক্সপ্লোরারের নয় নম্বর (9) থেকে কম সামঞ্জস্যপূর্ণ সংস্করণ তৈরি করতে। এটি শুধুমাত্র নিম্নলিখিত জাভাস্ক্রিপ্ট লাইব্রেরি প্রয়োগ করছে: css3-mediaqueries-js।
ওয়েবসাইটের মাথায় নিম্নলিখিত স্ক্রিপ্টটি স্থাপন করে, আপনি কোনও অসুবিধা ছাড়াই মিডিয়া প্রশ্নের সাথে কাজ করতে সক্ষম হবেন।
প্রাপ্ত ফলাফলটি সবচেয়ে নিখুঁত নাও হতে পারে, তবে এটি সাধারণত একটি ভাল ডিগ্রি সামঞ্জস্যের জন্য অনুমতি দেয়।
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট বানাবেন – মৌলিক ডিজাইন
একটি ওয়েবসাইট মানিয়ে নেওয়া এবং রূপান্তর করার বিভিন্ন উপায় থাকতে পারে, তবে একটি প্রতিক্রিয়াশীল ওয়েবসাইটের বর্তমানে তিনটি ভিত্তি বা নকশা ধারণার রূপ রয়েছে। পূর্বে এই ডিজাইনগুলিতে প্রয়োগ করার জন্য কিছু নতুন বিবরণ সহ বিকাশকারীদের পূর্বরূপ দেখানো হয়েছিল। এটি অনমনীয় বা স্থির হিসাবে চিহ্নিত ওয়েবসাইটগুলি বিকাশ করার অভ্যাস থেকে আসে। অনমনীয়তার বৈশিষ্ট্য পরিবর্তন করে প্রতিক্রিয়াশীল ডিজাইন করা ওয়েবসাইটগুলিতে যেতে।
আজ আপনি অবিরাম ইলেকট্রনিক ডিভাইসগুলি খুঁজে পেতে পারেন যা দিয়ে আপনি ওয়েব ব্রাউজ করতে পারেন। আর সময়ের সাথে সাথে এর পরিমাণ আরও বাড়বে। ওয়েবসাইট ডেভেলপারদের প্রয়োজন যে এই ওয়েবসাইটগুলি এই বিস্তৃত ডিভাইসগুলির সাথে সঠিকভাবে মানিয়ে নিতে সক্ষম হবে।
কাজ সহজ করার জন্য মৌলিক নকশা
প্রতিক্রিয়াশীল ডিজাইনের কাজকে সহজ করার একটি উপায় হল সেগুলিকে কীভাবে মোকাবেলা করতে হয় তা জানার জন্য তাদের তিনটি মৌলিক গ্রুপে ভাগ করা বা শ্রেণীবদ্ধ করা। এই তিনটি বড় যোগ্যতা অর্জনকারী গ্রুপ হল:
- বড় স্ক্রিন: যেটিতে ওয়েবসাইটটিতে পর্যাপ্ত জায়গা রয়েছে এবং এমনকি আরও বেশি কোনও অসুবিধা ছাড়াই সম্পূর্ণরূপে দেখা যাবে।
- পুরানো বা ছোট স্ক্রিন: যেখানে ওয়েব তার সম্পূর্ণ দৃশ্যায়নের জন্য পর্যাপ্ত প্রস্থ খুঁজে পায় না, অর্থাৎ এটি পর্দার ফ্রেমে ফিট করে না। এটি এমনকি একটি অস্বস্তিকর নিম্ন বার দেখায়, কোন ব্যবহার ছাড়াই যা আপনাকে আরও কম সামগ্রী দেখতে দেয়।
- মোবাইল ডিভাইসের স্ক্রিন: ওয়েব এই ডিভাইসগুলিতে এত ছোট জায়গা খুঁজে পায় যে শুধুমাত্র সাধারণ ডিজাইনের সাহায্যে এর বিষয়বস্তুর তথ্য পড়া সম্ভব।
সুতরাং আপনি যদি একটি ওয়েবসাইটের মূল নকশা এবং বিন্যাসটিকে একটি আপডেটেড একটিতে রূপান্তর করতে চান যা ব্যবহার করা যেতে পারে এবং কার্যকর। এই তিনটি বেস গ্রুপ সমাধান করার জন্য যা প্রয়োজন। সমাধান পেতে অসুবিধার মাত্রা সাধারণত মডেলটি কীভাবে তৈরি করা হয়েছে তার উপর নির্ভর করবে। কিন্তু, সাধারণভাবে, আজকের প্রযুক্তির সাথে, ওয়েবে কিছু পরিবর্তন করা যেতে পারে।
বড় স্ক্রিনের জন্য কীভাবে একটি প্রতিক্রিয়াশীল ওয়েব তৈরি করবেন - সমাধান
এই বেস পয়েন্টে এটি সাধারণত কোন বড় অসুবিধার প্রতিনিধিত্ব করে না। কারণ ওয়েব এই বড় স্ক্রীন ফরম্যাটে দেখার জন্য ডিজাইন করা হয়েছে। বর্তমান স্ট্যান্ডার্ড হল ওয়েবসাইটগুলি 960 পিক্সেলের স্ক্রিনের প্রস্থের একটি কেন্দ্রীয় ফ্রেমের উপর ভিত্তি করে তৈরি করা হয়। এমনভাবে যখন এটি অভিযোজিত জুম সহ মোবাইল ফোনে লোড করা হয়, তখন এটি বেশিরভাগের সাথে সঠিকভাবে ফিট করে। কিন্তু পুরোনো ওয়েবসাইটের ক্ষেত্রে, সেই পিক্সেল-প্রস্থের কেন্দ্রীয় ফ্রেমটি সম্ভবত 1024 পিক্সেল প্রস্থের স্ক্রিনের জন্য ডিজাইন করা হয়েছিল। যেকোনো ক্ষেত্রে, এই বেস গ্রুপের জন্য, নিম্নলিখিত সিনট্যাক্স দ্বারা নির্দেশিত কন্টেইনারগুলি ব্যবহার করা যুক্তিসঙ্গত:
# প্রধান { প্রস্থ: 960px; মার্জিন: 0 অটো; }
এই কনফিগারেশনটি একটি "প্রধান" ধারক সেট করতে সমর্থন করে যা এটিকে ওয়েব-কেন্দ্রিক হতে দেয়। এই ধারকটির সাথে, ওয়েবের বাহ্যিক চেহারাকে সমৃদ্ধ করতে বিভিন্ন ব্যাকগ্রাউন্ড যুক্ত করা যেতে পারে। যতটা সম্ভব একটি কালো-সাদা পৃষ্ঠা এড়াতে এর নকশাটি কিছুটা বিকাশ করা হচ্ছে।
সংক্ষেপে, বড় পর্দার এই স্তরে, ওয়েবকে রূপান্তর করার জন্য খুব বেশি কিছু করা হয় না। যদিও এটা সম্ভব যে এমন ওয়েব ব্যবহারকারীরা আছেন যারা টিভি থেকে এটি দেখতে চান একটি বড় স্ক্রীন এবং অল্প দূরত্বে।
এই ক্ষেত্রে মোবাইল বেস গ্রুপের মত বড় পরিবর্তন করা প্রয়োজন। কিন্তু যেহেতু নেভিগেট করার জন্য সাধারণত অনেকেই টিভি ব্যবহার করেন না, তাই বিকাশকারীরা সাধারণত এই অভিযোজনগুলিতে বেশি সময় ব্যয় করেন না। আপনি যদি এখনও এই ধরনের অভিযোজন নিয়ে কাজ করতে চান, তাহলে নীচে নির্দেশিত মোবাইল গ্রুপে প্রয়োগ করা নিয়মগুলির অনুরূপ প্রবিধান স্থাপন করার সুপারিশ করা হয়।
ছোট পর্দার জন্য কীভাবে একটি প্রতিক্রিয়াশীল ওয়েব তৈরি করবেন – সমাধান
এই বেসিক ডিজাইন গ্রুপ থেকে, ওয়েবে রূপান্তরিত হওয়ার জটিলতা শুরু হয়। একটি প্রদত্ত স্ক্রিনের প্রস্থে কাজ করার জন্য তৈরি করা একটি পৃষ্ঠা নিম্নলিখিত দৃশ্যকল্প। প্রকৃতপক্ষে, অনেক লোক সেই প্রস্থের সাথে সামঞ্জস্য করা কম্পিউটার থেকে এটি পরিদর্শন করে। কিন্তু বিবেচনা করার মতো একটি বড় শতাংশ লোক রয়েছে, যাদের রেজোলিউশনের ডিভাইসগুলি ওয়েব দেখার জন্য ডিজাইনের তুলনায় কম রয়েছে৷
এই শ্রেণীবিভাগে, ডিজাইনের চেয়ে কম স্ক্রীন রেজোলিউশন সহ ডিভাইসগুলিকে মোবাইল ডিভাইস থেকে আলাদা করতে হবে। ওয়েল, এই ক্ষেত্রে তৃতীয় নকশা ক্ষেত্রে বিশ্লেষণ করা হয়. অতএব, ছোট পর্দার ডিভাইসটি যেখানে শেষ হয় এবং মোবাইল ডিভাইসটি শুরু হয় সেই বিন্দুর একটি পরিষ্কার সংজ্ঞা থেকে শুরু করা প্রয়োজন।
একইভাবে ছোট স্ক্রিনের জন্য, মূল ওয়েবসাইটের রেজোলিউশনকে সেই ডিভাইসগুলির সাথে মানিয়ে নিতে কমাতে হবে। কেবলমাত্র এটি স্পষ্ট হতে হবে যে এই হ্রাস কতটা বাহিত হবে, অতিক্রম না করে। যাতে ছোট পর্দায় প্রচুর সংখ্যক উপাদান একত্রিত না হয়, ওয়েবের উপস্থিতি হ্রাস করে।
সীমা নির্ধারণের জন্য প্রয়োজনীয় তথ্য
মোবাইল ডিভাইস থেকে তথ্য নীচে ভাগ করা হয়. যখন এটি একটি ছোট পর্দা হওয়া বন্ধ করে, একটি মোবাইল ডিভাইসে পরিণত হবে তার সীমাবদ্ধতা প্রতিষ্ঠার ক্ষেত্রে যা অত্যন্ত গুরুত্বপূর্ণ হবে। এতে সিদ্ধান্ত নেওয়া সহজ হবে।
যথোপযুক্ত সৃষ্টিকর্তাযথোপযুক্ত সৃষ্টিকর্তা:
- মোবাইলগুলি উল্লম্বভাবে ব্যবহৃত হয়, যা সবচেয়ে বেশি ব্যবহৃত ফর্ম। এটি সাধারণত 320 পিক্সেল চওড়া রেজোলিউশন গ্রহণ করে।
- অনুভূমিক অবস্থানে, মোবাইল রেজোলিউশনটি ডিভাইসের স্ক্রিনের আসল আকারের সাথে সামঞ্জস্য করা হয়। এই রেজোলিউশনটি সাধারণত 400 থেকে 600 পিক্সেল প্রশস্ত হয়।
- অন্যদিকে, ট্যাবলেটগুলিতে, রেজোলিউশন ডিভাইসের উপর নির্ভর করবে। সাধারণভাবে, সর্বাধিক বিক্রিত মডেলগুলির পরিসংখ্যান বিবেচনায় নিয়ে, রেজোলিউশনটি প্রায় 600 পিক্সেল প্রশস্ত। এমনকি 1024 পিক্সেল চওড়া পৌঁছতে সক্ষম হচ্ছে।
স্ক্রিনের প্রস্থ সীমা
এই শ্রেণীবিভাগে প্রতিক্রিয়াশীল ওয়েব ডিজাইনে গৃহীত সবচেয়ে বড় মান প্রস্থের সীমা, উপরের তথ্য অনুসারে, 400 পিক্সেল প্রস্থ পর্যন্ত। এই প্রস্থ পরিমাপ থেকে, ওয়েবের ভিজ্যুয়ালাইজেশনের পরিবর্তনটি অবশ্যই ব্যাপকভাবে শুরু হবে, সেইসাথে এর মৌলিক অপারেশন কিছু পরিবর্তনের সম্মুখীন হবে।
আরও, যাইহোক, কিছু বিকাশকারী এই সীমাটি 600 পিক্সেলের প্রস্থে সেট করে। এই রেজোলিউশন থেকে তৈরি করা হচ্ছে, ছোট পর্দা এবং মোবাইল ডিভাইসের মধ্যে মধ্যবর্তী অভিযোজন।
নিম্ন সীমার দিকে, এটি 320 পিক্সেল পর্যন্ত ন্যূনতম স্ক্রীন প্রস্থ গ্রহণ করতে সেট করা হয়েছে। যাই হোক না কেন, এই প্রদত্ত সীমার চেয়ে বেশি একটি পরিসর স্থাপন করা ওয়েব ডেভেলপারের উপর নির্ভর করে। কিন্তু ছোট পর্দার সব ডিভাইস কভার করার চেষ্টা করা ঠিক নয়।
ছোট পর্দা সমাধান প্রধান নেভিগেশন শৈলী
অন্তত এই তিনটি প্রধান নেভিগেশন শৈলী ক্যাপচার করা একটি ছোট-স্ক্রীন অভিযোজিত সমাধানে যথেষ্ট হতে পারে। যেগুলো নিচে তালিকাভুক্ত করা হলো:
- উল্লম্বভাবে ব্যবহৃত মোবাইল ডিভাইস: এই ক্ষেত্রে, ডিভাইসের স্ক্রীন শুধুমাত্র 320 এবং 400 পিক্সেলের মধ্যে রেজোলিউশন রেঞ্জে প্রতিষ্ঠিত পড়ার এবং খুব সরলীকৃত নেভিগেশনের অনুমতি দেয়।
- অনুভূমিকভাবে ব্যবহৃত মোবাইল ডিভাইস এবং ট্যাবলেট: এই ক্ষেত্রে, একটি ঐতিহ্যগত অনুভূমিক প্রদর্শন ইতিমধ্যে অর্জন করা যেতে পারে. যাইহোক, এটি লক্ষ্য করা প্রয়োজন যে নেভিগেশনটি স্পর্শ দ্বারা তৈরি হয় এবং ক্লিক করে নয়। এই অনুযায়ী ক্রিয়াগুলি এড়ানো উচিত: onMouseOver 400, 600 বা 800 পিক্সেলে।
- ট্যাবলেটপ ডিভাইস: এই ক্ষেত্রে, স্বাভাবিক ওয়েব ডিজাইন 800 পিক্সেলের বেশি স্ক্রীনের প্রস্থে কোনো সমস্যা ছাড়াই কাজ করে।
উপরের সবকটি বলার পরে, একটি ছোট স্ক্রীন বলতে বোঝা যায় বিভিন্ন ধরনের পিসি, ল্যান্ডস্কেপ মোবাইল ডিভাইস এবং ট্যাবলেট। এই বৈচিত্র্য এই গ্রুপটিকে একটি প্রতিক্রিয়াশীল ডিজাইনে ওয়েবকে মানিয়ে নেওয়ার জন্য একটি নরম জটিলতার সাথে কভার করে। এই ক্ষেত্রে, কাজের সরলীকরণের জন্য এটি অত্যন্ত গুরুত্বপূর্ণ, ব্লক দ্বারা সঞ্চালিত বিন্যাস কাজ। একটি একক কর্মে তিন ধরনের ডিভাইস একত্রিত করার জন্য।
যদি এটি পরিষ্কারভাবে সংজ্ঞায়িত করা হয় যে একটি মোবাইল স্ক্রীন কত প্রস্থ থেকে বিবেচিত হয়। প্রদর্শিত হবে মধ্যবর্তী পর্দা বিন্যাস স্পষ্ট করা হয়. বর্তমান বিন্যাসের ব্লকগুলিকে রূপান্তরিত করার জন্য যাতে তারা স্ক্রীন অনুসারে আকার পরিবর্তন করে এবং কাজ করার পাশাপাশি সঠিকভাবে প্রদর্শিত হতে পারে।
বিশ্বব্যাপী প্রস্থ পাত্রে
ওয়েবসাইটের মধ্যে থাকা গ্লোবাল কন্টেইনারগুলি বিশ্বব্যাপী প্রস্থ নির্দেশ বা নির্দেশ করার কাজটি পূরণ করে। অর্থাৎ এই উপাদানগুলির সাহায্যে আপনি ওয়েবসাইটের একটি নির্দিষ্ট প্রস্থকে কেন্দ্র ও নির্দিষ্ট করতে পারেন। তারা একটি নির্দিষ্ট প্রস্থ থেকে সর্বোচ্চ বা ক্যাপ প্রস্থে পরিবর্তন করে কনফিগারেশনটিকে কিছুটা নমনীয়তা দেয়। ওয়েব ফ্রেমওয়ার্কের জন্য প্রাথমিক ঘোষণায় প্রতিষ্ঠিত হচ্ছে, থেকে পরিবর্তন হচ্ছে প্রস্থ a সর্বোচ্চ প্রস্থ. একইভাবে, ন্যূনতম প্রস্থ পূর্বে প্রতিষ্ঠিত রেঞ্জ অনুযায়ী ন্যূনতম প্রস্থ ঘোষণার সাথে প্রতিষ্ঠিত হয়। সুতরাং, সেই ডিভাইসগুলির প্রস্থ নিয়ন্ত্রণ করা সম্ভব হবে যা নিয়ন্ত্রণের মধ্যে ছিল না বলে ধারণা করা হয়েছিল। উপরে প্রদত্ত পর্দা প্রস্থ সীমার পরিসীমা গ্রহণ; ঘোষণার সিনট্যাক্স নিম্নরূপ হবে:
# প্রধান {সর্বোচ্চ প্রস্থ:960px; সর্বনিম্ন-প্রস্থ: 320px; মার্জিন:0 স্বয়ংক্রিয়;}
বড় পর্দার জন্য সমাধান একই। আরও, যাইহোক, যখন ওয়েব ধীরে ধীরে একই সাথে আকারে হ্রাস পায়, তখন কেন্দ্রীয় ফ্রেমটি প্রস্থে তা করবে।
ব্যবহারিক উদাহরণ
নীচে একটি প্রস্থ ফ্রেম রূপান্তরের জন্য সেটিংসের একটি ব্যবহারিক উদাহরণ রয়েছে৷ এই উদাহরণে 1080 পিক্সেল প্রস্থের একটি ওয়েবসাইট রয়েছে, যা হেডার, প্রধান বিষয়বস্তু এবং ফুটার উপাদানগুলিতে প্রয়োগ করা হয়। প্রথম জিনিসটি হল বিভিন্ন গ্লোবাল কন্টেইনার ব্লকের প্রস্থকে নির্দিষ্ট প্রস্থ হিসাবে নয়, সর্বাধিক পৃষ্ঠার প্রস্থ হিসাবে নির্দেশ করুন৷ বাক্যগুলির জন্য, তারা এই ধরণের ব্লকের সংখ্যার উপর নির্ভর করবে যা ব্যবহার করা হবে। তাহলে আসুন নিম্নলিখিত সিনট্যাক্সটি দেখি:
# শিরোনাম # শীর্ষ { অবস্থান: আপেক্ষিক; সর্বোচ্চ-প্রস্থ:1074px; সর্বনিম্ন-প্রস্থ: 320px; উচ্চতা: 115px; মার্জিন: 0 অটো; […]}
[...]
#header ul.menu {অবস্থান: আপেক্ষিক; সর্বোচ্চ-প্রস্থ:1008px; সর্বনিম্ন-প্রস্থ: 320px; উচ্চতা:95px; […]}
[...]
#aux-main{অবস্থান:আত্মীয়; সর্বোচ্চ-প্রস্থ:1008px; সর্বনিম্ন-প্রস্থ: 320px; মার্জিন: 0 অটো; […]}
[...]
#footer ul {সর্বোচ্চ প্রস্থ:768px; সর্বনিম্ন-প্রস্থ: 320px; মার্জিন:10px স্বয়ংক্রিয়;}
অভ্যন্তরীণ পাত্রে
এই মুহূর্ত থেকে, আমরা কীভাবে এটিকে রূপান্তর করে একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করা যায় সে সম্পর্কে আরও কিছু অনুসন্ধান করব। এটি প্রায় নিশ্চিত যে পৃষ্ঠাটি রূপান্তরিত করা হবে একটি নকশা বা বিন্যাস দ্বারা গঠিত, বিভিন্ন উপাদানে বিভক্ত, উদাহরণস্বরূপ, সেগুলি হতে পারে:
- একশো শতাংশ প্রস্থ হেডার
- একটি বিষয়বস্তু প্রস্থের একটি উল্লেখযোগ্য অংশ দখল করে
- পাশের একটি অংশে এক বা একাধিক পার্শ্বদণ্ড বা পার্শ্বীয় বার
- প্রস্থের একশো শতাংশ দখল, একটি ফুটার
সুতরাং আপনার কাছে বেশ কয়েকটি পাত্র থাকবে যার সম্ভবত একটি নির্দিষ্ট প্রস্থ রয়েছে যা পৃষ্ঠায় কলামগুলিকে সংজ্ঞায়িত করে। এই পাত্রগুলি বিভিন্ন কৌশল প্রয়োগের মাধ্যমে কলামে রূপান্তরিত হতে পারে, যেমন:
- সবচেয়ে বেশি পরিমাণে ভাসছে
- প্রদর্শন: কিছু ক্ষেত্রে ইনলাইন
- প্রদর্শন: তাদের অন্যদের মধ্যে বক্স
পরবর্তী পদক্ষেপটি নেওয়া হবে সেই উপাদানগুলিকে অ-সুনির্দিষ্ট বিবৃতিতে রূপান্তর করতে সক্ষম হওয়া। যাতে অভিভাবক কন্টেইনারটি নির্দেশিত মূল বিবৃতিটিকে সঠিকভাবে ক্যালিব্রেট না করে। অথবা কি একই, আপনাকে অবশ্যই সেই সমস্ত উপাদানগুলিতে পিক্সেল থেকে শতাংশের মান পরিবর্তন করতে হবে যা ওয়েবসাইটের প্রস্থের একটি স্থান উল্লেখ করে, যেমন নিম্নলিখিতগুলি:
- প্রস্থ
- সর্বোচ্চ-প্রস্থ
- মার্জিন এবং
- প্যাডিংস
লেআউট কাজ পূর্বে সম্পন্ন, এই পদক্ষেপ সত্যিই সহজ হয়ে ওঠে. যেহেতু এটি শুধুমাত্র একটি বিভাগ তৈরি করছে, শতাংশের মানগুলিতে ধারক উপাদানের পিক্সেলের পরিমাপের সাথে কী মিল রয়েছে তা নির্ধারণ করতে সক্ষম হবেন। সুতরাং নিম্নলিখিত গাণিতিক সমীকরণ প্রয়োগ করে শতাংশ গণনা করা হবে:
[অভ্যন্তরীণ উপাদানের প্রস্থের পিএক্স] / [প্যারেন্ট উপাদানের প্রস্থের পিএক্স] * 100
ওয়েব ডেভেলপারদের শতকরা পরিমাপের সাথে ওয়েব মডেলে কাজ করতে অভ্যস্ত হওয়ার জন্য এটি একটি ভাল পদ্ধতি, কারণ এই পদক্ষেপটি ইতিমধ্যেই সমাধান করা হবে।
শতাংশের গণনা
সঞ্চালনের পরবর্তী ধাপ হল শতাংশের গণনা। এই অংশে কলামের পরিপ্রেক্ষিতে বিরক্তিকর কিছু উপস্থাপন করা যেতে পারে। কারণ পূর্ববর্তী কলামটি ফ্লোট উপাদান দিয়ে নির্মিত হয়েছিল এবং আপনি যখন ফ্রেমটি সঙ্কুচিত করেন, তখন সাইডবার বিষয়বস্তুর নীচে চলে যায়। যাইহোক, পূর্বোক্ত সমীকরণ প্রয়োগ করা হয়। এবং এইভাবে গ্লোবাল কন্টেইনার DIV-এর মধ্যে প্রতিটি উপাদানের শতাংশ গণনা করা হয়। যা উপরে উল্লিখিত হিসাবে 1080 পিক্সেল প্রস্থ ছিল। এই পরিমাপগুলিকে শতাংশের মানগুলিতে রূপান্তর করে, তারপরে নিম্নলিখিত সিনট্যাক্সটি পাওয়া যায়:
# প্রধান # বিষয়বস্তু { float:left; প্রস্থ:63.9880952%; মার্জিন:30px 0 0 1.98412698%; }
[...]
#প্রধান #সাইডবার { float:left; মার্জিন:20px 0 0 3.47222222%; প্রস্থ:28.7698413%; }
দেখা যায়, প্রস্থ এবং অনুভূমিক মার্জিন উভয়ই রূপান্তরিত হয়েছে। এইভাবে ওয়েবসাইটটি একটি বর্গাকার চেহারা বজায় রাখবে। লক্ষ করার মতো আরেকটি গুরুত্বপূর্ণ বিষয় হল শতাংশে নির্দেশিত দশমিকের সংখ্যা। যার উদ্দেশ্য হল গণনাটি পিক্সেলের মূল মানের থেকে যতটা সম্ভব নির্ভুল।
আলগা অভ্যন্তর উপাদান জন্য সমাধান যে আকার বৃদ্ধি
ওয়েব পৃষ্ঠাকে রূপান্তরিত করার প্রক্রিয়ায়, মডেলটিতে কিছু আলগা উপাদান খুঁজে পাওয়া সম্ভব যেগুলি, তাদের টাইপোলজির কারণে, তাদের সর্বাধিক বৈশ্বিক ধারক, সর্বাধিক-প্রস্থের উপরে বৃদ্ধি পেতে পারে। এই উপাদানগুলি ব্রাউজারের আকারের সাথে খেলার মাধ্যমে সনাক্ত করা যেতে পারে, যেহেতু সেগুলি সনাক্ত করা হয় সেগুলি সংশোধন করা হয়৷ এই উপাদানগুলিকে সংশোধন বা এড়ানোর আরেকটি দ্রুত উপায় হল পাত্রগুলি নির্বাচন করা এবং অর্ডার দেওয়া যাতে কোনও অভ্যন্তরীণ উপাদান কন্টেইনারের আকারের উপরে না বৃদ্ধি পায়।
যে উদাহরণটি বিকশিত হচ্ছে তাতে, মূল বিষয়বস্তু এবং সাইডবারের মধ্যে সংশোধনের এই শেষ রূপটি প্রয়োগ করা হয়েছে। সুতরাং, উইজেট থেকে উদ্ভূত কিছু সমস্যা নিজেরাই সমাধান করা যেতে পারে। এই অনুসারে, আলগা অভ্যন্তরীণ উপাদানগুলি সমাধান করার জন্য কনফিগারেশনটি নিম্নরূপ হবে:
# প্রধান # বিষয়বস্তু { float:left; প্রস্থ:63.9880952%; মার্জিন:30px 0 0 1.98412698%; }
#প্রধান #কন্টেন্ট * {সর্বোচ্চ-প্রস্থ:100%}
[...]
#প্রধান #সাইডবার { float:left; মার্জিন:20px 0 0 3.47222222%; প্রস্থ:28.7698413%; }
#প্রধান #সাইডবার * {সর্বোচ্চ-প্রস্থ:100%}
পরম অবস্থানে উপাদান
রূপান্তর করার জন্য ওয়েব পৃষ্ঠায় অবস্থান করা সমস্ত উপাদানগুলির জন্য। একই পূর্ববর্তী প্রক্রিয়া তাদের প্রস্থের সাথে প্রয়োগ করতে হবে, তাদের প্রস্থের পরিবর্তনের জন্য অ্যাবসিসা অক্ষের শতাংশে মানগুলির সাথে মানিয়ে নিতে হবে। অনুমান করা হচ্ছে যে উদাহরণটি তৈরি করা হচ্ছে, হেডারে কিছু উপাদান রয়েছে। তাদের অবস্থানগুলি অবশ্যই এই উপাদানগুলির সাথে খাপ খাইয়ে নিতে হবে, যাতে ওয়েবের মাত্রা হ্রাস করার সময় তারা বাতাসে ভাসতে না পারে। এই জন্য, কনফিগারেশন নিম্নরূপ হবে:
[...]
#header #top p.breadcrumb {অবস্থান: পরম; শীর্ষ:90px; বাম:3.72439479%; সাদা রং;}
[...]
# শিরোনাম # শীর্ষ p.like { অবস্থান: পরম; শীর্ষ:10px; বাকি:54.0037244%; }
[...]
#header #top div.vcard{position: absolute; শীর্ষ:11px; ডানদিকে: 5.49348231%; প্রস্থ:27.9329609%;}
অভ্যন্তরীণ উপাদানগুলিতে মিডিয়া প্রশ্নগুলি প্রয়োগ করা
পৃষ্ঠার প্রস্থকে অভিযোজিত করার সময়, এমন উপাদান রয়েছে যেগুলি তাদের বিষয়বস্তুর কারণে, পুনরায় ডিজাইনে স্থান খুঁজে পায় না। এই অভিযোজন খারাপ চেহারা করে, উপায় পেতে পারেন. এই বিশ্রী পরিস্থিতি এড়ানোর জন্য, সাধারণ মিডিয়া প্রশ্নগুলি ব্যবহার করা হয় যা কিছু নির্দিষ্ট মাত্রা ঘটলে CSS-এর কঠোর পরিবর্তনের অনুমতি দেয়।
মিডিয়া ক্যোয়ারী একটি অত্যন্ত শক্তিশালী হাতিয়ার যার সাহায্যে অনেক শিল্পকর্ম তৈরি করা যায়। এই সময় তারা স্ক্রিনের প্রস্থ সম্পর্কিত কিছু শর্ত নির্ধারণের জন্য প্রয়োগ করা হবে এবং যেখান থেকে CSS পরিবর্তন হবে। এর জন্য আমরা নিম্নলিখিত সিনট্যাক্সটি মাথায় আনব:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ:[WIDTH]px) {
/* এই স্ক্রিনের প্রস্থ বা কম সহ আমাদের নতুন নিয়ম */
}
এই মিডিয়া ক্যোয়ারী বিবৃতিটি বিশেষভাবে লেআউটটিকে বিভিন্ন রেজোলিউশনে মানিয়ে নিতে চায়। সুতরাং এটি নির্দিষ্ট গৌণ উপাদানগুলিকে আড়াল করার জন্য যে কোনও কিছুর চেয়ে বেশি ব্যবহার করা যেতে পারে, যা, নির্দিষ্ট স্ক্রিনের প্রস্থ দেওয়া, ব্যবহারকারীকে সহায়তা করার চেয়ে বেশি বিরক্ত করতে পারে। ছোট ছোট কাপলিং তৈরি করার জন্য পরিবেশন করা ছাড়াও, যাতে কিছু উপাদান বিভিন্ন পরিস্থিতিতে পুনরায় ডিজাইনে ফিট করতে পারে।
যা বলা হয়েছে তার উদাহরণ দেওয়ার জন্য, 800 এবং 600 পিক্সেলের নিচে রেজোলিউশনের কিছু উপাদান লুকানো হবে। যে একটি ক্ষেত্রে তারা মানিয়ে নেওয়া ওয়েবসাইটের মূল পৃষ্ঠার বিষয়বস্তু সঠিক ভিউ বাধা. নিম্নলিখিত সিনট্যাক্স অনুযায়ী:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 800px) {
#হেডার #টপ পি.লাইক,
#হেডার #টপ পি.ব্রেডক্রাম্ব,
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin,
#header #top div.vcard p.delicious,
#header #top div.vcard p.google,
.vcard h2{ display:none;}
}
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 600px) {
#sidebar .twitter {display:none;}
}
দেখা যায়, এগুলি 800 পিক্সেলের কম রেজোলিউশনে লুকানো হচ্ছে:
-পছন্দগুলো
- ব্রেডক্রাম্ব
-সামাজিক বোতাম, অন্যদের মধ্যে
600 পিক্সেল থেকে শেষ টুইটগুলি সাইডবার থেকে সরানো হচ্ছে৷
মিডিয়া প্রশ্নগুলি আপনাকে কিছু শৈলী সংশোধন করার অনুমতি দেয়
আপনি ইতিমধ্যে দেখতে পাচ্ছেন, মিডিয়া প্রশ্নগুলি আপনাকে কিছু অভ্যন্তরীণ উপাদান লুকানোর অনুমতি দেয়। তবে তারা আপনাকে কিছু শৈলীতে পরিবর্তন করার অনুমতি দেয়। এই বৈশিষ্ট্যটি ব্যবহার করা যেতে পারে যদি একটি উপাদান, প্রস্থের পরিপ্রেক্ষিতে অভিযোজিত না হওয়া ছাড়াও, চাওয়া হয় না বা অদৃশ্য বা লুকিয়ে রাখতে চায় না। এই পরিস্থিতি ওয়েবে দেখা দিলে আপনি রূপান্তর করতে চান। তারপর, মিডিয়া ক্যোয়ারী ব্যবহারের মাধ্যমে, এটির স্টাইলকে সূক্ষ্মভাবে পরিবর্তন করার চেষ্টা করা হবে, যাতে এটি মানিয়ে নেয়।
ধরে নিচ্ছি যে ওয়েবে কাজ করা হচ্ছে, সামাজিক বোতামগুলি এই ধরণের সমস্যা সৃষ্টি করছে। এবং পৃষ্ঠাটি 960 পিক্সেল চওড়ার নীচে নেমে গেলে এটি আইকনগুলি সরিয়ে এবং ফন্টের আকার হ্রাস করে সূক্ষ্মভাবে এর বিন্যাস পরিবর্তন করার সিদ্ধান্ত নেয়। তারপর কনফিগারেশন নিম্নলিখিত হবে:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ:960px) {
#header #top div.vcard p {font-size:9px;}
#header #top div.vcard p.twitter to,
#header #top div.vcard p.linkedin a ,
#header #top div.vcard p.delicious a,
#header #top div.vcard p.google a {background:none; প্যাডিং: 0; প্রস্থ: 50%; float:left;}
}
মেনু দিয়ে কি করতে হবে
মেনু সম্পর্কে কি, কিভাবে ছোট পর্দায় একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করার প্রক্রিয়ার মধ্যে? এই প্রশ্নের উত্তর হল যে এটি সমাধান করা কিছুটা জটিল সমস্যা। কারণ এটি উপাদানগুলির একটি সেট যা সাধারণত কিছুটা দীর্ঘ হয়, এবং মেনু নিজেই, এটি ওয়েবের মূল বিষয়বস্তু নয়। অতএব, এটি অনুমতি দেওয়া যাবে না যে যখন পৃষ্ঠাটি ছোট পর্দায় খোলা হয়, তখন মেনুটি অনেক জায়গা দখল করে।
স্পর্শ ডিভাইসে, এটি ব্যবহারকারীর জন্য বিরক্তিকর হতে পারে, ছোট লিঙ্কগুলির একটি তালিকা উপস্থিত হয়, তাই লিঙ্কগুলি সঙ্কুচিত করা সবচেয়ে কার্যকর সমাধান হবে না। একটি বিকল্প যা অনুকূল হতে পারে তা হল একটি নির্বাচিত উপাদান দিয়ে মেনু প্রতিস্থাপন করা। যা একটি নিয়ন্ত্রণের প্রতিনিধিত্ব করে যা বিকল্পগুলির একটি মেনু দেখায়, যেখানে ব্যবহারকারী আরামে নির্বাচন করতে পারে। নির্বাচিত উপাদানটি লম্বা মেনু তালিকাকে একটি ছোট ব্লকে কমিয়ে দেয়, তাই এর ব্যবহার ট্যাবলেট এবং মোবাইলের মতো ডিভাইসের জন্য আদর্শ।
নতুন প্রতিক্রিয়াশীল ডিজাইনে এই প্রতিস্থাপন করার সময় tinynav jquery প্লাগইন ব্যবহার করার পরামর্শ দেওয়া হয়। যা সহজ এবং অত্যন্ত সামঞ্জস্যপূর্ণ, এই প্লাগইনটি মেনুতে থাকা সমস্ত UL আইটেমকে বোঝায়। এবং এর ফলে তালিকার শুরুতে নির্দেশিত বৈশিষ্ট্য সহ একটি নির্বাচিত উপাদান যোগ করা হয়। পরবর্তীকালে, একটি অনুকূল সমাধান অর্জিত না হওয়া পর্যন্ত, মিডিয়া প্রশ্নগুলির সাথে UL বা নির্বাচনকে লুকিয়ে রাখা যে পদক্ষেপটি বাকি রয়েছে।
নির্বাচন উপাদান সঙ্গে পদ্ধতি
একটি নির্বাচিত উপাদান দিয়ে মেনু প্রতিস্থাপনের পদ্ধতিটি উপরে উল্লিখিত প্লাগইনের মাধ্যমে করা হবে। যা লিংক লিস্টের হেডারে রাখতে হবে। সুতরাং, যখন পৃষ্ঠাটি 800 পিক্সেল চওড়ার কম রেজোলিউশনে যেতে শুরু করবে, তখন লিঙ্কগুলি নির্বাচন দ্বারা প্রতিস্থাপিত হবে। তারপরে নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করতে হবে:
- স্ক্রিপ্ট যোগ করুন এবং jquery প্লাগইনে প্রস্তুত কলটি নতুন উপাদানটিতে সেট করুন। নিম্নলিখিত অনুযায়ী:
$(."মেনু উল").tinyNav();
এই কনফিগারেশনটি শীর্ষ মেনুতে প্রতিটি লিঙ্ক তালিকায় নির্বাচন যোগ করে
- বেসিক সিএসএসকে বলুন নতুন নির্বাচনী উপাদান লুকানোর জন্য, নিম্নলিখিত ঘোষণার সাথে:
.tinynav { প্রদর্শন: কোনটি }
- একটি উপযুক্ত মিডিয়া ক্যোয়ারী ব্যবহার করুন এবং এর মধ্যে নির্বাচনের বিন্যাস এবং তালিকাটি নিজেই লুকানোর ক্রম যুক্ত করুন। নিম্নরূপ কনফিগারেশন ছেড়ে যাচ্ছে:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 800px) {
#header ul.menu li ul {display:none}
.tinynav { প্রদর্শন: ব্লক; অবস্থান: পরম; নীচে: 5px; প্রস্থ: 79%; মার্জিন-বাম:15%}
}
এইভাবে, ওয়েব মেনু একটি নির্বাচিত উপাদান দ্বারা প্রতিস্থাপিত হবে, স্ক্রীন রেজোলিউশনকে 800 পিক্সেলের কম চওড়া করে।
কিভাবে একটি রেসপন্সিভ ওয়েব তৈরি করতে হয় তার ব্যাকগ্রাউন্ড ব্লক করুন
ওয়েবের অভিযোজনে এই মুহুর্তে, অসুবিধার মাত্রা নির্ভর করবে মডেলটি কেমন তার উপর। ওয়েব ডিজাইন করার সময়, CSS পয়েন্টে, ব্লকগুলি সাধারণত ইমেজ ব্যাকগ্রাউন্ড দিয়ে সজ্জিত করা হয়। প্রসাধন প্রক্রিয়ায় প্রচুর সংখ্যক কৌশল ব্যবহার করা হয়। আকার পরিবর্তন করার সময় এর মধ্যে কিছু অন্যদের তুলনায় সহজ।
কিছু সমাধান
এই কারণেই, ব্যবহৃত কৌশলের উপর নির্ভর করে, পদ্ধতিটি কম বা বেশি সহজ হতে পারে। এমনও হতে পারে যে ওয়েবে যে ব্যাকগ্রাউন্ড আছে, প্রান্তগুলি লুকিয়ে থাকলে তার উদ্দেশ্য হারায়৷ এই ক্ষেত্রে একটি বড় সমস্যা পরাস্ত ফলাফল. এখানে এর কিছু সমাধান রয়েছে:
- CSS3 শৈলীতে যতটা সম্ভব ব্যাকগ্রাউন্ড পরিবর্তন করুন। যা পরিবর্তনের সাথে খুব ভালোভাবে মানিয়ে নেবে। বৃত্তাকার প্রান্ত, ছায়া বা গ্রেডিয়েন্ট ব্যবহার করার সময় বেশিরভাগ ব্রাউজারের সাথে তাদের সামঞ্জস্যপূর্ণ করা এখন সহজ। তিনটি সিএসএস পরিস্থিতিতে ব্লক স্থাপনের জন্য ডিজাইনের জন্য প্রচুর সংখ্যক ছবির প্রয়োজন হওয়া কঠিন।
- মিডিয়া ক্যোয়ারী এবং অভিযোজিত প্রস্থ কীভাবে তাদের কাজ করে তার জন্য নিকটতম CSS3 দিয়ে যতটা সম্ভব প্রতিস্থাপন করতে, ব্যাকগ্রাউন্ড ইমেজ ছাড়াই করুন
- যদি এটি তহবিলের ক্ষেত্রে হয় যা ইতিমধ্যেই একটি ব্লকের পরিস্থিতি আয়ত্ত করে। ব্লকে এই স্টাইলটি নকল করার পরামর্শ দেওয়া হয় এবং নিশ্চিত করুন যে আসল পটভূমিটি একটু আলাদা করা হয়েছে
তিন ধরনের ব্যাকগ্রাউন্ড ইমেজের অন্যান্য সমাধান যা বিরক্তিকর হতে পারে:
- পৃষ্ঠার ফ্রেমে সীমানা সহ চিত্রগুলি, যা প্রদর্শিত অংশের বাইরেও অবশিষ্ট থাকে, চূড়ান্ত ফলাফলটি বিরক্ত করে না, তাই এটি রেখে দেওয়া হয়
- নির্দিষ্ট শিরোনামের আইকনগুলি, যা বিরক্তিকর হতে শুরু করলে মিডিয়া কোয়েরিগুলির সাথে লুকিয়ে রেখে সংশোধন করা হয়
- হেডারের গ্লোবাল ব্যাকগ্রাউন্ডে সাদা বাক্সটি অন্তর্ভুক্ত থাকে যেখানে ওয়েবের লেখকের নাম যায়। এর জন্য, লেখক বাক্সে একই শৈলী পুনরাবৃত্তি করা যেতে পারে যাতে পৃষ্ঠার মাত্রা হ্রাস করে একটি পটভূমি অন্যটির সাথে লুকানো থাকে।
মোবাইল স্ক্রিনের জন্য কীভাবে একটি প্রতিক্রিয়াশীল ওয়েব তৈরি করবেন - সমাধান
ছোট পর্দায় একটি প্রতিক্রিয়াশীল ওয়েবসাইট কীভাবে তৈরি করা যায় তার বেশ কয়েকটি দিক ইতিমধ্যেই দেখা হয়েছে। এই জ্ঞানের সাহায্যে, আপনি 1080 পিক্সেলের একটি নির্দিষ্ট প্রস্থের একটি কঠোর ওয়েব ডিজাইন থেকে এমন একটি ডিজাইনে যেতে পারেন যা অনেকগুলি ডিভাইস থেকে ছোট পর্দার সাথে বেশ মানিয়ে নেওয়া যায়৷ কিন্তু মোবাইল স্ক্রিনের জন্য প্রতিক্রিয়াশীল নকশা সমাধান অনুপস্থিত।
মোবাইলের জন্য ডিজাইনে ছোট পর্দায় যা দেখা গেছে তার প্রয়োগের সাথে, পরিবর্তনগুলি এটিকে গ্রহণযোগ্য দেখায়। আরও নিখুঁত করা দরকার, যেহেতু হেডারে সংমিশ্রিত উপাদান সহ দুই-কলামের বিন্যাস মোবাইলের জন্য খুব অব্যবহার্য
অতএব, মোবাইল ডিভাইসে সঠিক প্রদর্শন অর্জনের জন্য প্রক্রিয়াটি শুরু করা উপযুক্ত। এটি লক্ষ করা গুরুত্বপূর্ণ যে মোবাইলে নেভিগেশন ব্যবহার একটি সাধারণ ওয়েবসাইটের মতো নয়। আপনি তখন সাধারণ স্ক্রীন প্রস্থের অভিযোজনযোগ্যতা পরিবর্তন বা উপাদান লুকানোর চেয়ে আরও বেশি যেতে চাইতে পারেন।
এই ক্ষেত্রে ভিউপোর্ট ট্যাগ
ভিউপোর্ট উপাদানটি মোবাইলে ওয়েবকে মানিয়ে নেওয়ার জন্য একটি ভাল হাতিয়ার। প্রথমত, কারণ ভিউপোর্ট মোবাইলকে নির্দেশ করে যেভাবে আপনি এটির জুম কাজ করতে চান, যখন ডিভাইসটি ওয়েবসাইটটি প্রদর্শন করে। এটি বলেছিল, মূলত দুটি বিকল্প উপস্থাপন করা যেতে পারে, নীচে নির্দেশিত:
1 বিকল্প: মোবাইল রেজোলিউশনের সাথে পর্যাপ্তভাবে মিলিত প্রতিক্রিয়াশীল ডিজাইন সহ ওয়েবসাইটগুলির জন্য, নিম্নলিখিতগুলি উপলব্ধ:
এই বিকল্পটি সবচেয়ে আদর্শ, তবে সবচেয়ে শ্রমসাধ্যও। কারণ আপনি যখন 500 বা 400 পিক্সেলের নিচে কলামের প্রস্থ হ্রাস করেন, তখন প্রস্থ সম্পূর্ণরূপে নিয়ন্ত্রণের অযোগ্য হয়ে যায়। তাই ওয়েবের দৃশ্যায়নে আমূল পরিবর্তন আনতে হবে।
2 বিকল্প: যদি এটি এমন ওয়েবসাইটগুলির ক্ষেত্রে হয় যেগুলি এখনও মোবাইলের রেজোলিউশনের সাথে পুরোপুরি অভিযোজিত হয়নি, আমাদের নিম্নলিখিতগুলি রয়েছে:
এই অন্য বিকল্পটি আরও দ্রুত হতে পারে। কারণ এটি শুধুমাত্র ডিজাইনে নির্দেশিত থাকে যে মোবাইলটি পছন্দসই রেজুলেশনে প্রদর্শন করা যেতে পারে। অন্য কথায়, ওয়েবটি সাধারণ পৃষ্ঠা হিসাবে চলতে থাকবে, শুধুমাত্র আরও সংক্ষিপ্ত বা অভিযোজিত সংস্করণে।
সম্ভাব্য পরিণতি
আপনি যদি দ্বিতীয় বিকল্পটি বেছে নেন, ওয়েবসাইটটিকে অভিযোজিত বা প্রতিক্রিয়াশীলভাবে ডিজাইন করতে দুটি সমস্যা দেখা দিতে পারে।
-প্রেমারা: এই ক্ষেত্রে ভিউপোর্ট সমস্ত মোবাইল ব্রাউজারে বিশ্বব্যাপী কাজ করবে। উদাহরণ স্বরূপ, যে ক্ষেত্রে 500 পিক্সেল চওড়া একটি ভিউপোর্ট ট্যাগ নির্দেশিত হয়েছে, এর ফলে প্রায় 800 পিক্সেল প্রস্থের আইপ্যাড ডিভাইসগুলি শুধুমাত্র 500 পিক্সেল চওড়া একটি পৃষ্ঠা প্রদর্শন করবে। উপলব্ধ স্থানের একশ শতাংশ সুবিধা নিতে ব্যর্থ।
-দ্বিতীয়: 500 পিক্সেল প্রশস্ত একটি ভিউপোর্ট নির্দেশ করার ক্ষেত্রে অবিরত। এই ক্ষেত্রে, 320 পিক্সেল চওড়া রেজোলিউশন, ওয়েবের বিষয়বস্তু যেটিতে কাজ করা হচ্ছে খুব কম মোডে প্রদর্শিত হবে। অতএব, কিছু সমন্বয় করা না হলে, এটি অকার্যকর হবে। অন্যদিকে, যদি মেনু বা উত্সগুলিকে মানিয়ে নেওয়ার জন্য নির্দিষ্ট কিছু সমন্বয় করা হয়, তাহলে একটি ছোট স্ক্রিনের ক্ষেত্রে, ট্যাবলেটে প্রদর্শিত হওয়ার মতোই ওয়েব সংস্করণটি পরিবর্তন করা হবে৷ উপসংহারে, একটি ভিউপোর্ট ট্যাগ সহ একটি নির্দিষ্ট প্রস্থ নির্দেশ করার সমাধানটি দ্রুততম হতে পারে, তবে এটি আর কার্যকর নয়।
ভিউপোর্ট ট্যাগের বিকল্প 2 বেছে নেওয়ার ফলাফলগুলি দেখে, বিকল্প 1 কে সর্বাধিক প্রস্তাবিত করে৷ এইভাবে, পৃষ্ঠার হেডে বিকল্প 1 হিসাবে উপরে নির্দেশিত ভিউপোর্ট ব্যবহার করার সময়, মোবাইল নিজেই রেজোলিউশন দেখাতে সক্ষম হয়।
এই ভিজ্যুয়ালাইজেশন সিদ্ধান্তের সাথে, এটি পরে মোবাইল সংস্করণের জন্য মিডিয়া ক্যোয়ারীতে কাজ করতে হবে। এর জন্য একশো শতাংশ প্রস্থ সহ কলাম থেকে ব্লকে সরানো প্রয়োজন। এছাড়াও মুছুন, নির্দিষ্ট উপাদানগুলি সংকুচিত করুন, ফন্টগুলি সামঞ্জস্য করুন যাতে এটি 320 পিক্সেল চওড়ায় পড়ার জন্য বন্ধুত্বপূর্ণ হয়৷
কলাম অপসারণ
উপরে উল্লিখিত হিসাবে, মোবাইল প্রতিক্রিয়াশীল অভিযোজনের জন্য, শিরোনামের উপাদানগুলির ক্লাম্পিং এড়াতে দুটি কলামের উপস্থিতিতে নকশাটি নিখুঁত করা প্রয়োজন। এই প্রক্রিয়াটির জন্য, একটি কলাম অন্যটির উপর সুপারইম্পোজড স্থাপন করে বাদ দেওয়া হবে, তবে দুটি পরিস্থিতি ঘটতে পারে:
-যে কলামগুলি ইতিমধ্যেই এইচটিএমএলে অর্ডার করা হয়েছে৷: এমনটি হলে, মোবাইলের জন্য ইতিমধ্যেই কাঙ্ক্ষিত উপায়ে সেগুলো উপস্থাপন করা হচ্ছে। এটি শুধুমাত্র ফ্লোটগুলিকে অদৃশ্য করতে বা প্রদর্শন:ইনলাইন-ব্লক বা প্রদর্শন:বক্স পরিবর্তন করতে, এটিকে একটি সাধারণ প্রদর্শন:ব্লক দিয়ে প্রতিস্থাপন করতে হবে। নিম্নলিখিত সিনট্যাক্স প্রয়োগ করে:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 400px) {
# সামগ্রী {প্রদর্শন: ব্লক; float: none; }
}
-কলাম অর্ডার না হলে: এই পরিস্থিতিতে, আপনাকে অবশ্যই নিখুঁত অবস্থানের সাথে কাজ করতে হবে যাতে নীচের ব্লকগুলি পৃষ্ঠার শীর্ষে থাকে। পাশাপাশি উপরের ব্লকগুলিকে নীচের ব্লকে সরানোর জন্য মার্জিন ব্যবহার করুন, যাতে তারা ওভারল্যাপ না হয়। উদাহরণ, নিম্নলিখিত বিতরণ অনুমান:
এই স্ট্রাকচারে, মোবাইলে সাইডবার উপাদানগুলি বিষয়বস্তুর পূর্বে অবস্থান করা উচিত। তাই CSS এই মত দেখায়:
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 400px) {
# প্রধান {পদ: আপেক্ষিক; প্রস্থ: 100%; }
#সামগ্রী{মার্জিন-টপ:80px; প্রস্থ: 100%; float:কোনও নয়;}
#সাইডবার{উচ্চতা:80px; অবস্থান: পরম; শীর্ষ:0; প্রস্থ: 100%; float: none; }
}
দ্বিতীয় দৃশ্যকল্পটি কল্পনা করতে, যেখানে মোবাইল সংস্করণে পরম অবস্থানগুলি ব্যবহার করতে হবে, নিম্নলিখিত কাঠামোর উদাহরণটি উপস্থাপন করা হয়েছে
@মিডিয়া স্ক্রিন এবং (সর্বোচ্চ-প্রস্থ: 450px) {
#প্রধান #সাইডবার {প্রদর্শন: ব্লক; float:কিছুই নয়!গুরুত্বপূর্ণ; প্রস্থ: 100%; অবস্থান: পরম; শীর্ষ:-80px; মার্জিন:0 !গুরুত্বপূর্ণ; বর্ডার-নিচ: 1px কঠিন #aaa; প্যাডিং: 0 0 20px 0;}
#প্রধান #সামগ্রী { ভাসমান: কোনোটিই নয়; প্রস্থ: স্বয়ংক্রিয়; মার্জিন:100px 0 0 0; }
}
এই ক্ষেত্রে মোবাইল সংস্করণে 450 পিক্সেল চওড়াতেও একটি পরিবর্তন রয়েছে।
ফন্ট সামঞ্জস্য করা
মোবাইল সংস্করণে প্রতিক্রিয়াশীল অভিযোজনে আরেকটি দিক যা অবশ্যই সম্বোধন করা উচিত তা হল ফন্টগুলির সমন্বয়। কারণ, যখন ওয়েব ডিজাইন করা হয়েছিল, তখন বড় মনিটরের কথা মাথায় রেখে তৈরি করা হয়েছিল। ছোট উল্লম্ব স্ক্রীন আছে এমন মোবাইল সংস্করণে যাওয়ার সময়, ওয়েবসাইটগুলি প্রায়ই পড়তে বা দেখতে আরামদায়ক হয় না। ওয়েবের শিরোনামগুলি অনেক জায়গা নেয়, বিষয়বস্তুর পাঠ্য, ফন্টের আকারের কারণে, এটি পড়তে অসুবিধা হয়। এই অনুসারে, মোবাইল স্ক্রিনে প্রদর্শনের জন্য একটি কার্যকর কনফিগারেশনে আনতে, সমস্ত উত্স পর্যালোচনা করা প্রয়োজন।
নীচে এই দিক সম্পর্কিত সামঞ্জস্য রয়েছে, যেখানে মেনু ফন্টগুলি সংশোধন করা হয়েছিল, শিরোনামগুলির ফন্টের আকার হ্রাস করা হয়েছিল এবং বিষয়বস্তুগুলি বৃদ্ধি করা হয়েছিল৷ নিম্নলিখিত কনফিগারেশন লক্ষ্য করুন:
# হেডার ul.menu li,
#header ul.menu li.analytics,
#header ul.menu li.development {পটভূমি:কিছুই নয়;}
#header ul.menu li h4 {margin:30px 0 0 0px; ফন্ট-সাইজ:12px; টেক্সট-ইন্ডেন্ট: 10%;}
# প্রধান # বিষয়বস্তু। hnews h3 a,
#প্রধান #সামগ্রী .hnews h1 a{font-size:22px; }
#প্রধান #সামগ্রী .hnews .entry-content {font-size:16px;}
নান্দনিকতা এবং শৈলীর ক্ষেত্রে অন্যান্য সমন্বয়
মোবাইল সংস্করণের জন্য ডিজাইনে কীভাবে প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করা যায় তার পূর্ববর্তী সমস্ত প্রক্রিয়া আমি করেছি। যা অবশিষ্ট থাকে তা হল ওয়েবের চেহারা এবং শৈলীতে ফিনিশিং টাচ দেওয়া। এই ক্ষেত্রে আপনি সেই স্টাইলগুলিকে পুনরায় ডিজাইন করতে পারেন যেগুলি নতুন সংস্করণের সাথে খাপ খায় না এবং যেগুলি এতে স্থান পায় সেগুলিকে বাতিল করে দিতে পারেন৷ একইভাবে, আপনি সাইডবারগুলির মতো কিছু উপাদানকে স্থানান্তর করতে পারেন, উদাহরণস্বরূপ, সেগুলিকে অন্য স্থানে স্থাপন করতে, বা অন্যান্য সমন্বয়গুলির মধ্যে মার্জিনে পরিবর্তন করতে পারেন। পরিশেষে একটি সুন্দর মোবাইল ওয়েব অর্জন করার জন্য প্রস্তুত।
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট বানাবেন? - পরীক্ষা এবং পরীক্ষা
আপনি যখন ডিজাইন করছেন শুধুমাত্র ওয়েব ডেভেলপমেন্টের ক্ষেত্রে নয়, যেকোনও সৃষ্টি বা নতুন কিছুর গঠনে। একটি পরীক্ষা বা পরীক্ষার পর্যায় রয়েছে, যেখানে আপনি ফলাফলগুলি পরীক্ষা করতে পারেন, যদি সেগুলি সর্বোত্তম হয় বা উন্নতির প্রয়োজন হয়।
এটি বলেছে, পূর্ববর্তী সমস্ত পদ্ধতি কার্যকর করার পরে একটি চেক বা পরীক্ষা করা সুবিধাজনক। এই পরীক্ষাগুলি করা উচিত যেহেতু পদক্ষেপগুলি কার্যকর করা হয়েছে এবং প্রতিটিতে যে পরিবর্তনগুলি অর্জন করা হচ্ছে তা যাচাই করতে সক্ষম হবেন৷ একইভাবে, ওয়েবের অপারেশনে নিম্নলিখিত দুটি পরীক্ষা করা প্রয়োজন
ব্রাউজারে পরীক্ষা করতে যান
আপনি প্রতিক্রিয়াশীল ডিজাইনে কাজ করার সময়, আপনাকে অবশ্যই পর্দার প্রস্থ সামঞ্জস্য করতে হবে। নতুন অভিযোজন চেক করার জন্য, যা নতুন রূপ নিচ্ছে। একইভাবে, ছোট ত্রুটি সনাক্ত করা যেতে পারে এবং এইভাবে ব্যবহৃত মিডিয়া প্রশ্নগুলির সাথে সামঞ্জস্য করতে সক্ষম হবে। পর্দার প্রস্থ পরীক্ষা করার জন্য, এটি করার দুটি উপায় রয়েছে:
- ব্রাউজারের প্রস্থ পরীক্ষা করার জন্য এর সর্বাধিকীকরণকে সরিয়ে লাইভ কাজ করুন।
- ISH-এর মতো জিনিসগুলিকে ব্যবহার করুন সহজ কমান্ডের সাহায্যে এই পরীক্ষা সেটিংস চালানোর জন্য একটি দরকারী টুল।
মোবাইল ক্যাশে বাইপাস করুন
মোবাইল ডিভাইসগুলি তাদের স্বভাবগতভাবে ক্যাশে ডেটা প্রয়োজনীয়তার বাইরে, এমনকি একটি নিয়মিত ব্রাউজার থেকেও বেশি। সাধারণের মধ্যে, ক্যাশে ছাড়াই লোড প্ররোচিত করতে CTRL+F5 চালানোই যথেষ্ট। যদিও মোবাইল ফোনে এই ধরনের ক্রিয়া কঠিন, এমনকি কিছু ব্রাউজারে ক্যাশে নিষ্ক্রিয় করার বিকল্প রয়েছে৷ ক্যাশে ছাড়া আরও ভাল কাজ করার সুবিধার্থে নিম্নলিখিতগুলি সুপারিশ করা হয়:
- Css কলে ভেরিয়েবলের সাথে কাজ করুন, যেমন:
"/styles.css?version=xxxx"
প্রতিটি নির্দিষ্ট ক্ষেত্রে সংস্করণ নম্বর পরিবর্তন করা। ইউআরএলটি আলাদা হওয়ার জন্য যাতে এটি ক্যাশে ব্যবহার না করে।
- ব্রাউজারে সরাসরি কাজ করুন। 420 এবং 450 পিক্সেলের মধ্যে সর্বনিম্ন মোবাইল রেজোলিউশন ধীরে ধীরে বৃদ্ধি করুন৷ এইভাবে আপনি যথেষ্ট সঙ্কুচিত হয়ে ব্রাউজারে এটি প্রদর্শন করতে পারেন। আরেকটি উপায় হল ওয়েব পেজ রিসাইজ করে এমন টুল ব্যবহার করা।
এই ক্রিয়াগুলির সাথে, নিঃসন্দেহে, পরীক্ষাগুলি চালানোর সময় আরও ব্যবহারিক এবং আরামদায়ক ফলাফল পাওয়া যাবে।
কিভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করবেন? - উপসংহার
উপরের সমস্তটিতে কিছু কৌশল, প্রযুক্তিগত সরঞ্জাম এবং পদ্ধতিগুলি জানা সম্ভব ছিল যা একটি প্রতিক্রিয়াশীল ওয়েবের ডিজাইনে প্রায়শই প্রয়োগ করা হয়। এই সমস্ত জ্ঞান একটি বিদ্যমান ওয়েবসাইটেও প্রয়োগ করা যেতে পারে যা আপনি একটি অভিযোজিত ডিজাইনে আনতে চান। নতুন ওয়েবসাইট তৈরির কাজ না করেই।
অতএব, পরবর্তী প্রশ্নে: আপনি যা শিখেছেন তা করে, প্রতিক্রিয়াশীল ডিজাইনের সাথে একটি ওয়েবসাইট তৈরি করা কি সম্ভব? স্পষ্টতই উত্তরটি একটি ধ্বনিত নয়। কেন? কারণ এটি শুধুমাত্র একটি ওয়েবসাইটকে অভিযোজনের জন্য সংবেদনশীল করা সম্ভব ছিল, যা মূলত ছিল না। যেহেতু এটি একটি অনমনীয় বা স্থির প্রকৃতির অধীনে কল্পনা করা হয়েছিল।
সম্ভাব্য ফলাফল বা ত্রুটি
একটি ঐতিহ্যবাহী ওয়েবসাইট বা পরিবর্তনের জন্য আরও সংবেদনশীল একটি অভিযোজিত করার প্রক্রিয়া চলাকালীন, এটি কিছু ভুল করতে পারে এবং তাই নির্দিষ্ট ফলাফল দেখা দিতে পারে, আসুন দেখি:
- কিছু কিছু উপাদান বাদ দিতে হবে যেগুলো পেজটি তৈরি করার সময় গুরুত্বপূর্ণ ছিল। অন্যদিকে, তাদের নির্মূল করার ক্রিয়াটি চেহারার উপর ভিত্তি করে করা হয়েছিল এবং ওয়েব ভিজিটরের কাছে প্রেরণ করা বিষয়বস্তুর গুরুত্বের কারণে নয়।
-এটি সামগ্রিক দৃষ্টিভঙ্গিতে পরিপূর্ণতা অর্জন করতে পারেনি। শুধুমাত্র বিদ্যমান একটি উন্নত করতে সক্ষম হচ্ছে. সম্পূর্ণ ভিন্ন ক্ষেত্রে যদি একটি ওয়েব প্রথম থেকে তৈরি করা হয়.
-মূল ওয়েবসাইটের মডেলের উপর নির্ভর করে, এটি পরিবর্তনের সাথে অভিযোজনের শেষ পর্যন্ত পৌঁছাতে পারে বা নাও হতে পারে। কিছু মকআপের সাথে এই প্রচেষ্টায় বিকাশকারীরা, শুধুমাত্র মধ্যবর্তী সমাধান করতে সক্ষম হবে।
পরিশেষে প্রতিক্রিয়াশীল নকশা সম্পর্কে
অবশেষে, যা করা হয়েছিল তা কেবল সাধারণ বিবরণ ছিল। একটি ডিজাইনের সাথে অভিযোজিত একটি মডেল পাওয়ার জন্য কাজ করার গুরুত্ব হাইলাইট করা যা মূলত ছিল না। আপনি যখন রেসপনসিভ ডিজাইন পড়েন, তখন আপনি বুঝতে পারবেন যে আপনি ডিজাইনের কথা বলছেন, লেআউটের কাজ সম্পর্কে নয়। অতএব, কীভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করা যায় তা অবশ্যই একটি আসল নতুন ডিজাইনের প্রেক্ষাপট থেকে উদ্ভূত হতে হবে।
যাইহোক, এমন একটি ওয়েবসাইট প্রদর্শন করতে সক্ষম হওয়া যা একটি মোবাইলের রেজোলিউশনকে পরিবর্তন করতে এবং মানিয়ে নিতে পারে, যা অনমনীয় থেকে শুরু করে, এটি একটি মোটামুটি বড় এবং দরকারী অর্জন। এখানে যা ব্যাখ্যা করা হয়েছে তা বোঝায় না যে আপনি ইতিমধ্যে প্রতিক্রিয়াশীল ডিজাইনে প্রশিক্ষিত। এর জন্য আরও অনেক গবেষণা প্রয়োজন।
কারণ অনেক বেশি ভিত্তি, জ্ঞান এবং বিভিন্ন আরও সাধারণীকৃত, আরও প্রযুক্তিগত প্রক্রিয়ার শেখার প্রয়োজন হবে।
কীভাবে একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরি করবেন – চূড়ান্ত টিপস
উপসংহারে, এটা জানা গুরুত্বপূর্ণ যে প্রতিক্রিয়াশীল ডিজাইন হল ওয়েবে যা বর্তমান। এই ধরনের ওয়েব ডিজাইনের জন্য চিন্তা করার একটি নতুন উপায় প্রয়োজন। নিম্নলিখিত টিপস অনুসরণ করে এই ওয়েবসাইটগুলি বিকাশ করা সহজ হতে পারে:
- প্রথমে মোবাইলের কথা ভাবুন: ডিজাইন করার সময়, ছোট আকারের মোবাইলের স্ক্রিনের সাথে মানিয়ে নিয়ে প্রথমে শুরু করা সুবিধাজনক। এইভাবে, বড় আকারের পর্দায় বিষয়বস্তু সামঞ্জস্য করার পরে। কারণ, মোবাইল ফোনের কথা মাথায় রেখে ডিজাইন করার সময়, আপনি যে বিষয়বস্তুটি পেজে প্রদর্শন করা উচিত তা নিয়ে আপনি আরও উদ্দেশ্যমূলক হতে পারেন, শুধুমাত্র যা উপস্থাপন করা সত্যিই গুরুত্বপূর্ণ।
- একটি নির্দিষ্ট মোবাইল বা ট্যাবলেটের জন্য ডিজাইনটি অপ্টিমাইজ করবেন না
- মান এবং ভাল অনুশীলনগুলি অনুসরণ করুন: উদাহরণস্বরূপ, এইচটিএমএল ট্যাগের মধ্যে ফাইলে সংজ্ঞায়িত CSS শৈলী ব্যবহার না করা।
- ডিজাইনে পিক্সেলের দাস হওয়া এড়িয়ে চলুন: মনে রাখবেন যে উপাদানগুলি তাদের সাথে সামঞ্জস্যপূর্ণ অবস্থান খুঁজে পায়। এর কারণ হল তারা পাত্রের তরলতা এবং মাত্রার দিকে নজর রাখে। যখন এমন হয় যে এটি পছন্দসই হিসাবে প্রদর্শিত হয় না, শুধুমাত্র মিডিয়া প্রশ্নগুলি প্রয়োগ করে উপাদানগুলির বিন্যাস ঠিক করুন৷