अनुशंसित वेबसाइट रिज़ॉल्यूशन (चौड़ाई और ऊंचाई)? [बन्द है]

Question

क्या आम वेबसाइट रिज़ॉल्यूशन पर कोई मानक है?

हम नए मॉनिटर को लक्षित कर रहे हैं, शायद कम से कम 1280px चौड़े, लेकिन ऊंचाई भिन्न हो सकती है, और प्रत्येक ब्राउज़र में अलग-अलग टूलबार हाइट भी हो सकते हैं।

क्या इसमें किसी तरह का मानक है?

Comments

इसे "रचनात्मक नहीं" के रूप में क्यों बंद किया गया था? लगता है कि एक वैध प्रश्न पूछने के लिए, और विशेष रूप से उच्चतम मूल्यांकन और स्वीकृत उत्तर मूल्यवान जानकारी प्रदान करते हैं।

— डेमन

मैं डेमन से सहमत हूं। यह एक वैध प्रश्न था और बहुत से लोग इसका उत्तर सुनना चाहेंगे। मुझे लगता है कि एसओ सवालों को बंद करने में अति उत्साही हो गया है।

— वेबवॉच

स्टैक ओवरफ्लो निरपेक्ष क्यू एंड ए के लिए बेहतर अनुकूल है, अर्थात्, एक ठोस जवाब देने वाले तकनीकी सामान, न कि उन प्रश्नों पर जहां विभिन्न राय मान्य हो सकती हैं या जहां सही उत्तर उपयोग मामले / परियोजना पर सख्ती से निर्भर करता है ..

— जुआन

stackoverflow साइट की चौड़ाई लगभग 1090px.odd है!

— नेकवेटी

एक उपयोगी संसाधन: स्टैक एक्सचेंज आगंतुकों के लिए स्क्रीन चौड़ाई लोकप्रियता का यह स्प्रेडशीट , जो कि मेटा स्टैक एक्सचेंज पर "हम सभी साइटों पर 300px पर साइडबार की चौड़ाई का मानकीकरण कर रहे हैं" पर इस पोस्ट में जोड़ा गया था ।

— रोरी ओ'केन

Answer 1

इन दिनों सलाह है:

1024x768 के लिए ऑप्टिमाइज़ करें । अधिकांश साइटों के लिए यह अधिकांश आगंतुकों को कवर करेगा। अधिकांश लॉग दिखाते हैं कि आपकी 92-99% यात्रा 1024 से अधिक चौड़ी होगी। जबकि 1280 तेजी से आम है, अभी भी बहुत सारे 1024 हैं और कुछ नीचे हैं। इसके लिए अनुकूलन करें लेकिन दूसरों की उपेक्षा न करें।

1024 = ~ 960 । स्क्रॉलबार, विंडो किनारों आदि के लिए लेखांकन का मतलब 1024x768 स्क्रीन की वास्तविक चौड़ाई 960 पिक्सेल है । कुछ उपकरण थोड़े छोटे आकार पर आधारित होते हैं , लगभग 940 । यह ट्विटर बूटस्ट्रैप में डिफॉल्ट कंटेनर की चौड़ाई है ।

एक आकार के लिए डिज़ाइन न करें । विंडो का आकार भिन्न होता है। मान लें कि स्क्रीन का आकार खिड़कियों के आकार के बराबर नहीं है। एक उचित न्यूनतम के लिए डिजाइन, लेकिन यह समायोजित करेगा।

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

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

ब्राउज़र प्रदर्शन जानकारी लॉग करें । आप इस बारे में वास्तविक संख्या प्राप्त कर सकते हैं। मुझे यहाँ और यहाँ और यहाँ कुछ संख्याएँ मिलीं । आप समान डेटा एकत्र करने के लिए अपनी साइट पर भी धांधली कर सकते हैं।

