इन दिनों के लिए डिज़ाइन की जाने वाली 'सबसे आम' चौड़ाई और ऊँचाई क्या है?


9

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

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

'सबसे आम' चौड़ाई और ऊंचाई क्या है कि वेबपेजों को हाल ही में डिजाइन किया गया है। अगर मैं अपने सहकर्मियों को बताऊं कि मैं उनके चित्र बनाने के लिए उनके अनुपात का एक विशिष्ट अर्थ क्यों चुना, तो यह बहुत उपयोगी होगा।

कृपया ध्यान दें कि मैंने यह प्रश्न कैसे पूछा:

  • मैं सबसे सामान्य स्क्रीन रिज़ॉल्यूशन के लिए नहीं कह रहा हूं।
  • मैं सबसे सामान्य ब्राउज़रों के लिए नहीं कह रहा हूं।

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

जवाबों:


9

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

चौड़ाई के लिए 960 पिक्सेल चौड़ा निश्चित चौड़ाई के डिजाइन के लिए "मानक" वर्तमान लगता है। यह काफी आम है कि एक वेबसाइट को उस चौड़ाई पर लेआउट की खोज के लिए समर्पित किया गया है

(मुझे लगता है कि आप किसी को भी एक द्रव डिजाइन का उपयोग करने के बारे में शेख़ी नहीं करना चाहते हैं?)


3

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

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

कुछ उदाहरणों के लिए W3.org पर इस पृष्ठ को देखें - http://www.w3.org/TR/css3-mediaqueries/

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


1

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

दिन के अंत में अपने बड़े पैमाने पर जनसांख्यिकी का पता लगाएं और आखिरकार उनके लिए क्या काम करेंगे।

ध्यान रखने योग्य दो महत्वपूर्ण बातें ...

1) यदि आपका डिज़ाइन 900+ px के साथ काम कर सकता है, तो इसे 1200+ px तक फैलाने का कोई कारण नहीं है, भले ही आपका जनसांख्यिकी इसे वहन कर सके।

2) सुनिश्चित करें कि आपके पास उचित संरचना है, जो उन उर्स को समायोजित कर सकती है जिनके पास आपका लक्ष्य संकल्प नहीं हो सकता है।


मैं बिंदु # 2 से असहमत हूं। 1366px चौड़े डिस्प्ले के साथ, यकीनन पिछले कुछ सालों में बिकने वाले अधिकांश लैपटॉप पर सबसे आम चौड़ाई, आप एक-दूसरे के बगल में दो 900px विंडोज़ फिट नहीं कर सकते हैं और एक ही समय में दोनों को देख सकते हैं। यदि आपके पास केवल एक एकल 900px लेआउट है, तो आप व्हाट्सएप के साथ अपने क्षैतिज स्थान का 34% भाग बर्बाद कर रहे हैं। उस स्थिति में, 1200px एक आदर्श चौड़ाई होगी। तो हाँ, इसे फैलाने का एक कारण है।
न्हिंकल

@ यानिंकल: मुझे नहीं लगता कि आप वास्तव में बिंदु # 2. पढ़ते हैं। आपकी प्रतिक्रिया क्या है जो एक दूसरे के बगल में दो 900px विंडो फिटिंग के साथ है? इसके अलावा, जॉन आर क्या पूछ रहे हैं, यह समझने के लिए कृपया प्रश्न को ठीक से पढ़ें। यह चरम उपयोग के मामलों के बारे में चर्चा नहीं है जैसे कि आप एक दूसरे के बगल में 2 900px खिड़कियां रखना चाहते हैं या मेरे मामले में एक डिजाइन करने के लिए 1600px मॉनिटर (उनमें से 2) चाहते हैं। बल्कि यह उपयोगकर्ताओं के विशाल बहुमत के बारे में है जो आप या मेरे नहीं हैं ..
आदिल

मेरी क्षमा याचना, मेरा मतलब आपके १ अंक का उत्तर देना था, आपके २ का नहीं। मुझे खेद है कि अगर इससे कोई भ्रम हुआ। मेरी बात अब भी कायम है: अधिकांश उपयोगकर्ताओं के पास ऐसे डिस्प्ले हैं जो पर्याप्त विस्तृत हैं कि 900px लेआउट उनके बहुत सारे स्थान को बर्बाद कर रहा है। मैं आपके उत्तर में कही गई अधिकांश बातों से सहमत हूं, लेकिन आपकी 1 "ध्यान रखने वाली बात" वास्तव में सही नहीं है। यदि आपकी जनसांख्यिकी 1200px खर्च कर सकती है, तो आपको उन 1200 px का उपयोग करना चाहिए, अन्यथा आप उनके 300 पिक्सेल बर्बाद कर रहे हैं।
11:02

@ हिंकल: आप मेरी बात को गलत बता रहे हैं # 1। अगर मेरा डिज़ाइन 900px के भीतर साइट को आसानी से दिखा सकता है तो मैं इसे 1200px बनाने के लिए क्यों बढ़ाऊंगा? इसके अलावा, 13% उपयोगकर्ताओं के पास अभी भी 1024x768 ग्रांटेड्स की एक स्क्रीन रिज़ॉल्यूशन है, जो कि एक छोटी संख्या है, लेकिन इसकी बड़ी उन्हें बेचैनी और ढीली बिक्री, विज्ञापन क्लिक, लीड या जो भी आपका व्यवसाय मॉडल है .... (डेटा से उद्धृत: w3schools) .com / browser / browser_display.asp )
आदिल

मुझे आपका बिंदु पता है। मेरा कहना है कि यदि आपके उपयोगकर्ताओं द्वारा बड़ी और बड़ी स्क्रीन के लिए 1200px चौड़े लेआउट का उपयोग किया जाता है, तो आपको चाहिए। उदाहरण के लिए, स्टैक एक्सचेंज साइटें लगभग 1000px चौड़ी के लिए अनुकूलित हैं, लेकिन कई उपयोगकर्ताओं ने पोस्ट स्रोत और मार्कडाउन पूर्वावलोकन साइड-बाय-साइड देखने के लिए एक विकल्प का अनुरोध किया है, जो अधिक क्षैतिज स्थान का उपयोग करेगा। w3schools वेब उपयोगकर्ताओं का प्रतिनिधि नमूना नहीं है, लेकिन यह एक तरफ, यह चर्चा उन साइटों के लिए थी जहां 1200 डिजाइन तर्कसंगत होगा अगर यह डिजाइन फिट हो।
नाहिंक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.