पोर्ट्रेट मोड में देखने के लिए अधिकांश वेबसाइटों को क्यों अनुकूलित किया गया है? [बन्द है]


24

मैं बस यह पता नहीं लगा सकता। लगभग सभी मॉनीटरों में एक पहलू अनुपात होता है जहाँ चौड़ाई ऊँचाई की तुलना में बहुत बड़ी होती है और फिर भी लगभग सभी वेबसाइटों को दूसरे तरीके के दौर के लिए डिज़ाइन किया जाता है? मैं वास्तव में एक वेब डेवलपर नहीं हूं और इस समय सिर्फ सामान का प्रयोग कर रहा हूं लेकिन यह पागलपन मुझे चकित करता है !!!

संपादित करें: बिंदु यह नहीं है कि मैं किसी वेबसाइट की ऊंचाई को सीमित करना चाहूंगा। मुद्दा यह है कि मैं इसे किसी भी तरह उपलब्ध सभी जगह को भरना चाहूंगा जब मेरे पास मेरा 1920x1080 लैंडस्केप मोड होगा।

संपादित करें 2: यह समझने के लिए इसे देखें कि मैं क्या कह रहा हूं यहाँ छवि विवरण दर्ज करें


4
अच्छी तरह से याद है कि मॉनिटर मूल रूप से चौकोर हुआ करते थे? तो शायद यह सिर्फ थोड़े है एक मानक thats अपनाया गया है।

1
@mercfh आप टिप्पणी वास्तव में बहुत समझ में आता है। लेकिन मुझे आश्चर्य होता है कि लगभग कोई भी इस मूलभूत प्रयोज्य दोष पर सवाल क्यों नहीं उठाता है, जब लोग मौत की बात करते हैं?
एनवीएम

इस मामले में, अश्लील साइड-इफेक्ट्स के बिना प्रिंट करने योग्य क्षेत्र, जैसे आंशिक पार्श्व कट-ऑफ को पृष्ठों को अलग करने के लिए मुद्रित किया जा रहा है। विकल्प हैं, लेकिन वे जटिलताओं के सेट के बिना नहीं हैं (सीएसएस प्रिंट मीडिया प्रकार)।
जस्टिन 15


2
@ एनवीएम यह "मौलिक प्रयोज्यता दोष" कैसे है? यह सिर्फ "अप्रयुक्त स्थान" है।
डेविड

जवाबों:


36

जब आप वर्तमान लाइन के अंत में पहुँच जाते हैं, तब कौन सी लाइन का ट्रैक खोए बिना आंख को स्कैन कर सकते हैं, इसकी एक सीमा है। इष्टतम लाइन चौड़ाई और पठनीयता के बारे में कई अध्ययन ( इस एक सहित ) हुए हैं।

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

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

अतिरिक्त टिप्पणी : (प्रश्न से टिप्पणी में)

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

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

वर्तमान डी फैक्टो मानक पर टिप्पणी :

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

सबसे आम स्क्रीन चौड़ाई (1024, 1280, 1366) इतनी करीब हैं कि यदि आप सबसे छोटे (1024p) के लिए डिज़ाइन करते हैं और पृष्ठ पर डिज़ाइन को केंद्र में रखते हैं, तो यह अभी भी अन्य थोड़ा बड़े क्षैतिज आयामों पर अच्छा लगेगा । यह है बहुत मुश्किल किसी भी प्रारूप में सब कुछ गठबंधन सही पाने के लिए, बहुत कम स्क्रीन चौड़ाई के आधार पर कई प्रारूपों का समर्थन करने के लिए है। 1080p उपयोगकर्ता संख्या में बढ़ रहे हैं, लेकिन फिर भी उन सभी का बहुत कम प्रतिशत बनाते हैं जिनका उन्हें समर्थन करना है।

यदि आप रुचि रखते हैं, तो मैं "ए लिस्ट के अलावा" डिजाइन के कुछ लेखों को गलत बताने की सलाह देता हूं । आपको यह पता लगना शुरू हो जाएगा कि आप जो चाहते हैं, वह करने में जितना दिखता है, उससे अधिक कठिन है। जब मैंने 1080p के लिए डिजाइनिंग के बारे में एक प्रश्न पोस्ट किया , तो पहले प्रारंभिक प्रतिक्रियाओं ने "सब कुछ बड़ा कर दिया"। यह ऐसा कुछ है जो अभी तक अधिकांश वेब डिजाइनरों के लिए रडार पर नहीं है।