उपयोगकर्ता स्क्रॉल करेगा ताकि ऊंचाई के बारे में अधिक चिंता न करें । पुराना तर्क यह था कि उपयोगकर्ता स्क्रॉल नहीं करेंगे और कुछ भी महत्वपूर्ण "तह के ऊपर" होना चाहिए। यह वर्षों पहले पलट गया था। उपयोगकर्ता बहुत स्क्रॉल करते हैं ।

स्क्रीन रिज़ॉल्यूशन के बारे में अधिक जानकारी:

• स्क्रीन रिज़ॉल्यूशन और पेज लेआउट
• वेबसाइट डिजाइन करने के लिए सर्वश्रेष्ठ स्क्रीन रिज़ॉल्यूशन
• ब्राउज़र आकार के लिए डिज़ाइन - स्क्रीन आकार नहीं

उत्तरदायी डिजाइन के बारे में अधिक जानकारी:

• उत्तरदायी वेब डिज़ाइन (2010, 25 मई), एथन मार्कोटे, एक सूची इसके अलावा।
• विकिपीडिया पर उत्तरदायी वेब डिज़ाइन
• मल्टी-डिवाइस लेआउट पैटर्न (2012, मार्च 14) ल्यूक व्रॉब्ल्वस्की। अनुकूलनीय मल्टी-डिवाइस स्क्रीन लेआउट के लिए सबसे लोकप्रिय पैटर्न कैटलॉग।

उत्तरदायी डिजाइन और तरल लेआउट के लिए उपकरण और फ्रंट-एंड फ्रेमवर्क:

• ट्विटर बूटस्ट्रैप
• Zurb Foundation
• उत्तरदायी वेब डिजाइन के लिए 50 शानदार उपकरण (2012, 24 अप्रैल) डेनिस जैकब्स और पीटर गैस्टन

Comments

आप जांचना चाह सकते हैं: 960.gs एक ग्रिड में 960 पिक्सल का उपयोग कर डिजाइन के बारे में एक पूरी साइट। तकनीक को "960 ग्रिड डिजाइन" कहा जाता है।

— बेर्गग्रीनडाक

ऐसा लगता है कि SO 960 का उपयोग करता है जिसमें कुछ भी तरल नहीं है। बस FYI करें

— कोलोप्लेक्स

आपकी साइट पर 800px पर क्षैतिज स्क्रॉलिंग नहीं होनी चाहिए। शायद यह सबसे अच्छा नहीं लगेगा, लेकिन सब कुछ अभी भी फिट होना चाहिए।

— पाल्सीम

इस पर किसी भी अद्यतन? यह उत्तर अब कई साल पुराना है।

— क्रैशहोट

Answer 2

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

कृत्रिम सीमाओं जैसे न्यूनतम स्क्रीन आकार में रखना आपके बाजार को सीमित कर देगा।

ऐसा कहने के बाद, मेरा मानना ​​है कि प्रत्येक डेस्कटॉप को 1024x768 प्रदर्शित करने में सक्षम होना चाहिए। लेकिन iPhones या अन्य स्क्रीन-चुनौती वाले उपकरणों पर चलने वाले ब्राउज़र के बारे में, या उन लोगों के बारे में भी जो ब्राउज़र के लिए अपने संपूर्ण डेस्कटॉप का उपयोग नहीं करते हैं?

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

Comments

रुको, 1024x768 पूरे स्क्रीन का आकार हो सकता है, लेकिन यह अक्सर सिस्टम बार, विंडो सजावट, मेनू बार, टूल बार, टैब बार और संभावित स्क्रॉल बार और एक नेविगेशन टैब द्वारा कम किया जाता है।

— श्वेन्ते

बुरी सलाह। किसने कहा कि HTML लेआउट के लिए नहीं है? लिक्विड लेआउट 90 के दशक के हैं, जहां रिज़ॉल्यूशन में अंतर अपेक्षाकृत कम था। 2560x1600 स्क्रीन पर 10pt फ़ॉन्ट पर कुछ पाठों को बिना किसी निर्धारित चौड़ाई सीमा के पढ़ने का प्रयास करें। आप बहुत जल्द उन तरल लेआउट से नफरत करने लगेंगे।

