वेबसाइट विकास तकनीक एक बहुत ही बहुआयामी प्रक्रिया है। लेकिन फिर भी, इसके सभी चरणों को दो मुख्य घटकों में विभाजित किया जा सकता है - कार्यात्मक और बाहरी आवरण। या, जैसा कि वेबमास्टरों के बीच प्रथागत है, क्रमशः बैक-एंड और फ्रंट-एंड। जो लोग वेब डेवलपमेंट स्टूडियो से अपनी वेबसाइट ऑर्डर करते हैं, वे अक्सर भोलेपन से मानते हैं कि यह केवल कार्यक्षमता पर ध्यान देने योग्य है, और यह सही निर्णय होगा। लेकिन यह बहुत ही दुर्लभ मामलों में सच है, आमतौर पर बीटा परीक्षण चरण में स्टार्टअप परियोजनाओं के लिए। अन्यथा, वेब विकास मानकों का अनुपालन करने और सुविधाजनक होने के लिए ग्राफिक डिज़ाइन और उपयोगकर्ता इंटरफ़ेस की आवश्यकता होती है।
इंटरफ़ेस डिज़ाइनर, या डिज़ाइनर का पहला आधारशिला साइट लेआउट की चौड़ाई है। आखिरकार, इसके लिए इंटरफेस बनाना जरूरी है। विशुद्ध रूप से सहज रूप से, दो दृष्टिकोण उत्पन्न होते हैं - या तो प्रत्येक लोकप्रिय स्क्रीन रिज़ॉल्यूशन के लिए अलग-अलग लेआउट बनाएं, या सभी डिस्प्ले के लिए साइट का एक संस्करण बनाएं। और दोनों विकल्प गलत होंगे, लेकिन पहले चीज़ें पहले।
पिक्सेल में मानक वेबसाइट चौड़ाईरनेट के लिए
एडेप्टिव लेआउट के विकास से पहले, एक हजार पिक्सल की चौड़ाई वाली साइट का विकास एक व्यापक घटना थी। यह आंकड़ा एक साधारण कारण के लिए चुना गया था - ताकि साइट किसी भी स्क्रीन में फिट हो जाए। और इसका अपना तर्क है, लेकिन मान लेते हैं कि एक व्यक्ति के पास अभी भी एक डेस्कटॉप पर कम से कम एक एचडी मॉनिटर है। इस मामले में, आपका लेआउट स्क्रीन के बीच में एक छोटी सी पट्टी की तरह प्रतीत होगा, जहां सब कुछ एक ढेर में एक साथ फंस गया है, और किनारों पर एक बड़ी अप्रयुक्त जगह है। अब मान लेते हैं कि कोई व्यक्ति आपकी वेबसाइट को 800px चौड़ी स्क्रीन वाले टैबलेट पर एक्सेस करता है और सेटिंग्स में "पूरी वेबसाइट दिखाएं" चेक किया गया है। इस मामले में, आपकी साइट भी गलत तरीके से प्रदर्शित होगी, क्योंकि यह स्क्रीन में फिट नहीं होगी।
इन विचारों से, हम यह निष्कर्ष निकाल सकते हैं कि लेआउट के लिए एक निश्चित चौड़ाई निश्चित रूप से हमारे लिए उपयुक्त नहीं है और हमें दूसरा रास्ता तलाशने की जरूरत है। आइए प्रत्येक स्क्रीन चौड़ाई के लिए एक अलग लेआउट के विचार का विश्लेषण करें।
सभी अवसरों के लिए लेआउट
यदि आपने बाजार में सभी स्क्रीन आकारों के लिए लेआउट बनाने की रणनीति के रूप में चुना है, तो आपकी साइट पूरे इंटरनेट पर सबसे अनोखी होगी। आखिरकार, प्रत्येक विकल्प के लिए फाइन-ट्यून करने की कोशिश कर रहे उपकरणों की पूरी श्रृंखला को कवर करना आज असंभव है। लेकिन अगर आप मॉनिटर और डिवाइस स्क्रीन के सबसे लोकप्रिय प्रस्तावों पर ध्यान केंद्रित करते हैं, तो विचार बुरा नहीं है। इसका एकमात्र नुकसान वित्तीय लागत है। आखिरकार, जब एक इंटरफेस डिजाइनर, एक डिजाइनर और एक कोडर को एक ही काम 5 या 6 बार करने के लिए मजबूर किया जाता है, तो परियोजना की लागत होगीमूल रूप से बजटीय मूल्य से अनुपातहीन रूप से अधिक।
इसलिए, केवल एक पृष्ठ वाली साइटें विभिन्न स्क्रीनों के लिए प्रचुर मात्रा में संस्करणों का दावा कर सकती हैं, जिसका उद्देश्य एक उत्पाद को बेचना और इसे अच्छी तरह से करना सुनिश्चित करना है। ठीक है, अगर आपके पास इनमें से एक भी लैंडिंग नहीं है, बल्कि एक बहु-पृष्ठ साइट है, तो आपको आगे के बारे में सोचना चाहिए।
सबसे लोकप्रिय साइट आकार
दो चरम सीमाओं के बीच एक समझौता तीन या चार स्क्रीन आकारों के लिए लेआउट प्रदान कर रहा है। उनमें से, मोबाइल उपकरणों के लिए एक लेआउट होना चाहिए। बाकी को छोटे, मध्यम और बड़े डेस्कटॉप स्क्रीन के लिए अनुकूलित किया जाना चाहिए। साइट की चौड़ाई कैसे चुनें? नीचे हम मई 2017 के लिए HotLog सेवा आँकड़े प्रस्तुत करते हैं, जो हमें विभिन्न डिवाइस स्क्रीन रिज़ॉल्यूशन की लोकप्रियता के वितरण के साथ-साथ इस सूचक की गतिशीलता को दिखाता है।
तालिका से आप पता लगा सकते हैं कि आप जिस साइट का उपयोग करना चाहते हैं उसका आकार कैसे निर्धारित करें। इसके अलावा, हम यह निष्कर्ष निकाल सकते हैं कि आज का सबसे आम प्रारूप 1366 गुणा 768 पिक्सेल की स्क्रीन है। बजट लैपटॉप में ऐसी स्क्रीन लगाई जाती है, इसलिए उनकी लोकप्रियता स्वाभाविक है। अगला सबसे लोकप्रिय फुल एचडी मॉनिटर है, जो वीडियो, गेम और इसलिए वेबसाइट लेआउट बनाने के लिए स्वर्ण मानक है। आगे तालिका में हम 360 गुणा 640 पिक्सेल के मोबाइल उपकरणों का रिज़ॉल्यूशन देखते हैं, साथ ही इसके बाद डेस्कटॉप और मोबाइल स्क्रीन के लिए विभिन्न विकल्प देखते हैं।
डिजाइनिंग लेआउट
सोआँकड़ों का विश्लेषण करने के बाद, हम यह निष्कर्ष निकाल सकते हैं कि इष्टतम साइट चौड़ाई में 4 भिन्नताएँ हैं:
- 1366px चौड़ाई वाला लैपटॉप संस्करण।
- पूर्ण HD संस्करण।
- छोटे डेस्कटॉप मॉनिटर पर प्रदर्शन के लिए 800px चौड़ा लेआउट।
- साइट का मोबाइल संस्करण - 360 पिक्सेल चौड़ा।
मान लें कि हमने तय कर लिया है कि साइट के लिए जेनरेट किए गए स्रोत के लिए किस आकार का उपयोग करना है। लेकिन ऐसी परियोजना अभी भी महंगी होगी। तो आइए इस बार बिना किसी निश्चित चौड़ाई का उपयोग किए अधिक विकल्पों पर नजर डालते हैं।
लेआउट को लचीला बनाना
एक वैकल्पिक दृष्टिकोण है, जब यह केवल न्यूनतम स्क्रीन आकार के अनुकूल होने के लायक है, और साइट का आकार स्वयं प्रतिशत द्वारा निर्धारित किया जाएगा। साथ ही, मेनू, बटन और लोगो जैसे इंटरफ़ेस तत्वों को पूर्ण मानों में सेट किया जा सकता है, जो पिक्सेल में स्क्रीन की चौड़ाई के न्यूनतम आकार पर ध्यान केंद्रित करता है। सामग्री के साथ ब्लॉक, इसके विपरीत, स्क्रीन क्षेत्र की चौड़ाई के निर्दिष्ट प्रतिशत के अनुसार बढ़ाया जाएगा। यह दृष्टिकोण आपको साइट के आकार को डिज़ाइनर के लिए एक सीमा के रूप में मानने से रोकता है और कुशलता से इस बारीकियों को हरा देता है।
सुनहरा अनुपात क्या है और इसे वेब पेज लेआउट पर कैसे लागू किया जा सकता है?
पुनर्जागरण में भी, कई वास्तुकारों और कलाकारों ने अपनी रचनाओं को सही आकार और अनुपात देने की कोशिश की। इस तरह के अनुपात के मूल्यों के बारे में सवालों के जवाब के लिए, उन्होंने सभी विज्ञानों की रानी की ओर रुख किया - गणित।
प्राचीन काल से, एक अनुपात का आविष्कार किया गया है जिसे हमारी आंख सबसे प्राकृतिक और सुरुचिपूर्ण मानती है,क्योंकि यह प्रकृति में सर्वव्यापी है। इस तरह के अनुपात के सूत्र के खोजकर्ता फ़िडियास नामक एक प्रतिभाशाली प्राचीन यूनानी वास्तुकार थे। उन्होंने गणना की कि यदि अनुपात का बड़ा हिस्सा छोटे से संबंधित है क्योंकि संपूर्ण बड़े से संबंधित है, तो ऐसा अनुपात सबसे अच्छा लगेगा। लेकिन यह मामला है यदि आप वस्तु को असममित रूप से विभाजित करना चाहते हैं। इस अनुपात को बाद में स्वर्ण खंड कहा गया, जो अभी भी संस्कृति के विश्व इतिहास के लिए इसके महत्व को कम नहीं करता है।
वेब डिज़ाइन पर वापस
यह बहुत आसान है - सुनहरे अनुपात का उपयोग करके, आप उन पृष्ठों को डिज़ाइन कर सकते हैं जो मानव आंखों को यथासंभव प्रसन्न करेंगे। स्वर्ण अनुपात सूत्र की परिभाषा के अनुसार गणना करते हुए, हमें अपरिमेय संख्या 1, 6180339887 … प्राप्त होती है, लेकिन सुविधा के लिए, हम 1, 62 के एक पूर्णांक मान का उपयोग कर सकते हैं। संपूर्ण का% और 38%, चाहे आप जिस साइट का उपयोग कर रहे हैं उसके लिए उत्पन्न स्रोत का आकार कोई भी हो। आप इस आरेख में एक उदाहरण देख सकते हैं:
नई तकनीकों का प्रयोग करें
आधुनिक वेबसाइट लेआउट प्रौद्योगिकियां एक योजनाकार और डिजाइनर के विचार को सटीक रूप से व्यक्त करना संभव बनाती हैं, इसलिए अब आप इंटरनेट प्रौद्योगिकियों की तुलना में अधिक साहसी विचारों को लागू करने का जोखिम उठा सकते हैं। साइट का आकार क्या होना चाहिए, इसके बारे में अब आपको ज्यादा सोचने की जरूरत नहीं है। ब्लॉक अनुकूली लेआउट, सामग्री और फोंट की गतिशील लोडिंग जैसी चीजों के आगमन के साथ, वेबसाइट विकास बहुत अधिक सुखद हो गया है। आखिरकार, ये प्रौद्योगिकियां हैंकम प्रतिबंध, हालांकि वे अभी भी हैं। लेकिन जैसा कि आप जानते हैं, सीमा के बिना कोई कला नहीं होगी। हमारा सुझाव है कि आप वास्तव में एक रचनात्मक डिजाइन दृष्टिकोण का उपयोग करें - सुनहरा अनुपात। इसके साथ, आप कार्यक्षेत्र को प्रभावी ढंग से और खूबसूरती से भर सकते हैं, चाहे आप अपने टेम्प्लेट में साइट का कोई भी आकार सेट करें।
साइट के कार्य स्थान को कैसे बढ़ाया जाए
एक अच्छा मौका है कि आपके पास सभी UI तत्वों को एक छोटे लेआउट में फिट करने के लिए पर्याप्त जगह नहीं होगी। इस मामले में, आपको पहले की तुलना में रचनात्मक रूप से या उससे भी अधिक रचनात्मक रूप से सोचना शुरू करना होगा।
पॉप-अप मेनू में नेविगेशन छिपाकर साइट पर अधिकतम खाली स्थान। न केवल मोबाइल उपकरणों पर, बल्कि डेस्कटॉप पर भी इस दृष्टिकोण का उपयोग करना तर्कसंगत है। आखिरकार, उपयोगकर्ता को हर समय यह देखने की ज़रूरत नहीं है कि आपकी साइट पर कौन से शीर्षक हैं - वह सामग्री के लिए आया था। और उपयोगकर्ता की इच्छाओं का सम्मान किया जाना चाहिए।
मेनू को छिपाने के एक अच्छे तरीके का एक उदाहरण निम्नलिखित लेआउट है (नीचे फोटो)।
लाल क्षेत्र के ऊपरी कोने में, आप एक क्रॉस देख सकते हैं, जिस पर क्लिक करने से मेनू एक छोटे से आइकन में छिप जाएगा, उपयोगकर्ता को वेबसाइट की सामग्री के साथ अकेला छोड़ देगा।
हालांकि, यह वैकल्पिक है, आप नेविगेशन को छोड़ सकते हैं, जो हमेशा दृष्टि में रहेगा। लेकिन आप इसे एक सुंदर डिज़ाइन तत्व बना सकते हैं, न कि साइट पर लोकप्रिय लिंक की सूची। टेक्स्ट लिंक के अलावा या यहां तक कि सहज ज्ञान युक्त आइकन का उपयोग करें। यह ऐसा ही हैआपकी साइट को उपयोगकर्ता के डिवाइस पर स्क्रीन स्पेस का अधिक कुशल उपयोग करने की अनुमति देगा।
सर्वश्रेष्ठ वेबसाइट उत्तरदायी है
यदि आप नहीं जानते कि साइट के लिए कौन सा लेआउट चुनना है, तो आपके लिए सब कुछ सरल है। विकास लागतों को बचाने के लिए और साथ ही किसी डिवाइस के खराब लेआउट के कारण अपने दर्शकों को न खोने के लिए, उत्तरदायी डिज़ाइन का उपयोग करें।
Responsive Design एक ऐसा डिज़ाइन है जो विभिन्न उपकरणों पर समान रूप से अच्छा दिखता है। यह दृष्टिकोण आपकी साइट को लैपटॉप पर, यहां तक कि टैबलेट पर, यहां तक कि स्मार्टफोन पर भी समझने योग्य और सुविधाजनक बनाने की अनुमति देगा। यह प्रभाव स्क्रीन के कार्य क्षेत्र की चौड़ाई को स्वचालित रूप से बदलकर प्राप्त किया जाता है। अपनी साइट के लिए रिस्पॉन्सिव स्टाइल शीट का उपयोग करके, आप सर्वोत्तम संभव निर्णय ले रहे हैं।
उत्तरदायी डिजाइन और वेबसाइट संस्करणों में क्या अंतर है
रिस्पॉन्सिव डिज़ाइन साइट के मोबाइल संस्करण से भिन्न होता है, बाद के मामले में, उपयोगकर्ता को एक html कोड प्राप्त होता है जो डेस्कटॉप वाले से अलग होता है। सर्वर प्रदर्शन अनुकूलन के साथ-साथ खोज इंजन अनुकूलन के मामले में यह एक नुकसान है। इसके अलावा, साइट के विभिन्न संस्करणों के लिए आंकड़ों की गणना करना अधिक कठिन हो जाता है। अनुकूली दृष्टिकोण में ये नुकसान नहीं हैं।
विभिन्न उपकरणों के लिए उत्तरदायित्व निर्दिष्ट चौड़ाई के प्रतिशत के साथ एक लेआउट के माध्यम से प्राप्त किया जाता है या ब्लॉक को उपलब्ध स्थान पर स्थानांतरित करके (स्मार्टफोन पर लंबवत विमान में)डेस्कटॉप पर क्षैतिज), या अलग-अलग स्क्रीन के लिए अलग-अलग लेआउट बनाना।
हमारे ट्यूटोरियल में प्रतिक्रियाशील डिजाइन और विकास के बारे में अधिक जानें।