तो क्यों न किसी तरह से वास्तविक पाठ के बाएँ और दाएँ पर बेतुके व्हाट्सएप के बजाय दो कॉलम की तरह चीजों को तोड़ दिया जाए। जब आप परिदृश्य में एक पूर्ण HD मॉनिटर का उपयोग करते हैं तो आपको इस असावधानी का एहसास होगा।
एनवीएम

3
यह साइट दो कॉलम डिज़ाइन का उपयोग करती है, और कुछ वेब साइटों में तीन कॉलम डिज़ाइन भी हैं। मैंने जो वर्णन किया है, वह एक ही स्तंभ की शारीरिक सीमा है। तकनीकी कारण हैं कि आप HTML में ऐसा क्यों नहीं कर सकते हैं जो आप प्रिंट में कर सकते हैं। उदाहरण के लिए, HTML और CSS आपको टेक्स्ट को एक कॉलम से अगले पर भेजने का विकल्प नहीं देते हैं। न ही एक स्क्रीन पर पृष्ठों की अवधारणा है। आपको स्क्रॉल बार कैसे काम करता है, आदि के नियमों के साथ आना होगा और यह केवल व्यक्त नहीं करता है।
बेरिन लोरिट्श

4
Mulitple कॉलम का उपयोग करना प्रिंट में ठीक काम करता है, क्योंकि आप जानते हैं कि पेज कितना ऊंचा है, लेकिन यह अनकाउंट स्क्रीन साइज के साथ इतनी अच्छी तरह से काम नहीं करता है - आपको नहीं पता कि दूसरे कॉलम में ब्रेक कितनी दूर तक घटित होगा। वर्टिकल स्क्रॉलिंग आसान है, लेकिन यह टेक्स्ट के सिंगल कॉलम के साथ सबसे अच्छा काम करता है। असतत पृष्ठों (निरंतर स्क्रॉल के बजाय) के साथ कई कॉलम सबसे अच्छा काम करते हैं।
स्टीफन सी। स्टील

सुपर स्पष्टीकरण और मुझे लगता है कि अंतिम पंक्ति इसे बहुत अच्छी तरह से प्रस्तुत करती है।
एनवीएम

1
यह शायद यह भी इंगित करने योग्य है कि सभी लोग अपने ब्राउज़र को पूर्ण स्क्रीन के साथ वेब ब्राउज़ नहीं करते हैं। मैं एक 1080p मॉनीटर का उपयोग कर रहा हूं, लेकिन मेरे द्वारा देखे जा रहे पृष्ठ की तुलना में थोड़े चौड़े पर एक विंडो सेट में ब्राउज़र खुला है (90% साइटें एक समान चौड़ाई की हैं और इस विंडो को बस ठीक से फिट करें)। यह मुझे अन्य विंडो को ब्राउज़र की तरफ से नीचे रखने की अनुमति देता है।
गैविन ने

27

अधिकांश वेबसाइटें Taller हैं तो वे विस्तृत हैं क्योंकि आप अधिक सामग्री पढ़ने के लिए स्वाभाविक रूप से नीचे स्क्रॉल कर सकते हैं। मैं व्यक्तिगत रूप से क्षैतिज स्क्रॉल सलाखों से नफरत करता हूं। उन्हें समाप्त कर दिया जाना चाहिए!

वेबसाइट अभी भी पोट्रेट हैं, साइट का विस्तार स्क्रीन के नीचे से होता है। साइट कितनी लंबी हो सकती है इसकी कोई सीमा नहीं है।

अब असीम रूप से लंबे वेब पेज हैं (धन्यवाद, AJAX), यदि आप एक असीम रूप से विस्तृत पृष्ठ देखते हैं तो आप क्या करेंगे? (मैं शिकार करूंगा और डिजाइनर को मार डालूंगा, पेज से दूर रहना काफी अच्छा नहीं है, डिजाइनर को मरना होगा।)

