क्या फ्लूइड लेआउट का उपयोग करना बुद्धिमानी है?

Question

Google Labs Browser Size

---

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

लेकिन अब "तस्वीर" बदल गई है, आजकल के अधिकांश उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले निम्नतम और उच्चतम संकल्पों के बीच एक उच्च विसंगति है और वे यहां रहने के लिए प्रतीत होते हैं।

मेरे पास एक नेटबुक है जो केवल 800 पिक्सल या 1024 पिक्सेल चौड़ा है; मेरे पास 22 "मॉनीटर भी है जो 1650 पिक्सेल और 24" मॉनीटर जो 1920 पिक्सेल का समर्थन करता है और अधिक सामान्य हो रहा है।

मैंने कुछ समय के लिए 800 पिक्सल उपयोगकर्ताओं को "अनदेखा" किया है और मैं निश्चित 950/960 पिक्सेल चौड़े के साथ विकास कर रहा हूं, मुझे यह भी पता है कि लोकप्रिय साइटें (SO एक के लिए) या तो इस दृष्टिकोण का उपयोग करें या द्रव एक।

पाठ (लगभग) केवल वेबसाइटों (जैसे Wikipedia) मैं नहीं एक समस्या तरल पदार्थ प्रणाली लेकिन अन्य सभी वेबसाइटों है कि रोचक सामग्री बनाने के लिए पर छवियों/वीडियो निर्भर के बारे में क्या उपयोग करते हुए देखते हैं? सोशल नेटवर्क्स, वर्गीकृत, और इसी तरह ... इस मुद्दे को हल करने के लिए उनके दृष्टिकोण क्या होंगे?

Seam Carving निकट भविष्य के लिए एक अच्छा विकल्प जैसा प्रतीत होता है लेकिन यह पर्याप्त परिपक्व नहीं हुआ है (न तो ब्राउज़र और न ही jQuery नेटिवली इस समय इस समय समर्थन करते हैं), मुझे लगता है कि उपयोगकर्ता इसे समझ नहीं पाएंगे, भ्रमित हो जाएंगे यह और परिणामस्वरूप वेबसाइट छोड़ दें।

वास्तविक वेब पर मानक अभी भी 1024 पिक्सेल तक चौड़ा है, और एक 24 "की निगरानी सिर्फ गलत नहीं कहने के लिए सादा अजीब लगता है में 980 पिक्सल अप्रयुक्त छोड़कर। इसलिए हमारे विकल्प क्या हैं?

screen resolutions with fixed layout http://i45.tinypic.com/1692oat.jpg

मैं सुनने के लिए आप इस और दोनों तरल पदार्थ और फिक्स्ड सिस्टम के साथ अपने अनुभवों के बारे में क्या सोचते हैं प्यार होता।

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

---

संपादित करें: मैं बस this answer देखा और मैं तरल पदार्थ और तरल लेआउट के बीच अंतर के बारे में थोड़े उलझन में मिला है, वे ठीक उसी होना चाहिए नहीं कर रहे हैं?

Answer 1

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

एक उच्च रिज़ॉल्यूशन स्क्रीन में विकिपीडिया को देखने का प्रयास करें, और आप देखेंगे कि वे अधिकतम चौड़ाई को 800-900 पीएक्स तक सीमित करते हैं - और फिर (मानक मानक 12pt फ़ॉन्ट मानते हैं) और लोग सक्षम होने में सक्षम होते हैं रेखा के अंत तक पढ़ें और फिर अगली पंक्ति की शुरुआत आसानी से पाएं, और पूरी चीज आंखों और गर्दन के तनाव की गड़बड़ी में टूट जाती है।

मेरे द्वारा निर्मित वेबसाइटों पर, मैं टेक्स्ट सामग्री की अधिकतम चौड़ाई को सीमित करने के लिए अधिकतम चौड़ाई का उपयोग करता हूं (और इसमें मैं छवियों और अन्य सामान भी शामिल करता हूं) लगभग 720-800 पीएक्स तक, जो साइडबार और संभवतः प्राप्त कर सकते हैं लगभग 1000px करने के लिए। यदि स्क्रीन उस पर व्यापक है, तो या तो बाईं ओर की सामग्री को संरेखित करें (आरटीएल वेब साइटों पर सही संरेखित करें) - दोनों अच्छी तरह से काम करते हैं।

