मैं वेबसाइट के ग्राफिक्स हिस्से पर काम कर रहा हूं और फोटोशॉप में वेबसाइट डिजाइन करने के लिए कहा गया है। मुझे आश्चर्य है कि एक वेबसाइट के लिए औसत आयाम और ब्राउज़र की चौड़ाई क्या है, इसलिए मैं उन आयामों के साथ अपना मॉकअप बना सकता हूं।
मैं वेबसाइट के ग्राफिक्स हिस्से पर काम कर रहा हूं और फोटोशॉप में वेबसाइट डिजाइन करने के लिए कहा गया है। मुझे आश्चर्य है कि एक वेबसाइट के लिए औसत आयाम और ब्राउज़र की चौड़ाई क्या है, इसलिए मैं उन आयामों के साथ अपना मॉकअप बना सकता हूं।
जवाबों:
ऐसा करने के लिए आपको कुछ प्रकार के द्रव चौड़ाई ग्रिड सिस्टम का उपयोग करना चाहिए और @media क्वेरीज़ का उपयोग करके विशिष्ट उपकरणों को लक्षित करना चाहिए ।
मीडिया क्वेश्चन बस अलग-अलग व्यू पोर्ट साइज के लिए सीएसएस नियमों के अलग-अलग सेट हैं। मीडिया क्वेरीज़ आपके ब्राउज़र की चौड़ाई को गतिशील रूप से बदलने का जवाब देती है। जब आप अपना ब्राउज़र छोटा करते हैं तो पेज फ्लोट्स को ड्रॉप करके या 12 कॉलम से 1 या 2 पर जाकर जवाब देता है। जब वे पोर्ट्रेट से लैंडस्केप या वाइस वर्सा के लिए ओरिएंटेशन बदलते हैं तो जवाबदेही भी मोबाइल डिवाइस और टेबल पर यूजर्स की प्रतिक्रिया होती है।
एक्शन में इसे देखने के लिए फ्रैमलेस ग्रिड पर एक नज़र डालें । यह वास्तव में तरल नहीं है, लेकिन जैसा कि आप अपने ब्राउज़र को समायोजित करते हैं यह 14 कॉलम से सभी 1 से नीचे चला जाता है
ट्विटर बूटस्ट्रैप , एक सरल सीएसएस, एचटीएमएल और जेएस फ्रेमवर्क जो लोकप्रिय यूजर इंटरफेस घटकों के साथ बनाया गया है, आधुनिक उत्तरदायी डिजाइन प्रथाओं का एक अच्छा उदाहरण है।
एक और बात जो आप शायद चाहते हैं, वह है पिक्सेल घनत्व । IPhone 4 और नए iPad में रेटिना डिस्प्ले हैं जो कि 2x सामान्य स्क्रीन की तरह तेज हैं। यह पाठ के बजाय स्प्राइट और चित्र परोसने का अभ्यास लगभग अप्रचलित कर देता है। पाठ के साथ एक iPad छवियों पर भयानक लग रही हो।
तो सवाल का जवाब यह है कि एक मानक ब्राउज़र चौड़ाई नहीं है जिसे आपको डिज़ाइन करना चाहिए। आपको अपने उपयोगकर्ताओं के आधार पर अपने डिजाइन के निर्णय लेने चाहिए और इसे बनाना चाहिए जहां यह सबसे अधिक लोगों के लिए सबसे अधिक सुलभ है।
कई लेआउट टेम्प्लेट 960px चौड़ाई का उपयोग करते हैं क्योंकि यह सामान्य 1024px चौड़े स्क्रीन रिज़ॉल्यूशन में फिट बैठता है, स्क्रॉल बार के लिए कुछ स्थान देता है और 2, 3, 4, 5, 6, 8, 10, 12 और 16 द्वारा आसानी से विभाजित किया जा सकता है - कॉलमिंग के लिए आदर्श अभिन्यास।
एक उदाहरण के लिए http://960.gs देखें ।
अन्य ढांचे जैसे बूटस्ट्रैप कॉलम के बीच कुछ मार्जिन के लिए खाते में 940px का उपयोग करते हैं।
यदि आप डेस्कटॉप ब्राउज़र को लक्षित कर रहे हैं, तो आप आसानी से लगभग 1000 पिक्सेल चौड़े तक जा सकते हैं, यदि आपको आवश्यकता है।
जब लगभग 1000 पिक्सल सबसे सामान्य डिस्प्ले 1024 पिक्सल या उससे बड़े होते हैं तो क्यों? क्योंकि आपको स्क्रॉल बार और विंडो क्रोम के लिए अनुमति देनी होगी।
यदि आप विशेष रूप से मोबाइल ब्राउज़र को लक्षित कर रहे हैं, तो 320 पिक्सेल चौड़ा एक अच्छा विकल्प हो सकता है, हालांकि मोबाइल ब्राउज़र आमतौर पर दृश्य चौड़ाई को फिट करने के लिए सामग्री को स्केल करते हैं, इसलिए 950 या 960 पिक्सेल चौड़ा हो सकता है। कृपया ध्यान दें कि 320 सीएसएस / एचटीएमएल पिक्सल iPhone जैसे उच्च डीपीआई उपकरणों पर 640 डिवाइस पिक्सल के बराबर है।
स्टेटकाउंटर मोबाइल स्क्रीन रिज़ॉल्यूशन
आपका लक्षित बाजार भी चीजें बदल सकता है। यदि आप एक तकनीक प्रेमी दर्शकों को लक्षित कर रहे हैं, तो आप उम्मीद कर सकते हैं कि चीजें अधिक आधुनिक उपकरणों के लिए तिरछी हो जाएंगी। यदि आप एक सरकारी साइट का निर्माण कर रहे हैं, तो आपको एक विस्तृत श्रृंखला की आवश्यकता होगी।
इसके अलावा, आप साइट कैसे बना रहे हैं? यदि आप एक ग्रिड सिस्टम का उपयोग कर रहे हैं, जैसे ब्लूप्रिंट सीएसएस या 960 ग्रिड सिस्टम, तो वह आकार भी तय कर सकता है (अधिकांश ग्रिड सिस्टम को अन्य आकारों में भी बदला जा सकता है)।
यदि आप मोबाइल के साथ-साथ डेस्कटॉप पर भी अच्छा काम करना चाहते हैं, तो आप उत्तरदायी डिज़ाइन देखना चाहते हैं।
इस समय में दुनिया भर में विस्तृत डेस्कटॉप का आकार 1024x768 है, 1003px आकार में वेबसाइट बनाना अच्छा है ...