निश्चित चौड़ाई बनाम गतिशील चौड़ाई


15

मैंने देखा है कि अधिक से अधिक साइटें एक निश्चित-चौड़ाई वाले लेआउट में चली गई हैं, जहाँ ब्राउज़र विंडो को आकार देने से स्क्रॉलबार दिखाई देते हैं, लचीले लेआउट के विपरीत, जहाँ ब्राउज़र का आकार बदलने से पृष्ठ के घटक एक साथ "सिकुड़" जाते हैं। ।
इस तरह की StackExchange साइटें निश्चित लेआउट का एक उदाहरण हैं। GMail और iGoogle लचीले लेआउट के उदाहरण हैं। एक को दूसरे पर चुनने के क्या कारण हैं?

जवाबों:


11

अधिक जटिल डिजाइनों को चर चौड़ाई लेआउट के साथ महसूस करना बहुत मुश्किल हो सकता है। इसलिए मुझे लगता है कि एक भूमिका निभाता है।

यह भी तथ्य है कि पाठ को पढ़ने के लिए सहज नहीं है जो बहुत व्यापक है। StackExchange साइटों पर स्तंभ का आकार काफी प्रबंधनीय और पढ़ने में आसान है। एक चर चौड़ाई लेआउट के साथ, आप इसे अवैध किए बिना मुख्य पाठ निकाय का विस्तार नहीं कर सकते। यहां तक ​​कि Google उनके खोज परिणामों की चौड़ाई को सीमित करता है।

बेशक अगर आपके पास एक ऐसी जगह है जहाँ अंतरिक्ष प्रीमियम पर है (जैसे Google डॉक्स और गूगल मैप्स) तो आप वास्तव में सभी उपलब्ध स्थान का उपयोग करने के लिए एक चर चौड़ाई योजना के साथ जाना चाहते हैं।


1
टेक्स्ट रीडिंग चौड़ाई बिंदु के लिए +1। इससे कोई फर्क नहीं पड़ता कि मॉनिटर 1680px चौड़ा है - आपको पूरे पेज की चौड़ाई में एक अखबार नहीं दिखाई देगा।
अभिषेकशील जूल 29'10

8

के साथ फिक्स्ड जटिल साइटों के लिए डेवलपर के लिए बहुत आसान है। साथ ही, अधिकांश निश्चित चौड़ाई वाली साइटें लगभग 1000 पिक्सेल चौड़ी होंगी। कारण केवल 1% ब्राउज़र 800x640 का उपयोग करते हैं और 0% 640x480 का उपयोग करते हैं। यहां सबसे वर्तमान आँकड़े देखें । हालांकि इसमें मोबाइल शामिल नहीं है। जो एक पूरी तरह से अलग बॉल गेम है।

चर चौड़ाई लेआउट का मूल्य यह है कि यह लोगों को वेबसाइट को आसानी से एक खिड़की में उपयोग करने की अनुमति देता है जो अधिकतम नहीं है।

आपको अपने दर्शकों को देखना होगा और यह तय करना होगा कि आप क्या अनुभव चाहते हैं और यदि वैरिएबल चौड़ाई अन्य विशेषताओं की तुलना में अधिक महत्वपूर्ण है, जिसे आप वैरिएबल की चौड़ाई के अनुसार विकसित नहीं कर पाएंगे।


क्या आप मुझे एक ऐसी विशेषता का उदाहरण दे सकते हैं जो चर लेआउट के साथ काम नहीं करेगी?
BenV

3
ऐसा नहीं है कि सुविधाएँ वैरिएबल लेआउट के साथ काम नहीं करती हैं। यह है कि आपको अधिक समय परीक्षण और चर चौड़ाई लेआउट विकसित करने में खर्च करना होगा क्योंकि आपको यह प्रबंधित करना होगा कि आपके पृष्ठ का हिस्सा एक-दूसरे के चारों ओर घूम रहा है।
बेन हॉफमैन

आह, मैंने आपके अंतिम वाक्य का गलत अर्थ निकाला। मैं अब समझता हूँ।
BenV

कुछ चर लेआउट के साथ एक समस्या यह है कि उनके पास मुख्य सामग्री के लिए न्यूनतम-चौड़ाई सेट नहीं है, इसलिए यदि आपकी खिड़की बहुत संकीर्ण है, तो आपको एक बहुत ही संकीर्ण कॉलम में पाठ स्क्विट मिलता है, जिससे इसे पढ़ना बहुत कठिन हो जाता है। निश्चित चौड़ाई लेआउट में विपरीत समस्या होती है जब वे अधिकतम-चौड़ाई के बजाय चौड़ाई को हार्डकोड करते हैं और मुख्य पाठ को क्षैतिज स्क्रॉलिंग के बिना पढ़ा नहीं जा सकता।
मारियस गेदमिनस

3