लेकिन आपको अपना लेआउट डिज़ाइन करना होगा ताकि जब उपलब्ध चौड़ाई कम हो जाए तो यह बहती है - यह नेटबुक्स वाले लोगों के लिए बहुत उपयोगी है (जो अब लोकप्रिय हैं और मैं भविष्य में अधिक लोकप्रिय हो जाऊंगा), स्मार्ट फ़ोन और यहां तक ​​कि छोटी स्क्रीन मोबाइल डिवाइस भी। इस तरह के मोबाइल डिवाइस अधिक से अधिक फीचर मानक ब्राउज़र और आपको इसे अपने डिज़ाइन में संबोधित करना चाहिए - भले ही कोई मोबाइल ब्राउज़र आपकी वेबसाइट को किसी भी तरह से कम कर सकता है, फिर भी "मोबाइल मोड" आमतौर पर पेज को गड़बड़ कर और आपके इच्छित उपयोगकर्ता अनुभव को मार कर ऐसा करता है।

Answer 2

मुझे लगता है कि लेआउट की अधिकतम चौड़ाई रखना बेहतर है, आप इसे जावास्क्रिप्ट के साथ बदल सकते हैं। इसका एक अच्छा उदाहरण यह लेआउट है, यदि आप चौड़ाई बदलते हैं तो लेआउट के साथ क्या होता है (0 फ़ायरबग या कुछ में) देखें: http://tweakers.net/ उन्होंने 1208px की चौड़ाई चुनी है और ब्राउजर की चौड़ाई बदलते समय इसे जावास्क्रिप्ट के साथ छोटा कर दिया है ।जावास्क्रिप्ट अक्षम होने के साथ, वेबसाइट अभी भी 1208 पीएक्स चौड़ी है, जो किसी भी तरह की समस्या नहीं है।

संपादित करें: वेबसाइट की पहली चौड़ाई 900px की तरह होगी। जावास्क्रिप्ट के साथ आप ब्राउज़र की चौड़ाई की जांच करेंगे और आप अपनी ब्राउज़र की चौड़ाई के निकटतम रिज़ॉल्यूशन वाले क्लास को देंगे। उदाहरण के लिए: ब्राउज़र की चौड़ाई 1100 पीएक्स प्रतीत होती है, इसलिए आप कक्षा 'res1024' देते हैं, या ब्राउज़र चौड़ाई 1080px है, तो आप कक्षा 'res1100' देते हैं।

#wrapper { 
    width: 900px; 
} 
.res1024 #wrapper { 
    width: 1000px; 
} 

.res1100 #wrapper { 
    width: 1080px; 
} 

मुझे आशा है कि यह आप में मदद करता है: यह आपके सीएसएस होगा], आप बिल्कुल एक बहुत अधिक इस शरीर वर्ग के साथ बदल सकते हैं, जैसे:

.res900 #menu { 
    width: 100px; 
} 

संपादित करें 2: आप संभाल कर सकते हैं छवियों को वैसे ही:

.res900 img.fluid { 
    width: 200px; 
} 

.res1100 img.fluid { 
    width: 300px; 
} 

Answer 3

मैं किसी भिन्न कोण से समस्या से संपर्क करता हूं। एक तरल लेआउट लें लेकिन इसे न्यूनतम चौड़ाई दें (अधिकतम चौड़ाई के बजाय)। आप इसे सीएसएस के साथ प्राप्त कर सकते हैं।

छवियों के साथ समस्या इतनी बड़ी नहीं है। आप क्या करते हैं:

1. अपनी छवि को अधिकतम आकार में अपलोड करें जो आप चाहते हैं।

2. इस प्रकार छवि तरल पदार्थ करें:

   <img src="http://example.png" style="width:32.5%">