— राउटर वैन निफ्ट्रिक

@ पैक्स: मेरा कहना था कि एक तरल लेआउट के साथ आना बहुत मुश्किल है जो बहुत कम और बहुत उच्च संकल्प दोनों पर अच्छा काम करता है। मैं कभी भी एक वेबसाइट पर नहीं आया हूं जो मेरे पीडीए पर और एक ही HTML के साथ उच्च-रिज़ॉल्यूशन मॉनिटर पर अच्छी तरह से काम करती है। सबसे अच्छे लोगों को विशेष रूप से लक्षित किया जाता है।

— राउटर वैन निफ्ट्रिक

सहमत, तरल लेआउट सभी के लिए बेहतर काम करते हैं। बड़ी स्क्रीन का बहुत बड़ा होना एक गैर-मुद्दा है क्योंकि ये उपयोगकर्ता अपने ब्राउज़र को आकार दे सकते हैं जो भी उन्हें सूट करता है।

— नेलटाउनडाउन

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

— रिचर्ड

Answer 3

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

यहाँ एक और बात पर भी विचार करना है: हर कोई अपने ब्राउज़र को फुल स्क्रीन पर नहीं चलाता है (मैं नहीं)। तो यह विचार कि यदि एक विशिष्ट (और बड़े) "स्क्रीन आकार" के लिए ओके डिजाइन करना है तो वास्तव में कई कारणों से काम नहीं करता है।

12/15/2010 को अपडेट करें: जब मैंने पहली बार इस प्रश्न का उत्तर दिया था, तो 800 पिक्सल एक उपयुक्त उत्तर था। हालाँकि, इस बिंदु पर, मैं 1024 पिक्सेल चौड़े (या किसी और को इंगित करने वाले 960) की सिफारिश करूँगा। प्रौद्योगिकी मार्च पर ...

Comments

मैं इस कथन का विस्तार शायद करने के लिए कहूं कि बहु-दिशात्मक स्क्रॉलिंग एक संभावित संक्रमण है। अगर सही ढंग से किया जाए तो होरी-स्क्रॉल बढ़िया हो सकता है। deanoakley.com द

— html/

हमें कीबोर्ड पर दो नई चाबियां चाहिए, "पेज लेफ्ट" और "पेज राइट"।

— paxdiablo

@TypeOneError, न तो ब्राउज़ करना अच्छा लगता है, हालांकि, यह स्वाभाविक नहीं है।

— UnwwnTech

@TypeOneError, पोर्टफोलियो साइट ने इसका उपयोग केवल "नीरसता" के कारण अच्छे प्रभाव के लिए किया और डिजाइन कितना साफ था। हालाँकि, मैं Unkwntech से सहमत हूँ कि यह सही नहीं लगता। इस तथ्य का उल्लेख नहीं करने के लिए कि अधिकांश उपयोगकर्ताओं के पास एक ऊर्ध्वाधर स्क्रॉल व्हील होगा और एक क्षैतिज एक नहीं होगा। यह अकेला क्षैतिज स्क्रॉलिंग को एक बुरा विचार बनाता है।

— एरिक

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

— बंदरपुतबटन

Answer 4

2008 में ब्राउज़र प्रदर्शन के आंकड़े यहां दिए गए हैं: http://www.w3schools.com/browsers/browsers_display.asp

लगभग 50% उपयोगकर्ता अभी भी 1024x768 का उपयोग कर रहे हैं। यदि आप चाहते हैं कि आपकी साइट उच्च प्रस्तावों में अच्छी दिखे तो लचीले लेआउट का उपयोग करें।

Comments

