वेबसाइट डिजाइन करने के लिए मुझे किस ब्राउज़र की चौड़ाई का उपयोग करना चाहिए?


9

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


एक पूरी तरह से अलग सवाल तो दूसरे एक। यह पूछता है कि एक पूरी वेबसाइट मॉकअप छवि का एक डिफ़ॉल्ट रिज़ॉल्यूशन क्या होना चाहिए, जो उस वेबसाइट के ग्राफिक्स के लिए पूछता है।
Xitcod13

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

क्षमा करें दोस्तों, मैं उन शीर्षकों पर आसीन हुआ जो लगभग समान थे। फिर से खोल दी ...
Farray

क्या यह साइट के लिए निश्चित-चौड़ाई का लेआउट है? या यह "" के लिए मॉकअप में एक फ्रेम सहित लायक होगा और अगर कोई उपयोगकर्ता 640x480 के रिज़ॉल्यूशन का उपयोग कर रहा है, क्योंकि उनके पास खराब दृष्टि है, तो साइट इस तरह दिखेगी ... "और दिखा रहा है कि लेआउट कैसे फिर से बदलता है? (ठीक है, आप इसके बजाय 800x600 का उपयोग कर सकते हैं)
एंड्रयू लीच

जवाबों:


7

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

ऐसा करने के लिए आपको कुछ प्रकार के द्रव चौड़ाई ग्रिड सिस्टम का उपयोग करना चाहिए और @media क्वेरीज़ का उपयोग करके विशिष्ट उपकरणों को लक्षित करना चाहिए ।

मीडिया क्वेश्चन बस अलग-अलग व्यू पोर्ट साइज के लिए सीएसएस नियमों के अलग-अलग सेट हैं। मीडिया क्वेरीज़ आपके ब्राउज़र की चौड़ाई को गतिशील रूप से बदलने का जवाब देती है। जब आप अपना ब्राउज़र छोटा करते हैं तो पेज फ्लोट्स को ड्रॉप करके या 12 कॉलम से 1 या 2 पर जाकर जवाब देता है। जब वे पोर्ट्रेट से लैंडस्केप या वाइस वर्सा के लिए ओरिएंटेशन बदलते हैं तो जवाबदेही भी मोबाइल डिवाइस और टेबल पर यूजर्स की प्रतिक्रिया होती है।