आप पेज का आकार बदलने के रूप में छवि प्रतिशत चौड़ाई में ही आकार नहीं बदलेंगे। बस सुनिश्चित करें कि आपके पास छवि में कोई चौड़ाई या ऊंचाई विशेषता नहीं है। मैं इसे superlastic कहते हैं :)

Answer 4

इस सवाल का कोई सही जवाब नहीं है क्योंकि कोई भी दो डिज़ाइन लक्ष्य समान नहीं हैं। द्रव लेआउट टाइपोग्राफिक नियंत्रण का कोई समानता लगभग असंभव बनाते हैं, लेकिन सभी डिज़ाइनों को इसकी आवश्यकता नहीं होती है या नहीं।

"सर्वोत्तम प्रथाओं" का कोई संग्रह कभी भी वास्तविक डिज़ाइन शिक्षा के समान नहीं होगा, और सभी उपयोगकर्ताओं को पूरी स्क्रीन को भरने के लिए अपने ब्राउज़र विंडो को उड़ाने के लिए मजबूर नहीं किया जाता है।

Answer 5

वहाँ एक स्टाइलशीट — W3C has something on this — के अंदर अलग @media नियम बनाने के लिए तरीके हैं और हालांकि यह है कि क्या हैण्डहेल्ड के ब्राउज़र नियमों का पालन करना होगा एक बड़ा Schroedinger की बिल्ली है, यह है कि ग्रहण करने के लिए, भले ही वे नहीं है काफी सुरक्षित है, साइट पर स्केल मॉडल का उपयोग करने के लिए उनके पास पर्याप्त मात्रा में और अच्छी तरह से अनुपात वाली स्क्रीन हैं, क्योंकि यह डेस्कटॉप पर दिखाई देती है।

मुझे लगता है कि यह उन उपकरणों के निर्माताओं के अनुकूल बनाने के लिए उपकरणों के निर्माताओं के सर्वोत्तम हितों में था जो 5-10 वर्षों तक इस तरह के उपकरणों के आगमन की भविष्यवाणी करते हैं।

और यदि नहीं, तो यह उनकी समस्या है।

Answer 6

980 पिक्सल अप्रयुक्त में एक 24 "की निगरानी छोड़ने सिर्फ गलत नहीं कहने के लिए सादा अजीब लगता है

मैं यहाँ असहमत चाहते हैं। आपको लगता है कि उच्च एक संकल्प के साथ एक मॉनिटर मिल गया है, तो आप ' शायद अधिकतम ब्राउज़र विंडो के साथ नहीं चल रहा है।और यहां तक ​​कि यदि आप हैं, तो क्या आप वास्तव में इस बात से परेशान हैं कि सामग्री मध्य में एक निश्चित क्षेत्र में है? वास्तव में?

जब तक आपकी साइट के पास सभ्य, उपयोग करने योग्य लेआउट होता है, मुझे उच्च-रेज मॉनीटर पर किसी भी स्थान के साथ समस्या दिखाई नहीं देती है।

Answer 7

मैंने अब तक पढ़े गए लेआउट पर सबसे अधिक जानकारीपूर्ण चर्चा एंडी बड की सीएसएस मास्टरी पुस्तक में पढ़ी है। यदि आपको मौका मिलता है, तो इसे पढ़ें। मुझे लगता है कि यह सीएसएस (इंटरमीडिएट स्तर) पर किताब होना चाहिए। ऐसा लगता है कि लेआउट अध्याय यहां आलेख रूप में उपलब्ध है। http://www.webreference.com/authoring/style/sheets/css_mastery2/

एक और लिंक: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

तरल और द्रव उसी तकनीक के लिए दो अलग-अलग नाम हैं।

एचटीएच।

Answer 8

ब्राउज़र में Responsive Design समर्थन से पहले फ्लूइड लेआउट का उत्तर दिया गया था। तरल पदार्थ या लोचदार लेआउट का उपयोग करने की कोई ज़रूरत नहीं है।

• http://lessframework.com/
• https://github.com/thatcoolguy/gridless-boilerplate