स्टैंडर्ड आयाम साइटें: सुविधाओं, आवश्यकताओं और सिफारिशों

वेबसाइटों के प्रौद्योगिकी विकास - एक बहुत ही बहुआयामी प्रक्रिया। एक कार्यात्मक और एक बाहरी म्यान - फिर भी अपने सभी चरणों के दो मुख्य घटकों में विभाजित किया जा सकता है। या, मध्यम वेबमास्टर बेग एंड और फ़्रंट एंड क्रमशः में के रूप में। जो लोग, वेब विकास स्टूडियो में अपनी वेबसाइटों खरीदा अक्सर naively विश्वास है कि यह आवश्यक है केवल कार्यात्मक पर ध्यान केंद्रित करने, और यह सही फैसला हो जाएगा। लेकिन यह आमतौर पर बीटा परीक्षण के स्तर पर परियोजनाओं के क्षेत्र की नई कंपनियों के लिए एक बहुत, बहुत दुर्लभ अवसरों में सच है। ग्राफिक डिजाइन और यूजर इंटरफेस के बाकी बस वेब विकास मानकों का अनुपालन और सहज होना करने के लिए बाध्य कर रहे हैं।

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

साइट क्या तुमने कभी की आवश्यकता होगी के लिए पिक्सल में मानक चौड़ाई

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

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

सभी अवसरों के लिए लेआउट

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

इसलिए घमंड अलग स्क्रीन के लिए संस्करणों की बहुतायत, सिवाय इसके कि साइटों-odnostranichniki जिसका उद्देश्य हो सकता है - एक उत्पाद को बेचने और इसे अच्छी तरह से करने के लिए सुनिश्चित किया जाना है। खैर, अगर आप उन लैंडिंग से एक नहीं हैं, एक बहु साइट, यह आगे तर्क करने में खड़ा है।

साइटों के सबसे लोकप्रिय आकार

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

तालिका से यह जानने के लिए कैसे साइट का उपयोग करना चाहते का आकार निर्धारित करने के लिए संभव है। इसके अलावा, यह निष्कर्ष निकाला जा सकता है कि सबसे आम प्रारूप आज 768 अंकों की 1366 में स्क्रीन है। ये स्क्रीन एक बजट लैपटॉप में स्थापित कर रहे हैं, इसलिए उनकी लोकप्रियता स्वाभाविक है। अगले सबसे लोकप्रिय एक पूर्ण HD-मॉनिटर, जो सिनेमा, खेल के लिए स्वर्ण मानक है, और इसलिए, साइट लेआउट तैयार करना है। तालिका हम देखते हैं में आगे मोबाइल उपकरणों 360 x 640 पिक्सल है, साथ ही डेस्कटॉप के विभिन्न embodiments और मोबाइल स्क्रीन बाद में अनुमति देते हैं।

डिजाइन लेआउट

तो, आंकड़ों का विश्लेषण करने के बाद, हम निष्कर्ष निकाल सकते हैं कि साइट के इष्टतम चौड़ाई 4 भिन्नताएं होती हैं:

1. 1366 पिक्सेल की चौड़ाई के साथ संस्करण लैपटॉप।
2. पूर्ण HD संस्करण।
3. छोटे डेस्कटॉप मॉनिटर पर प्रदर्शन के लिए चौड़ाई आकार लेआउट में 800 पिक्सल।
4. चौड़ाई में 360 पिक्सल - साइट के मोबाइल संस्करण।

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

एक लचीला लेआउट बनाने

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

सुनहरे अनुपात क्या है, और कैसे लेआउट के लिए वेब पृष्ठों का उपयोग करने के लिए?

यहां तक कि पुनर्जागरण में कई वास्तुकारों और कलाकारों उनकी कृतियों सही आकार और अनुपात देने की कोशिश की। इस तरह के अनुपात के प्रभाव के बारे में सवालों के जवाब के लिए, वे सभी विज्ञानों की रानी में बदल गया - गणित।

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

के वेब डिजाइन पर वापस चलते हैं

यह बहुत आसान है - सुनहरे अनुपात का उपयोग कर, आप पृष्ठों है कि मानव आंखों के लिए सबसे आकर्षक हो जाएगा डिजाइन कर सकते हैं। सुनहरा अनुभाग के सूत्र के अनुसार गणना की, हम पाते हैं अपरिमेय संख्या १.६१८०३३९८८७ ..., लेकिन सुविधा के लिए आपको 1.62 के गोल मान का उपयोग कर सकते हैं। इसका मतलब यह होगा कि हमारे पेज ब्लॉक में 62% और पूरे का 38%, कोई बात नहीं क्या आकार साइट पर आप उपयोग कर रहे हैं के लिए स्रोत कोड उत्पन्न होना चाहिए। उदाहरण आप निम्नलिखित योजना पर देख सकते हैं:

नई प्रौद्योगिकियों के उपयोग

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

कैसे कार्यक्षेत्र साइट को बढ़ाने के लिए

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

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

एक अच्छा तरीका मेनू को छिपाने के लिए एक उदाहरण निम्नलिखित लेआउट (नीचे दर्शाया गया) है।

ऊपरी में लाल के कोने क्षेत्र, आप एक क्रॉस देख सकते हैं, मेनू कि एक छोटा सा आइकन में छुपाता है पर क्लिक करें, वेबसाइट की सामग्री के साथ अकेले उपयोगकर्ता छोड़कर।

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

बेस्ट वेबसाइट - अनुकूली

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

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

क्या अपनी वेबसाइट के विभिन्न संस्करणों की उपलब्धता के अनुकूली डिजाइन अलग

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

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

आप उत्तरदायी डिजाइन के बारे में अधिक जानने के लिए और किताबों से विकसित कर सकते हैं कर सकते हैं।