प्रत्येक पंक्ति के लिए फिर से स्क्रॉल करना एक को आत्महत्या के लिए प्रेरित करेगा। यही कारण है कि लोग फैंसी बुक जैसे, पेज टर्निंग ऐप्स बनाते हैं, ताकि आपको स्क्रॉल करने की जरूरत न पड़े।


मेरे प्रश्न में संपादन देखें।
एनवीएम

नहीं, स्क्रीन रिज़ॉल्यूशन के संबंध में सामग्री को उसी स्थान पर रहना चाहिए। क्या आप वास्तव में सुझाव दे रहे हैं कि एक वेबसाइट को देखने के लिए (स्क्रीन रिज़ॉल्यूशन को जांचने के लिए) कोडित किया जाना चाहिए, यदि सामग्री "ऊपर से ऊपर" फिट हो सकती है, तो इसे मौजूदा सामग्री के दाईं ओर ले जा सकते हैं यदि यह फिट हो सकता है?
मोरोंस

WPF सिल्वरलाइट में इन दिनों आपके पास तरह-तरह के डिज़ाइन के विस्तार का विस्तार है। उपलब्ध स्थान के आधार पर चीजें आकार देंगी। समान क्यों नहीं? मैं कुछ कट पेस्ट नौकरी का सुझाव नहीं दे रहा हूं लेकिन चूंकि यह सभी के बारे में प्रभावित करता है, इसलिए कोई भी इस पर चर्चा नहीं करता है।
एनवीएम

1
वास्तव में मैं चित्र मोड में दो 1920x1080 मॉनिटर का उपयोग करता हूं और मैं इसे प्यार कर रहा हूं। जब मैं परिदृश्य में था तब यह नरक था। और मैं निश्चित रूप से 1% से कम का उपयोग करता हूं, जब वेब पर सब कुछ इसके लिए बनाया जाता है (वीडियो को छोड़कर) लेकिन यूट्यूब के अलावा कितने लोग मॉनिटर पर गंभीर वीडियो देखते हैं और यूट्यूब के लिए यह वास्तव में वैसे भी मायने नहीं रखता है)
NVM

3
वास्तव में, एक अनंत क्षैतिज स्क्रॉलिंग वेबसाइट इतनी भयानक नहीं हो सकती है (किसी चीज से मौत के रूप में गंभीर रूप से दंडनीय) यदि एक पंक्ति के बजाय संभवतः अनंत चौड़ाई हो, तो सामग्री यथोचित आकार के कॉलम में टूट जाती है और स्तंभों की संख्या संभावित रूप से अनंत होती है। ..
FrustratedWithFormsDesigner

9

पिछले उत्तरों को पढ़ने के बाद, मैंने देखा कि कई बिंदु गायब हैं, इसलिए मैं उन लोगों का वर्णन करने की कोशिश करूंगा।

कठिन कॉलम कार्यान्वयन

जब आप बड़े-चौड़ाई वाले पृष्ठों के बारे में बात करते हैं, तो मुझे लगता है कि आप टेक्स्ट कॉलम के बारे में बात कर रहे हैं, जैसे कि आप "भौतिक" अखबार में देखते हैं। इसके साथ दो समस्याएं हैं।

पहला, वास्तविक HTML 4 और XHTML 1.0 / 1.1 स्तंभों में पाठ प्रदर्शित करने के लिए अभिप्रेत नहीं हैं। फ़ायरफ़ॉक्स (और शायद अन्य सामान्य ब्राउज़र) के लिए हैक हैं, लेकिन यह इंटरनेट एक्स्प्लोरर में काम नहीं करेगा।

दूसरा, वास्तविक फ़ायरफ़ॉक्स कार्यान्वयन या भविष्य में HTML 5 में, यदि पाठ को कॉलम में प्रदर्शित किया जाना चाहिए, तो आपको कॉलम की चौड़ाई और स्तंभों की संख्या निर्दिष्ट करनी होगी। ऊँचाई निर्दिष्ट करना संभव नहीं है (उदाहरण के लिए, पृष्ठ की ऊँचाई, शीर्ष लेख की ऊँचाई और पाद लेख की ऊँचाई), और ब्राउज़र को स्तंभों की संख्या समायोजित करने दें।

