अपने वेब पेज की चौड़ाई को परिभाषित करना

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

संकल्प पर विचार क्यों करें

1995 में, मानक 640-पिक्सेल-बाय-480-पिक्सेल मॉनिटर सबसे बड़े और सबसे अच्छे मॉनिटर उपलब्ध थे। इसका मतलब यह था कि वेब डिज़ाइनर उन पृष्ठों को बनाने पर ध्यान केंद्रित करते थे जो वेब ब्राउज़र में अच्छे लगते थे, उस रिज़ॉल्यूशन पर 12-इंच से 14-इंच के मॉनिटर पर अधिकतम होते थे।

इन दिनों, 640-बाई-480 रिज़ॉल्यूशन अधिकांश वेबसाइट ट्रैफ़िक के 1 प्रतिशत से भी कम है। लोग 1366-by-768, 1600-by-900 और 5120-by-2880 सहित बहुत अधिक रिज़ॉल्यूशन वाले कंप्यूटर का उपयोग करते हैं। कई मामलों में, 1366-बाय-768 रिज़ॉल्यूशन स्क्रीन के लिए डिज़ाइन करना काम करता है।

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

ब्राउज़र की चौड़ाई

वेब पेज की चौड़ाई तय करते समय अक्सर अनदेखी की जाने वाली समस्या यह है कि आपके ग्राहक अपने ब्राउज़रों को कितना बड़ा रखते हैं। विशेष रूप से, क्या वे अपने ब्राउज़र को पूर्ण-स्क्रीन आकार में अधिकतम करते हैं या क्या वे उन्हें पूर्ण स्क्रीन से छोटा रखते हैं?

आपके द्वारा अधिकतम या न करने वाले ग्राहकों के लिए खाते के बाद, ब्राउज़र सीमाओं के बारे में सोचें। प्रत्येक वेब ब्राउज़र एक स्क्रॉल बार और किनारों पर बॉर्डर का उपयोग करता है जो उपलब्ध स्थान को 800 से घटाकर लगभग कर देता है ७४० पिक्सेल या उससे कम ८००-बाई-६०० रिज़ॉल्यूशन पर और लगभग ९८० पिक्सेल अधिकतम विंडो पर १०२४-बाय-७६८ पर संकल्प इसे कहते हैं ब्राउजर क्रोम और यह आपके पेज डिजाइन के लिए प्रयोग करने योग्य स्थान से दूर ले जा सकता है।

निश्चित या तरल चौड़ाई वाले पृष्ठ

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

निश्चित चौड़ाई

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

निश्चित-चौड़ाई वाले पृष्ठ बनाने के लिए, अपने पृष्ठ विभाजनों की चौड़ाई के लिए विशिष्ट पिक्सेल संख्याओं का उपयोग करें।

तरल चौड़ाई

तरल-चौड़ाई वाले पृष्ठ (कभी-कभी कहा जाता है लचीले-चौड़ाई वाले पृष्ठ) ब्राउज़र विंडो की चौड़ाई के आधार पर चौड़ाई में भिन्नता होती है। यह रणनीति ऐसे डिज़ाइन लाती है जो ग्राहकों पर अधिक ध्यान केंद्रित करते हैं। तरल चौड़ाई वाले पृष्ठों के साथ समस्या यह है कि उन्हें पढ़ना मुश्किल हो सकता है। अगर स्कैन लंबाई पाठ की एक पंक्ति 10 से 12 शब्दों से अधिक लंबी या 4 से 5 शब्दों से छोटी है, इसे पढ़ना मुश्किल हो सकता है। इसका मतलब है कि बड़ी या छोटी ब्राउज़र विंडो वाले पाठकों को परेशानी होती है।

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

सीएसएस मीडिया प्रश्न

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