यह याद रखना सर्वोत्तम है कि w3schools आँकड़े अपनी साइट पर आने वाले लोगों के लिए हैं। यह ज्यादातर वेब पेज विकसित करने वाले लोग होंगे, जो आबादी का एक उचित क्रॉस सेक्शन नहीं है। उनके ब्राउज़र आँकड़ों को देखते हुए, फ़ायरफ़ॉक्स 44% है जबकि IE 46% है। शायद सामान्य वेब को नापने के लिए एक अच्छा नमूना नहीं है।

— किब्बी

Answer 5

वास्तव में चौड़ाई के लिए उद्योग मानक हैं (अच्छी तरह से याहू के अनुसार कम से कम)। उनकी समर्थित चौड़ाई 750, 950, 974, 100% है

उनके पूर्वनिर्धारित ग्रिड (कॉलम लेआउट) के लिए इन चौड़ाई के फायदे हैं जो विज्ञापनों के लिए मानक आयामों के साथ अच्छी तरह से काम करते हैं यदि आप किसी को शामिल करने के लिए थे।

दिलचस्प बात देखने लायक भी है।

YUI बेस देखें

Comments

क्या आप उस बात का लिंक जोड़ सकते हैं जिसका आपने उल्लेख किया है।

— श्री कादिमीसेट्टी १६'१२ को १:५०

Answer 6

यहाँ एक भयानक उपकरण है: Google लैब्स ब्राउज़र आकार

Comments

लिंक मर चुका है। यह अब Google Analytics का हिस्सा है, जो केवल ऑडियंस> टेक्नोलॉजी> ब्राउज़र और ओएस के तहत लॉगिन के साथ सुलभ है, "स्क्रीन रिज़ॉल्यूशन" चुनें।

— डेव लीपमैन

Answer 7

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

आपके कम से कम 1280 के चौड़े हिस्से पर एक नोट, मेरा कहना है कि यह ओवरबोर्ड है। अधिकांश 17 और यहां तक ​​कि मेरे 19 इंच के गैर वाइडस्क्रीन केवल 1280x1024 के अधिकतम रिज़ॉल्यूशन का समर्थन करते हैं। और अभी जो 14 इंच की वाइडस्क्रीन लैपटॉप मैं टाइप कर रहा हूं वह केवल 1280 पिक्सल के पार है। मैं कहूंगा कि आपके लिए सबसे बड़ा न्यूनतम संकल्प 1024x768 होना चाहिए, लेकिन 800x600 आदर्श होगा।

Answer 8

अब तक के सभी उत्तर डेस्कटॉप मॉनिटर के बारे में बात करते हैं, लेकिन मैं अपने iPhone पर स्टैक ओवरफ्लो का उपयोग कर रहा हूं और मुझे नहीं लगता कि आपको 1024 या 1280 क्षैतिज पिक्सल को लक्षित करके किसी भी मोबाइल प्लेटफॉर्म को बाहर करना चाहिए। अपने पृष्ठ को चिह्नित करें ताकि ब्राउज़र जानता है कि इसका क्या मतलब है और इसे प्रयोग करने योग्य बनाने के लिए, स्क्रीन पाठकों और अन्य किट पर भी मुफ्त में आएगा, जिसके बारे में आपने सोचा था।

Comments

ब्रावो, जब से आप मेरे साथ सहमत हैं :-) हालांकि इसके बारे में दो दिमाग में हैं क्योंकि आपको मुझसे अधिक वोट मिल सकते हैं :-( ओह ओह, ठीक है, c'est la vie।

— paxdiablo

IPhone कीबोर्ड के साथ इस प्रतिक्रिया को स्पष्ट रूप से टाइप करने के लिए +1। ;) मेरी वेबसाइट 1024 में iphone की सफारी, fwiw के साथ बहुत अच्छी लगती है।

— टाइपोनियरर

IPhone के साथ मुझे लगता है कि यह निर्भर करता है कि आप इसे कैसे पकड़ते हैं, ऊर्ध्वाधर या क्षैतिज रूप से स्पष्ट रूप से आयाम अलग होंगे