ऊर्ध्वाधर के बिना, केवल क्षैतिज स्क्रॉल-पट्टी वाले स्तंभों में उपयोग करने योग्य लेआउट होना व्यावहारिक रूप से असंभव है।

कोई 100% ऊंचाई नहीं

वास्तविक HTML / XHTML का उद्देश्य पृष्ठ की चौड़ाई के अनुसार तत्वों के आकार को समायोजित करना है। मीट्रिक के लिए पृष्ठ ऊंचाई का उपयोग करना बहुत मुश्किल है।

इसका मतलब है कि सामग्री को सही ढंग से प्रदर्शित करने के लिए आपको जावास्क्रिप्ट हैक का उपयोग करना होगा। दूसरे शब्दों में, जिन लोगों के पास जावास्क्रिप्ट सक्षम नहीं है, उनके लिए आपकी वेबसाइट पूरी तरह से अनुपयोगी होगी।

आधे स्क्रीन पृष्ठ के साथ ब्राउज़िंग

बड़ी 16: 9/16: 10 स्क्रीन के साथ, दो विंडोज के साथ काम करना असामान्य नहीं है ( विंडोज सेवन में Win+ / Win+ )। इसका मतलब है कि ब्राउज़र विंडो की एक छोटी चौड़ाई और एक बड़ी ऊंचाई होगी।

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

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

सबसे पहले, अधिकांश वेबसाइटों को बिल्कुल भी अनुकूलित नहीं किया जाता है और उन लोगों द्वारा लिखा जाता है जो सामान्य रूप से वेब विकास के बारे में कुछ भी नहीं जानते हैं।

दूसरा, निश्चित चौड़ाई वाली वेबसाइटों और चौड़ाई वाली वेबसाइटों के बीच अंतर है जो ब्राउज़र विंडो की चौड़ाई के प्रतिशत के बराबर है।

पहले मामले में, आप देख सकते हैं कि अधिकांश वेबसाइटें न तो पोर्ट्रेट के लिए अनुकूलित हैं, न ही लैंडस्केप मोड के लिए। आमतौर पर, चौड़ाई 1024, 800 या उससे कम तय की जाती है, जो 1920 × 1080 रिज़ॉल्यूशन वाली 24 इंच की स्क्रीन पर देखने पर कोई मतलब नहीं है।

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

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


4

आधुनिक मॉनिटर लैंडस्केप मोड में उन्मुख क्यों हैं?

  1. वीडियो फार्मेट। लैंडस्केप ओरिएंटेड डिस्प्ले के लिए HD वीडियो बेहतर होगा।
  2. पढ़ना। चाहे दाएं से बाएं या बाएं से दाएं, लैंडस्केप मोड में ओरिएंटेड होने पर बिना किसी स्क्रॉलिंग के पूरी लाइनों के बड़े ब्लॉक को पढ़ना आसान होता है।

EDIT: आपकी टिप्पणी की समीक्षा करने के बाद, और आपके मूल प्रश्न के इरादे को फिर से समझने के बाद, ऐसा लगता है कि आप दो और तीन कॉलम लेआउट के लिए किसी कारण से लक्ष्य कर रहे हैं जो आज सबसे आम है। इसके लिए, वेबसाइट के इतिहास का एक छोटा सा सारांश:

पोर्ट्रेट मोड में देखने के लिए वेबसाइटों को क्यों अनुकूलित किया गया है?

मुझे नहीं लगता कि वे इसके लिए अनुकूलित हैं। यह अक्सर कुछ पहलुओं के बीच एक समझौता होता है जो हमेशा उपलब्ध होता है, कुछ पहलू अक्सर उपलब्ध होते हैं, और कुछ निश्चित पहलू केवल एक संदर्भ में उपलब्ध होते हैं। सबसे अच्छा, आप इसे एक कॉल इष्टतम समझौता कह सकते हैं।

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

