रेस्पॉन्सिव वेबसाइट कैसे बनाएं? यहां आप आज के वेब मॉडल के आधार पर इस अनुकूली तकनीक के बारे में जानकारी प्राप्त कर सकते हैं, जिसका अर्थ है कि एक ही डिजाइन के तहत, किसी भी कंप्यूटर या इलेक्ट्रॉनिक डिवाइस से वेब पोर्टल को सही तरीके से एक्सेस और देखा जा सकता है।
¿Responsive वेबसाइट कैसे बनाये?
संभावित अनुकूलन के लिए वेबसाइट को उत्तरदायी या संवेदनशील बनाना बहुत सुविधाजनक है। किसी भी इलेक्ट्रॉनिक प्लेटफॉर्म से इंटरनेट पर सही ढंग से काम करने की सफलता की गारंटी देने के अलावा। निम्नलिखित पंक्तियों में, एक उत्तरदायी वेब बनाने का तरीका स्पष्ट किया गया है, जिसकी कल्पना वेब पेजों की अनुकूलन क्षमता की प्रकृति से की गई है। इसलिए, उत्तरदायी मॉडल के तहत एक वेब पेज डिजाइन करते समय, उक्त वेब की उपस्थिति या छवि को नेविगेशन के लिए उपयोग किए जा रहे इलेक्ट्रॉनिक उपकरण के आधार पर समायोजित और देखा जा सकेगा।
कोई भी उपकरण या इलेक्ट्रॉनिक उपकरणों की बहुरूप मात्रा से अनजान नहीं है जो वर्तमान में इंटरनेट पर नेविगेट करने के लिए मौजूद हैं, जैसे: कंप्यूटर, टैबलेट, स्मार्टफोन, लैपटॉप, आदि। इंटरनेट के शुरुआती दिनों में, वेबसाइट डेवलपर्स को पिक्सल की सामान्य चौड़ाई वाले पेज बनाने की आदत हो गई थी। उदाहरण के लिए, 90 के दशक में, जो मॉनिटर मौजूद थे, उनका सिंगल स्क्रीन साइज 14” था, जिसकी निश्चित चौड़ाई 640 पिक्सल थी। वेब पेज डिजाइनरों ने अपने डिजाइनों को मौजूद एकमात्र मॉनिटर के मानक आयामों में फिट किया।
वर्ष 2000 की शुरुआत के करीब और 2010 के आगमन तक, मॉनिटर मॉडल और पिक्सेल चौड़ाई अलग-अलग थी। वेब डिज़ाइन को प्रत्येक विविधता में समायोजित किया गया था। यह वर्ष 2010 से था कि महान तकनीकी क्रांति हुई, जिससे वेब पेज डिजाइन परिदृश्य में असंतुलन पैदा हो गया। इंटरनेट के क्षेत्र में मोबाइल टेलीफोनी के माध्यम से नेविगेशन की शुरुआत की गई। इस नई टेलीफोनी में कंप्यूटर की तरह ही ब्राउज़र का इस्तेमाल किया गया था। इस महान तकनीकी क्रांति के साथ, वेब पेजों के उत्तरदायी डिजाइन या अनुकूली डिजाइन के रूप में जाने जाने का समय आ गया है।
रिस्पॉन्सिव वेब बनाने का तरीका जानने का महत्व
यह इतना महत्वपूर्ण है कि वेब पेज डेवलपर एक प्रतिक्रियाशील वेब बनाना जानते हैं; कि इंटरनेट पर महान प्रतिष्ठा वाली कंपनी Google भी इसे अत्यंत आवश्यक के रूप में इंगित करती है। क्योंकि रिस्पॉन्सिव मॉडल के तहत डिज़ाइन किया गया वेब पेज नेविगेशन ऑप्टिमाइज़ेशन की अनुमति देता है, डुप्लिकेट सामग्री से बचा जाता है और असाधारण रूप से स्थिर छवि गुणवत्ता प्रदान करता है। अन्य पहलू जो एक उत्तरदायी वेबसाइट बनाते समय महत्वपूर्ण हैं, वे हैं:
- हाइपरटेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) और सीएसएस भाषा के एकल अनुकूलन के साथ, इसे किसी भी स्क्रीन रिज़ॉल्यूशन को कवर करने के लिए प्राप्त किया जा सकता है। इस प्रकार प्रत्येक प्रकार के उपकरण के लिए एक वेब पेज के निर्माण से बचना जो आपको इसे देखने या ब्राउज़ करने की अनुमति देता है। यह पहलू डिजाइन समय को भी कम करता है।
- ब्राउज़ करते समय यह स्वचालित रूप से अनुकूलित हो जाता है, प्रत्येक विशिष्ट विज़िट पर पढ़ने और बातचीत को संभव बनाता है।
- वे सर्च इंजन में खुद को बेहतर और तेज स्थिति में लाने का प्रबंधन करते हैं। चूंकि इस प्रकार का डिज़ाइन दोहराव और पुनर्निर्देशन से बचता है।
- इस डिज़ाइन के तहत बनाए गए वेब पेज उनकी सामग्री को उनके मूल और साझा करने के सरल तरीके के कारण अधिक तेज़ी से वायरल होने देते हैं।
एक उत्तरदायी वेब डिज़ाइन क्या है
उत्तरदायी वेब डिज़ाइन, जिसे अनुकूली वेब डिज़ाइन के रूप में भी जाना जाता है, वेब पेजों को डिज़ाइन करने या विकसित करने का एक तरीका है। इस प्रणाली में एक ही डिजाइन के तहत बनाई गई वेबसाइट को किसी भी कंप्यूटर या इलेक्ट्रॉनिक प्लेटफॉर्म से देखने या एक्सेस करने की अनुमति देने की विशिष्टता है। उत्तरदायी नाम एक अंग्रेजी शब्द है जो किसी ऐसी चीज को संदर्भित करता है जो उत्तरदायी, अनुकूलनीय, समझने योग्य, दृश्यमान इत्यादि है।
प्रत्येक स्क्रीन चौड़ाई माप को समायोजित करने के लिए इस प्रकार की वेबसाइट की क्षमता के कारण इस तकनीक को यह नाम प्राप्त हुआ है। नेविगेशन के लिए उपयोग किए जाने वाले उपकरण में कोई भेद किए बिना, इसके प्रदर्शन और सही संचालन को संभव बनाना।
यह छवियों और सामग्री के संगठन के साथ-साथ उत्तरदायी वेब मेनू की सादगी के लिए संभव है। इस प्रकार के वेब पेज डिजाइन को परिभाषित करने वाले और लोकप्रिय बनाने वाले चार मुख्य क्वालिफायर हैं:
- सरल
- किफ़ायती
- शीघ्र
- और इन सबसे ऊपर, वे पूरी तरह कार्यात्मक हैं
रिस्पॉन्सिव डिज़ाइन वेब कैसे बनाएं और इसकी जटिलता
वेब पेजों के डिजाइन और विकास के बारे में जटिलता 2010 के दशक से उभरी है, जब नेविगेशन के साथ मोबाइल फोन इंटरनेट पर दिखाई देने लगे। जो एक पीसी की तरह ही गूगल, फायरफॉक्स, एक्सप्लोरर जैसे ब्राउजर का इस्तेमाल करता था। इस तरह से विभिन्न वेब साइट्स पर विजिट करने की नई संभावनाओं में बनना। इन समयों में इंटरनेट एक्सेस के साथ पहले इलेक्ट्रॉनिक टैबलेट भी दिखाई देने लगे।
वहां से वेब पेजों के डिजाइन की जरूरतें और अधिक जटिल हो गईं। वेबसाइटों के प्रदर्शन और संचालन के लिए मौजूद स्क्रीन आकारों की विस्तृत विविधता के कारण। आपको एक प्रकार का डिज़ाइन ढूंढना था जो किसी भी प्रकार के उपकरण के लिए काम करे, और स्वचालित रूप से समायोजित हो जाए।
अब आप एक, दो या तीन प्रमुख स्क्रीन रिज़ॉल्यूशन के लिए डिज़ाइन नहीं कर सकते। यह समझना आवश्यक था कि कंप्यूटर मॉनिटर की तुलना में बहुत छोटे होने के अलावा, उपकरणों के संकल्प तेजी से परिवर्तनशील होंगे।
इस क्षण ने वेब डिज़ाइन की कठोरता के अंत को चिह्नित किया। और न केवल विभिन्न प्रकार के उपकरणों के लिए, बल्कि उनमें से प्रत्येक की विशिष्ट विशेषताएं भी हैं, जैसे:
- स्क्रीन का आकार
- स्क्रीन रिज़ॉल्यूशन
- सीपीयू पावर
- ओएस
- दूसरों के बीच स्मृति क्षमता।
फिर नया वेब डिज़ाइन मॉडल पेश किया गया, जिसका उद्देश्य यह है कि एक ही डिज़ाइन के साथ, ब्राउज़िंग डिवाइस की परवाह किए बिना इसका सही विज़ुअलाइज़ेशन संभव होगा। हालाँकि, इस प्रकार की वेबसाइट को विकसित करने में इसकी जटिलता की डिग्री होती है।
उत्तरदायी वेब विकसित करने की जटिलता का कारण क्या है?
अनुकूलता डिज़ाइन के तहत एक वेबसाइट विकसित करना जिसे उत्तरदायी कहा जाता है, आज भी इसकी जटिलता की डिग्री है। दो मुख्य कारणों से, जो नीचे दिए गए हैं:
1-यह एक ऐसी तकनीक है जिसे लंबे समय से विकसित नहीं किया गया है और आवेदन के कई साधनों के कारण, यह निर्धारित करना संभव नहीं है कि सभी विकल्पों में से कौन सा सबसे अच्छा हो सकता है। हर पल विकसित होने वाले इस प्रकार के वेब डिज़ाइन के संदर्भ में नवाचार हमेशा उभर रहे हैं। इसलिए, सर्वोत्तम ढांचे या समर्थन प्रौद्योगिकी को निर्धारित करना मुश्किल है, न ही एक सामान्य नियम जो संभावित बाधाओं की सबसे बड़ी संख्या के समाधान को सुनिश्चित करता है। इस प्रकार की वेबसाइट को विकसित करना आसान बनाने के लिए।
2- दूसरा कारण यह है कि अनुकूली डिजाइन प्रणाली केवल तकनीकी दृष्टि से आधारित नहीं है। जिस तरह से साइट अलग-अलग स्क्रीन या उपकरणों के अनुसार अलग-अलग होगी। इसके बजाय, इसे इस विचार के साथ डिजाइन किया जाना चाहिए कि यह प्रत्येक संभावित नेविगेशन परिदृश्य में कैसे काम करेगा। यह कारण उत्तरदायी वेब डिज़ाइन मॉडल में उच्च स्तर की जटिलता जोड़ता है जिसे साइट डेवलपर के रूप में काम करने वाले लोगों द्वारा साफ़ किया जा सकता है।
अनुकूली या प्रतिक्रियाशील वेब डिज़ाइनों के साथ काम करने के लिए व्यायाम करने और पर्याप्त कौशल प्राप्त करने के लिए किसी अन्य प्रकार के वेब डिज़ाइन की तुलना में अधिक समय की आवश्यकता होती है। लेकिन यह आशा की जाती है कि कंप्यूटिंग में प्रगति के साथ, जटिलता की डिग्री कम होगी। इस संबंध में और विकसित होने के लिए, उत्तरदायी डिजाइनों के प्रकारों में शामिल वेबसाइट ज्ञान वाले कर्मचारियों से, पेशेवर कर्मचारी जैसे:
- लेआउट
- डिजाइनरों
- प्रोग्रामर्स
- वाणिज्यिक और डिजिटल मार्केटिंग स्टाफ
डिजाइन समय घटाएं
यदि पिछले दो कारणों को हल कर लिया जाता है, तो शायद यह एक उत्तरदायी वेब के विकास या निर्माण की अवधि को कम कर देगा। साथ ही इसे सामान्य वेबसाइटों के उपयोग के लिए उपलब्ध कराना संभव है।
इस बीच, आज जो हमारे पास है, मोबाइल उपकरणों के लिए नए वेब डिज़ाइन को खरोंच से विकसित करना तेज़ हो सकता है; वेब को अनुकूलनीय या उत्तरदायी बनाने के लिए उसे रूपांतरित या पुन: डिज़ाइन करना। हमेशा यही उम्मीद रहेगी कि एक दिन कोई न कोई रास्ता खोज लेगा और उसे हासिल कर लेगा, आइए उसके लिए आशा करते हैं।
इस बीच, क्या किया जा सकता है?
तथ्य यह है कि यह अभी भी एक पूरी साइट को फिर से डिजाइन करने के लिए बहुत जटिल है जो हमारे पास वेब पर है, इसे अनुकूलनीय बनाने के लिए। इसका मतलब यह नहीं है कि हम साइट में कुछ छोटे बदलाव करना बंद कर दें। इसे बेहतर बनाने और विभिन्न ब्राउज़रों के साथ-साथ विभिन्न इलेक्ट्रॉनिक उपकरणों पर अनुकूलन के लिए इसे उत्तरदायी बनाने के लिए।
पहली बात यह सत्यापित करना है कि नेविगेशन साइट में किस प्रकार का वेब डिज़ाइन है। मुख्य रूप से जांचें:
- वेबसाइट का लेआउट
- Html और CSS के संदर्भ में इसकी संरचना क्या है
इन दो बुनियादी बिंदुओं का विश्लेषण करके यह स्थापित किया जा सकता है कि वेबसाइट को बेहतर बनाने के लिए छोटे-छोटे संशोधन किए जा सकते हैं।
रिस्पॉन्सिव वेब बनाने का तरीका जानने के लिए ध्यान देने योग्य पिछली बातें
यदि ऐसा है कि आपके पास पहले से ही एक वेब पोर्टल, एक लैंडिंग पृष्ठ या एक सामग्री ब्लॉग है, जिसे एक सामान्य डिज़ाइन के तहत विकसित किया गया था और आप इसे एक उत्तरदायी या अनुकूलन क्षमता डिज़ाइन वेबसाइट में बदलना चाहते हैं। यह सिर्फ निर्णय लेना है और इसे प्राप्त करने के लिए पहला कदम उठाना है, इसे करने का निर्णय लेना है!
एक वेबसाइट को पारंपरिक डिजाइन से उत्तरदायी में बदलने के तथ्य का मतलब यह नहीं है कि सभी मूल कार्य खो जाएंगे। चूंकि सभी सामग्री को खारिज नहीं किया जाएगा, लेकिन इसमें मामूली और छोटे बदलाव होंगे। छवियों, ग्रंथों और मौजूदा साइट के कुछ अन्य तत्वों जैसी सामग्री का उपयोग किया जा सकता है और परिवर्तन के साथ सही ढंग से काम कर सकता है।
हालांकि, साइट को अनुकूलित करने और सुधारने के विकल्प को देखते हुए, कुछ पूर्व विचारों को जानना सुविधाजनक है जो किए जाने वाले कार्य के पक्ष में होंगे।
मौजूदा वेब मूवमेंट की जाँच करें
मौजूदा वेब में कोई भी परिवर्तन करने से पहले, यह सलाह दी जाती है कि उस पर आने वाले ट्रैफ़िक को सत्यापित कर लें। यानी वेबसाइट पर आने वाले लोगों की संख्या के बारे में आंकड़े। इस जानकारी के आधार पर, हम अधिक सफलता और बेहतर खोज स्थिति प्राप्त करने की दृष्टि से, डिज़ाइन को संशोधित करने पर काम करेंगे। वेब के पुन: डिज़ाइन और अनुकूलन में इसके बारे में जानना सुविधाजनक है एसईओ उपकरण, क्योंकि जब नेटवर्क में बेहतर स्थिति प्राप्त करने की बात आती है तो वे सबसे अच्छे होते हैं।
एक अच्छी प्रेरणा आवश्यक है
एक नज़र डालने और बनाने की भी सलाह दी जाती है प्रतियोगी विश्लेषण या वेबसाइट से मिलती-जुलती सामग्री वाले पेज, जिन पर रिस्पॉन्सिव वेब डिज़ाइन के बदलाव लागू किए जाएंगे. इस पूर्वावलोकन का उद्देश्य संभावित सामग्री सुधारों के लिए शोध करना है। लेकिन यह भी कि वे समान पृष्ठ विभिन्न उपकरणों पर कैसे काम करते हैं। उन साइटों के चयन के लिए जिन पहलुओं को ध्यान में रखा जाना चाहिए, जो प्रेरणा के हो सकते हैं या सुधार में मॉडल हो सकते हैं। वे उन पृष्ठों पर नेविगेशन की आसानी होगी और जिनके लिए कम ज़ूमिंग या स्क्रॉलिंग की आवश्यकता होती है। यहाँ आप के लिए सर्वोत्तम तरकीबें पा सकते हैं एसईओ में सुधार करें अच्छी सामग्री प्राप्त करने के लिए उन्हें लागू करें!
सिमेंटिक एचटीएमएल एहसान
सिमेंटिक एचटीएमएल का उपयोग इंगित करता है कि मूल वेबसाइट का लेआउट सही ढंग से स्थापित किया गया था। यह अनुकूल है या बहुत मददगार है, क्योंकि केवल आवश्यक Html तत्वों का उपयोग किया गया था। वेब के विकास को ध्यान में रखते हुए, प्रत्येक टैग के शब्दार्थ एक ही वेब के डिज़ाइन के ऊपर हैं। कक्षाओं और आईडी के अनुसार, सीएसएस को डिजाइन का अपना काम छोड़ना।
उत्तरदायी वेबसाइट बनाने की प्रक्रिया के दौरान, जैसे तत्व:
- DIV
- P
- UL
- एलआई, दूसरों के बीच
हालांकि, अगर मॉडल के पूरे डिजाइन के साथ वितरण के चरण का पालन करना आवश्यक है। क्योंकि आप घुसपैठ करने वाले CSS का उपयोग नहीं कर सकते हैं, अर्थात कोड के भीतर किसी भी Style विशेषता का उपयोग न करें। चूंकि अधिक परिष्कृत और कम डीआईवी के साथ, एचटीएमएल है, यह अनुकूलन को आसान बनाने या वेब को अधिक संवेदनशील बनाने में मदद करेगा। क्योंकि प्राप्त परिणाम में CSS को बढ़ाया जाएगा।
उत्तरदायी वेबसाइट बनाने के तरीके पर ज़ूम को ठीक से सेट करें
वेबसाइटों के पूर्ण प्रदर्शन को प्राप्त करने के लिए मोबाइल ब्राउज़र में ज़ूम इन के उचित विकल्प की अनुशंसा की जाती है। उत्तरदायी वेब डिज़ाइन विकसित होने से पहले मोबाइल उपकरणों पर ब्राउज़र पहले से मौजूद थे। इन उपकरणों पर वेबसाइटों को पूर्ण रूप से देखने के लिए, ब्राउज़र को ज़ूम टूल का सहारा लेना पड़ता है। इसलिए मोबाइल डिवाइस से पारंपरिक रूप से डिज़ाइन की गई वेबसाइट तक पहुँचने पर। मोबाइल का प्राकृतिक रिजॉल्यूशन नहीं देखा जाएगा, लेकिन जूम टूल द्वारा किया गया एक अनुकूलन तब तक प्रदर्शित होगा जब तक कि इसे 960 पिक्सल की चौड़ाई में समायोजित नहीं किया जाता है।
क्योंकि ऐसा करने का कोई दूसरा तरीका नहीं था, डेवलपर्स Html बना रहे थे जो ज़ूम के परिवर्तन या समायोजन को अंजाम देता था। इस प्रकार, उपकरणों पर संकल्प के अनुकूलन को करते समय, टीम को दूसरे प्रकार के स्केलिंग का उपयोग करने के लिए कहा जाना चाहिए। उपयोग करने के लिए एक उपयुक्त प्रकार मेटा टैग है जिसे व्यूपोर्ट के रूप में जाना जाता है, जिसे वेबसाइट के शीर्ष में दर्ज किया जाता है। इस मेटा टैग के साथ आप उस प्रक्रिया का विवरण दे सकते हैं जो ब्राउज़र रूपांतरित वेब में निष्पादित करेगा। निम्नलिखित वाक्य रचना देखें, शब्दशः लिखित:
व्यूपोर्ट मेटा टैग का यह प्रतीकात्मक लेआउट उत्तरदायी वेब डिज़ाइन में सबसे अधिक उपयोग किया जाने वाला लेआउट है। हालांकि, कई अन्य कॉन्फ़िगरेशन हैं जिनका उपयोग इस उद्देश्य के लिए किया जा सकता है। केवल यह कि प्रस्तुत सिंटैक्स में दो चर होते हैं जो मोबाइल ब्राउज़र को वेब के अनुकूल बनाते हैं न कि दूसरी तरफ। ये चर हैं:
डिवाइस-चौड़ाई या डिवाइस की चौड़ाई
चर चौड़ाई = डिवाइस-चौड़ाई को कॉन्फ़िगरेशन में शामिल किया जाता है ताकि स्क्रीन के पिक्सेल में चौड़ाई मोबाइल डिवाइस की चौड़ाई से मेल खाए। इस तरह, मोबाइल का अपना रिजॉल्यूशन प्रदर्शित होता है।
सर्वोत्तम संभव उपयोग प्रदान करने के लिए, मोबाइल ब्राउज़र पृष्ठ को डेस्कटॉप स्क्रीन की चौड़ाई के समान प्रदर्शित करते हैं। यह चौड़ाई मोबाइल डिवाइस के आधार पर भिन्न हो सकती है। लेकिन अक्सर यह लगभग 980 पिक्सेल में से एक होता है। इसके बाद, यह फ़ॉन्ट आकार को बढ़ाकर, साथ ही सामग्री के पैमाने को बदलकर सामग्री की उपस्थिति को अनुकूलित करने का प्रयास करता है ताकि यह डिवाइस स्क्रीन पर फिट हो सके।
इससे उपयोगकर्ताओं को यह कुछ असंगत या भ्रमित करने वाला लग सकता है और फिर सामग्री के साथ जुड़ने के लिए ज़ूम इन करने के लिए दो बार टैप करना होगा। व्यूपोर्ट मेटा टैग वैरिएबल का उपयोग करना: चौड़ाई = डिवाइस-चौड़ाई चौड़ाई को समायोजित करने के लिए लेआउट पर एक क्रिया की मांग करती है। इस तरह से कि पृष्ठ विभिन्न स्क्रीन आयामों में फिट होने के लिए सामग्री को फिर से समायोजित कर सकता है, चाहे वह छोटे सेल फोन पर प्रदर्शित हो या पीसी मॉनिटर पर।
प्रारंभिक-पैमाना या प्रारंभिक पैमाना
प्रारंभिक-स्केल= चर को डिवाइस के आधार पर सीएसएस पिक्सेल और मोबाइल पिक्सेल के बीच संबंधपरक पैमाने निर्धारित करने के लिए कॉन्फ़िगरेशन में शामिल किया गया है। ऊपर दिखाए गए विन्यास में यह प्रारंभिक पैमाने के लिए इंगित किया गया है: प्रारंभिक-पैमाना = 1.0। यहां सिंटैक्स यह संकेत दे रहा है कि पिक्सल के बीच का अनुपात 1:1 है, एक सीएसएस पिक्सेल को डिवाइस पिक्सेल में पढ़ा जाता है। ज़ूम के लिए इस मान को अपनाने के लिए मोबाइल ब्राउज़र को आदेश दिया जाता है और यह डिवाइस द्वारा उपयोग किया जाने वाला एक होगा। हालांकि, आइए निम्नलिखित दो विकल्पों को देखें:
- जब प्रारंभिक-पैमाना चर 1.0 के बराबर होता है, तो यह ज़ूम के बिना एक प्रदर्शन को संदर्भित करता है, क्योंकि यह एक से एक होता है।
- जबकि यदि प्रारंभिक-पैमाना = 2.0, चर पूरे पृष्ठ पर अपने आकार से दोगुने तक बढ़े हुए ज़ूम को संदर्भित करता है।
इसलिए, मोबाइल की चौड़ाई में फिट होने के लिए डिज़ाइन की गई वेबसाइट पर उपयोग करने का उपयुक्त विकल्प पहला होगा। यह डिवाइस को बताता है कि कोई ज़ूम लागू न करें। लेकिन साथ ही, ऐसे मामले भी हो सकते हैं जिनमें इस चर को शामिल या लागू नहीं करना सबसे अच्छा विकल्प होगा। इस तरह छोड़कर कि वही मोबाइल है जो अपने आप ज़ूम को उस चौड़ाई के अनुकूल बनाता है जो डिज़ाइन में इंगित की गई है।
मूल व्यूपोर्ट कॉन्फ़िगरेशन - अनुप्रयोग उदाहरण:
चाहे आपके पास 500 पिक्सेल की चौड़ाई हो और एक प्रारंभिक-स्केल कमांड दिया गया हो, वेब 500 पिक्सेल की स्क्रीन चौड़ाई के रूप में दिखाई देता है। हालांकि, मोबाइल पर, इसका मूल विन्यास वेब के कुल 320 पिक्सल के 500 पिक्सल के अनुमानित समकक्ष अनुपात के साथ प्रदर्शित किया जाएगा।
हालाँकि, दूसरी ओर, यदि, एक प्रारंभिक-पैमाने का क्रम नहीं दिया जाता है, तो संपूर्ण वेब प्रदर्शित होता है, अर्थात, 500 पिक्सेल, एक अनुकूलित ज़ूम के तहत। व्यूपोर्ट टैग के इन दो विशिष्ट कॉन्फ़िगरेशन का सिंटैक्स, टेक्स्ट के रूप में निम्नानुसार होगा:
पिछला कॉन्फिगरेशन एक ऐसी वेबसाइट के लिए होगा, जिसमें मोबाइल रिजॉल्यूशन के अनुकूल रिस्पॉन्सिव डिजाइन हो। जबकि ऐसी वेबसाइट के लिए जो पूरी तरह से मोबाइल रिज़ॉल्यूशन के अनुकूल नहीं है, कॉन्फ़िगरेशन इस प्रकार होगा:
विशिष्ट लोगों के अलावा, कुछ अन्य विन्यास भी हैं। उनमें से एक है जूम लगाकर मोबाइल की चौड़ाई वाली वेबसाइट डिजाइन करना। लेकिन इस प्रकार का डिज़ाइन उपयोगकर्ता के लिए बहुत ही अजीब और भ्रमित करने वाला होगा।
कैसे एक उत्तरदायी वेबसाइट बनाने के लिए - मीडिया प्रश्न
जब आप जानना चाहते हैं कि एक उत्तरदायी वेबसाइट या एक अनुकूलनीय पृष्ठ कैसे बनाया जाता है, तो आपको पता होना चाहिए कि आपको मीडिया प्रश्नों के रूप में ज्ञात प्रणाली को लागू करना होगा। यह तकनीक आपको स्क्रीन के रिज़ॉल्यूशन के आधार पर, एक शर्त के माध्यम से, विभिन्न आकृतियों या शैलियों को स्थापित करने की अनुमति देती है। लेकिन मीडिया प्रश्न क्या हैं?
मीडिया प्रश्न
मीडिया क्वेश्चन एक ऐसी तकनीक है जिसमें CSS वाक्यों को स्थापित करना शामिल है। जिसके साथ आप वेब डिज़ाइन पर लागू होने वाले बयान दे सकते हैं, जब तक कि पहले से दी गई या स्थापित कुछ शर्तें पूरी होती हैं। ये मीडिया क्वेरी स्टेटमेंट मूल रूप से वेब पर दो बिंदुओं पर लागू किए जा सकते हैं:
- सबसे पहले, सीएसएस फ़ाइल को कॉल करते समय, प्रत्येक में निर्दिष्ट करें कि इसे लोड करने के लिए क्या शर्तें हैं। उदाहरण:
- दूसरा, उसी CSS फ़ाइल में, एक अलग स्थान स्थापित करना जहाँ उपयोग किए जाने वाले CSS अंश शामिल हैं। उदाहरण:
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई:320px) और (अधिकतम-चौड़ाई:480px){
/*इस चौड़ाई सीमा के लिए शैली घोषणाएं */
वास्तव में, मीडिया प्रश्न एक शक्तिशाली उपकरण है जो वेब के भीतर अन्य विभिन्न मुद्दों को उठाने के लिए उत्तरदायी वेब डिज़ाइन को छोड़ने की संभावना की अनुमति देता है। बाद में दस्तावेजीकरण के लायक, मीडिया प्रश्नों की इस तकनीक के बारे में थोड़ा और।
इस बीच, अभी के लिए मीडिया क्वेरी सिस्टम के बारे में दो बिंदुओं को जानना पर्याप्त है:
- CSS फ़ाइल में मीडिया प्रश्नों की घोषणा करने का तरीका
- पुराने जमाने के इंटरनेट ब्राउज़रों के लिए मीडिया क्वेश्चन तकनीक के एंडोमेंट के साथ कैसे अपडेट करें
मीडिया क्वेरी घोषणा
पिछले पैराग्राफ में मीडिया के प्रश्नों को क्रियान्वित करने के दो तरीकों का निरीक्षण करना संभव था। पहला बाहरी स्टाइल पेज में और दूसरा तरीका सीधे स्टाइल पेज पर लिखने का।
रिस्पॉन्सिव वेब डिज़ाइन कैसे बनाया जाए, इसके संदर्भ में, यह समझा जाना चाहिए कि एक मीडिया क्वेरी एक सीएसएस घोषणा है जिसका उपयोग एक संकेतक के रूप में किया जाता है ताकि यह पता चल सके कि मोबाइल के माप या मूल्यों के आधार पर एक और शैली की घोषणा कब की जानी चाहिए। या कोई अन्य उपकरण जहां वेब प्रदर्शित होने वाला है।
उदाहरण, एक सीएसएस अंश घोषित करने का तरीका, जो एक मीडिया क्वेरी द्वारा परिभाषित एक सशर्त के अंदर है, में निम्नलिखित सिंटैक्स कॉन्फ़िगरेशन है:
@मीडिया स्क्रीन और ([शर्तें]) {
/* इस स्क्रीन की चौड़ाई या उससे कम वाले हमारे नए नियम */
}
इसी तरह, स्क्रीन की चौड़ाई के आधार पर, तीन प्रकार के मीडिया क्वेरी स्टेटमेंट जेनरेट किए जा सकते हैं। इस तरह आप प्रत्येक मामले में अपने आवेदन के बारे में सुनिश्चित हो सकते हैं
-पहली घोषणा केवल उन प्रस्तावों में लागू की जानी है जो पिक्सेल की चौड़ाई से कम हैं = X:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई:[WIDTH]px) {
/* इस स्क्रीन की चौड़ाई या उससे कम वाले हमारे नए नियम */
}
-दूसरी घोषणा केवल उन संकल्पों में लागू की जानी है जो पिक्सेल की चौड़ाई = X से अधिक हैं:
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई:[WIDTH]px) {
/* इस स्क्रीन चौड़ाई या अधिक के साथ हमारे नए नियम */
}
-तीसरी घोषणा उन प्रस्तावों में लागू की जानी है जिनकी चौड़ाई X और Y के बीच परिभाषित पिक्सेल की श्रेणी के बीच है:
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई:[WIDTH X]px) और (अधिकतम-चौड़ाई:[WIDTH Y]px) {
/* इस स्क्रीन चौड़ाई या अधिक के साथ हमारे नए नियम */
}
तीनों में से कौन?
निर्णय डेवलपर के स्वाद पर आधारित होगा। हालांकि, ऊपर दिखाए गए पहले मीडिया क्वेरी स्टेटमेंट को लागू करना आम बात है। केवल यह अनुशंसा की जाती है कि इसे संचयी रूप से लागू किया जाए। इस प्रकार, हर बार जब चौड़ाई को छोटा किया जाता है, तो डिजाइन के तत्वों को संशोधित किया जाता है।
मीडिया क्वेरीज़ को Internet Explorer के साथ संगत बनाएं
इंटरनेट एक्सप्लोरर वेब पर मौजूद पहले ब्राउज़रों में से एक था। इसलिए, यह बहुत संभव है कि यह ब्राउज़र नेटवर्क उपयोगकर्ताओं द्वारा अक्सर उपयोग किए जाने वाले कई सिस्टम, पैरामीटर या तकनीकों का समर्थन नहीं करता है या संगत नहीं है। लेकिन वेब विकास में बहुत सारे तकनीकी कर्मचारी हैं, जो पूरी तरह से नवाचारों की खोज में शामिल हैं। जिसने इन पुराने ब्राउज़रों को सक्षम और संगत बनाने के लिए पुस्तकालयों की एक श्रृंखला बनाई है।
Internet Explorer के नौ (9) नंबर से कम संगत संस्करण बनाने के लिए। यह सिर्फ निम्नलिखित जावास्क्रिप्ट लाइब्रेरी को लागू कर रहा है: css3-mediaqueries-js.
निम्नलिखित स्क्रिप्ट को वेबसाइट के शीर्ष पर रखकर, आप बिना किसी असुविधा के मीडिया प्रश्नों के साथ काम करने में सक्षम होंगे।
प्राप्त परिणाम सबसे सही नहीं हो सकता है, लेकिन यह आम तौर पर अनुकूलता की एक अच्छी डिग्री की अनुमति देता है।
रिस्पॉन्सिव वेबसाइट कैसे बनाएं – मूल डिजाइन
किसी वेबसाइट को अनुकूलित करने और उसे बदलने के लिए अलग-अलग तरीके हो सकते हैं, हालांकि एक उत्तरदायी वेबसाइट में वर्तमान में तीन आधार या डिजाइन अवधारणा के रूप हैं। पहले इन डिज़ाइनों में लागू करने के लिए कुछ नए विवरणों के साथ डेवलपर्स पूर्वावलोकन दिखाए गए थे। यह कठोर या स्थिर के रूप में विशेषता वाली वेबसाइटों को विकसित करने की आदत से आता है। रिस्पॉन्सिव में डिज़ाइन की गई वेबसाइटों पर जाने के लिए, कठोरता की उस विशेषता को बदलना।
आज आपको अंतहीन इलेक्ट्रॉनिक उपकरण मिल सकते हैं जिनके साथ आप वेब ब्राउज़ कर सकते हैं। और समय बीतने के साथ राशि अधिक होगी। वेबसाइट डेवलपर्स के लिए आवश्यक है कि ये वेबसाइटें उपकरणों की इस विस्तृत श्रृंखला के लिए सही ढंग से अनुकूलन करने में सक्षम हों।
काम को आसान बनाने के लिए बुनियादी डिजाइन
प्रतिक्रियाशील डिजाइन के कार्य को सरल बनाने का एक तरीका यह है कि उन्हें तीन बुनियादी समूहों में विभाजित या वर्गीकृत किया जाए ताकि यह पता चल सके कि उनसे कैसे निपटा जाए। ये तीन बड़े योग्यता समूह हैं:
- बड़ी स्क्रीन: जिसमें वेबसाइट के पास बिना किसी असुविधा के पूरी तरह से देखने में सक्षम होने के लिए पर्याप्त जगह और उससे भी अधिक है।
- पुरानी या छोटी स्क्रीन: जिसमें वेब को अपने संपूर्ण विज़ुअलाइज़ेशन के लिए पर्याप्त चौड़ाई नहीं मिलती है, यानी यह स्क्रीन के फ्रेम में फिट नहीं होती है। यह बिना किसी उपयोग के एक असहज निचला बार भी दिखाता है जो आपको कम सामग्री देखने की अनुमति देता है।
- मोबाइल डिवाइस स्क्रीन: वेब इन उपकरणों पर इतनी छोटी जगह पाता है कि केवल सामान्य डिजाइन के साथ ही इसकी सामग्री की जानकारी को पढ़ना संभव है।
इसलिए यदि आप किसी वेबसाइट के मूल डिज़ाइन और लेआउट को एक अद्यतन में बदलना चाहते हैं जिसका उपयोग किया जा सकता है और व्यवहार्य है। इन तीन आधार समूहों को हल करने की आवश्यकता है। समाधान प्राप्त करने में कठिनाई की डिग्री आम तौर पर इस बात पर निर्भर करेगी कि मॉडल कैसे तैयार किया गया है। लेकिन, सामान्य तौर पर, आज की तकनीक के साथ, वेब पर कुछ बदलाव किए जा सकते हैं।
बड़ी स्क्रीन के लिए रिस्पॉन्सिव वेब कैसे बनाएं - समाधान
इस आधार बिंदु पर यह आमतौर पर किसी बड़ी कठिनाई का प्रतिनिधित्व नहीं करता है। क्योंकि वेब को इन बड़े स्क्रीन प्रारूपों में देखने के लिए डिज़ाइन किया गया था। वर्तमान मानक यह है कि वेबसाइटें 960 के पिक्सल में स्क्रीन चौड़ाई के केंद्रीय फ्रेम पर आधारित होती हैं। ऐसे में जब इसे अनुकूलित ज़ूम के साथ मोबाइल फोन पर लोड किया जाता है, तो यह उनमें से अधिकांश में सही ढंग से फिट बैठता है। लेकिन पुरानी वेबसाइटों के मामले में, पिक्सेल-चौड़ाई वाला केंद्रीय फ़्रेम संभवतः 1024 पिक्सेल की चौड़ाई वाली स्क्रीन के लिए डिज़ाइन किया गया था। किसी भी मामले में, इस आधार समूह के लिए, कंटेनरों का उपयोग करना उचित है जैसा कि निम्नलिखित सिंटैक्स द्वारा दर्शाया गया है:
#मुख्य {चौड़ाई:960px; मार्जिन: 0 ऑटो; }
यह कॉन्फ़िगरेशन "मुख्य" कंटेनर सेट करने का समर्थन करता है जो इसे वेब-केंद्रित होने की अनुमति देता है। इस कंटेनर के साथ, वेब के बाहरी स्वरूप को समृद्ध करने के लिए विभिन्न पृष्ठभूमियों को जोड़ा जा सकता है। जितना हो सके ब्लैक-व्हाइट पेज से बचने के लिए इसके डिज़ाइन को थोड़ा विकसित करना।
संक्षेप में, बड़ी स्क्रीन के इस स्तर पर, वेब को रूपांतरित करने के लिए बहुत कुछ नहीं किया जाता है। हालांकि यह संभव है कि ऐसे वेब उपयोगकर्ता हों जो इसे टीवी से बड़ी स्क्रीन के साथ और कम देखने की दूरी पर भी देखना चाहते हों।
इन मामलों में मोबाइल आधार समूह की तरह बड़े बदलाव करने की आवश्यकता है। लेकिन चूंकि आमतौर पर ऐसे बहुत से लोग नहीं होते हैं जो नेविगेट करने के लिए टीवी का उपयोग करते हैं, डेवलपर्स आमतौर पर इन अनुकूलन में अधिक समय नहीं लगाते हैं। यदि आप अभी भी इस प्रकार के अनुकूलन पर काम करना चाहते हैं, तो नीचे बताए गए मोबाइल समूह में लागू नियमों के समान नियमों को स्थापित करने की अनुशंसा की जाती है।
छोटे परदे के लिए रिस्पॉन्सिव वेब कैसे बनाएं - समाधान
इस मूल डिजाइन समूह से, अनुकूलित किए जाने वाले वेब के रूपांतरण की जटिलता शुरू होती है। परिदृश्य इस प्रकार है: किसी दिए गए स्क्रीन चौड़ाई पर काम करने के लिए बनाया गया पृष्ठ। वास्तव में, उस चौड़ाई में समायोजित कंप्यूटरों से बहुत से लोग इसे देखते हैं। लेकिन विचार करने वाले लोगों का एक बड़ा प्रतिशत भी है, जिनके पास वेब पर जाने के लिए डिज़ाइन की तुलना में कम रिज़ॉल्यूशन वाले डिवाइस हैं।
इस वर्गीकरण समूह में, डिज़ाइन से कम स्क्रीन रिज़ॉल्यूशन वाले उपकरणों को मोबाइल उपकरणों से अलग किया जाना चाहिए। खैर, इन मामलों का विश्लेषण तीसरे डिजाइन मामले में किया गया है। इसलिए, उस बिंदु की स्पष्ट परिभाषा से शुरू करना आवश्यक है जहां छोटी स्क्रीन डिवाइस समाप्त होती है और वह बिंदु जहां मोबाइल डिवाइस शुरू होता है।
उसी तरह छोटी स्क्रीन के लिए, मूल वेबसाइट के रिज़ॉल्यूशन को कम किया जाना चाहिए ताकि इसे उन उपकरणों के अनुकूल बनाया जा सके। केवल इतना ही स्पष्ट होना चाहिए कि इस कमी को किस हद तक आगे बढ़ाया जा रहा है। ताकि बड़ी संख्या में तत्व छोटे स्क्रीन पर एकत्रित न हों, जिससे वेब का स्वरूप कम हो जाता है।
सीमा निर्धारित करने के लिए आवश्यक जानकारी
मोबाइल उपकरणों से जानकारी नीचे साझा की गई है। मोबाइल डिवाइस बनने के लिए जब यह एक छोटी स्क्रीन बनना बंद कर देता है तो सीमाएं स्थापित करने की बात आती है तो यह बहुत महत्वपूर्ण होगा। इससे निर्णय लेने में आसानी होगी।
मोबाइल सामग्री:
- मोबाइल का उपयोग लंबवत रूप से किया जाता है, जो कि सबसे अधिक उपयोग किया जाने वाला रूप है। यह आमतौर पर 320 पिक्सेल चौड़े रिज़ॉल्यूशन को अपनाता है।
- क्षैतिज स्थिति में, मोबाइल रिज़ॉल्यूशन को डिवाइस स्क्रीन के सही आकार में समायोजित किया जाता है। यह रिज़ॉल्यूशन आमतौर पर 400 और 600 पिक्सल के बीच चौड़ा होता है।
- दूसरी ओर, टैबलेट में, रिज़ॉल्यूशन डिवाइस पर निर्भर करेगा। सामान्य तौर पर, सबसे अधिक बिकने वाले मॉडलों के आंकड़ों को ध्यान में रखते हुए, रिज़ॉल्यूशन लगभग 600 पिक्सेल चौड़ा होता है। 1024 पिक्सेल चौड़े तक पहुँचने में सक्षम होने के नाते।
स्क्रीन की चौड़ाई सीमा
इस वर्गीकरण में उत्तरदायी वेब डिज़ाइन में अपनाई जाने वाली सबसे बड़ी मानक चौड़ाई सीमा, उपरोक्त जानकारी के अनुसार, 400 पिक्सेल की चौड़ाई तक है। इस चौड़ाई माप से, वेब के विज़ुअलाइज़ेशन में परिवर्तन बहुत तेज़ी से शुरू होना चाहिए, साथ ही इसके मूल संचालन में कुछ बदलाव का अनुभव होगा।
हालाँकि, कुछ डेवलपर्स ने इस सीमा को 600 पिक्सेल की चौड़ाई पर सेट किया है। इस संकल्प से छोटे स्क्रीन और मोबाइल उपकरणों के बीच मध्यवर्ती अनुकूलन बनाना।
निचली सीमा पर, यह 320 पिक्सेल तक की न्यूनतम स्क्रीन चौड़ाई अपनाने के लिए तैयार है। किसी भी मामले में, इन दी गई सीमाओं से अधिक सीमा स्थापित करना वेब डेवलपर पर निर्भर है। लेकिन सभी छोटे स्क्रीन उपकरणों को कवर करने का प्रयास करना उचित नहीं है।
छोटे स्क्रीन समाधान में मुख्य नेविगेशन शैलियाँ
छोटे स्क्रीन के अनुकूली समाधान में कम से कम इन तीन मुख्य नेविगेशन शैलियों को कैप्चर करना पर्याप्त हो सकता है। जो नीचे सूचीबद्ध हैं:
- लंबवत रूप से उपयोग किए जाने वाले मोबाइल उपकरण: इस मामले में, डिवाइस स्क्रीन केवल 320 और 400 पिक्सेल के बीच रिज़ॉल्यूशन रेंज में स्थापित पढ़ने और बहुत सरल नेविगेशन की अनुमति देती है।
- क्षैतिज रूप से उपयोग किए जाने वाले मोबाइल उपकरण और टैबलेट: इस मामले में, एक पारंपरिक क्षैतिज प्रदर्शन पहले से ही प्राप्त किया जा सकता है। हालांकि, यह ध्यान रखना आवश्यक है कि नेविगेशन स्पर्श द्वारा उत्पन्न होता है न कि क्लिक करके। इसके अनुसार क्रियाओं से बचना चाहिए: 400, 600 या 800 पिक्सेल में ऑनमाउसओवर।
- टेबलटॉप डिवाइस: इन मामलों में, सामान्य वेब डिज़ाइन बिना किसी समस्या के काम करता है, जिसमें स्क्रीन की चौड़ाई 800 पिक्सेल से अधिक होती है।
उपरोक्त सभी को कहने के बाद, एक छोटी स्क्रीन का अर्थ विभिन्न प्रकार के पीसी, लैंडस्केप मोबाइल डिवाइस और टैबलेट से समझा जाता है। यह विविधता इस समूह को एक संवेदनशील डिजाइन के लिए वेब को अनुकूलित करने के लिए एक नरम जटिलता के साथ कवर करती है। इस मामले में, कार्य के सरलीकरण के लिए, ब्लॉकों द्वारा किए गए लेआउट कार्य के लिए यह बहुत महत्वपूर्ण है। एक ही क्रिया में तीन प्रकार के उपकरणों को एकजुट करने के लिए।
यदि यह स्पष्ट रूप से परिभाषित किया जाता है कि मोबाइल स्क्रीन को किस चौड़ाई से माना जाता है। प्रदर्शित किए जाने वाले मध्यवर्ती स्क्रीन प्रारूप को स्पष्ट किया गया है। वर्तमान लेआउट के ब्लॉकों को बदलने के लिए ताकि वे स्क्रीन के अनुसार आकार बदल सकें और काम कर सकें और साथ ही सही ढंग से प्रदर्शित हो सकें।
वैश्विक चौड़ाई कंटेनर
वेबसाइट के भीतर वैश्विक कंटेनर वैश्विक चौड़ाई को इंगित करने या इंगित करने के कार्य को पूरा करते हैं। कहने का तात्पर्य यह है कि इन तत्वों के साथ आप वेबसाइट पर एक विशिष्ट चौड़ाई को केंद्र में रख सकते हैं और निर्धारित कर सकते हैं। वे एक निश्चित चौड़ाई से अधिकतम या कैप चौड़ाई में बदलकर कॉन्फ़िगरेशन को कुछ लचीलापन देते हैं। वेब ढांचे के लिए प्रारंभिक घोषणा में स्थापित किया जा रहा है, से बदल रहा है चौडाई a अधिकतम-चौड़ाई. उसी तरह, न्यूनतम-चौड़ाई की घोषणा के साथ, पहले से स्थापित श्रेणियों के अनुसार न्यूनतम चौड़ाई स्थापित की जाती है। इस प्रकार, उन उपकरणों की चौड़ाई को नियंत्रित करना संभव होगा जिनके बारे में सोचा गया था कि वे नियंत्रण में नहीं थे। ऊपर दी गई स्क्रीन चौड़ाई सीमा की सीमा लेना; घोषणा का सिंटैक्स इस प्रकार होगा:
#मुख्य {अधिकतम-चौड़ाई:960px; न्यूनतम-चौड़ाई:320px; मार्जिन: 0 ऑटो;}
बड़ी स्क्रीन के लिए समाधान समान है। अधिक, हालांकि, जब वेब धीरे-धीरे आकार में एक साथ घटता है, तो केंद्रीय फ्रेम चौड़ाई में ऐसा करेगा।
व्यावहारिक उदाहरण
चौड़ाई फ्रेम परिवर्तन के लिए सेटिंग्स पर एक व्यावहारिक उदाहरण नीचे दिया गया है। इस उदाहरण में 1080 पिक्सल की चौड़ाई वाली एक वेबसाइट है, जो हेडर, मुख्य सामग्री और पाद लेख तत्वों पर लागू होती है। करने के लिए पहली बात यह है कि विभिन्न वैश्विक कंटेनर ब्लॉक में चौड़ाई, निश्चित चौड़ाई के रूप में नहीं, बल्कि अधिकतम पृष्ठ चौड़ाई के रूप में इंगित करें। वाक्यों के लिए, वे इस प्रकार के ब्लॉकों की संख्या पर निर्भर करेंगे जिनका उपयोग किया जा रहा है। तो आइए निम्नलिखित सिंटैक्स को देखें:
#शीर्षक #शीर्ष {स्थिति:सापेक्ष; अधिकतम-चौड़ाई:1074px; न्यूनतम-चौड़ाई:320px; ऊंचाई:115पीएक्स; मार्जिन: 0 ऑटो; [...]}
[...]
#header ul.menu {स्थिति:सापेक्ष; अधिकतम-चौड़ाई: 1008px; न्यूनतम-चौड़ाई:320px; ऊंचाई: 95 पीएक्स; [...]}
[...]
#ऑक्स-मेन{स्थिति:सापेक्ष; अधिकतम-चौड़ाई: 1008px; न्यूनतम-चौड़ाई:320px; मार्जिन: 0 ऑटो; [...]}
[...]
#footer ul {अधिकतम-चौड़ाई:768px; न्यूनतम-चौड़ाई:320px; मार्जिन:10px ऑटो;}
आंतरिक कंटेनर
इस बिंदु से, हम थोड़ा और विस्तार करेंगे कि कैसे एक उत्तरदायी वेबसाइट को रूपांतरित करके बनाया जाए। यह लगभग तय है कि परिवर्तित किया जाने वाला पृष्ठ एक डिज़ाइन या लेआउट से बना है, जिसे विभिन्न तत्वों में विभाजित किया गया है, उदाहरण के लिए, वे हो सकते हैं:
- एक सौ प्रतिशत चौड़ाई हैडर
- चौड़ाई के काफी हिस्से पर कब्जा करने वाली सामग्री
- साइड के एक हिस्से में एक या अधिक साइडबार या लेटरल बार
- एक सौ प्रतिशत चौड़ाई पर कब्जा कर रहा है, एक पाद
तो आपके पास कई कंटेनर होंगे जिनकी शायद एक निश्चित चौड़ाई है जो पृष्ठ पर कॉलम को परिभाषित करती है। इन कंटेनरों को विभिन्न तकनीकों के उपयोग के माध्यम से स्तंभों में बदल दिया गया हो सकता है, जैसे:
- सबसे बड़ी मात्रा में तैरता है
- प्रदर्शन:कुछ मामलों में इनलाइन
- प्रदर्शन: उनमें से अन्य में बॉक्स
अगला कदम तब उन तत्वों को गैर-सटीक बयानों में बदलने में सक्षम होना होगा। ताकि मूल कंटेनर इंगित किए गए मूल कथन को ठीक से कैलिब्रेट न करे। या क्या समान है, आपको उन सभी तत्वों में पिक्सेल से प्रतिशत मान में बदलना होगा जो वेबसाइट की चौड़ाई में एक स्थान को संदर्भित करते हैं, जैसे कि निम्नलिखित:
- चौड़ाई
- अधिकतम-चौड़ाई
- मार्जिन और
- पैडिंग
पहले किए गए लेआउट कार्य के साथ, यह चरण वास्तव में सरल हो जाता है। चूंकि यह केवल एक विभाजन बना रहा है, यह निर्धारित करने में सक्षम होने के लिए कि प्रतिशत मानों में कंटेनर तत्व के पिक्सेल में माप के अनुरूप क्या है। इसलिए प्रतिशत की गणना निम्नलिखित गणितीय समीकरण को लागू करके की जाएगी:
[आंतरिक तत्व चौड़ाई का Px] / [मूल तत्व चौड़ाई का Px] * 100
वेब डेवलपर्स के लिए प्रतिशत में माप के साथ वेब मॉडल पर काम करने की आदत डालने का यह एक अच्छा तरीका है, क्योंकि यह चरण पहले ही हल हो जाएगा।
प्रतिशत की गणना
प्रदर्शन करने का अगला चरण प्रतिशत की गणना है। इस भाग में स्तंभों के रूप में कुछ कष्टप्रद प्रस्तुत किया जा सकता है। चूंकि पिछली कॉलमिंग फ्लोट तत्वों के साथ बनाई गई थी, और जब आप फ्रेम को सिकोड़ते हैं, तो साइडबार सामग्री के नीचे चला जाता है। हालाँकि, उपरोक्त समीकरण लागू होता है। और इस तरह वैश्विक कंटेनर DIV के भीतर प्रत्येक तत्व की प्रतिशत गणना की जाती है। जैसा कि ऊपर बताया गया है कि इसकी चौड़ाई 1080 पिक्सल थी। इन मापों को प्रतिशत मानों में परिवर्तित करने पर, हम निम्नलिखित सिंटैक्स प्राप्त करते हैं:
#मुख्य #सामग्री {फ्लोट:बाएं; चौड़ाई: 63.9880952%; मार्जिन: 30px 0 0 1.98412698%; }
[...]
#मुख्य #साइडबार {फ्लोट:बाएं; मार्जिन:20px 0 0 3.47222222%; चौड़ाई:28.7698413%; }
जैसा कि देखा जा सकता है, चौड़ाई और क्षैतिज मार्जिन दोनों को बदल दिया गया है। इस तरह वेबसाइट एक चौकोर रूप बनाए रखेगी। ध्यान देने योग्य एक अन्य महत्वपूर्ण बिंदु प्रतिशत में दर्शाए गए दशमलवों की संख्या है। जिसका उद्देश्य यह है कि पिक्सेल में मूल मान के लिए गणना यथासंभव सटीक हो।
आकार में वृद्धि करने वाले ढीले आंतरिक तत्वों के लिए समाधान
वेब पेज को बदलने की प्रक्रिया में, मॉडल में कुछ ढीले तत्वों को खोजना संभव है, जो कि उनकी टाइपोलॉजी के कारण, उनके अधिकतम वैश्विक कंटेनर, अधिकतम-चौड़ाई से ऊपर बढ़ सकते हैं। ब्राउज़र के आकार के साथ खेलकर इन तत्वों का पता लगाया जा सकता है, क्योंकि उन्हें पता चला है कि उन्हें सही किया गया है। इन तत्वों को ठीक करने या उनसे बचने का एक और त्वरित तरीका कंटेनरों का चयन करना और यह आदेश देना है कि कोई भी आंतरिक तत्व कंटेनर के आकार से ऊपर न बढ़े।
विकसित किए जा रहे उदाहरण में, सुधार का यह अंतिम रूप मुख्य सामग्री और साइडबार में लागू होता है। इस प्रकार, कुछ समस्याएं जो विगेट्स से उत्पन्न हो सकती हैं, उन्हें स्वयं हल किया जा सकता है। इसके अनुसार, ढीले आंतरिक तत्वों को हल करने के लिए विन्यास इस प्रकार होगा:
#मुख्य #सामग्री {फ्लोट:बाएं; चौड़ाई: 63.9880952%; मार्जिन: 30px 0 0 1.98412698%; }
#मुख्य #सामग्री * {अधिकतम-चौड़ाई: 100%}
[...]
#मुख्य #साइडबार {फ्लोट:बाएं; मार्जिन:20px 0 0 3.47222222%; चौड़ाई:28.7698413%; }
#मुख्य #साइडबार * {अधिकतम-चौड़ाई: 100%}
निरपेक्ष में स्थित तत्व
उन सभी तत्वों के लिए जो वेब पेज में बिल्कुल भी बदलने के लिए तैनात हैं। उसी पिछली प्रक्रिया को चौड़ाई के साथ उन पर लागू किया जाना चाहिए, उनकी चौड़ाई को बदलने के लिए एब्सिस्सा अक्ष पर प्रतिशत में मूल्यों के अनुकूल होना चाहिए। यह मानते हुए कि विकसित किए जा रहे उदाहरण में, हेडर में कुछ तत्व बिल्कुल स्थित हैं। उनकी स्थिति इन तत्वों के अनुकूल होनी चाहिए, ताकि वेब के आयाम कम होने पर वे हवा में तैरते न रहें। इसके लिए, विन्यास इस प्रकार होगा:
[...]
#हेडर #टॉप पी.ब्रेडक्रंब {स्थिति: पूर्ण; शीर्ष: 90 पीएक्स; बाएं: 3.72439479%; रंग: सफ़ेद;}
[...]
#header #top p.like { स्थिति: पूर्ण; शीर्ष: 10 पीएक्स; बाएं: 54.0037244%; }
[...]
#header #top div.vcard{position:absolute; शीर्ष:11px; दाएं: 5.49348231%; चौड़ाई: 27.9329609%;}
आंतरिक तत्वों में मीडिया प्रश्नों को लागू करना
पृष्ठ की चौड़ाई को अनुकूलित करते समय, यह संभव है कि ऐसे तत्व हों, जो अपनी सामग्री के कारण, पुन: डिज़ाइन में स्थान नहीं पाते हैं। अनुकूलन खराब दिखने से ये रास्ते में आ सकते हैं। इस अजीब स्थिति से बचने के लिए, सरल मीडिया प्रश्नों का उपयोग किया जाता है जो कुछ विशिष्ट आयामों के होने पर सीएसएस के कठोर संशोधन की अनुमति देते हैं।
मीडिया क्वेश्चन एक बहुत ही शक्तिशाली उपकरण है जिसके साथ कई आर्टिफीस बनाए जा सकते हैं। इस बार उन्हें स्क्रीन की चौड़ाई के संबंध में कुछ शर्तों को परिभाषित करने के लिए लागू किया जाएगा, और जहां से सीएसएस बदलेगा। इसके लिए हम निम्नलिखित सिंटैक्स को ध्यान में रखेंगे:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई:[WIDTH]px) {
/* इस स्क्रीन की चौड़ाई या उससे कम वाले हमारे नए नियम */
}
यह मीडिया क्वेरी स्टेटमेंट विशेष रूप से विभिन्न प्रस्तावों के लिए लेआउट को अनुकूलित करने का प्रयास करता है। तो इसका उपयोग कुछ माध्यमिक तत्वों को छिपाने के लिए किसी भी चीज़ से अधिक किया जा सकता है, जो विशिष्ट स्क्रीन चौड़ाई को देखते हुए, उपयोगकर्ता की सहायता से अधिक परेशान कर सकता है। छोटे कपलिंग बनाने के लिए सेवा करने के अलावा, ताकि कुछ तत्व विभिन्न परिदृश्यों में पुन: डिज़ाइन में फिट हो सकें।
जो कहा गया है उसका उदाहरण देने के लिए, 800 और 600 पिक्सेल से नीचे के रिज़ॉल्यूशन के कुछ तत्व छिपे होंगे। कि एक मामले में वे अनुकूलित किए जाने वाले वेबसाइट के मुख्य पृष्ठ की सामग्री के सही दृश्य में बाधा डाल रहे हैं। निम्नलिखित वाक्यविन्यास के अनुसार:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 800px) {
#शीर्षलेख #शीर्ष पी.लाइक,
#हेडर #टॉप पी.ब्रेडक्रंब,
#शीर्षलेख #शीर्ष div.vcard पी.ट्विटर,
#शीर्षलेख #शीर्ष div.vcard p.linkedin,
#header #top div.vcard p.स्वादिष्ट,
#शीर्षलेख #शीर्ष div.vcard p.google,
.vcard h2 {डिस्प्ले: कोई नहीं;}
}
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 600px) {
#साइडबार .ट्विटर {डिस्प्ले:कोई नहीं;}
}
जैसा कि आप देख सकते हैं कि वे 800 पिक्सेल से कम के रिज़ॉल्यूशन में छिपे हुए हैं:
-पसंद
- ब्रेडक्रंब
-सामाजिक बटन, दूसरों के बीच
600 पिक्सेल नीचे से साइडबार से अंतिम ट्वीट्स निकाले जा रहे हैं
मीडिया क्वेरीज़ आपको कुछ शैलियों को संशोधित करने की अनुमति भी देती हैं
जैसा कि आप पहले ही देख सकते हैं, मीडिया के प्रश्न आपको कुछ आंतरिक तत्वों को छिपाने की अनुमति देते हैं। लेकिन वे आपको कुछ शैलियों में परिवर्तन करने की अनुमति भी देते हैं। इस विशिष्टता का उपयोग किया जा सकता है यदि कोई तत्व, चौड़ाई के संदर्भ में अनुकूलित नहीं होने के अलावा, वांछित नहीं है या गायब या छिपाने के लिए नहीं बनना चाहता है। यदि वेब पर यह स्थिति उत्पन्न होती है तो आप रूपांतरित करना चाहते हैं। फिर, मीडिया प्रश्नों के उपयोग के माध्यम से, इसकी शैली को सूक्ष्म रूप से बदलने की कोशिश की जाएगी, ताकि यह अनुकूल हो सके।
यह मानते हुए कि जिस वेब पर काम किया जा रहा है, उस पर सामाजिक बटन इस प्रकार की समस्या पैदा कर रहे हैं। और जब पेज 960 पिक्सल से कम चौड़ा हो जाता है, तो यह आइकनों को हटाकर और फ़ॉन्ट आकार को कम करके, इसके स्वरूपण को सूक्ष्म रूप से बदलने का निर्णय लेता है। तब विन्यास निम्नलिखित होगा:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 960px) {
#शीर्षक #शीर्ष div.vcard p {फ़ॉन्ट-आकार:9px;}
#header #top div.vcard p.twitter to,
#हेडर #टॉप डिव.वीकार्ड पी.लिंक्डइन ए,
#header #top div.vcard p.स्वादिष्ट a,
#header #top div.vcard p.google a {background:none; पैडिंग: 0; चौड़ाई: 50%; नाव छोड़ी;}
}
मेनू के साथ क्या करना है
मेनू के बारे में क्या, छोटी स्क्रीन पर एक उत्तरदायी वेबसाइट बनाने की प्रक्रिया के भीतर? इस प्रश्न का उत्तर यह है कि इसे हल करना कुछ जटिल समस्या है। क्योंकि यह तत्वों का एक समूह है जो आमतौर पर कुछ हद तक लंबा होता है, और स्वयं मेनू भी, यह वेब की मुख्य सामग्री नहीं है। इसलिए, इसकी अनुमति नहीं दी जा सकती है कि जब पृष्ठ छोटे स्क्रीन पर खोला जाता है, तो मेनू बहुत अधिक स्थान घेरता है।
स्पर्श उपकरणों में, यह उपयोगकर्ता के लिए कष्टप्रद हो सकता है, कि छोटे लिंक की एक सूची दिखाई देती है, इसलिए लिंक को सिकोड़ना सबसे व्यवहार्य समाधान नहीं होगा। एक विकल्प जो अनुकूल हो सकता है, वह है मेनू को चुनिंदा तत्व से बदलना। जो एक नियंत्रण का प्रतिनिधित्व करता है जो विकल्पों का एक मेनू दिखाता है, जहां उपयोगकर्ता आराम से चयन कर सकता है। चुनिंदा तत्व लंबी मेनू सूची को एक छोटे ब्लॉक में कम कर देता है, इसलिए इसका उपयोग टैबलेट और मोबाइल जैसे उपकरणों के लिए आदर्श है।
नए उत्तरदायी डिज़ाइन में इस प्रतिस्थापन को करते समय टिनिनव jQuery प्लगइन का उपयोग करने की अनुशंसा की जाती है। जो सरल और अत्यधिक संगत है, यह प्लगइन मेनू में सभी UL आइटम को संदर्भित करता है। और यह बदले में संकेतित विशेषताओं के साथ सूची की शुरुआत में एक चुनिंदा तत्व जोड़ता है। इसके बाद, जो कदम उठाया जाना बाकी है, वह है मीडिया के प्रश्नों के साथ यूएल या चयन को छिपाना, जब तक कि एक अनुकूल समाधान प्राप्त न हो जाए।
चयन तत्व के साथ प्रक्रिया
मेन्यू को चुनिंदा एलीमेंट से बदलने की प्रक्रिया ऊपर बताए गए प्लगइन के जरिए की जाएगी। जिसे लिंक्स की लिस्ट में हैडर में रखा जाना चाहिए। इसलिए, जब पृष्ठ 800 पिक्सेल से कम चौड़े रिज़ॉल्यूशन पर नीचे जाना शुरू करता है, तो लिंक्स को चुनिंदा से बदल दिया जाएगा। फिर निम्नलिखित चरणों का पालन करना है:
- स्क्रिप्ट जोड़ें और jQuery प्लगइन में कॉल को नए तत्व पर सेट करें। निम्नलिखित के अनुसार:
$(«.मेनू उल»).tinyNav ();
यह कॉन्फ़िगरेशन शीर्ष मेनू में प्रत्येक लिंक सूची में चयन जोड़ता है
- निम्नलिखित घोषणा के साथ नए चुनिंदा तत्वों को छिपाने के लिए मूल सीएसएस को बताएं:
.tinynav {प्रदर्शन: कोई नहीं}
- एक उपयुक्त मीडिया क्वेरी का उपयोग करें और इसके भीतर सूची को छिपाने के लिए चयन और क्रम का प्रारूप जोड़ें। कॉन्फ़िगरेशन को इस प्रकार छोड़ना:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 800px) {
#हेडर उल.मेनू ली उल {डिस्प्ले: कोई नहीं}
.tinynav {प्रदर्शन: ब्लॉक; स्थिति: पूर्ण; नीचे: 5 पीएक्स; चौड़ाई:79%; मार्जिन-बाएं: 15%}
}
इस तरह, स्क्रीन रिज़ॉल्यूशन को 800 पिक्सेल से कम चौड़ा करके वेब मेनू को एक चुनिंदा तत्व से बदल दिया जाएगा।
रिस्पॉन्सिव वेब बनाने के तरीके में बैकग्राउंड को ब्लॉक करें
इस बिंदु पर वेब के अनुकूलन में, कठिनाई की डिग्री इस बात पर निर्भर करेगी कि मॉडल कैसा है। वेब डिजाइन करते समय, सीएसएस बिंदु पर, ब्लॉक आमतौर पर छवि पृष्ठभूमि से सजाए जाते हैं। सजावट की प्रक्रिया में बड़ी संख्या में तकनीकों का उपयोग किया जाता है। जब आकार बदलने की बात आती है तो उनमें से कुछ दूसरों की तुलना में आसान होते हैं।
कुछ उपाय
इसलिए, प्रयुक्त तकनीक के आधार पर, प्रक्रिया कम या अधिक सरल हो सकती है। ऐसा भी हो सकता है कि वेब के पास जो बैकग्राउंड है, वह किनारों के छिपे होने पर अपना उद्देश्य खो देता है। जिसके परिणामस्वरूप इन मामलों को दूर करने के लिए एक बड़ी समस्या है। इसके कुछ समाधान यहां दिए गए हैं:
- CSS3 शैलियों के लिए यथासंभव अधिक से अधिक पृष्ठभूमि को संशोधित करें। जो बदलाव के हिसाब से बहुत अच्छे से ढल जाएगा। गोल किनारों, छाया या ग्रेडिएंट का उपयोग करते समय अधिकांश ब्राउज़रों को संगत बनाना अब आसान हो गया है। तीन सीएसएस स्थितियों के साथ डिजाइनों के लिए ब्लॉक स्थापित करने के लिए बड़ी संख्या में छवियों की आवश्यकता होती है।
- पृष्ठभूमि छवियों के बिना करें, जितना संभव हो सके उन्हें निकटतम CSS3 के साथ बदलें कि कैसे मीडिया क्वेरी और अनुकूली चौड़ाई अपना काम करती है
- अगर फंड का मामला पहले से ही किसी ब्लॉक की स्थिति पर हावी है। इस शैली को ब्लॉक में डुप्लिकेट करने और मूल पृष्ठभूमि को थोड़ा अलग करने के लिए देखने की अनुशंसा की जाती है
तीन प्रकार की पृष्ठभूमि छवियों के अन्य समाधान जो कष्टप्रद हो सकते हैं वे हैं:
- पृष्ठ के फ्रेम में सीमाओं के साथ छवियां, जो प्रदर्शित होने वाले हिस्से के बाहर भी शेष हैं, अंतिम परिणाम परेशान नहीं करता है, इसलिए इसे छोड़ दिया जाता है
- कुछ शीर्षकों में चिह्न, जो उन्हें परेशान करने लगते हैं, जब उन्हें मीडिया प्रश्नों के साथ छिपाकर तय किया जाता है
- हेडर की वैश्विक पृष्ठभूमि में सफेद बॉक्स शामिल होता है जहां वेब के लेखक का नाम होता है। इसके लिए लेखक बॉक्स में उसी शैली को दोहराया जा सकता है ताकि पृष्ठ के आयाम को कम करके एक पृष्ठभूमि दूसरे के साथ छिपी रहे।
मोबाइल स्क्रीन के लिए रिस्पॉन्सिव वेब कैसे बनाएं - समाधान
छोटे पर्दे पर रिस्पॉन्सिव वेबसाइट बनाने के कई पहलू पहले ही देखे जा चुके हैं। इस ज्ञान के साथ, आप 1080 पिक्सल की निश्चित चौड़ाई वाले कठोर वेब डिज़ाइन से बड़ी संख्या में उपकरणों से छोटे स्क्रीन के लिए काफी अनुकूलनीय डिज़ाइन में जा सकते हैं। लेकिन मोबाइल स्क्रीन के लिए उत्तरदायी डिजाइन समाधान गायब है।
मोबाइल के डिज़ाइन में छोटे स्क्रीन के लिए जो देखा गया था, उसके अनुप्रयोग के साथ, परिवर्तन इसे स्वीकार्य बनाते हैं। और अधिक पूर्ण करने की आवश्यकता है, क्योंकि हेडर में एग्लूटिनेटेड तत्वों के साथ दो-स्तंभ लेआउट मोबाइल के लिए बहुत अव्यावहारिक है
इसलिए, मोबाइल उपकरणों पर सही प्रदर्शन प्राप्त करने के लिए प्रक्रिया शुरू करना उचित है। यह ध्यान रखना महत्वपूर्ण है कि मोबाइल पर नेविगेशन का उपयोग सामान्य वेबसाइट की तरह नहीं होता है। फिर आप साधारण स्क्रीन चौड़ाई अनुकूलन क्षमता परिवर्तन या तत्व छिपाने से आगे जाना चाह सकते हैं।
इस मामले में व्यूपोर्ट टैग
वेब को मोबाइल के अनुकूल बनाने के लिए व्यूपोर्ट एलिमेंट एक अच्छा टूल है। सबसे पहले, क्योंकि व्यूपोर्ट मोबाइल को उस तरीके से इंगित करने का कार्य करता है जिस तरह से आप चाहते हैं कि उसका ज़ूम काम करे, जब डिवाइस वेबसाइट प्रदर्शित करता है। उस ने कहा, मूल रूप से दो विकल्प प्रस्तुत किए जा सकते हैं, जो नीचे दिए गए हैं:
1 विकल्प: मोबाइल रिज़ॉल्यूशन के साथ पर्याप्त रूप से युग्मित उत्तरदायी डिज़ाइन वाली वेबसाइटों के लिए, निम्नलिखित उपलब्ध है:
यह विकल्प सबसे आदर्श है, लेकिन सबसे श्रमसाध्य भी है। क्योंकि जब आप कॉलम की चौड़ाई 500 या 400 पिक्सल से कम करते हैं, तो चौड़ाई पूरी तरह से असहनीय हो जाती है। इसलिए, वेब के विज़ुअलाइज़ेशन में आमूल-चूल परिवर्तन करने होंगे।
2 विकल्प: यदि यह उन वेबसाइटों का मामला है जो अभी तक मोबाइल के रिज़ॉल्यूशन के लिए पूरी तरह से अनुकूलित नहीं हुई हैं, तो हमारे पास निम्नलिखित हैं:
यह अन्य विकल्प अधिक शीघ्र हो सकता है। क्योंकि यह केवल डिज़ाइन में इंगित किया गया है कि मोबाइल को वांछित रिज़ॉल्यूशन में प्रदर्शित किया जा सकता है। दूसरे शब्दों में, वेब सामान्य पृष्ठ बना रहेगा, केवल अधिक कम या अनुकूलित संस्करण में।
संभावित परिणाम
यदि आप दूसरा विकल्प चुनते हैं, तो वेबसाइट को अनुकूलित या उत्तरदायी रूप से डिजाइन करने में दो समस्याएं उत्पन्न हो सकती हैं।
-पहले: इस मामले में व्यूपोर्ट सभी मोबाइल ब्राउज़रों में विश्व स्तर पर काम करेगा। इस मामले को देखते हुए, उदाहरण के लिए, 500 पिक्सल चौड़े व्यूपोर्ट टैग को इंगित किया गया है, इसके परिणामस्वरूप आईपैड डिवाइस लगभग 800 पिक्सल की चौड़ाई वाले पेज को केवल 500 पिक्सल चौड़ा प्रदर्शित करेंगे। उपलब्ध स्थान के सौ प्रतिशत का लाभ उठाने में विफल।
-दूसरा: 500 पिक्सेल चौड़े व्यूपोर्ट को इंगित करने के मामले को जारी रखना। इस मामले में, 320 पिक्सेल चौड़े रिज़ॉल्यूशन, वेब की सामग्री जिस पर काम किया जा रहा है, उसे बहुत कम मोड में प्रदर्शित किया जाएगा। इसलिए, यदि कुछ समायोजन नहीं किए जाते हैं, तो यह गैर-कार्यात्मक होगा। दूसरी ओर, यदि मेनू या स्रोतों को अनुकूलित करने के लिए कुछ समायोजन किए जाते हैं, तो वेब संस्करण को उसी तरह संशोधित किया जाएगा जैसे टैबलेट पर प्रदर्शित किया जाता है, छोटी स्क्रीन के मामले में। अंत में, व्यूपोर्ट टैग के साथ एक निश्चित चौड़ाई को इंगित करने का समाधान सबसे तेज़ हो सकता है, लेकिन यह अब कुशल नहीं है।
व्यूपोर्ट टैग के विकल्प 2 को चुनने के परिणामों को देखते हुए, विकल्प 1 को सबसे अधिक अनुशंसित किया जाता है। इस तरह, पृष्ठ के शीर्ष में विकल्प 1 के रूप में ऊपर बताए गए व्यूपोर्ट का उपयोग करते समय, मोबाइल को स्वयं उस संकल्प को दिखाने की अनुमति दी जाती है जो वह सक्षम है।
इस विज़ुअलाइज़ेशन निर्णय के साथ, बाद में मोबाइल संस्करण के लिए मीडिया क्वेरी पर काम करना है। इसके लिए एक सौ प्रतिशत चौड़ाई वाले कॉलम से ब्लॉक में जाने की आवश्यकता है। इसके अलावा हटाएं, कुछ तत्वों को संपीड़ित करें, फोंट समायोजित करें ताकि यह 320 पिक्सेल चौड़े पर पढ़ने के अनुकूल हो।
कॉलम हटाना
जैसा कि ऊपर उल्लेख किया गया है, मोबाइल उत्तरदायी अनुकूलन के लिए, हेडर में तत्वों के क्लंपिंग से बचने के लिए दो स्तंभों की उपस्थिति में डिज़ाइन को सही करना आवश्यक है। इस प्रक्रिया के लिए, एक स्तंभ को दूसरे पर आरोपित करके हटा दिया जाएगा, लेकिन दो परिदृश्य हो सकते हैं:
-कि कॉलम पहले से ही Html . में ऑर्डर किए गए हैं: यदि ऐसा है, तो उन्हें पहले से ही मोबाइल के लिए वांछित तरीके से प्रस्तुत किया जा रहा है। फ़्लोट्स को गायब करने या डिस्प्ले को संशोधित करने के लिए केवल आवश्यक होगा: इनलाइन-ब्लॉक या डिस्प्ले: बॉक्स, इसे सामान्य डिस्प्ले से बदलने के लिए: ब्लॉक। निम्नलिखित सिंटैक्स को लागू करके:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 400px) {
#सामग्री {प्रदर्शन:ब्लॉक; फ्लोट: कोई नहीं; }
}
-यदि कॉलम का आदेश नहीं दिया गया है: इस परिदृश्य में, आपको पूर्ण स्थिति के साथ काम करना चाहिए ताकि निचले ब्लॉक पृष्ठ के शीर्ष पर कब्जा कर लें। साथ ही ऊपरी ब्लॉक को निचले ब्लॉक में ले जाने के लिए मार्जिन का उपयोग करना, ताकि वे ओवरलैप न हों। उदाहरण, निम्नलिखित वितरण मानते हुए:
इस संरचना में, यह वांछित है कि मोबाइल पर साइडबार साइडबार के तत्व सामग्री से पहले स्थित हों। फिर CSS को इस प्रकार प्रस्तुत किया जाता है:
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 400px) {
# मुख्य {स्थिति: रिश्तेदार; चौड़ाई: 100%; }
#सामग्री{मार्जिन-टॉप:80px; चौड़ाई: 100%; फ्लोट: कोई नहीं;}
#साइडबार{ऊंचाई:80px; स्थिति: पूर्ण; शीर्ष: 0; चौड़ाई: 100%; फ्लोट: कोई नहीं; }
}
दूसरे परिदृश्य की कल्पना करने के लिए, जिसमें मोबाइल संस्करण में निरपेक्ष पदों का उपयोग किया जाना है, निम्नलिखित संरचना उदाहरण प्रस्तुत किया गया है
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 450px) {
#मुख्य #साइडबार {डिस्प्ले:ब्लॉक; फ्लोट: कोई नहीं! महत्वपूर्ण; चौड़ाई: 100%; स्थिति: पूर्ण; शीर्ष:-80px; मार्जिन: 0! महत्वपूर्ण; बॉर्डर-बॉटम:1px सॉलिड #aaa; पैडिंग:0 0 20px 0;}
#मुख्य #सामग्री {फ्लोट: कोई नहीं; चौड़ाई: ऑटो; मार्जिन: 100 पीएक्स 0 0 0; }
}
ऐसे में मोबाइल वर्जन में 450 पिक्सल वाइड में भी बदलाव किया गया है।
फ़ॉन्ट समायोजित करना
एक अन्य पहलू जिसे मोबाइल संस्करण में उत्तरदायी अनुकूलन में संबोधित किया जाना चाहिए, वह है फोंट का समायोजन। क्योंकि, जब वेब को डिजाइन किया गया था, तो इसे बड़े मॉनिटर को ध्यान में रखकर बनाया गया था। छोटे वर्टिकल स्क्रीन वाले मोबाइल संस्करणों में जाने पर, वेबसाइटें अक्सर पढ़ने या देखने में सहज नहीं होती हैं। वेब की सुर्खियाँ बहुत अधिक जगह लेती हैं, सामग्री का पाठ, फ़ॉन्ट के आकार के कारण, पढ़ना मुश्किल हो जाता है। इसके अनुसार, सभी स्रोतों की समीक्षा करना आवश्यक है, जिससे उन्हें मोबाइल स्क्रीन पर प्रदर्शित करने के लिए एक व्यवहार्य कॉन्फ़िगरेशन में लाया जा सके।
नीचे इस पहलू के संबंध में समायोजन हैं, जहां मेनू फोंट संशोधित किए गए थे, शीर्षकों के फ़ॉन्ट आकार को कम किया गया था और सामग्री के उन लोगों को बढ़ाया गया था। निम्नलिखित विन्यास पर ध्यान दें:
#हेडर उल.मेनू ली,
#शीर्षक ul.menu li.analytics,
#हेडर उल.मेनू ली.डेवलपमेंट {पृष्ठभूमि: कोई नहीं;}
#header ul.menu li h4 {मार्जिन: 30px 0 0 0px; फ़ॉन्ट-आकार:12px; टेक्स्ट इंडेंट: 10%;}
#मुख्य #सामग्री .hnews h3 a,
#मुख्य #सामग्री .hnews h1 a{ font-size:22px; }
#मुख्य #सामग्री .hnews .entry-content {font-size:16px;}
सौंदर्यशास्त्र और शैलियों के संदर्भ में अन्य समायोजन
मैंने मोबाइल संस्करण के लिए डिज़ाइन में एक उत्तरदायी वेबसाइट बनाने की पिछली सभी प्रक्रिया की है। वेब के स्वरूप और शैली पर अंतिम रूप देना बाकी है। इस मामले में आप उन शैलियों को फिर से डिज़ाइन कर सकते हैं जो नए संस्करण के अनुकूल नहीं हैं और जो इसमें आते हैं उन्हें त्याग दें। इसी तरह, आप साइडबार जैसे कुछ तत्वों को स्थानांतरित कर सकते हैं, उदाहरण के लिए, उन्हें किसी अन्य स्थान पर रखने के लिए, या अन्य समायोजनों के साथ हाशिये में परिवर्तन भी कर सकते हैं। अंत में जाने के लिए तैयार एक सुंदर मोबाइल वेब प्राप्त करने के लिए।
रेस्पॉन्सिव वेबसाइट कैसे बनाएं? - परीक्षण और परीक्षण
जब आप न केवल वेब विकास के संदर्भ में डिजाइन कर रहे हैं, बल्कि किसी भी सृजन या संरचना में कुछ नया कर रहे हैं। एक परीक्षण या परीक्षण चरण है, जहां आप परिणामों की जांच कर सकते हैं, यदि वे इष्टतम हैं या सुधार की आवश्यकता है।
उस ने कहा, पिछली सभी प्रक्रिया को निष्पादित करने के बाद जांच या परीक्षण करना सुविधाजनक है। इन परीक्षणों को निष्पादित किया जाना चाहिए क्योंकि चरणों को निष्पादित किया जाना चाहिए और प्रत्येक में प्राप्त किए जा रहे परिवर्तनों को सत्यापित करने में सक्षम होना चाहिए। उसी प्रकार वेब के संचालन में निम्नलिखित दो जांच करना आवश्यक है
ब्राउज़र में परीक्षण करें
जब आप रिस्पॉन्सिव डिज़ाइन पर काम करते हैं, तो आपको स्क्रीन की चौड़ाई को एडजस्ट करना होगा। नए रूप धारण करने वाले नए रूपांतरों की जांच करने के लिए। उसी तरह, छोटी त्रुटियों का पता लगाया जा सकता है और इस प्रकार उपयोग किए गए मीडिया प्रश्नों में समायोजन करने में सक्षम हो सकते हैं। स्क्रीन की चौड़ाई जांचने के लिए, इसे करने के दो तरीके हैं:
- ब्राउज़र की चौड़ाई का परीक्षण करने के लिए उसके अधिकतमकरण को हटाकर लाइव कार्य करें।
- इन परीक्षण सेटिंग्स को सरल कमांड के साथ करने के लिए ISH जैसी चीजों का उपयोग एक उपयोगी उपकरण बनाएं।
मोबाइल कैश को बायपास करें
मोबाइल डिवाइस अपने स्वभाव से डेटा को आवश्यक से अधिक कैश करते हैं, यहां तक कि एक नियमित ब्राउज़र से भी अधिक। सामान्य तौर पर, कैश के बिना लोड को प्रेरित करने के लिए आमतौर पर CTRL+F5 निष्पादित करना पर्याप्त होता है। हालांकि मोबाइल फोन पर इस प्रकार की कार्रवाई मुश्किल है, यहां तक कि कुछ ब्राउज़रों के पास कैशे को अक्षम करने का विकल्प होता है। कैश के बिना बेहतर कार्य को सुविधाजनक बनाने के लिए निम्नलिखित की अनुशंसा की जाती है:
- Css कॉल में वेरिएबल के साथ काम करें, जैसे:
"/styles.css?version=xxxx"
प्रत्येक विशिष्ट मामले में संस्करण संख्या में संशोधन करना। यूआरएल अलग होने के लिए यह कैश का उपयोग नहीं करता है।
- सीधे ब्राउज़र में काम करें। 420 और 450 पिक्सेल के बीच, न्यूनतम मोबाइल रिज़ॉल्यूशन को धीरे-धीरे बढ़ाना। इस तरह आप इसे पर्याप्त रूप से सिकोड़कर ब्राउज़र में प्रदर्शित कर सकते हैं। दूसरा तरीका उन टूल के उपयोग के माध्यम से है जो वेब पेजों का आकार बदलते हैं।
इन कार्यों के साथ, बिना किसी संदेह के, परीक्षण करते समय एक अधिक व्यावहारिक और आरामदायक परिणाम प्राप्त होगा।
रेस्पॉन्सिव वेबसाइट कैसे बनाएं? - निष्कर्ष
उपरोक्त सभी में कुछ तकनीकों, तकनीकी उपकरणों और प्रक्रियाओं को जानना संभव था जो अक्सर एक उत्तरदायी वेब के डिजाइन में लागू होते हैं। यह सारा ज्ञान एक मौजूदा वेबसाइट पर भी लागू किया जा सकता है जिसे आप एक अनुकूली डिजाइन में लाना चाहते हैं। एक नई वेबसाइट बनाने पर काम किए बिना।
इसलिए, अगले प्रश्न पर: आपने जो कुछ भी सीखा है, क्या वह उत्तरदायी डिजाइन वाली वेबसाइट बनाना संभव है? जाहिर है जवाब एक शानदार नंबर है। क्यों? क्योंकि किसी वेबसाइट को अनुकूलन के प्रति संवेदनशील बनाना ही संभव था, जो मूल रूप से नहीं था। चूंकि इसकी कल्पना एक कठोर या निश्चित प्रकृति के तहत की गई थी।
संभावित परिणाम या त्रुटियां
एक पारंपरिक वेबसाइट या परिवर्तनों के प्रति अधिक संवेदनशील को अपनाने की प्रक्रिया के दौरान, इससे कुछ गलतियाँ हो सकती हैं और इसलिए कुछ परिणाम सामने आएंगे, आइए देखें:
-कुछ तत्वों को समाप्त करना होगा जो पृष्ठ बनाते समय महत्वपूर्ण महत्व के थे। दूसरी ओर, उन्हें समाप्त करने की कार्रवाई उपस्थिति के आधार पर की गई थी, न कि वेब विज़िटर को प्रसारित की जाने वाली सामग्री के महत्व के कारण।
-हो सकता है कि इसने समग्र दृश्य पहलू में पूर्णता हासिल नहीं की हो। केवल मौजूदा में सुधार करने में सक्षम होने के नाते। पूरी तरह से अलग मामला अगर शुरू से ही एक वेब बनाया गया था।
-मूल वेबसाइट के मॉडल के आधार पर, यह परिवर्तनों के अनुकूलन के अंत तक पहुंच भी सकता है और नहीं भी। कुछ मॉकअप के साथ, इस प्रयास में डेवलपर्स केवल मध्यवर्ती समाधान करने में सक्षम होंगे।
अंत में उत्तरदायी डिजाइन के बारे में
अंत में, जो किया गया वह केवल साधारण विवरण था। एक ऐसे डिज़ाइन के अनुकूल मॉडल प्राप्त करने के लिए काम करने के महत्व पर प्रकाश डालना जो मूल रूप से नहीं था। जब आप रिस्पॉन्सिव डिज़ाइन पढ़ते हैं, तो आप समझते हैं कि आप डिज़ाइन के बारे में बात कर रहे हैं न कि लेआउट कार्य के बारे में। इसलिए, कैसे एक उत्तरदायी वेबसाइट बनाने के लिए एक मूल नए डिजाइन के संदर्भ से उत्पन्न होना चाहिए।
हालांकि, एक ऐसी वेबसाइट प्रदर्शित करने में सक्षम होना जो मोबाइल के रिज़ॉल्यूशन को बदल सकती है और अनुकूलित कर सकती है, जो कि कठोर था, एक काफी बड़ी और उपयोगी उपलब्धि है। यहां जो समझाया गया है उसका यह अर्थ नहीं है कि आप पहले से ही उत्तरदायी डिजाइन में प्रशिक्षित हैं। इसके लिए बहुत अधिक शोध की आवश्यकता है।
क्योंकि विभिन्न अधिक सामान्यीकृत, अधिक तकनीकी प्रक्रियाओं की अधिक नींव, ज्ञान और सीखने की आवश्यकता होगी।
रिस्पॉन्सिव वेबसाइट कैसे बनाएं – फाइनल टिप्स
निष्कर्ष निकालने के लिए, यह जानना महत्वपूर्ण है कि उत्तरदायी डिज़ाइन वह है जो वेब पर वर्तमान है। इस प्रकार के वेब डिज़ाइन के लिए एक नए तरीके की सोच की आवश्यकता होती है। निम्नलिखित युक्तियों का पालन करके इन वेबसाइटों को विकसित करना आसान हो सकता है:
- पहले मोबाइल के बारे में सोचें: डिजाइन करते समय, मोबाइल स्क्रीन के छोटे आकार के अनुकूल होने से पहले शुरुआत करना सुविधाजनक होता है। इस प्रकार, सामग्री को बड़े आकार की स्क्रीन पर समायोजित करने के बाद। क्योंकि, मोबाइल फोन को ध्यान में रखते हुए डिजाइन करते समय, आप उस सामग्री के साथ अधिक उद्देश्यपूर्ण हो सकते हैं जिसे पृष्ठ पर प्रदर्शित किया जाना चाहिए, केवल वही छोड़कर जो वास्तव में प्रस्तुत करने के लिए महत्वपूर्ण है।
- किसी विशिष्ट मोबाइल या टैबलेट के लिए डिज़ाइन को अनुकूलित न करें
- मानकों और अच्छी प्रथाओं का पालन करें: उदाहरण के लिए, फ़ाइल में परिभाषित सीएसएस शैलियों का उपयोग नहीं करना, एचटीएमएल टैग के भीतर।
- डिज़ाइन में पिक्सेल के दास होने से बचें: ध्यान रखें कि तत्व उस स्थिति को ढूंढते हैं जो उनके अनुरूप होती है। ऐसा इसलिए है क्योंकि वे कंटेनरों की तरलता और आयाम में भाग लेते हैं। जब ऐसा होता है कि यह वांछित के रूप में प्रदर्शित नहीं होता है, तो मीडिया प्रश्नों को लागू करके तत्वों के लेआउट को ठीक करें।