— UnkwnTech

@TypeOneError ने न केवल मुझे iPhone पर टाइप किया, मैं पब से भी वापस चल रहा था; ;-)

@Pax नहीं, जाहिरा तौर पर मैं नहीं होगा। ;-)

Answer 9

किसी भी विशिष्ट रिज़ॉल्यूशन को लक्षित नहीं करना, बल्कि कई अलग-अलग रिज़ॉल्यूशन को आसानी से अनुकूलित करना सबसे अच्छा है।

Answer 10

हमारे द्वारा उपयोग किए जाने वाले दिशा-निर्देश, जो कि काफी व्यापक रूप से उपयोग किए गए लगते हैं और उन आंकड़ों द्वारा समर्थित होते हैं, जो हमें Google Analytics से प्राप्त होते हैं, साइट को डिज़ाइन करने के लिए हैं, ताकि यह 1024 पिक्सेल चौड़ा और 768 पिक्सेल ऊंचा (1024x768) स्क्रीन पर काम करे और 1280x800 सबसे आम संकल्प हैं जो हम देखते हैं, कम से कम 70% सभी यातायात के लिए लेखांकन)।

यही कारण है कि आपको कई साइटें (यह एक शामिल) दिखाई देती हैं जो एक केंद्रीय स्तंभ का उपयोग करती हैं जो लगभग 1000 पिक्सल चौड़ा होता है और शीर्ष 500-600 पिक्सल में सबसे महत्वपूर्ण सामग्री के साथ होता है इसलिए यह इस आकार को स्क्रीन में देखे जाने पर गुना से ऊपर होता है।

लगभग 1680 पिक्सेल चौड़ाई में स्क्रीन आकार पर 1000 पिक्सेल चौड़े लेआउट का उपयोग करना काफी अच्छा काम करता है (आमतौर पर लैपटॉप पर आपको जितना बड़ा दिखाई देगा, बड़े 17 "को छोड़कर) लेकिन 1920 पिक्सेल पर थोड़ा मूर्ख दिखना शुरू करें व्यापक वाले (उच्च अंत कंप्यूटर, आमतौर पर वर्कस्टेशन), हालांकि ये बहुत उच्च संकल्प सामान्य इंटरनेट पर ट्रैफ़िक के एक बड़े प्रतिशत के लिए जिम्मेदार नहीं हैं - 2% या उससे कम (दूसरी ओर, यदि आपके पास इस साइट जैसे विशेषज्ञ दर्शक हैं उच्च संकल्प के साथ आंकड़ा कुछ अधिक हो सकता है)।

Comments

यदि आप नीचे मतदान कर रहे हैं, तो कृपया टिप्पणी जोड़ें कि क्यों।

— ग्रेग बीच

Answer 11

हालाँकि, 1024 तक की सबसे अच्छी चौड़ाई आपको विभिन्न ब्राउज़र सेटिंग्स (नेविगेशन टूलबार, बुकमार्क टूलबार, स्टेटस टूलबार, आदि) और टास्कबार सेटिंग्स के लिए खाते के लिए ऊंचाई समायोजित करनी होगी। यह जल्दी से 768 को लगभग 550 तक गिरा देगा।

Answer 12

आपके लक्ष्य ब्राउज़र का आकार जो भी हो, सुनिश्चित करें कि ब्राउज़र टूलबार, स्टेटस बार और ऊपर दिए गए बार को स्क्रॉल करें। इंटरनेट एक्सप्लोरर (IME) में अक्सर टूलबार और स्टेटस बार में 100px से अधिक खड़ी जगह होती है। आमतौर पर, अगर मैं 1024 x 768 की शूटिंग कर रहा हूं, तो मैं सुरक्षित रहने के लिए लगभग 960 - 980px चौड़ी और 600px ऊंची एक डिज़ाइन बनाने की कोशिश करूंगा। इस तरह से यदि आवश्यक हो और कुछ अच्छा सफेद स्थान (यदि डिजाइन की आवश्यकता है) स्क्रॉलिंग के साथ। मैं ऐसे उदाहरणों के लिए YUI ग्रिड की सलाह देता हूं जहां आपको विशिष्ट आकारों को लक्षित करने की आवश्यकता होती है:

YUI ग्रिड

Answer 13

मुझे न केवल चौड़ाई के बारे में डिजाइनरों से बहुत सारे सवाल मिलते हैं, बल्कि 'सब कुछ ऊपर से रखने के लिए' का उपयोग करने के लिए क्या ऊंचाई है। यहाँ एक उत्तर मैंने हाल ही में दिया है -

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

(आप हमेशा चाहते हैं कि प्रति पंक्ति 65-80 वर्ण हों, लगभग 1.15 की एक लाइन-ऊँचाई के साथ)। यह पाठ के लिए इष्टतम कॉलम चौड़ाई है, और यह बहुत व्यापक या संकीर्ण स्तंभों की तुलना में बहुत तेज और सुखद साबित हुआ है)