इसे दूर करने के लिए, अधिकांश साइटों ने एक डिफैक्टो मानक को अपनाया है, और परिणामों को स्वीकार किया है। या तो एक में नेविगेशन को प्रदर्शित करने वाले दो कॉलम और दूसरे में सामग्री, या एक तीसरा कॉलम जोड़ा जाता है तो माध्यमिक, गैर-कोर नेविगेशनल सामग्री को हमेशा प्रदर्शित किया जा सकता है (चाहे इसका संदर्भ संबंधित मदद, नोट्स, या विज्ञापन, या हाल ही में संचार स्ट्रीम लाइव व्यक्ति दिखा रहा हो साइट या संदर्भ से संबंधित गतिविधि)। संदर्भ की वास्तविक सामग्री बीच में अटक गई है।


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

शायद उनका मतलब यह था कि बहुत बहुत व्यापक लाइनों को पढ़ना मुश्किल है? मुझे यकीन नहीं है कि अगर उसका मतलब है, लेकिन मैं इससे सहमत हूं।
FrustratedWithFormsDesigner

वास्तव में मैं भी पहले बिंदु को नहीं समझता। वीडियो स्केलिंग पर मॉनिटर ओरिएंटेशन का कोई प्रभाव कैसे पड़ता है?
एनवीएम

@ एनवीएम पूर्ण स्क्रीन एचडी वीडियो लैंडस्केप मोड में सबसे अच्छा फिट बैठता है, जो लम्बे से अधिक चौड़ा है। लेटरबॉक्स की कम से कम राशि।
जस्टिन

3

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


2

मैं निश्चित रूप से नहीं जानता, लेकिन मेरा अनुमान है कि अधिकांश "दस्तावेज़" जो प्रिंट किए गए हैं, वे चित्र-अभिविन्यास में मुद्रित करने के लिए डिज़ाइन किए गए हैं, और कई लोग अभी भी वेबसाइटों को "दस्तावेज़" के रूप में डिज़ाइन करते हैं - यह एक सांस्कृतिक चीज हो सकती है? एक अन्य संभावित व्याख्या यह है कि मॉनिटर-चौड़ाई मॉनिटर ऊंचाई से अधिक भिन्न होती है ...


2

मुझे लगता है कि सामान्य तौर पर यह थ्रेड में एक उत्तर पोस्ट करने के लिए हतोत्साहित किया जाता है जिसने लंबे समय तक गतिविधि नहीं देखी है। हालांकि, मुझे लगता है कि कुछ प्रासंगिक चीजें हैं जिनका उल्लेख अभी तक नहीं किया गया है।

सबसे पहले, मुझे निम्नलिखित फ़ायरफ़ॉक्स एक्सटेंशन का उल्लेख करना चाहिए जो मैंने कई महीने पहले खोजा था: कॉलम रीडर

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

हम लंबवत स्क्रॉल क्यों करते हैं?

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

जैसा कि पहले के जवाबों में बताया गया है: हमारे ब्राउज़र के लेआउट इंजन की रिफ्लो क्षमताओं को लंबवत रूप से रिफ्लेक्ट करने के लिए तैयार किया गया है।

बहु-स्तंभ क्षमता

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

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

उस तरह की चीज़ से निपटना एक लेआउट इंजन क्या करता है। एक जावास्क्रिप्ट लाइब्रेरी बनाने और बनाने के लिए जो मल्टी-कॉलम लेआउट को रिफ्लेक्ट करने की सुविधा प्रदान करता है , वह है जावास्क्रिप्ट में एक रेंडरिंग इंजन बनाना । वह एक प्लेटफॉर्म-इन-ए-प्लेटफॉर्म बना रहा है।

मॉनिटर का आकार

मुझे यह निराशा होती है कि प्रभाव में कंप्यूटर मॉनिटर ने पिछले कुछ वर्षों को सिकोड़ दिया है। बड़े मॉनिटर में 1200 पिक्सल्स की ऊँचाई थी, आजकल केवल 1050 हैं। हाँ, वे व्यापक हैं, लेकिन पाठ के लिए उस स्थान का उपयोग नहीं किया जा सकता है।

इसके अलावा, पोर्ट्रेट ओरिएंटेशन में वे मॉनिटर बहुत संकीर्ण होते हैं।
मेरे पास एक दोहरी मॉनिटर सेटअप है, जिसमें पोर्ट्रेट ओरिएंटेशन में दोनों मॉनिटर हैं, दोनों मॉनिटर 1200x1600px हैं। मेरे लिए वे 1200 पिक्सल न्यूनतम हैं।

