अनुकूली वेबसाइट डिजाइन एक ही वेबसाइट को विभिन्न प्रकार के उपकरणों पर ऑनलाइन प्रदर्शित करने के लिए एक सुविधाजनक प्रणाली है। सरल शब्दों में, यह लैपटॉप, स्मार्टफोन और अन्य गैजेट्स पर एक वेब पेज देखने की क्षमता है।
वेब प्रतिक्रिया एक आवश्यकता बन गई है जब से लोगों को विभिन्न प्रारूपों के इंटरनेट-सक्षम गैजेट मिले हैं। कंपनियां, ऑनलाइन स्टोर और यहां तक कि सिर्फ सूचनात्मक साइटें अपने दर्शकों को खुश करने का प्रयास करती हैं, हर संभव तरीके से इसे अपनाती हैं। उत्तरदायी डिजाइन सुविधा की समस्या को हल करता है, इसलिए यह एक अनिवार्य कार्य वस्तु है।
उत्तरदायी वेब डिजाइन की विशेषताएं
डिजाइन की सुविधा कई मुख्य मानदंडों की विशेषता है।
- आकार। विभिन्न उपकरणों पर पृष्ठ प्रदर्शित करते समय उत्तरदायी वेबसाइट डिजाइन में मामूली अंतर होना चाहिए, इसलिए छवियों, पाठ और अन्य तत्वों के आकार को स्वयं उपकरणों के आकार के अनुरूप होना चाहिए। ऐसा करने के लिए, वेब डेवलपर डिज़ाइन को इस तरह से अनुकूलित करते हैं कि उसके कई दृश्य संस्करण हों।
- सामग्री अनुकूलन। सामग्री जो साइट को भरती है (छवियां, वीडियोऔर अन्य मल्टीमीडिया तत्व) को भी डिस्प्ले की गुणवत्ता खोए बिना आवश्यक स्क्रीन रिज़ॉल्यूशन से मेल खाना चाहिए।
- डिजाइन लचीलापन। उन तत्वों के विकास में शामिल करना जो आपके द्वारा देखे जा रहे वेब पेज को बदलते समय आपको साइट के डिज़ाइन को जल्दी से समायोजित करने की अनुमति देते हैं। उदाहरण के लिए, उपयोगकर्ता पृष्ठ को ऊपर और नीचे स्क्रॉल करता है, विभिन्न अनुभागों के माध्यम से नेविगेट करता है, या स्क्रीन की स्थिति को लंबवत से क्षैतिज और इसके विपरीत में बदलता है।
- बेहतर उपयोगिता के लिए डिवाइस द्वारा आइटम को सरल बनाएं।
- छोटी स्क्रीन पर महत्वहीन ब्लॉक छुपाएं।
मूल बातें
वेबसाइट निर्माण निश्चित रूप से प्रोग्रामिंग भाषाओं से संबंधित है, क्योंकि आप उनके बिना बस नहीं कर सकते। HTML और CSS का उपयोग करके, ब्राउज़र वस्तुओं की संरचना और क्रम को पहचानता है (पाठ, चित्र, वीडियो) - इस तरह साइट बनती है।
सीएसएस रंग, शैली, आकार, फोंट, संरेखण, पैडिंग, पृष्ठभूमि तत्वों, रूपों आदि के लिए जिम्मेदार है। HTML साइट की समग्र सामग्री और संरचना के लिए जिम्मेदार है। इस प्रकार, एक वेब संसाधन दो सबसे महत्वपूर्ण विवरण विधियों के योग में निर्मित होता है।
दूसरी ओर, CSS एक अनिवार्य डिज़ाइन टूल है। एचटीएमएल से बेहतर सुविधाओं का एक बड़ा सेट है:
- कई पेजों में डिज़ाइन की एकरूपता प्रदान करता है, साइट की उपस्थिति, और HTML दस्तावेज़ों के प्रदर्शन को नियंत्रित करता है।
- आपको एक ही समय में डिज़ाइन और सामग्री करने का अवसर देता है।
- कई शैलियों और क्षमता को लागू करता हैविभिन्न उपकरणों पर देखना।
- जटिल डिजाइन निर्णय लेता है।
- उच्च गति की विशेषता।
वेबसाइट विकसित करने के लिए, आपको कुछ बुनियादी अवधारणाओं को जानना होगा।
एक सीएसएस चयनकर्ता को एक शैली के नाम से दर्शाया जाता है जो गुणों और स्वरूपण विकल्पों को परिभाषित करता है। यह ब्राउज़र को बताता है कि गुण किस विशिष्ट तत्व पर लागू होते हैं।
एक संपत्ति एक संरचनात्मक इकाई है। यह बाहरी मापदंडों (आकार, स्थान, रंग, आकार, आदि) को परिभाषित करता है और एक विशिष्ट कोड में व्यक्त किया जाता है।
परिभाषित सीएसएस गुणों का एक सेट है जो उपस्थिति और स्थान में एक ही वस्तु का वर्णन करता है।
एक साथ, ये तत्व निम्नलिखित योजना बनाते हैं:
चयनकर्ता { संपत्ति 1: मूल्य; संपत्ति 2; मूल्य}.
लेआउट आकार और संकल्प
डिजाइन का विकास फोटोशॉप या अन्य ग्राफिक कार्यक्रमों में लेआउट की तैयारी के साथ शुरू होता है। सुविधा के लिए, मॉड्यूलर ग्रिड के विशेष चिह्नों को कैनवास में पेश किया जाता है, विशेष इंडेंट देखे जाते हैं। इस प्रकार, वेब डिज़ाइनर लेआउट डिज़ाइनर को भविष्य की साइट की संरचना और वेब तत्वों की सही व्यवस्था के सिद्धांतों को दिखाता है।
मुख्य डिवाइस प्रकारों के लिए उत्तरदायी वेब डिज़ाइन रिज़ॉल्यूशन और आकार:
- यह डिजाइन मोबाइल की अनुमति से काम शुरू करने के सिद्धांत का पालन करता है। स्मार्टफोन के लिए लेआउट 460 × 960 px के आकार में बनाया गया है।
- टैबलेट लेआउट का आकार 768 × 1024 है।
- नोटबुक का आकार 1280 × 802 है।
- पीसी का आकार 1600 × 992 है।
साइट के मोबाइल संस्करण मेंसभी मुख्य कार्यों को बनाए रखते हुए यथासंभव सरलीकृत किया जाना चाहिए। यदि लेआउट एक ऑनलाइन स्टोर के लिए तैयार किया जा रहा है, उपयोग में सभी सरलीकरण के साथ, इसमें एक मुख्य विवरण, एक उत्पाद सूची, एक ऑर्डर विकल्प, एक शॉपिंग कार्ट आदि होना चाहिए - पूर्ण कामकाज के लिए सभी आवश्यक तत्व, जैसा कि पीसी पर फुल-फॉर्मेट देखने के साथ होता है। मोबाइल संस्करण की सुविधा यह है कि यहां आप लोड करते समय समय बचाने के लिए अतिरिक्त पृष्ठों से बच सकते हैं।
अनुकूली सामग्री में, html कोड का उपयोग करके, आप कुछ ऐसे तत्वों को छिपा सकते हैं जिनकी वास्तव में आवश्यकता नहीं है। उदाहरण के लिए, उच्च रिज़ॉल्यूशन पर, साइट अपने विवरण, मूल्य, वितरण जानकारी और "टोकरी" में जोड़ने की क्षमता के साथ एक उत्पाद कार्ड प्रदर्शित करती है। मोबाइल रिज़ॉल्यूशन में, प्रक्रिया को एक फ़ोटो, एक मूल्य और एक खरीद बटन के रूप में सरल बनाया जाता है।
उत्तरदायी डिजाइन के लिए मध्यम और न्यूनतम संकल्पों को उपयोगकर्ता द्वारा पढ़ने और देखने में आसानी को ध्यान में रखना चाहिए।
लेआउट
अनुकूली डिजाइन लेआउट का उद्देश्य एक लचीला लेआउट बनाना है, या जैसा कि यह कहने के लिए भी प्रथागत है: "रबर टेम्पलेट"। निचला रेखा एकल-अंक पृष्ठ आकार में नहीं है, लेकिन सभी उपकरणों पर आसानी से देखने के लिए टेम्पलेट की आनुपातिक संपीड़न में है।
यह मुख्य रूप से CSS पर बनाया गया है। विकास के दौरान, स्क्रीन आयामों के नियंत्रण बिंदु निर्धारित किए जाते हैं। इस प्रकार, शेष वस्तुओं की चौड़ाई निर्धारित की जाती है। ऐसा करने के लिए, पृष्ठ की चौड़ाई सीएसएस अधिकतम-चौड़ाई संपत्ति द्वारा निर्धारित की जाती है, इन मानदंडों के आधार पर, अन्य तत्वों के आकार को प्रतिशत के रूप में चुना जाता है। उदाहरण के लिए, मुख्य पर ब्लॉक का आकारपृष्ठ 600px है, और साइडबार ब्लॉक (साइट साइडबार) की चौड़ाई क्रमशः 400px है, सामग्री की चौड़ाई 60% और साइडबार की चौड़ाई 40% होगी।
रेस्पॉन्सिव लेआउट कई प्रकार के होते हैं। सुविधाओं और निर्माण के आधार पर प्रत्येक को व्यक्तिगत रूप से चुना जाता है।
दृश्य:
- एक लेआउट प्रकार जो स्क्रीन रिज़ॉल्यूशन कम होने पर ब्लॉक को रैप करने की अनुमति देता है। बहु-स्तंभ साइटों पर, अतिरिक्त ब्लॉकों को स्क्रीन के निचले भाग में ले जाया जाता है।
- जब प्रत्येक अनुमति के लिए एक अलग पैटर्न तैयार किया जाता है। इस प्रकार के रिस्पॉन्सिव डिज़ाइन में अधिक समय लगता है लेकिन यह सबसे अधिक पठनीय है।
- एक साधारण प्रकार का डिज़ाइन जिसका उद्देश्य सभी तत्वों को मापना है। यह लचीला नहीं है।
- मोबाइल एप्लिकेशन में उपयोग के लिए पैनल प्रकार सुविधाजनक है, जब स्क्रीन की स्थिति बदलते समय अतिरिक्त फ़ंक्शन दिखाई देते हैं।
उत्तरदायी परतें बनाना कार्य का केवल एक हिस्सा है। अनुकूली चित्र एक अलग मामला है, जिसकी अपनी समस्याएं और उन्हें हल करने के तरीके हैं।
एकल छवि अलग-अलग स्क्रीन रिज़ॉल्यूशन पर स्पष्ट रूप से प्रदर्शित होनी चाहिए। यहां एक समस्या है - कैसे सुनिश्चित करें कि संकल्प में परिवर्तन की परवाह किए बिना तस्वीर हमेशा एक जैसी रहती है। इस मामले में एक साधारण सीएसएस कोड दर्ज करना पर्याप्त नहीं होगा।
उदाहरण: img {अधिकतम-चौड़ाई: 250px;} - यहां आपको एक ऐसी विधि लागू करनी चाहिए जिसमें छवि वाले कंटेनर का आकार सीमित हो, न कि स्वयं छवि। यह कुछ इस तरह दिखाई देगा: div img {अधिकतम-चौड़ाई: 250px;}। यह विधि समस्या का समाधान करती हैछोटी छवियों का लेआउट, लेकिन बड़े चित्रण के लिए उपयुक्त नहीं है।
इसलिए, कई डेवलपर्स जावास्क्रिप्ट भाषाओं का उपयोग करना पसंद करते हैं जो आपको सर्वर को ओवरलोड किए बिना किसी भी छवि को अनुकूलित करने की अनुमति देते हैं। जावास्क्रिप्ट बड़ी संख्या में वैकल्पिक स्क्रिप्ट प्रदान करता है।
रेस्पॉन्सिव लेआउट के फायदे और नुकसान
सकारात्मक:
- सभी तत्वों का स्थान सहेजें। यह तब सुविधाजनक होता है जब उपयोगकर्ता को साइट के पूर्ण संस्करण की आदत हो जाती है।
- डोमेन और पते सहेजें।
- अन्य अनुमति प्रारूपों के लिए पूर्ण अनुकूलन।
नकारात्मक:
- कार्यात्मक लचीलापन खो गया है
- कोई भी सूचनात्मक अधिभार एक वेब संसाधन के लंबे लॉन्च से भरा होता है, जो कई उपयोगकर्ताओं को तेज़ विकल्पों पर स्विच करने के लिए मजबूर करता है।
वेबसाइट बनाना
साइट संरचना कई वर्गों और ब्लॉकों में विभाजित है। परंपरागत रूप से, लेआउट में साइट का शीर्ष भाग (हेडर), लोगो, मेनू, सामग्री ब्लॉक और साइट का अंतिम भाग होता है (उदाहरण के लिए, विस्तृत संपर्क जानकारी)। आइए देखें कि एक साधारण टेम्पलेट से एक प्रतिक्रियाशील वेबसाइट डिज़ाइन कैसे बनाया जाता है।
लिखने के लिए सहायक टैग:
- आवरण - टैग जो सभी टेम्पलेट तत्वों को जोड़ता है;
- हैडर h1 - लोगो;
- शीर्षलेख - मेनू और अन्य महत्वपूर्ण तत्वों के लिए शीर्षलेख;
- सामग्री - ब्लॉक;
- colLeft - सामग्री का आकार;
- colRight - साइडबार (साइड कॉलम);
- पाद - साइट का अंतिम भाग;
- मीडिया स्क्रीन - सेटवांछित संकल्प।
साइट लिखते समय, ये तत्व आवश्यकता के आधार पर एक अलग क्रम में आगे बढ़ सकते हैं। उदाहरण के लिए, उच्च रिज़ॉल्यूशन पर, मेनू को लंबवत रूप से प्रदर्शित किया जा सकता है। मोबाइल संस्करण में, लेआउट को इस तरह से बनाया जा सकता है कि मेनू क्षैतिज स्थिति में स्लाइड हो जाए।
- व्यूपोर्ट - एक टैग जो आपको डिज़ाइन के छोटे संस्करण में टेक्स्ट के आकार को सहेजने की अनुमति देता है। यह टैग के बीच स्थित है।
- अधिकतम-चौड़ाई - 1000 पिक्सेल से अधिक रिज़ॉल्यूशन पर स्ट्रेचिंग से बचने के लिए साइट को अनुकूलित करने के लिए।
लेआउट को लागू करते समय, jQuery लाइब्रेरी बहुत मदद करती है जब आपको ब्लॉक की शैली और संरचना को बदलने की आवश्यकता होती है।
रिस्पॉन्सिव और मोबाइल डिज़ाइन में क्या अंतर है
पूरी तरह से समझने के लिए, कुछ उदाहरणात्मक उदाहरणों पर विचार करें, क्योंकि इन दो अवधारणाओं के बीच भ्रम असामान्य नहीं है।
आपको यह समझने की आवश्यकता है कि मोबाइल संस्करण एक उपडोमेन वाली प्राथमिक साइट का एक एनालॉग है। साइट की बाहरी प्रस्तुति पूरी तरह से शैली और कार्यक्षमता को दोहराती है, जबकि इसकी संरचना और सामग्री मुख्य संस्करण से भिन्न हो सकती है, क्योंकि संस्करण को आवश्यक तत्वों तक काट दिया गया है।
रिस्पॉन्सिव डिज़ाइन सभी डिवाइस रिज़ॉल्यूशन के लिए इष्टतम है। यह मापनीय है और देखने की स्थिति की परवाह किए बिना सही ढंग से प्रस्तुत करता है।
ये साइट की दो अलग-अलग प्रस्तुतियाँ हैं, जिनको लेकर विवादों में लगातार रोष है कि कौन सा बेहतर है। यह ध्यान दिया जाना चाहिए कि अभी तक कोई निश्चित निर्णय नहीं हुआ है। फैशन ट्रेंड और ढेर सारे फायदों की ओर इशारा करते हुए कोई इस डिजाइन की तारीफ करता है।मोबाइल संस्करण में भी कई फायदे हैं जो उत्तरदायी डिजाइन में नहीं हैं। इसलिए सबसे पहले तो आपको बुनियादी जरूरतों को समझना चाहिए।
लाभ
रिस्पॉन्सिव डिज़ाइन मोबाइल से कैसे बेहतर है?
बहुमुखी प्रतिभा। हमारे समय में, बाजार के इस तरह के उन्मादी विकास के साथ, उपभोक्ताओं की इच्छाओं को पूरा करते हुए, जानकारी को एक अलग तरीके से प्रस्तुत करना आवश्यक है। उत्तरदायी डिजाइन इस समस्या को हल करता है।
खोज इंजन में प्रभावी प्रचार। अनुकूली उपकरण के मुख्य लाभों के लिए क्या जिम्मेदार नहीं ठहराया जा सकता है। खोज इंजन उपयोगकर्ताओं को उत्तरदायी वेबसाइट देना पसंद करते हैं।
उपयोगिता। रिस्पॉन्सिव डिज़ाइन को आमतौर पर सर्वश्रेष्ठ डिज़ाइन समाधानों में डिज़ाइन किया जाता है, जो उपयोगकर्ताओं की दृश्य धारणा के लिए एक अच्छा उपहार है।
परियोजना के कार्यान्वयन और इसके उपयोग में आसानी और सरलता।
अच्छी रूपांतरण दरें। चूंकि अनुकूली डिजाइन के साथ प्रदर्शन के अधिक अवसर होते हैं, रूपांतरण स्वयं बढ़ता है।
अर्थव्यवस्था। यह एक अलग मोबाइल संस्करण बनाने और प्रचारित करने की तुलना में अपेक्षाकृत सस्ता है।
मोबाइल संस्करण के फायदे और नुकसान
एक प्रतिक्रियाशील मोबाइल डिज़ाइन बनाने के लिए बहुमुखी प्रतिभा और निरंतरता की आवश्यकता होती है। सबसे पहले, संदर्भ की शर्तों को विस्तार से लिखने की सिफारिश की जाती है, जो निश्चित रूप से अनावश्यक काम से बचने और समय बचाने में मदद करेगी, साथ ही उस सर्वर की विशेषताओं को भी ध्यान में रखेगी जिस पर साइट होस्ट की जाएगी।.
मोबाइल रिस्पॉन्सिव डिज़ाइन के कुछ फायदे और नुकसान हैं।
पेशेवर:
- यदि आपके पास एक तैयार साइट है, तो मोबाइल संस्करण के लिए एकदम से डिज़ाइन विकसित करने की कोई आवश्यकता नहीं है। इस लेआउट को अनावश्यक कार्यक्षमता से मुक्त करते हुए, केवल कुछ ही बदलाव किए जा सकते हैं।
- सभी प्रकार के सरलीकरण के कारण, डाउनलोड करते समय मोबाइल संस्करण को तेज माना जाता है।
- उपयोगकर्ता सभी सामग्री में सबसे महत्वपूर्ण जानकारी देखता है।
- तेजी से क्रियान्वयन। ऐसे प्लगइन्स हैं जिनके साथ आप मोबाइल अनुकूलन को लागू कर सकते हैं, भले ही आप टैग और कोड न जानते हों।
- खोज इंजन विकल्प अनुकूली संस्करणों का समर्थन करते हैं क्योंकि उन्हें विश्लेषण करने में कम समय लगता है।
विपक्ष:
- सभी मोबाइल संस्करण मोबाइल डिवाइस रिज़ॉल्यूशन से मेल नहीं खा सकते हैं। साइट, निश्चित रूप से खुल जाएगी, लेकिन स्क्रीन रिज़ॉल्यूशन हमेशा लेआउट से मेल नहीं खाता है। कभी-कभी एक अच्छी तरह से डिज़ाइन किया गया स्मार्टफ़ोन डिज़ाइन टैबलेट के रूप में खोले जाने पर भिन्न दिखाई दे सकता है।
- मोबाइल संस्करणों के लिए अलग सशुल्क डोमेन की आवश्यकता होती है।
- सामग्री पोस्ट करने में कुछ छोटी-मोटी समस्याएं हैं। यदि एक साथ कई संस्करण हैं, तो सामग्री को सभी प्रारूपों के लिए एक साथ समायोजित किया जाना चाहिए। मुख्य साइट पर नई सामग्री जमा करना और उसे मोबाइल संस्करण में कॉपी करना चोरी माना जा सकता है। इस समस्या से बचने के लिए, आपको संसाधनों का कनेक्शन साबित करना पड़ सकता है।
कार्यान्वयन के तरीके
मुख्य कार्यान्वयन विधियां:
- लेआउट और लेआउट का डिज़ाइन बनाने के बाद, इसका उपयोग करके आवश्यक आयामों में लोड किया जाता हैऑपरेटर साइट और मुख्य कोड। मध्यम और छोटे संस्करण (टैबलेट, स्मार्टफोन, आदि) बनाते समय यह एक क्लासिक विधि है।
- बूटस्ट्रैप अनुकूलन उपकरणों का एक सरल और स्पष्ट सेट है। लैंडिंग पृष्ठ और अन्य बहुत जटिल वेब परियोजनाओं के लिए संस्करण बनाने के लिए उपयुक्त नहीं है। यह इंटरफ़ेस फ़ंक्शंस में कई अलग-अलग शैलियों को लागू करने का एक अच्छा अवसर देता है।
- Responsive Grid System बहुमुखी उपकरणों का एक लोकप्रिय सेट है। आवेदन करने में आसान और गहन ज्ञान की आवश्यकता नहीं है। इन्फोग्राफिक्स की एक विस्तृत विविधता शामिल है।
- गम्बी - एक सीएसएस ढांचा जिसमें लचीली प्रतिक्रिया और बेहतरीन टूलिंग है।
- कुकीज़ - आपको प्रतिक्रियाशील छवियों को लागू करने की अनुमति देता है। ब्राउज़र द्वारा अनुरोधित फ़ाइलों के साथ स्वचालित रूप से साथ आता है।
- ExpressionEngine प्रतिक्रियाशील चित्र बनाने का एक और तरीका है। निर्धारित करता है कि डिवाइस मोबाइल है, छवियों को आवश्यक रिज़ॉल्यूशन में बदलने में सक्षम है।
- ProtoFluid - रैपिड प्रोटोटाइप प्रदान करता है। सभी प्रकार के उपकरणों के लिए उपयुक्त।
