विषय
सेल फोन, टैबलेट और कंप्यूटर मॉनिटर में अलग-अलग उपयोग, उपयोगकर्ता और आयाम हैं जो इस सवाल को छोड़ देते हैं कि किसी साइट के लिए सबसे अच्छा लेआउट आकार उस साइट के प्राथमिक उपयोगकर्ताओं की आवश्यकताओं द्वारा निर्धारित किया जाता है। यदि किसी साइट को 1680x1040 पिक्सेल के रिज़ॉल्यूशन वाले वाइडस्क्रीन डिस्प्ले पर मानक उपयोगकर्ताओं द्वारा देखा जाना है, तो साइट का आकार मुख्य ब्राउज़र स्क्रीन पर फिट करने के लिए बनाया जाना चाहिए। यदि साइट मोबाइल उपकरणों पर उपयोग के लिए अभिप्रेत है, तो इसे बहुत छोटी स्क्रीन के लिए बनाया जाना चाहिए।
स्थैतिक वीएस तरल पदार्थ लेआउट
पहला विचार यह है कि क्या साइट को पिक्सेल में परिभाषित आयाम की आवश्यकता है। प्रतिशत का उपयोग करते हुए, आप एक "तरल पदार्थ" लेआउट बना सकते हैं, जो ब्राउज़र विंडो के आकार के आधार पर गतिशील रूप से क्षेत्रों का आकार बदलता है। जब पाठ के साथ संयोजन में उपयोग किया जाता है, तो मानक स्क्रीन रिज़ॉल्यूशन के साथ-साथ मोबाइल ब्राउज़र के लिए साइट बनाते समय द्रव लेआउट सबसे अच्छा विकल्प हो सकता है। उदाहरण के लिए, "चौड़ाई = 960x" के बजाय सीएसएस सामग्री घोषणा में "चौड़ाई = 100%" का उपयोग करके द्रव लेआउट प्राप्त किए जाते हैं।
फ़िल्टरिंग मानक स्क्रीन आकार
"फिक्स्ड" या तरल लेआउट बनाने के लिए, divs, रैपर, या मुख्य सामग्री तालिकाओं की चौड़ाई को स्क्रॉल पट्टी और टूलबार दोनों को ध्यान में रखते हुए उपयोगकर्ता के ब्राउज़र विंडो में फिट होना चाहिए। आपको बहुमत के लिए भी विचार करना चाहिए। आजकल 80% से अधिक ब्राउज़र 1024x768 पिक्सल से अधिक के स्क्रीन रिज़ॉल्यूशन का उपयोग करते हैं। इसका मतलब है कि आप इसे 1680x1024 पिक्सल के लिए कर सकते हैं, लेकिन मध्य मैदान में प्रोजेक्ट करना अच्छा है। 960 या 980 पिक्सेल चौड़े दो विश्वसनीय उपाय हैं जो किसी ब्राउज़र में किसी 1024x768 रिज़ॉल्यूशन या उच्चतर का उपयोग करते हुए आराम से सामग्री प्रदर्शित करने के लिए उपयोग किए जाते हैं। संपूर्ण साइटों को प्रदर्शित करने में सक्षम मोबाइल उपकरणों पर भी सिस्टम अच्छी तरह से फिट बैठता है। यदि यह बहुत तंग है, तो 1080 अगली सबसे अच्छी चौड़ाई है। किसी भी रिज़ॉल्यूशन पर मानक ब्राउज़र की ऊँचाई को "तह", या बिंदु के ऊपर सबसे महत्वपूर्ण जानकारी रखने के लिए याद रखें, जहाँ स्क्रॉल आवश्यक हो जाता है।
मोबाइल स्क्रीन
यदि आप चाहते हैं कि आपकी साइट विभिन्न प्रकार के मोबाइल उपकरणों पर अच्छी दिखे, तो आपको इसे विशेष रूप से उपकरण के लिए करना होगा या एक विशेष शैली बनानी होगी, जिसका उपयोग मोबाइल ब्राउज़र द्वारा आपकी साइट के "मोबाइल" संस्करण को दिखाने के लिए किया जाता है। 240x320 रिज़ॉल्यूशन अधिकांश स्मार्टफोन और इंटरनेट उपकरणों, जैसे कि iPhone के लिए वर्तमान मानक है। "धाराप्रवाह" प्रतिशत या लेआउट का उपयोग करना एक अच्छा विचार है, क्योंकि कई उपकरण पोर्ट्रेट और लैंडस्केप मोड दोनों का समर्थन करते हैं। यदि आप एक ऐसी वेब साइट बनाते हैं, जो 320 पिक्सेल चौड़ी है, तो यह पोर्ट्रेट मोड में पहुंचकर उपयोगकर्ता के लिए कट ऑफ दिखाई दे सकती है।
गोल्डन ग्रिड
शायद ग्रिड सिस्टम के उपयोग के माध्यम से लेआउट आयाम निर्धारित करने के लिए सबसे अच्छी प्रणाली है। ग्रिड मुख्य लेआउट या सामग्री क्षेत्र के भीतर तत्वों को स्केल करने के तरीके की समझ प्रदान करने के लिए दिए गए चौड़ाई के भीतर पूरी तरह से संतुलित क्षेत्रों की गणना करते हैं। इन तत्वों में प्रचार बॉक्स, बार, विज्ञापन-स्थान या पैराग्राफ शामिल हैं। एक उदाहरण के रूप में, 1080 पिक्सल्स की कुल चौड़ाई का उपयोग करने वाला एक लेआउट और गोल्डन ग्रिड का उपयोग करके विभाजन को 739 पिक्सल चौड़ा और 780 पिक्सल चौड़ा एक राइट बार ब्लॉग पोस्ट के लिए छोड़ दिया गया होगा, दोनों मार्जिन का उपयोग 10 पिक्सेल का। अंतिम परिणाम एक पूरी तरह से गठबंधन और संतुलित लेआउट है। ग्रिड जनरेटर सिस्टम (संसाधन देखें) पर जाकर आप कई अलग-अलग ग्रिडों के साथ प्रयोग कर सकते हैं।