जहां तक ​​'फोल्ड से ऊपर' की बात है, मुझे सिर्फ वेब पर इस तरह की किसी भी अवधारणा का उपयोग करने के खिलाफ सावधानी बरतनी है। क्षैतिज स्क्रॉलिंग को टाला जा सकता है और इससे बचना चाहिए, लेकिन ऊर्ध्वाधर स्क्रॉलिंग एक ऐसी चीज है जिससे आप 100% बच नहीं सकते हैं। मैं आपको केवल इतना बता सकता हूं कि 1024x768 डिस्प्ले (कम से कम 95% उपयोगकर्ताओं के पास यह या उच्चतर है) आपको एक निश्चित 600px हाई ब्लॉक के साथ ठीक होना चाहिए। लेकिन वहाँ कई अलग-अलग प्रदर्शन प्रारूप हैं, ब्राउज़र क्रोम बहुत सारे कमरे ले सकता है, और हर कोई ब्राउज़र विंडो को अधिकतम नहीं करता है।

यहाँ कुछ अन्य साइटें हैं जो कहती हैं कि कमोबेश यही बात है - लेकिन हर किसी के लिए 'गुना से ऊपर' पूरी तरह से प्राप्त करने की योजना कठिन है क्योंकि तब आपके पास वास्तविक आंकड़ों के अनुसार केवल 400px या तो हो सकता है।

और अंत में एक अच्छा लंबा लेख जो महान विवरण में जाता है (मैं अधिक पोस्ट करूँगा लेकिन एसओ का कहना है कि मैं बहुत नीओबी हूं ) - ब्राउज़र साइज़ के लिए कैसे डिज़ाइन किया जाए - baekdal.com

Answer 14

मैं व्यक्तिगत रूप से हमेशा 1000px की अधिकतम चौड़ाई से जुड़ा हुआ हूं, जो पृष्ठ के मध्य में (मार्जिन बाएं / दाएं: ऑटो के माध्यम से) केंद्रित है।

यदि आप 1024x768 से कम पर चल रहे हैं, तो यह अपग्रेड करने का समय है। गंभीरता से। यह लगभग 2010 है। आप 1280x1024 के मूल निवासी के साथ मोलभाव कर सकते हैं।

Comments

इसे जोड़ने के लिए, मैंने सिर्फ 23 इंच की वाइडस्क्रीन 1080p (1920x1080) एलसीडी स्क्रीन $ 150 इस ब्लैक फ्राइड के लिए खरीदी थी।

— डरपोक

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

— BerggreenDK

Answer 15

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

Answer 16

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

मैं साइट के लिए अलग-अलग सीएसएस लेआउट बनाना चाहता हूं और उन्हें उपयोगकर्ता के संकल्प के आधार पर लागू करना होगा, या यदि यह संभव नहीं है (अभी तक खुदाई नहीं की गई है), तो इसे एक विकल्प के रूप में चुनें।