लक्षित आकार:

  • पोर्ट्रेट मोड में 320 x 480 मोबाइल डिवाइस
  • 480 x 640 छोटे टैबलेट या लैंडस्केप मोड में एक iPhone
  • पोर्ट्रेट मोड में 768 x 1024 टैबलेट
  • लैंडस्केप मोड में 1024 x 768 टैबलेट
  • 1200 + डेस्कटॉप ब्राउज़र
  • 2900 ++ बड़े मीडिया डिस्प्ले या कॉन्फ्रेंस (यह बहुत जरूरी नहीं है लेकिन अगर कोई आपकी साइट को बहुत बड़े डिस्प्ले में देख रहा हो तो क्या होगा।

एक्शन में इसे देखने के लिए फ्रैमलेस ग्रिड पर एक नज़र डालें । यह वास्तव में तरल नहीं है, लेकिन जैसा कि आप अपने ब्राउज़र को समायोजित करते हैं यह 14 कॉलम से सभी 1 से नीचे चला जाता है

ट्विटर बूटस्ट्रैप , एक सरल सीएसएस, एचटीएमएल और जेएस फ्रेमवर्क जो लोकप्रिय यूजर इंटरफेस घटकों के साथ बनाया गया है, आधुनिक उत्तरदायी डिजाइन प्रथाओं का एक अच्छा उदाहरण है।

एक और बात जो आप शायद चाहते हैं, वह है पिक्सेल घनत्व । IPhone 4 और नए iPad में रेटिना डिस्प्ले हैं जो कि 2x सामान्य स्क्रीन की तरह तेज हैं। यह पाठ के बजाय स्प्राइट और चित्र परोसने का अभ्यास लगभग अप्रचलित कर देता है। पाठ के साथ एक iPad छवियों पर भयानक लग रही हो।

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


आपका Frameless ग्रिड लिंक अब मृत हो गया है।
रुस्लान

6

कई लेआउट टेम्प्लेट 960px चौड़ाई का उपयोग करते हैं क्योंकि यह सामान्य 1024px चौड़े स्क्रीन रिज़ॉल्यूशन में फिट बैठता है, स्क्रॉल बार के लिए कुछ स्थान देता है और 2, 3, 4, 5, 6, 8, 10, 12 और 16 द्वारा आसानी से विभाजित किया जा सकता है - कॉलमिंग के लिए आदर्श अभिन्यास।

एक उदाहरण के लिए http://960.gs देखें ।

अन्य ढांचे जैसे बूटस्ट्रैप कॉलम के बीच कुछ मार्जिन के लिए खाते में 940px का उपयोग करते हैं।


960gs साइट के लिए बहुत बढ़िया संदर्भ। @ आपको अपनी सहायता के लिए अपने psd टेम्प्लेट का उपयोग करना चाहिए।
skids89

6

यदि आप डेस्कटॉप ब्राउज़र को लक्षित कर रहे हैं, तो आप आसानी से लगभग 1000 पिक्सेल चौड़े तक जा सकते हैं, यदि आपको आवश्यकता है।

StatCounter स्क्रीन संकल्प

StatCounter स्क्रीन संकल्प

जब लगभग 1000 पिक्सल सबसे सामान्य डिस्प्ले 1024 पिक्सल या उससे बड़े होते हैं तो क्यों? क्योंकि आपको स्क्रॉल बार और विंडो क्रोम के लिए अनुमति देनी होगी।

यदि आप विशेष रूप से मोबाइल ब्राउज़र को लक्षित कर रहे हैं, तो 320 पिक्सेल चौड़ा एक अच्छा विकल्प हो सकता है, हालांकि मोबाइल ब्राउज़र आमतौर पर दृश्य चौड़ाई को फिट करने के लिए सामग्री को स्केल करते हैं, इसलिए 950 या 960 पिक्सेल चौड़ा हो सकता है। कृपया ध्यान दें कि 320 सीएसएस / एचटीएमएल पिक्सल iPhone जैसे उच्च डीपीआई उपकरणों पर 640 डिवाइस पिक्सल के बराबर है।

स्टेटकाउंटर मोबाइल स्क्रीन रिज़ॉल्यूशन

स्टेटकाउंटर मोबाइल स्क्रीन रिज़ॉल्यूशन

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

इसके अलावा, आप साइट कैसे बना रहे हैं? यदि आप एक ग्रिड सिस्टम का उपयोग कर रहे हैं, जैसे ब्लूप्रिंट सीएसएस या 960 ग्रिड सिस्टम, तो वह आकार भी तय कर सकता है (अधिकांश ग्रिड सिस्टम को अन्य आकारों में भी बदला जा सकता है)।

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


4
मैंने 960 ग्रिड सिस्टम को दूसरा स्थान दिया है। बहुत लचीला और आपके दर्शकों के बहुमत के लिए काम करेगा।
लॉरेन-क्लियर-मोनिका-इप्सम

"... आप आसानी से 1024 पिक्सेल चौड़े तक जा सकते हैं, अगर आपको इसकी आवश्यकता है .." यह एक महत्वपूर्ण चेतावनी को याद कर रहा है कि स्क्रीन की कुछ चौड़ाई ब्राउज़र विंडो बॉर्डर्स द्वारा ली जाएगी।
e100

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

यह एक बहुत पुराना उत्तर है। स्क्रीन के पास और भी विविधताएं हैं, खासकर ऊपरी छोर पर जहां टीवी और 4k स्क्रीन का उपयोग किया जाता है
Zach Saucier

-3

इस समय में दुनिया भर में विस्तृत डेस्कटॉप का आकार 1024x768 है, 1003px आकार में वेबसाइट बनाना अच्छा है ...


3
क्यों 1003px ....?
e100

क्योंकि फंसे हुए आकार में दुनिया चौड़ा 1024 चौड़ाई और 1024px चौड़ाई 11px के साथ 768 ऊँचाई स्क्रॉल पट्टी के लिए आवश्यक है और दाएं और बाएं तरफ मार्जिन के लिए 5px
ग्राफिक डिजाइन गाय

2
काश, मैं एक टिप्पणी को डाउन-वोट कर सकता ... :( लेकिन अभी FYI करें @Rizwanabbasi: स्क्रॉलबारों की अलग-अलग प्रणालियों पर अलग-अलग चौड़ाई होती है (टच डिवाइस भी उनके पास नहीं हैं) और यहां तक ​​कि इन सिस्टमों पर स्क्रॉलबार को बदला भी जा सकता है (Google कर रहा है) उदाहरण के लिए GMail पर इसके ऐप्स में)
रॉबर्ट कोरिटनिक

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