CSS में एक सशर्त विवरण

निश्चित चौड़ाई लेआउट के बारे में एक टिप्पणी।

मैं CSS कमांड को पसंद करता हूं जो वेब-डिजाइनर को स्क्रॉलबार से बचने और पठनीयता बनाए रखने के दौरान चौड़ाई की एक बड़ी रेंज को समायोजित करने की अनुमति देता है: "अधिकतम-चौड़ाई"। (इस तरह चार आज्ञाएँ हैं: न्यूनतम-चौड़ाई, अधिकतम-चौड़ाई, न्यूनतम-ऊँचाई, अधिकतम-ऊँचाई)। एक div वाले पाठ के लिए, 65em, की अधिकतम-चौड़ाई निर्दिष्ट करें।

आपको एक / और मिलता है।
यदि उपलब्ध स्थान 65em से कम है, तो पाठ को तदनुसार बदला जाता है: कोई क्षैतिज स्क्रॉलबार यदि उपलब्ध स्थान 65em से अधिक है, तो युक्त div 65em पर सेट है।


1

वाइडस्क्रीन मॉनिटर वास्तव में केवल पिछले 2 वर्षों में बंद हो गए हैं - वे अधिक महंगे विकल्प हुआ करते थे।

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

अंत में, आप किस वाइडस्क्रीन संकल्प को हिट करना चाहते हैं - मेरा डेस्कटॉप 1920x1080 है; मेरा लैपटॉप 1440x900 है। आप किसके लिए डिज़ाइन करते हैं?


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

मॉनिटर्स 3-5 साल के जीवन चक्र हैं। इसके अलावा, लोगों को चित्र-उन्मुख साइटों के लिए उपयोग किया जाता है - एक साइड स्क्रोलर खोजें, लोगों को इसका उपयोग करते हुए देखें। वे कोशिश करते हैं और यह जानने के लिए नीचे स्क्रॉल करते हैं कि कैसे पार जाना है।
व्याट बार्नेट

1

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


1
+1 के लिए "कुछ उपयोगकर्ता पूरी तरह से अधिकतम विंडो में इंटरनेट सर्फ नहीं करते हैं"। मुझे लगता है कि "कुछ" इसे समझ रहा है।
ब्रायन ओकले

0

कई कारण हैं:

  • ज्यादातर पाठ के दस्तावेज पारंपरिक रूप से पोर्ट्रेट अनुपात हैं, इसलिए वेब इसे संरक्षित करता है।

  • पाठ की छोटी पंक्तियों को पढ़ना आसान है। मेरे पास एक उपदेश नहीं है, लेकिन यह एक दिशानिर्देश से अधिक मानक होने के बिंदु पर डिजाइन सलाह का एक बहुत ही सामान्य टुकड़ा है।

  • एक डिजाइन जो संकीर्ण का पक्ष लेता है वह अधिक लचीला होता है। मुझे अपने ब्राउज़र को मेरी चौड़ी स्क्रीन मॉनिटर की पूरी स्क्रीन के केवल आधे हिस्से पर विंडो करना पसंद है, और इसके बगल में कुछ और (आमतौर पर एक टेक्स्ट एडिटर या अन्य ब्राउज़र विंडो) रखना है। सिर्फ इसलिए कि मैं कर सकते हैं एक वेब पेज 1920 पिक्सेल हो है भर में मतलब यह नहीं है मैं हमेशा यह होना चाहता हूँ। यह वास्तव में एक वेब डिज़ाइनर का थोड़ा सा अनुमान है कि मैं उनके पेज को कैसे देखूंगा (या उसे) कैसे करूं। मुझे खराब फ़्लैशबैक देता है "यह पेज IE6 पर 800x600 में सबसे अच्छा देखा जाता है।"

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

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


0

अभी के लिए साइटों के लिए वेब डिज़ाइन मानक 960px चौड़े 1024px के स्क्रीन रिज़ॉल्यूशन और ऊपर (क्षैतिज स्क्रॉलबार के बिना) को विकसित करने के लिए है। यह न्यूनतम आवश्यकता है क्योंकि हर कोई एक नए 24 इंच के मॉनिटर का उपयोग नहीं करता है। (गोलियों और नेटबुक के बारे में सोचें जो छोटे प्रस्तावों के साथ नए हार्डवेयर हैं)