Answer 17

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

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

देखें, हमने अभी क्या किया था शैलियों के 3 सेट निर्दिष्ट किए गए थे जो विभिन्न प्रस्तावों पर प्रस्तुत करते हैं। हमारे उदाहरण के मामले में, यदि किसी स्क्रीन का रिज़ॉल्यूशन 800px से बड़ा है, तो 1024 के लिए CSS के बजाय निष्पादित किया जाएगा। इसी तरह, अगर सामग्री को प्रदर्शित करने वाली स्क्रीन 1224px थी, तो 1280 को 1224 से बड़ा किया जाएगा, जो 1024 से बड़ा है। मैं जिस साइट पर काम कर रहा हूं, वह सभी प्रस्तावों 800x600 से 1920x1080 तक काम करती है। एक और बात का ध्यान रखें कि एक ही रिज़ॉल्यूशन वाले सभी मॉनिटरों का आकार एक जैसा नहीं होता है। आप 15.4 लैपटॉप एक साथ रख सकते हैं, जबकि दोनों एक जैसे दिखते हैं, दोनों में काफी अलग-अलग रिज़ॉल्यूशन हो सकते हैं, क्योंकि सभी पिक्सेल अलग-अलग एलसीडी स्क्रीन पर एक ही आकार के नहीं होते हैं। तो, मीडिया प्रश्नों का उपयोग करें, और उच्च संकल्प के साथ एक लैपटॉप स्क्रीन के साथ अपनी वेबसाइट बनाना शुरू करें, विशेष रूप से 1280+। इसके अलावा, अपने लैपटॉप पर एक अलग रिज़ॉल्यूशन का उपयोग करके प्रत्येक मीडिया क्वेरी बनाएं। आप 800 में 600x600 को समायोजित करने के लिए विंडोज में अपनी रिज़ॉल्यूशन सेटिंग्स का उपयोग कर सकते हैं और उस रेस पर एक मीडिया क्वेरी बना सकते हैं, और फिर 1024x768 पर स्विच कर सकते हैं और उस रेस में एक और मीडिया क्वेरी बना सकते हैं। मैं आगे और आगे बढ़ सकता था, लेकिन मुझे लगता है कि आप लोगों को यह बात समझनी चाहिए।

अद्यतन: यहाँ मीडिया क्वेरीज़ का उपयोग करने के लिए एक लिंक है जो मीडिया क्वेरिज़ के साथ मोबाइल डिवाइसेस के लिए इनोवेटिव वेब डिज़ाइन को और अधिक समझाने में मदद करेगा

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

साइटों ट्यूटोरियल का पालन करें और आप एक वेब पेज बना सकते हैं जो हर चीज और किसी भी चीज़ पर काम करता है!

Answer 18

न्यूनतम चौड़ाई के रूप में 1024 को लक्षित करने का प्रयास करें। कोशिश करें कि यह 800 पर कैसा दिखता है, लेकिन उस काम को करने में बहुत परेशान न करें। 800x600 पर लगभग कोई भी प्रमुख वेबसाइट काम नहीं करने वाली है, इसलिए उस संकल्प पर काम करने वाले लोगों को वैसे भी हर समय समस्या होने वाली है।

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

Comments

मैं पूरी तरह से दोनों बिंदुओं से सहमत हूं। मैं लगभग 960 चौड़े (एक 1024x768 स्क्रीन के लिए) जाता हूं। वेब डिज़ाइनरों को यह भी सुनिश्चित करना चाहिए कि लाइन की लंबाई बहुत लंबी नहीं है, अन्यथा यह वास्तव में पढ़ना मुश्किल है।

— फिलिप मॉर्टन

Answer 19