आप दोनों के बीच एक समझौता है जहाँ आप एक न्यूनतम चौड़ाई और अधिकतम चौड़ाई (CSS का उपयोग करके) सेट करते हैं और फिर दोनों चरम सीमाओं के बीच में शेष प्रवाह बनाने के लिए प्रतिशत चौड़ाई का उपयोग करते हैं। उदाहरण के लिए, आप चाहते हो सकता है कि बाएं हाथ का मेनू कॉलम 200px से संकरा न हो लेकिन प्रवाहित होने वाली मुख्य सामग्री हो। यह तकनीक आपकी साइट को विज़िटर रिज़ॉल्यूशन के पैमाने पर ले जाने में सक्षम बनाती है, बिना अत्यधिक उच्च रिज़ॉल्यूशन या बेहद कम रिज़ॉल्यूशन के मूर्खतापूर्ण। HTML, आखिरकार, इसे प्रवाह के लिए डिज़ाइन किया गया था - यह एक मार्क-अप भाषा है और प्रिंट के समान नहीं है।

यह दृष्टिकोण अपेक्षाकृत सरल डिजाइनों के लिए अच्छी तरह से काम करता है, जैसे कि ब्लॉग या ऐसे लोग जो बहुत अधिक पाठ्य जानकारी प्रस्तुत करते हैं। दरअसल, मैं इसे अपनी निजी वेबसाइट पर उपयोग करता हूं । आखिरकार कई लोगों के पास अब चौड़ी स्क्रीन या उच्च-रिज़ॉल्यूशन मॉनिटर हैं - मेरा काम मॉनिटर 1680px चौड़ा है - इसलिए उन्हें अचल संपत्ति की एक बड़ी डिग्री खोनी चाहिए और क्षैतिज रूप से स्क्रॉल करना होगा क्योंकि एक डिजाइनर ने एक निश्चित चौड़ाई पर फैसला किया है जो उनके अनुकूल है स्क्रीन? अंत में अच्छा डिजाइन उपयोगकर्ताओं को सबसे अच्छा संभव अनुभव देने के बारे में है - यह डिजाइनर के मॉनिटर पर "सुंदर" दिखता है।


1

आपको वह चुनाव नहीं करना पड़ सकता है। एक सूची के अलावा उत्तरदायी डिजाइन पर एक उत्कृष्ट लेख है । मुख्य विचार यह है कि आप ब्राउज़र विंडो या व्यूपोर्ट आकार में परिवर्तन को पकड़ने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं और आवश्यक रूप से CSS को पुन: असाइन कर सकते हैं। वहाँ पढ़ने के लिए बहुत कुछ है, इसलिए सभी रसदार विवरणों के लिए लेख देखें। लेकिन इसके लंबे और छोटे समय के लिए (या यह "व्यापक और संकीर्ण" होना चाहिए?) उनके उदाहरण के पहले और बाद के पृष्ठों को देखें। पहले पेज तराजू अच्छी तरह से ऊपर एक बिंदु के लिए, लेकिन अगर आप इसे पर्याप्त यह थोड़ा भद्दा हो जाता है संकीर्ण। के बाद पेज स्केल के साथ-साथ लेआउट भी बदलता है जब आप इसे स्केलिंग के लिए अच्छी तरह से संकीर्ण करते हैं।


1

के अनुसार जेकब नीलसन 's मुखपृष्ठ प्रयोज्य के लिए 113 डिजाइन दिशानिर्देश :

67 एक तरल लेआउट का उपयोग करें ताकि होमपेज का आकार विभिन्न स्क्रीन रिज़ॉल्यूशन में समायोजित हो।

यह दस सबसे अधिक उल्लिखित मुखपृष्ठ डिज़ाइन दिशानिर्देशों में से एक है :

जमे हुए लेआउट से लड़ना एक खोई हुई लड़ाई लगती है, लेकिन यह दोहराने के लायक है: विभिन्न उपयोगकर्ताओं के अलग-अलग मॉनिटर आकार होते हैं। बड़े मॉनिटर वाले लोग एक साथ कई विंडो देखने के लिए अपने ब्राउज़र का आकार बदलने में सक्षम होना चाहते हैं। आप यह नहीं मान सकते हैं कि हर किसी की खिड़की की चौड़ाई 800 पिक्सेल है: यह कुछ उपयोगकर्ताओं के लिए बहुत अधिक है और दूसरों के लिए बहुत कम है।


0

मिक्स-अप के बारे में क्या? यह एक निश्चित चौड़ाई (70em) में # सामग्री-खंड को प्रदर्शित करता है यदि पर्याप्त जगह है - अन्यथा अनुभाग दृश्य-पोर्ट / ब्राउज़र विंडो के 80% तक सिकुड़ जाता है।

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

0

एक गतिशील लेआउट का लाभ यह है कि यह मोबाइल उपकरणों सहित सभी स्क्रीन आकारों में काम करता है। यह कठिन काम है, हालांकि उन सभी आकारों में चीजें अच्छी दिखती हैं। पूछने के लिए सवाल है - क्या आपके आगंतुक मोबाइल उपकरणों का उपयोग करने जा रहे हैं?

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.