স্থির প্রস্থ বনাম গতিশীল প্রস্থ


15

আমি লক্ষ্য করেছি যে আরও বেশি সংখ্যক সাইটগুলি একটি নির্দিষ্ট-প্রস্থের লেআউটে চলে গেছে, যেখানে ব্রাউজার উইন্ডোটিকে পুনরায় আকার দেওয়ার ফলে একটি নমনীয় বিন্যাসের বিপরীতে কেবল স্ক্রোলবারগুলি দেখা দেয়, যেখানে ব্রাউজারকে পুনরায় আকার দেওয়ার ফলে পৃষ্ঠার উপাদানগুলি একসাথে "স্ক্রঞ্চ" হয়ে যায় ।
এই জাতীয় স্ট্যাক এক্সচেঞ্জ সাইটগুলি স্থির বিন্যাসের উদাহরণ। GMail এবং iGoogle নমনীয় বিন্যাসের উদাহরণ। একে অপরকে বেছে নেওয়ার কারণ কী?

উত্তর:


11

পরিবর্তনশীল প্রস্থের বিন্যাস সহ আরও জটিল ডিজাইনগুলি উপলব্ধি করা খুব কঠিন হতে পারে। সুতরাং আমি কল্পনা করি যে এটি একটি ভূমিকা পালন করে।

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

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


1
পাঠ্য প্রস্থের পয়েন্টের জন্য +1। মনিটরটি 1680px প্রশস্ত কিনা তাতে কিছু যায় আসে না - আপনি কোনও পত্রিকা পুরো পৃষ্ঠার প্রস্থ জুড়ে পাঠ্য দেখতে পাবেন না।
থিওরিগ্রহন করুন

8

জটিল সাইটের জন্য বিকাশকারী এর সাথে স্থির করা অনেক সহজ। এছাড়াও, বেশিরভাগ স্থির প্রস্থের সাইটগুলি প্রায় 1000 পিক্সেল প্রশস্ত হবে। কারণটি হ'ল ব্রাউজারগুলির কেবল 1% 800x640 এবং 0% 640x480 ব্যবহার করে। এখানে বর্তমানের পরিসংখ্যান দেখুন । যদিও এতে মোবাইল অন্তর্ভুক্ত নেই। যা সম্পূর্ণ ভিন্ন বলের খেলা।

পরিবর্তনশীল প্রস্থের বিন্যাসের মান হ'ল এটি লোককে সহজেই একটি উইন্ডোতে ওয়েবসাইট ব্যবহার করতে দেয় যা সর্বোচ্চ নয়।

আপনাকে আপনার শ্রোতাদের দিকে লক্ষ্য করা উচিত এবং তারা কী অভিজ্ঞতার চান তা ভিত্তিতে সিদ্ধান্ত নিতে হবে এবং পরিবর্তনশীল প্রস্থ যদি অন্যান্য বৈশিষ্ট্যগুলির চেয়ে গুরুত্বপূর্ণ হয় যা আপনার পরিবর্তনশীল প্রস্থ করতে হয় তবে আপনি বিকাশ করতে পারবেন না।


আপনি কি আমাকে এমন কোনও বৈশিষ্ট্যের উদাহরণ দিতে পারেন যা ভেরিয়েবল বিন্যাসে কাজ করবে না?
বেনভি

3
এটি এমন নয় যে বৈশিষ্ট্যগুলি ভেরিয়েবল লেআউটগুলির সাথে কাজ করে না। এটি আপনাকে ভেরিয়েবল প্রস্থের বিন্যাসগুলি পরীক্ষা করতে এবং বিকাশ করতে আরও বেশি সময় ব্যয় করতে হবে কারণ আপনার পৃষ্ঠার হ্যান্ডেলগুলি কীভাবে একে অপরের চারদিকে ঘোরাতে হবে তা পরিচালনা করতে হবে।
বেন হফম্যান

আহ, আমি আপনার শেষ বাক্যটির ভুল ব্যাখ্যা দিয়েছি। আমি এখন বুঝতে পেরেছি.
বেনভি

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

3

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