मैं 1024 पिक्सेल मॉनिटर का लक्ष्य रखता हूं (लेकिन उस स्थान का 100% उपयोग नहीं करता)। मैंने 800x600 लोगों को छोड़ दिया है। मैं इसके बजाय पुराने हार्डवेयर के साथ कुछ को दंडित कर सकता हूं, अगर उन्हें जरूरत पड़ती है, तो अंतरिक्ष को बर्बाद करके नए उपकरणों के साथ सभी को दंडित किया जाएगा।

मुझे लगता है कि यह आपके दर्शकों और आप की प्रकृति पर निर्भर करता है।

Answer 20

अंततः, यह मार्कअप के लिए मानकों या सर्वोत्तम प्रथाओं का मामला नहीं है, बल्कि अपने दर्शकों को जानना और यह सुनिश्चित करना है कि आपकी वेबसाइट वही करती है जो आप करना चाहते हैं।

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

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

मैं व्यक्तिगत रूप से देखने के लिए डिज़ाइन करना चाहूँगा ~ 960 पिक्सेल और ऊपर, आप हमेशा ऐसा नहीं कर सकते। तो कुछ मामलों में, व्यूपोर्ट के लिए डिज़ाइन करना अभी भी सबसे सुरक्षित है <= 760 पिक्सेल या तो (800 पिक्सेल चौड़ा प्रदर्शन, अधिकतम) - हालांकि हम आखिरकार एक बार और सभी के लिए इस सीमा को टॉस कर सकते हैं - डेस्कटॉप के लिए कम से कम - बहुत तेजी से आ रहा है।

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

प्राथमिक नेविगेशन के लिए Ditto।

अंत में, अपने लेआउट का परीक्षण उन सभी चीजों में करें, जिन पर आप अपना हाथ रख सकते हैं। बड़े। छोटे। डेस्कटॉप। हाथ में। काम करता है। कोई विकल्प नहीं है।

Answer 21

मैंने अभी उन सभी क्लाइंट साइट्स से स्क्रीन रिज़ॉल्यूशन का नमूना लिया है, जिन तक मेरी पहुंच है, इसमें 20 से अधिक साइटें शामिल हैं, फिर 8 उद्योग यहां दिए गए हैं:
alt text http://unkwndesign.com/so/percentScreenResolutions.png
इसके आधार पर मैं कहूंगा कि यह 1024x768 पर अच्छा लगता है क्योंकि लंबे शॉट के बाद यहां बहुमत है। इसके अलावा ऊँचाई के बारे में चिंता न करें, हालाँकि अधिकांश पृष्ठों को अपने डिफ़ॉल्ट फ़ॉन्ट आकार में अधिक से अधिक 1-2 मुद्रित पृष्ठ बनाने से बचने की कोशिश करें, अधिकांश लोग एक पेज को लंबे समय तक नहीं पढ़ते हैं, और यदि कोई उपयोगकर्ता टूलबार स्थापित करता है जो ऊपर ले जाता है ऊर्ध्वाधर स्थान, मेरी व्यक्तिगत प्राथमिकता यह है कि यह उनकी समस्या है, लेकिन मुझे नहीं लगता कि यह एक सौदे से बड़ा है।

* ध्यान दें कि गोलाई के कारण प्रतिशत 100.05% तक बढ़ जाता है।

Answer 22

ध्यान रखें कि रिज़ॉल्यूशन जितना अधिक होगा, इंटरनेट ब्राउज़र की संभावना उतनी ही कम होगी।

और कुछ ब्राउज़र में पार्श्व बार भी हैं।

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

ऊंचाई वास्तव में एक समस्या नहीं है।

Answer 23

sbeam ने कहा कि 'आप हमेशा चाहते हैं कि प्रति पंक्ति 65-80 वर्ण हों'। वह सत्य नहीं है। उदाहरण के लिए, विकिपीडिया में प्रति पंक्ति 180 वर्ण हो सकते हैं। या यह एक विशेष वेबसाइट होने के लिए थी?