প্রতিক্রিয়াশীল ডিজাইন ('অ্যাডাপটিভ' ডিজাইন হিসাবেও পরিচিত), যেখানে একই ওয়েব পৃষ্ঠাটি ব্রাউজারের প্রস্থের উপর নির্ভর করে দুটি বা ততোধিক হ্যান্ড ক্র্যাফ্ট করা লেআউটগুলির সর্বোত্তম সংস্করণ উপস্থাপন করে, বেশিরভাগ ওয়েবসাইটের সবচেয়ে শক্তিশালী বিকল্প। কেন তা দেখার জন্য এটি ওয়েব ডিজাইনারদের কাছে উপলভ্য সমস্ত বিকল্পগুলির দিকে নজর রাখতে সহায়তা করে:
স্থির লেআউট
একটি স্থির পৃষ্ঠার প্রস্থ, যেখানে সামগ্রীর প্রস্থ ব্রাউজারের প্রস্থ নির্বিশেষে একই হয়, ডিভাইসগুলিতে অভিন্ন চেহারা দেয় এবং অনুভূত হয় এবং আরও নমনীয় ডিজাইনের চেয়ে কম কোডিং, চিন্তাভাবনা এবং রক্ষণাবেক্ষণের প্রয়োজন হতে পারে।
কেউ কেউ মনে করেন যে স্থির-প্রস্থের লেআউটগুলি একটি পূর্ব যুগের প্রতীক, যেখানে লোকেরা সমস্ত ব্রাউজার জুড়ে পিক্সেল সিদ্ধি এবং অভিন্ন চেহারা দেখেছিল। হার্ডবাইলড ওয়েব ডিজাইনের লেখক অ্যান্ডি ক্লার্ক মনে করেন যে এই চিন্তাভাবনাটি মারা গেছে:
"অতীতে এটি এমন একটি ওয়েবসাইট তৈরির জন্য কঠোর লড়াইয়ের লড়াইয়ের স্ট্যান্ডার্ড অনুশীলন ছিল যা সমস্ত ব্রাউজারগুলিতে একই দেখত এবং সেগুলি কাজ করে - তাদের সক্ষমতা যা-ই হোক না কেন this এটি করার জন্য আপোষ করা এবং সমস্ত ব্রাউজারগুলি সমর্থন করে না এমন প্রযুক্তি ব্যবহার করা এড়ানো বোঝায়।
এটা কি হার্ডবাইলড?
নিজেকে বাচ্চা দেবেন না, মিষ্টি গাল এটি আমাদের শৈলীর বিকাশ বা আরও ভাল ওয়েব তৈরির উপায় নয়। এই জাতীয় পুরানো ধরণের চিন্তাভাবনা আমাদের পিছনে ফেলেছে। এটি আমাদের জানায় যে সঠিক জিনিস তা না করার জন্য অজুহাত তৈরি করতে বাধ্য করে। ওয়েবের বর্তমান রক্ষক হিসাবে আমরা সবচেয়ে খারাপটি করতে পারি, যা কিছু সম্ভব তা সীমাবদ্ধ করার অনুমতি দেওয়া ""
- অ্যান্ডি ক্লার্ক, হার্ডবাইলড ওয়েব ডিজাইন, পি 6 [পিডিএফ সংস্করণ এখানে উপলব্ধ ]
কেউ কেউ অলসতার উচ্চতা হিসাবে স্থির লেআউটগুলি দেখতে পাচ্ছেন, তবুও স্থির-প্রস্থের ডিজাইনগুলি খুব স্মার্ট ডিজাইন দলগুলি তরল বা অভিযোজিত বিন্যাসের চেয়ে বেশি বেছে নেয়। উদাহরণস্বরূপ, অ্যাপল বর্তমানে আইম্যাকগুলিতে একই আইটেমটি আইপ্যাড এবং আইফোনের মতো করে। জনসাধারণের কাছে মোবাইল ওয়েব ব্রাউজিং আনার জন্য দায়বদ্ধ সংস্থা কেন মোবাইল ওয়েবসাইটের জন্য তার ওয়েবসাইটটিকে অপ্টিমাইজ করে না?
কারণ এটি এর প্রয়োজন বলে মনে করে না।
ছোট ওয়েবসাইটের স্ক্রিনগুলির জন্য নিজের ওয়েবসাইটটিকে অভিযোজিত করার পরিবর্তে অ্যাপল সেই স্ক্রিনগুলিতে প্রশস্ত ওয়েবসাইটগুলি আরামে হ্যান্ডেল করতে হার্ডওয়্যার এবং সফ্টওয়্যার তৈরি করেছিল। অ্যাপল মনে করে যে একটি 'মোবাইল অপ্টিমাইজড' অভিজ্ঞতা ব্রাউজার উইন্ডোতে নয়, একটি দেশীয় অ্যাপ্লিকেশনটিতে সবচেয়ে ভাল সরবরাহ করা হয়। এজন্য এটি মোবাইল-অপ্টিমাইজড ওয়েব স্টোরের পরিবর্তে অ্যাপল স্টোর অ্যাপ্লিকেশন সরবরাহ করে। এবং এজন্যই এটি প্রকাশকদের উত্সাহিত ওয়েবসাইটগুলির মাধ্যমে ম্যাগাজিন অ্যাপ্লিকেশন সরবরাহ করতে উত্সাহিত করে। অ্যাপলের বর্তমান ওয়েব ডিজাইনের দর্শন স্পষ্ট: এগুলিকে শাসনের জন্য একটি লেআউট সূক্ষ্মভাবে কাজ করে। অন্য কিছুর জন্য, তার জন্য একটি অ্যাপ্লিকেশন রয়েছে।
একা এই কারণে, কিছু যুক্তিযুক্ত যে স্থির লেআউটগুলি আগের মতো প্রাসঙ্গিক থাকে; তারা বলতে চাইবে যে আমরা মোবাইল ব্রাউজার সফ্টওয়্যারটির উন্নতি করতে, এবং এইচটিএমএল এবং জাভাস্ক্রিপ্ট উন্নত করতে এবং বিকাশকারীদের সাইলড অ্যাপ স্টোর থেকে দূরে সরিয়ে দেওয়ার জন্য অপেক্ষা করার সময় তরল এবং অভিযোজিত বিন্যাসগুলি কেবলমাত্র ফাঁক থামিয়ে দেয়।
আমার মতে, যদিও, কোনও মোবাইল ডিভাইসে যেকোন সময়ের জন্য ওয়েবে চারপাশে চিমটি-ট্যাপ-ড্রাগ-স্ক্রোলিং করা এমনকি কোনও আইফোনেও মোটেও মজাদার নয়। আপনি যদি বিশ্বাস করেন যে সেরা ওয়েব অভিজ্ঞতা হ'ল আপনার পড়াশোনার ডিভাইসটি নির্বিশেষে কোনও কাজকর্মের পরিবর্তে ওয়েবসাইটগুলি পড়া, প্রকাশ করা এবং কথোপকথনকে আনন্দিত করে তোলে, আপনি কিছুটা মুহূর্তে স্বীকার করতে হবে যে প্রতিটিটির জন্য উপযুক্ত সামগ্রী সরবরাহ করা হবে দর্শনার্থী বিবেচনা করা মূল্যবান।
তরল বিন্যাস
তরল লেআউটগুলি যেখানে পৃষ্ঠার প্রস্থ পর্দাটি পূরণ করতে প্রবাহিত হয় (প্রায়শই একটি চাপানো সর্বাধিক প্রস্থ পর্যন্ত) সেখানে ভিউপোর্টের সাথে আরও উপযুক্ত প্রস্থে সামগ্রী সরবরাহ করে বিভিন্ন প্ল্যাটফর্ম জুড়ে আরও ভাল অভিজ্ঞতার প্রতিশ্রুতি দেয়।
অনুশীলনে, তরল বিন্যাসগুলি তাদের সমাধানের চেয়ে আরও বেশি সমস্যা সৃষ্টি করে, যেমনটি এই ক্যোপে ক্যামেরন মোল দ্বারা উল্লিখিত:
"... তরল নকশাগুলি প্রতিটি লেআউটের সমস্যাটির সমাধান কম্পিউটারের অফিসগুলিকে কাগজবিহীন করে তোলে যেমন করে না।"
- ক্যামেরন মোল, "সমস্ত সাইট তরল হওয়া উচিত?", সেপ্টেম্বর 2006
আপনি যখন তরল বিন্যাস গ্রহণ করেন, আপনি নিজের ডিজাইনের নিয়ন্ত্রণ ছেড়ে দিন এবং স্বীকার করবেন যে পাঠ্যটি পুনরায় মোড়ানো হবে, চিত্রগুলি পুনর্বিবেচিত হবে, রেখার দৈর্ঘ্যটি অনির্দিষ্টভাবে পৃথক হবে, পাঠ্য, চিত্র এবং নেভিগেশন উপাদানগুলি ছোট প্রস্থে একসাথে ক্রাশ হতে পারে এবং কলামগুলি ঝাঁকুন এবং ভাসবে আপনাকে শুধু তীব্র করার জন্য।
একটি তরল বিন্যাস, কেউ কেউ বলতে পারে, এটি একটি অলস বিকল্পও। এটি অভিযোজিত ওয়েব ডিজাইনের শটগান পদ্ধতির। তিন-চারটি যত্ন সহকারে বিবেচিত ফিক্সড-প্রস্থের নকশাগুলির সাথে একটি উপযুক্ত অভিজ্ঞতা সরবরাহ করার পরিবর্তে আপনি একটি অনির্দেশ্য অভিজ্ঞতা দিচ্ছেন যে এটি বড় এবং ছোট পর্দার উপর কাজ করতে পারে এবং আশা করি আপনি যে সমস্ত ফাঁকগুলি পুরোপুরি বিবেচনা করেননি এটি প্লাগ করে রাখবেন hope মাঝে.
এটি তরল বিন্যাসকে অকেজো করে না। তাদের কাজ করার উপায় আছে। 456 বিরয়াতে সেন্ট ব্লগ, উদাহরণস্বরূপ, একটি তরল বিন্যাস আপ একটি প্রদত্ত প্রস্থ, যার পরে এটা বড় কোনো কিছুর জন্য একটি নির্দিষ্ট একটি ব্যবহার করতে গ্রহণ। এবং সত্যিই ছোট প্রস্থে, সাইডবারটি একক কলাম ব্যবহার করতে দূরে সরে যায় যা ছোট পর্দার উপর পড়া সহজ করে তোলে। তবে এটি আর তরল বিন্যাস নয়। এটি আরও ভাল কিছু। এটা প্রতিক্রিয়াশীল নকশা।
প্রতিক্রিয়াশীল লেআউট
একটি 'প্রতিক্রিয়াশীল' বা 'অভিযোজিত' লেআউট - যেখানে একই ওয়েব পৃষ্ঠাগুলি দর্শকের ব্রাউজারের প্রস্থের উপর নির্ভর করে দুটি বা ততোধিক কারুকর্মী বিন্যাসের একটি সংস্করণ উপস্থাপন করে - এটি প্রগতিশীল বর্ধনের একটি মূল অঙ্গ, যার লক্ষ্য কোনও ওয়েবসাইটকে সর্বোত্তম দেখায় s এটি প্রতিটি দর্শনার্থীর জন্য পারে।
অ্যাডাপটিভ ওয়েব ডিজাইনের লেখক অ্যারন গুস্তাফসনের কথায়, একটি অভিযোজক বিন্যাস গ্রহণ করা চয়ন করা 'দুর্দান্ত গ্রাহক পরিষেবা' । আমরা যদি আমাদের সাইটগুলিকে ভালভাবে ডিজাইন করি তবে তিনি বলেছেন, দর্শকদের বুঝতে হবে যে আমরা এগুলি নিয়ে গোলমাল করছি না:
"ওয়েব ডিজাইনার এবং বিকাশকারী হিসাবে, আমাদের মনোযোগী, অবিস্মরণীয় ওয়েটারের মতো আমাদের কাজের প্রতি যথাসাধ্য চেষ্টা করার চেষ্টা করা উচিত তবে এটি একটি সহজ কাজ নয়। ঠিক যেমন কোনও ওয়েটারের ধারণা নেই যে কোনও দরজা দিয়ে আসা কোনও গ্রাহককে ঘন ঘন প্রয়োজন হবে কিনা? রিফিলস বা কয়েকটি, কোনও নির্দিষ্ট ব্যবহারকারীর আমাদের সাইটে উপস্থিত হলে আমাদের তার প্রয়োজনীয়তাগুলি জানার উপায় নেই Instead পরিবর্তে, আমাদের অবশ্যই সেই চাহিদাগুলি পূরণ করতে উত্থাপন করতে হবে we're আমরা যদি সত্যিই ভাল থাকি তবে আমাদের গ্রাহকরা বুঝতে না পারলেও আমরা এটি করতে পারি তাদের জন্য বিশেষ বিবেচনা করা। কৃতজ্ঞ, প্রগতিশীল বর্ধনের ব্যবহারকারী এবং বিষয়বস্তু-কেন্দ্রিক পদ্ধতির (কৃপিত অবক্ষয়ের নবীন-ব্রাউজার পদ্ধতির বিপরীতে), এটি সহজেই অর্জনযোগ্য। "
- অ্যারন গুস্তাফসন, অভিযোজিত ওয়েব ডিজাইন, পি 12 [পিডিএফ সংস্করণ এখানে উপলব্ধ ]
ওয়েব ডিজাইনার হিসাবে আমাদের কাজটি আমাদের দর্শকদের সাথে খাপ খাইয়ে নেওয়া এবং তাদের আমাদের সাথে খাপ খাইয়ে নিতে বাধ্য করা নয় - অ্যাপল যেমন আমাদের বিশ্বাস করতে পারে - এটি ওয়েব ডিজাইনের ক্ষেত্রে সাম্প্রতিকতম উন্নয়ন development এটি আমার মতে, এক প্রকার নবজাগরণ: আমরা প্রিন্ট ডিজাইনের বছরগুলি থেকে ভাল অভ্যাসগুলি বেছে নেওয়ার কাজ শেষ করেছি। এখন আমাদের অবশ্যই মুদ্রিত পৃষ্ঠায় একটি পূর্বনির্ধারিত জায়গার মধ্যে কাজ করে চাপানো শিকলগুলি ফেলে দিতে হবে।
যেখানে একবার আমরা ব্রাউজারটিকে একটি নির্দিষ্ট ক্যানভাস হিসাবে বিবেচনা করি, আমরা এখন তা গ্রহণ করেছি যে কোনও সংজ্ঞায়িত ক্যানভাস একেবারেই নেই এবং এটি আপনার স্পেসের পরিসংখ্যানগুলিতে দেখতে কোনও সন্দেহ নেই যে পর্দার আকারের বিশাল মিশ্রণ থেকে এটি আরও স্পষ্ট হয়ে উঠছে screen । প্রতিটি নতুন ডিভাইসকে লক্ষ্য হিসাবে চিহ্নিত করার জন্য একটি অনন্য 'পৃষ্ঠার আকার' হিসাবে গণ্য করার পরিবর্তে (এবং তারপরে একটি নতুন ডিভাইস প্রকাশিত হওয়ার পরে সৈন্যদের সমাবেশ করতে হবে) আমরা আরও ভবিষ্যত-প্রমাণ সম্মেলনগুলি অনুসরণ করতে পারি।
আমরা 'বড়', 'মাঝারি' এবং 'ছোট' - নির্দিষ্ট ফোন এবং ট্যাবলেটগুলির কথা চিন্তা না করে, সেই ব্যান্ডগুলিতে সাইটগুলি তাদের সেরা দেখানোর জন্য ডিজাইন সাইটগুলি বিবেচনা করতে পারি। যে কোনও নতুন ডিভাইসই বেরোন না কেন, এগুলি একটি ব্যান্ড বা অন্য একটিতে ফিট হয়ে যাবে এবং - যদিও তারা দুটি ব্যান্ডের সীমান্তে ডানদিকে রয়েছে - আমাদের এখনও স্থির বা তরল ব্যবহার না করে অভিজ্ঞতার উপর আরও নিয়ন্ত্রণ রয়েছে বিন্যাস।
ইন প্রতিক্রিয়াশীল ওয়েব ডিজাইন, ইথান Marcotte অস্ত্র এই কলে দিচ্ছে:
"আমাদের যেতে দেওয়া দরকার।
প্রত্যেকটি একটি বিশেষ ডিভাইস বা ব্রাউজার অনুসারে সংযোগ বিচ্ছিন্ন ডিজাইন তৈরি করার পরিবর্তে আমাদের পরিবর্তে তাদেরকে একই অভিজ্ঞতার দিক হিসাবে বিবেচনা করা উচিত। অন্য কথায়, আমরা এমন সাইটগুলি কারুকাজ করতে পারি যা কেবলমাত্র আরও নমনীয় নয়, তবে এটি মিডিয়াগুলির সাথে খাপ খাইয়ে নিতে পারে যা সেগুলি সরবরাহ করে।
সংক্ষেপে, আমাদের প্রতিক্রিয়াশীল ওয়েব ডিজাইন অনুশীলন করা উচিত
।ডিজাইনার হিসাবে আমাদের যে নিয়ন্ত্রণ প্রয়োজন তা সমর্পণ না করে আমরা ওয়েবে অন্তর্নিহিত নমনীয়তাটি আলিঙ্গন করতে পারি। আমাদের কাজের মানদণ্ড ভিত্তিক প্রযুক্তিগুলি এম্বেড করে এবং অনলাইন ডিজাইনের দিকে আমাদের দর্শনে সামান্য পরিবর্তন আনতে All "
- ইথান মার্কোত্তে, প্রতিক্রিয়াশীল ওয়েব ডিজাইন, পি 8 [পিডিএফ সংস্করণ এখানে উপলব্ধ ]
তবে আপনি কোন ব্যান্ড ব্যবহার করেন? ইথান মার্কোটি প্রতিক্রিয়াশীল ওয়েব ডিজাইনে নিম্নলিখিত তিনটি সুপারিশ করেছেন । (তারা কী করে তা শিখতে এবং সাবধানবাণীগুলি বুঝতে, আপনি বইটি ধরতে পছন্দ করতে পারেন ))
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
জোনি কোরপি সহ অভিযোজিত ওয়েবসাইটগুলি তৈরিতে সহায়তার জন্য ডিজাইন করা হয়েছে এমন অনেকগুলি সিএসএস ফ্রেমওয়ার্ক কম ফ্রেমওয়ার্ক ।
যথেচ্ছ ব্রেকপয়েন্টগুলি ব্যবহার না করে, আপনার সাইটের নকশাকে ব্যান্ডগুলি নির্দেশ দেওয়া আরও ভাল। আপনার ব্রাউজারের স্ক্রিনের প্রস্থ হ্রাস করুন এবং যখনই আপনার নকশাটি ভঙ্গ হবে তখন সেই প্রস্থটি আপনার "ব্রেকপয়েন্টস" এর একটি হওয়া উচিত। আপনার ডিজাইনটি সমস্ত প্রস্থে ভাল না লাগানো পর্যন্ত সিএসএস মিডিয়া ক্যোয়ারীগুলির সাথে প্রস্থ হ্রাস এবং ব্রেকপয়েন্টগুলি যুক্ত রাখুন। এইভাবে, আপনার ডিজাইনটি কেবলমাত্র হাতে গোনা কয়েকটি স্ক্রিন আকারের পরিবর্তে সমস্ত ডিভাইসে ভাল লাগবে যা আপনি এটিতে পায়রাঘোল খাওয়ার চেষ্টা করেছেন। আপনি যদি ক্রোম ব্যবহার করেন, বিকাশকারী সরঞ্জামগুলি (দেখুন> বিকাশকারী> বিকাশকারী সরঞ্জাম) চালু করা এবং আপনার ব্রাউজারের প্রস্থ হ্রাস করা আপনাকে উপরের ডান দিকের কোণায় বর্তমান প্রস্থের একটি সহায়ক রিডআউট দেয় যা আপনার ব্রেকপয়েন্টগুলি কোথায় হওয়া উচিত তা নিয়ে কাজ করতে পারেন।
বিবেচনা করার জন্য আরেকটি জনপ্রিয় পদ্ধতির মধ্যে রয়েছে মোবাইল প্রথম প্রতিক্রিয়াশীল ডিজাইন, যেখানে আপনার মূল স্টাইলশীটটি ক্ষুদ্রতম ডিভাইসের জন্য শৈলীগুলি পরিচালনা করে এবং মিডিয়া কোয়েরিগুলি অন্য উপায়ে পরিবর্তে বড় পর্দার প্রস্থগুলির সাথে কাজ করে deal এটি মোবাইল ডিভাইসগুলিতে দ্রুত পারফরম্যান্সের ফলস্বরূপ হতে পারে, বিশেষত যদি আপনি প্রচুর সিএসএস ব্যাকগ্রাউন্ড চিত্র ব্যবহার করেন। (আপনি একইভাবে ব্রেকপয়েন্টগুলি তৈরি করতেন - আপনার ব্রাউজারের প্রস্থটি তার সর্বনিম্ন থেকে শুরু করুন এবং উপরের দিকে কাজ করুন And এবং যতগুলি আসল ডিভাইস আপনি হাত পেতে পারেন তা পরীক্ষা করতে ভুলবেন না - একটি মুক্ত ডিভাইস দেখার জন্য বিবেচনা করুন ল্যাব ।)
সংক্ষেপে, যখন এটি ভালভাবে সম্পন্ন করা হয় তখন অভিযোজিত ডিজাইনটি ওয়েব ডিজাইনার এবং সাম্প্রদায়িক উদ্যানের ওয়েব ব্যবহারকারী হিসাবে উভয়ই দেখতে এবং অভিজ্ঞতা লাভ করে। জাপানি ফার্ম তথ্য আর্কিটেক্টসের সাইট নিনউদাহরণস্বরূপ, :
একটি আইফোনে
একটি আইপ্যাডে
একটি আইম্যাক অন
অ্যারন গুস্তাফসন যেমন ভবিষ্যদ্বাণী করেছিলেন, আপনি এমনকি জানেন না যে আপনি একই পৃষ্ঠায় ডিজাইনগুলি না পাওয়া পর্যন্ত আপনাকে খাওয়ানো হচ্ছে।
অভিজ্ঞতা প্রতিটি ক্ষেত্রেই খুব সুখকর হতে পারে; বিষয়বস্তু পড়া শুরু করার জন্য আপনাকে পৃষ্ঠার বিষয়ে চিন্তাভাবনা বা ইন্টারঅ্যাক্ট করতে হবে না, আপনার পর্দায় কেন অদ্ভুত লাগে তা ভেবে সময় ব্যয় করবেন না বা নেভিগেশন উপাদানগুলি ট্যাপ করার আগে জুম ইন করুন, কারণ ইতিমধ্যে কেউ এই সমস্যার সমাধান করেছেন for আপনি. আর যে কেন প্রতিক্রিয়াশীল নকশা প্রায় সবসময় অন্যান্য অপশন ত্রাম্প্স হয়।