आपको यह ध्यान रखना चाहिए कि वेब साइट desing का रिज़ॉल्यूशन लक्षित ऑडिशन से प्रभावित होता है और उसी के अनुसार अनुकूलित होना चाहिए।

उपयोगिता की अवधि में भी पाठ की पंक्तियाँ लगभग ११ से १४ शब्द चौड़ी होनी चाहिए (अधिक हो सकती हैं यदि आप लाइन-ऊँचाई को अनुकूलित करते हैं) तो सभी वेबसाइट द्रव डिजाइन को संभाल नहीं सकती हैं।

यदि आप अपने आगंतुकों को यह महसूस नहीं करना चाहते हैं कि सामग्री ज़ोन के बाहर का पृष्ठ खाली नहीं है, तो आप बनावट / रंग स्ट्रिप्स जोड़ सकते हैं, जो उपयोगकर्ता के स्क्रीन के आकार के अनुकूल हो। (जैसे http://www.cnn.com/ जो केवल हेडर पर लागू होता है, लेकिन आप इसे पूरे पेज के लिए बना सकते हैं)


0

पोर्ट्रेट मोड में देखने के लिए अधिकांश वेबसाइटों को क्यों अनुकूलित किया गया है?

जब हम परिदृश्य के रूप में अच्छी तरह से व्यवहार्य विकल्प है तो हम पोर्ट्रेट मोड में पेपर क्यों प्रिंट करते हैं?

जैसा कि कई लोगों ने कहा है, दो या तीन लंबी लाइनों को पढ़ने की तुलना में बड़ी संख्या में छोटी लाइनों को पढ़ना आसान है।

इसके अलावा, यदि आपको 1280 * x पिक्सेल सामग्री के साथ भरने हैं, तो वेबपेज को बंद कर दिया जाएगा और किसी को पता नहीं चलेगा कि क्या पता होना चाहिए। वेबपेज को एक विशिष्ट कार्य करना चाहिए, न कि हर कार्य।

वेब 2.0 ट्रेंड्स हमें एक पेज पर कम जानकारी डालना और कॉल-टू-एक्शन को स्पष्ट और संक्षिप्त बनाना सिखाते हैं। यह आमतौर पर स्वीकृत डिज़ाइन दर्शन आपके सुझाव के ठीक विपरीत है।

1024 संकल्प के लिए विकसित करने के कई कारण हैं, लेकिन मुझे लगता है कि अव्यवस्था का कारक अधिक महत्वपूर्ण है।


0

मैंने देखा है कि आप विंडोज 7 की तरह दिखने वाले का उपयोग कर रहे हैं, इसलिए उत्तर है: Win+

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

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

इसके अतिरिक्त, सिर्फ इसलिए कि आपके पास एक अच्छा मॉनिटर है इसका मतलब यह नहीं है कि अधिकांश लोगों के पास एक अच्छा चौड़ी स्क्रीन मॉनिटर है। Google के ब्राउज़र पर लेआउट आकारों की जाँच करने के लिए एक महान संसाधन है


-2

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


2
-1 क्योंकि a) यह एक व्यक्तिगत राय है, b) इसे तथ्य के रूप में कहा गया है, और c) आप कोई स्रोत नहीं रखते हैं। यदि आप कोई दावा करने जा रहे हैं, तो उसे तथ्यों के साथ वापस कर दें। अंत में, कोई भी प्रोग्रामर जो मुझे पता नहीं है (और 20+ वर्षों से प्रोग्रामर रहा है, मुझे बहुत पता है) कभी भी एक मॉनिटर सेटअप है जो पोर्ट्रेट मोड में है। लैंडस्केप (और एक पंक्ति में / या कई मॉनिटर) आपको एक संपादक या आईडीई दोनों को खोलने की अनुमति देता है, साथ ही एक ब्राउज़र, या एक दो-फलक अंतर / मर्ज टूल, आदि
ब्रायन ओकले
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.