এই পদ্ধতির তুলনামূলক সহজ ডিজাইনের জন্য ভাল কাজ করে যেমন ব্লগ বা যেগুলি প্রচুর পাঠ্য তথ্য উপস্থাপন করে। প্রকৃতপক্ষে, আমি এটি আমার নিজস্ব ওয়েবসাইটে ব্যবহার করি । এখন সমস্ত লোকের কাছে প্রশস্ত স্ক্রিন বা উচ্চ-রেজোলিউশন মনিটর রয়েছে - আমার কাজের মনিটরটি 1680px প্রশস্ত - সুতরাং কেন তাদের রিয়েল এস্টেটের একটি বৃহত্তর ডিগ্রি হারাতে হবে এবং অনুভূমিকভাবে কেবল স্ক্রোল করতে হবে কারণ কোনও ডিজাইনার একটি নির্দিষ্ট প্রস্থের সিদ্ধান্ত নেন যা তাদের উপযুক্ত পর্দা? শেষ পর্যন্ত ভাল নকশা ব্যবহারকারীদের সেরা সম্ভাব্য অভিজ্ঞতা প্রদান সম্পর্কে - এটি কেবল ডিজাইনারের মনিটরে "সুন্দর" দেখায় তা নয়।


1

আপনি যে পছন্দ করতে হবে না। একটি তালিকা সংযোজন সাড়া জাগানো নকশা উপর একটি দুর্দান্ত নিবন্ধ আছে । মূল ধারণাটি হ'ল আপনি ব্রাউজার উইন্ডোতে বা ভিউপোর্টের আকারে পরিবর্তনগুলি ধরতে এবং প্রয়োজনীয় হিসাবে সিএসএস পুনরায় সাইন করতে মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারেন । সেখানে অনেক কিছু পড়তে হবে, তাই সমস্ত সরস বিবরণের জন্য নিবন্ধটি দেখুন। তবে এর দীর্ঘ এবং সংক্ষিপ্ততার জন্য (বা এটির "প্রশস্ত এবং সংকীর্ণ" হওয়া উচিত?) তাদের উদাহরণের পৃষ্ঠাগুলির আগে এবং পরে দেখুনসামনে পৃষ্ঠা দাঁড়িপাল্লা চমত্কারভাবে আপ একটি বিন্দু, কিন্তু আপনি যদি নিশ্চিত করতে এটা যথেষ্ট এটা একটু ক্লাঙ্কি পায় সংকীর্ণ। পরে পৃষ্ঠাগুলি স্কেলগুলি পাশাপাশি স্কেলিংকে সুন্দরভাবে কাজ করার জন্য এটি খুব সংকীর্ণ করে তুললে লেআউটটিকেও পরিবর্তন করে।


1

মতে জ্যাকব নিয়েলসেনের 's হোম পেজ ব্যবহারযোগ্যতা জন্য 113 ডিজাইন নির্দেশিকা :

67 একটি তরল বিন্যাস ব্যবহার করুন যাতে হোমপেজের আকারটি বিভিন্ন স্ক্রিন রেজোলিউশনে সামঞ্জস্য হয়।

এটি দশটি সবচেয়ে লঙ্ঘিত হোমপেজ ডিজাইন গাইডলাইনগুলির মধ্যে একটি :

হিমায়িত বিন্যাসগুলির সাথে লড়াই করা একটি হারানো লড়াই বলে মনে হয় তবে এটি পুনরাবৃত্তি করার মতো: বিভিন্ন ব্যবহারকারীর মনিটরের আকার বিভিন্ন থাকে। বড় মনিটরের লোকেরা একসাথে একাধিক উইন্ডো দেখতে তাদের ব্রাউজারগুলির আকার পরিবর্তন করতে সক্ষম হতে চায়। আপনি ধরে নিতে পারবেন না যে প্রত্যেকের উইন্ডো প্রস্থ 800 পিক্সেল: কিছু ব্যবহারকারীর পক্ষে এটি অনেক বেশি এবং অন্যদের পক্ষে খুব কম।


0

মিশ্রণ সম্পর্কে কী? পর্যাপ্ত জায়গা থাকলে এটি একটি নির্দিষ্ট প্রস্থে (70 ম) # কন্টেন্ট-বিভাগটি প্রদর্শন করে - অন্যথায় বিভাগটি ভিউ-পোর্ট / ব্রাউজার উইন্ডোর 80% এ সঙ্কুচিত করা হয়।

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

0

একটি গতিশীল বিন্যাসের সুবিধা হ'ল এটি মোবাইল ডিভাইস সহ সমস্ত স্ক্রিন আকারে কাজ করে। এই সমস্ত আকারে জিনিসগুলি দেখতে সুন্দর করা যদিও এটি আরও কঠিন কাজ। জিজ্ঞাসা করার প্রশ্নটি হল - আপনার দর্শনার্থীরা কি মোবাইল ডিভাইস ব্যবহার করছেন?

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.