अपनी वेबसाइट डिजाइन करते समय, यह सुनिश्चित करना महत्वपूर्ण है कि यह किसी भी डिवाइस पर अच्छी लगे, चाहे स्क्रीन का आकार और आकार कुछ भी हो। उत्तरदायी वेबसाइटों को कंप्यूटर, फोन, टैबलेट, टीवी, पहनने योग्य और यहां तक कि कार स्क्रीन जैसे सभी प्रकार के आधुनिक उपकरणों पर अच्छा दिखने के लिए डिज़ाइन किया गया है। किसी वेबसाइट को प्रतिक्रियाशील बनाने के लिए, आपको अपने CSS और HTML कोड को संशोधित करना होगा ताकि विशिष्ट परिस्थितियों के आधार पर इसके तत्वों का स्वचालित रूप से आकार बदल सके। यह विकिहाउ गाइड आपको बेसिक रिस्पॉन्सिव वेब डिज़ाइन की योजना बनाना और उसे लागू करना सिखाएगा।
कदम
विधि 1 में से 3: योजना उत्तरदायी डिजाइन
चरण 1. पता करें कि आपके दर्शक आपकी वेबसाइट का उपयोग कैसे करते हैं।
इन दिनों, वेब ब्राउज़ करने वाले अधिकांश लोग मोबाइल फोन और टैबलेट से ऐसा करते हैं। किसी साइट के प्रतिक्रियाशील होने के लिए, आपको यह सुनिश्चित करना होगा कि यह ठीक से प्रदर्शित हो, चाहे इसे कहीं भी देखा जा रहा हो। यदि समय और धन का सार है, तो उन उपकरणों के प्रकारों पर ध्यान दें जो आपके उपयोगकर्ताओं के साथ सबसे लोकप्रिय हैं (यदि यह जानकारी उपलब्ध है) और वे आपकी साइट का उपयोग कैसे करते हैं। अपने एनालिटिक्स सॉफ़्टवेयर या किसी अन्य प्रकार के शोध का उपयोग करके, पता करें:
- मोबाइल फोन/टैबलेट/कंप्यूटर ब्रांड और स्क्रीन/रिज़ॉल्यूशन आकार पर विशेष ध्यान देते हुए, वेबसाइट देखने के लिए वे किस प्रकार के उपकरणों का सबसे अधिक उपयोग करते हैं।
- आपके उपयोगकर्ताओं के बीच कौन से ब्राउज़र सबसे लोकप्रिय हैं। जहां तक वैश्विक आंकड़ों का सवाल है, Google क्रोम दुनिया भर में सबसे लोकप्रिय वेब ब्राउज़र है, लेकिन सफारी दूसरे स्थान पर है।
- आपके विज़िटर आपकी वेबसाइट का उपयोग कैसे करते हैं, जैसे कि वे इसे देखने में कितना समय लगाते हैं, वे इसे कहां देख रहे हैं, और कौन सी सामग्री सबसे लोकप्रिय है। इससे आपको यह निर्धारित करने में मदद मिल सकती है कि किस प्रकार की सामग्री को शामिल करना महत्वपूर्ण है और जिसे छोड़ा जा सकता है।
चरण 2. विभिन्न उपकरणों के लिए अलग-अलग लेआउट डिज़ाइन करें।
आप किसी उपयोगकर्ता के उपकरण का पता लगाने के लिए CSS और JavaScript के संयोजन का उपयोग कर सकते हैं, साथ ही इसकी क्षमताओं (चाहे वह Java, Flash, आदि का समर्थन करता हो) और तदनुसार अपनी साइट का एक विशेष संस्करण प्रदर्शित कर सकते हैं। CSS मीडिया क्वेरीज़ डिवाइस के आकार/रिज़ॉल्यूशन को निर्धारित करने के लिए विशेष रूप से उपयोगी हैं।
चरण 3. विभिन्न प्रकार के इंटरैक्शन के लिए खाता।
आपका आगंतुक माउस, कीबोर्ड, टचस्क्रीन, या यहां तक कि दृष्टिबाधित लोगों के लिए स्क्रीन-रीडर का उपयोग करके आपकी वेबसाइट से इंटरैक्ट कर सकता है। इसे ध्यान में रखते हुए, आपकी वेबसाइट को माउस क्लिक, कीबोर्ड कीज़ (टैब, एंटर, रिटर्न, आदि) और स्क्रीन फिंगर-टच का जवाब देना चाहिए।
माउस के अलावा किसी भी चीज़ के साथ होवर-ओवर प्रभाव काम नहीं करता है। इन प्रभावों का उपयोग करने के बजाय, आप माउस होवर पर जो कुछ भी पहले प्रदर्शित किया गया था उसे प्रदर्शित करने के लिए विज़िटर को बटन या आइकन पर क्लिक करने की आवश्यकता का उपयोग कर सकते हैं।
चरण 4. सामग्री प्रबंधन प्रणाली (सीएमएस) का उपयोग करने पर विचार करें।
यह सुनिश्चित करने का एक आसान तरीका है कि आपकी साइट का डिज़ाइन उत्तरदायी है, एक पूर्व-निर्मित उत्तरदायी विषय के साथ एक सीएमएस का उपयोग करना है। जूमला, ड्रुपल या वर्डप्रेस जैसे सीएमएस का उपयोग करने से आप यह सुनिश्चित कर सकते हैं कि आपकी वेबसाइट उत्तरदायी तत्वों को स्वयं कोड किए बिना सभी उपकरणों पर अच्छी लगे। यह देखने के लिए कि आपकी सेवा के साथ कौन से सीएमएस उपकरण उपलब्ध हैं, अपने वेबहोस्टिंग प्रदाता से संपर्क करें।
चरण 5. अपनी वेबसाइट का परीक्षण करने के लिए ऑनलाइन टूल का उपयोग करें।
अब जबकि उत्तरदायी वेब डिज़ाइन की लोकप्रियता बढ़ गई है, ऐसे कई प्रकार के निःशुल्क टूल हैं जिनका उपयोग आप अपनी वेबसाइट का परीक्षण करने के लिए कर सकते हैं। यदि आपने अपनी वेबसाइट को पहले ही कोडित कर लिया है, तो इन उपकरणों का उपयोग यह परीक्षण करने के लिए करें कि यह विभिन्न परिस्थितियों में कैसा दिखता है, ताकि आपको पता चल सके कि आपको प्रतिक्रियात्मकता में सुधार करने की आवश्यकता कहां है:
- Google द्वारा मोबाइल-अनुकूल परीक्षण: आपको यह बताता है कि आपकी साइट मोबाइल उपकरणों पर भी उतनी ही काम करती है जितनी कंप्यूटर स्क्रीन पर करती है।
- resizeMyBrowser: आपको अपनी साइट को विभिन्न प्रस्तावों में देखने देता है।
- रेस्पॉन्सिएटर: आपकी साइट को अलग-अलग डिवाइस स्क्रीन पर अलग-अलग लेआउट (बग़ल में या दाईं ओर) में प्रदर्शित करता है।
विधि २ का ३: पृष्ठ लेआउट को उत्तरदायी बनाना
चरण 1. एक मुक्त उत्तरदायी स्टाइल शीट ढांचे पर विचार करें।
फ्रेमवर्क HTML, CSS और/या जावास्क्रिप्ट का एक पूर्व-लिखित सेट है जिसे आप अपनी साइट के लिए एक कंकाल के रूप में उपयोग कर सकते हैं। सभी ढाँचों का परीक्षण किया जाता है और सभी ब्राउज़रों के साथ काम करने के लिए अनुकूलित किया जाता है, इसलिए आपको केवल अपनी सामग्री सम्मिलित करने, अपनी मीडिया और रंग वरीयताएँ जोड़ने और अपनी साइट प्रकाशित करने की आवश्यकता है। कुछ लोकप्रिय ढांचे हैं:
- बूटस्ट्रैप
- कंकाल
- नींव
चरण 2. व्यूपोर्ट को मेटा टैग के साथ सेट करें।
यदि आप किसी ढांचे का उपयोग नहीं कर रहे हैं, तो आप एक प्रतिक्रियाशील वेबसाइट को कोड करने के सबसे महत्वपूर्ण पहलू से शुरू करना चाहेंगे: व्यूपोर्ट। व्यूपोर्ट वेबसाइट का वह हिस्सा है जो उपयोगकर्ता को दिखाई देता है। स्क्रीन आकार की परवाह किए बिना आपकी साइट को ठीक से प्रदर्शित करने की कुंजी मेटा टैग में व्यूपोर्ट आकार को मापना है। ऐसा करने के लिए, इस टैग को साइट के प्रत्येक पृष्ठ के शीर्ष पर शामिल करें:
चरण 3. व्यूपोर्ट के संबंध में टेक्स्ट का आकार निर्दिष्ट करें।
एक बार जब आपका व्यूपोर्ट सेट हो जाता है, तो स्क्रीन पर फिट होने के लिए आपके पेज का टेक्स्ट स्केल हो जाएगा। हालांकि, फ़ॉन्ट बहुत बड़े या बहुत छोटे प्रदर्शित हो सकते हैं यदि उनके आकार व्यूपोर्ट के संबंध में निर्दिष्ट नहीं हैं। आप vw इकाई के साथ व्यूपोर्ट के विशिष्ट प्रतिशत के रूप में फ़ॉन्ट आकार को परिभाषित करके ऐसा कर सकते हैं। यह उदाहरण H1 हेडर को व्यूपोर्ट की चौड़ाई के 10% पर प्रदर्शित करने के लिए कहता है, चाहे उसका आकार कुछ भी हो:
विकिहाउ
चरण 4. विभिन्न स्क्रीन आकारों के लिए विभिन्न शैलियों को दिखाने के लिए मीडिया प्रश्नों का उपयोग करें।
मीडिया क्वेरीज़ आपको स्क्रीन आकार के आधार पर कुछ CSS तत्वों को प्रदर्शित करने के लिए चुनने की अनुमति देती हैं। आप अपनी सीएसएस फ़ाइल में अपनी मीडिया क्वेरी की विशिष्टताओं को निर्दिष्ट कर सकते हैं। इस उदाहरण में, यदि उपयोगकर्ता की स्क्रीन का आकार 480px या उससे अधिक है, तो शरीर की पृष्ठभूमि का रंग लाल हो जाएगा:
विकिहाउ
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 480px) {शरीर {पृष्ठभूमि-रंग: एक्वा; } }
विधि 3 में से 3: छवियों को उत्तरदायी बनाना
चरण 1. छवियों को स्केल करने के लिए CSS चौड़ाई गुण का उपयोग करें।
छवि की चौड़ाई को विशिष्ट मात्रा में पिक्सेल (जैसे, 500px) पर सेट करने के बजाय, एक प्रतिशत (जैसे, 100%) का उपयोग करें ताकि छवि अपने पैरेंट की चौड़ाई को देखे और तदनुसार समायोजित करे। छवि की चौड़ाई को १००% पर सेट करने से छवि को दर्शक की स्क्रीन के आकार के आधार पर ऊपर और नीचे स्केल करने के लिए मजबूर किया जाता है। इसे इन-लाइन करने के लिए:
चरण 2. छवि के वास्तविक आकार को सीमित करने के लिए अधिकतम-चौड़ाई वाली संपत्ति का उपयोग करें।
यदि आप किसी छवि को 100% तक स्केल करने के लिए पिछले चरण में चौड़ाई संपत्ति का उपयोग करते हैं, तो छवि आकार के बावजूद इसके कंटेनर के 100% फिट होने के लिए बढ़ेगी या सिकुड़ जाएगी। इसका मतलब यह है कि अगर छवि छोटी तरफ है, तो यह अपने मूल आकार से बड़ी हो जाएगी और कम गुणवत्ता वाली दिखेगी। ऐसा होने से रोकने के लिए, छवि के अधिकतम स्केलिंग आकार को 100% (इसका वास्तविक आकार) पर सेट करने के लिए अधिकतम-चौड़ाई का उपयोग करें। ऐसे:
चरण 3. विभिन्न स्क्रीन आकारों पर विभिन्न छवियों को प्रदर्शित करने के लिए HTML चित्र तत्व का उपयोग करें।
यदि आप अलग-अलग आकार की स्क्रीन पर प्रदर्शित करने के लिए कस्टम-आकार की छवियां बनाना चाहते हैं, तो आप निर्दिष्ट कर सकते हैं कि आपके HTML कोड में कौन से फ़ोटो प्रदर्शित किए जाएं। अलग-अलग आकार की छवियां बनाएं, और फिर इस कोड का उपयोग एक उदाहरण के रूप में यह निर्दिष्ट करने के लिए करें कि 600px और 1500px चौड़ाई वाली स्क्रीन पर किस छवि का उपयोग करना है:
