आजकल, एक वेबसाइट या ऐप बनाना आम बात है जो ब्राउज़र या डिवाइस के आधार पर अपने यूजर इंटरफेस को समायोजित करता है। इस लक्ष्य को प्राप्त करने के लिए दो दृष्टिकोण हैं। पहले में विभिन्न उपकरणों के लिए अपनी वेबसाइट या ऐप के विभिन्न संस्करण बनाना शामिल है। लेकिन यह अक्षम है और अप्रत्याशित त्रुटियों को जन्म दे सकता है।
एक विश्वसनीय, भविष्य-सबूत दृष्टिकोण की तलाश में, उत्तरदायी - या अनुकूली - डिजाइन गढ़ा गया था। यह आपके लेआउट के एकल संस्करण के निर्माण पर ध्यान केंद्रित करता है जो स्वचालित रूप से विभिन्न ब्राउज़रों या उपकरणों के अनुकूल होता है।
इस लेख में, हम उत्तरदायी वेब डिज़ाइन और उन मूलभूत सिद्धांतों के बारे में जानेंगे जो आपको एक शानदार वेबसाइट बनाने में मदद करेंगे।
उत्तरदायी वेब डिज़ाइन सामग्री
उत्तरदायी वेब डिज़ाइन उतना जटिल नहीं है जितना लगता है। यह प्रथाओं का एक सेट है जिसका उपयोग आप सीएसएस लिखते समय कर सकते हैं, न कि एक अलग तकनीक जिसे आपको खरोंच से सीखना होगा। हो सकता है कि आप इनमें से कई सिद्धांतों को समझे बिना पहले से ही उनका पालन कर रहे हों। आप इसके चार अवयवों की खोज करके उत्तरदायी वेब डिज़ाइन को समझ सकते हैं: द्रव लेआउट, उत्तरदायी इकाइयाँ, लचीली छवियां और मीडिया प्रश्न।
द्रव लेआउट
द्रव लेआउट के साथ, आप ऐसे वेब पेज बना सकते हैं जो वर्तमान व्यूपोर्ट की चौड़ाई और ऊंचाई के अनुकूल हों। सामान्य अभ्यास में का उपयोग करना शामिल है अधिकतम चौड़ाई किसी तत्व को निश्चित चौड़ाई देने के बजाय संपत्ति। साथ ही, प्रतिशत का उपयोग करते हुए (%), व्यूपोर्ट ऊंचाई (वीएचयू), या व्यूपोर्ट की चौड़ाई (वीडब्ल्यू) अनुकूलन क्षमता में सुधार करने में मदद करता है जो पिक्सेल के साथ संभव नहीं है (पिक्सल). इसलिए, अगली बार जब आप कोई लेआउट बना रहे हों, तो इन छोटे बदलावों को लागू करना सुनिश्चित करें और उत्तरदायी डिज़ाइन तकनीकों से लाभ उठाना शुरू करें।
उत्तरदायी इकाइयाँ
जैसे-जैसे आप अधिक उन्नत CSS में जाते हैं, आप अक्सर इसका उपयोग देखेंगे रेमो तथा एम के बजाय लंबाई के लिए इकाइयाँ पिक्सल इकाइयां ऐसा इसलिए है क्योंकि रेमो इकाई पूरे लेआउट को स्केल करना बहुत आसान बनाती है। डिफ़ॉल्ट रूप से, 1rem 16px के बराबर होता है क्योंकि यह के समानुपाती होता है तत्व का फ़ॉन्ट आकार, आमतौर पर 16px। हालांकि, आप शीर्ष-स्तरीय फ़ॉन्ट आकार को समायोजित करके आसान गणना के लिए 1rem को 10px (या कोई अन्य मान) के बराबर सेट कर सकते हैं।
लचीली छवियां
यहां तक कि सबसे बुनियादी लेआउट को डिजाइन करते समय छवियां एक प्रमुख चिंता का विषय हैं। आपको हमेशा उन्हें ठीक से आकार देने के लिए ध्यान रखना होगा ताकि वे डिजाइन में फिट हों। साथ ही, डिफ़ॉल्ट रूप से, वे व्यूपोर्ट में परिवर्तन के साथ स्केल नहीं करते हैं। तो, आपको उपयोग करना चाहिए % आपकी छवियों के आयामों के साथ-साथ अधिकतम चौड़ाई संपत्ति।
आप मीडिया के प्रश्नों का उपयोग करके प्रतिक्रियाशील साइटों को जीवंत बना सकते हैं। फ्लुइड ग्रिड शुरू करने के लिए अच्छे हैं, लेकिन आप पाएंगे कि कुछ बिंदु ऐसे हैं जहां लेआउट टूटना शुरू हो जाता है। इन व्यूपोर्ट चौड़ाई के लिए ब्रेकप्वाइंट जोड़ना विभिन्न उपकरणों के लिए लेआउट को ट्यून करता है। मीडिया सुविधा परीक्षण के परिणामों के आधार पर चुनिंदा रूप से CSS को लागू करने में मीडिया क्वेरी आपकी मदद करती है। आप नया एक्सप्लोर कर सकते हैं एक उत्तरदायी वेबसाइट बनाने के लिए CSS सुविधाएँ कम समय में।
उत्तरदायी वेब डिज़ाइन सिद्धांत
हालांकि जब मल्टी-स्क्रीन समस्याओं की बात आती है तो उत्तरदायी वेब डिज़ाइन एक उद्धारकर्ता है, हो सकता है कि आपके पास संदर्भित करने के लिए एक निश्चित भौतिक बाधा न हो। इसलिए, प्रतिक्रियाशील लेआउट डिज़ाइन करते समय आरंभ करने के लिए छह बुनियादी उत्तरदायी वेब डिज़ाइन सिद्धांत हैं।
सामग्री-आधारित ब्रेकप्वाइंट का उपयोग करें
मौलिक डिजाइन सिद्धांतों में से एक में कहा गया है कि आपकी वेबसाइट डिजाइन को सामग्री का समर्थन करना चाहिए, न कि दूसरी तरफ। मीडिया सामग्री जैसे वीडियो, फोटोग्राफ और टेक्स्ट सामग्री जैसे लंबी और छोटी वेब कॉपी सभी स्क्रीन पर बेहतर ढंग से प्रस्तुत की जानी चाहिए। रिस्पॉन्सिव वेब डिज़ाइन की कुंजी डिवाइस-आधारित के बजाय सामग्री-आधारित ब्रेकप्वाइंट का उपयोग करना है।
वेब फ़ॉन्ट्स और सिस्टम फ़ॉन्ट्स को बुद्धिमानी से चुनें
वेब फोंट आश्चर्यजनक लगते हैं! आपके पास आकर्षक दिखने वाले वेब फोंट के साथ अपने डिजाइन को संशोधित करने के कई विकल्प हैं। लेकिन आपको पता होना चाहिए कि ब्राउज़रों को प्रत्येक वेब फ़ॉन्ट को डाउनलोड करने की आवश्यकता होगी। अधिक वेब फोंट, अधिक डाउनलोड समय। इसके विपरीत, सिस्टम फोंट बिजली-तेज हैं। यदि उपयोगकर्ता के पास उनके स्थानीय डिवाइस पर एक नामित सिस्टम फ़ॉन्ट नहीं है, तो यह अगले फ़ॉन्ट पर वापस आ जाएगा फ़ॉन्ट-परिवार स्टैक. इसलिए, फोंट चुनते समय लोड समय और डिजाइन की मांग पर विचार करना सुनिश्चित करें।
बिटमैप छवियाँ और वेक्टर अनुकूलित करें
क्या आपकी वेबसाइट पर सामग्री का समर्थन करने वाले अलग-अलग आइकन हैं? यदि आपके आइकन में बहुत अधिक विवरण हैं, तो बिटमैप प्रारूप का उपयोग करना अक्सर अच्छा होता है। दूसरी ओर, वेक्टर प्रारूप उन आइकन के लिए जाने का तरीका है जो अच्छी तरह से ऊपर और नीचे होते हैं। वेक्टर अक्सर छोटे होते हैं, लेकिन नकारात्मक पक्ष यह है कि कुछ पुराने ब्राउज़र उनका समर्थन नहीं कर सकते हैं। इसके अलावा, ऐसे मामले भी होते हैं जब वेक्टर बिटमैप से भारी होते हैं, जैसे कि जब छवि बहुत विस्तृत होती है। इसलिए, हमेशा सुनिश्चित करें कि आप अपनी बिटमैप छवियों और वैक्टर के ऑनलाइन होने से पहले उनका अनुकूलन कर रहे हैं।
रिस्पॉन्सिव फर्स्ट फोल्ड के लिए टेस्ट आयोजित करें
किसी वेबसाइट की पहली तह वह दृश्य है जिसे विज़िटर किसी स्क्रॉलिंग से पहले पहली बार लोड होने पर देखते हैं। इसमें अक्सर एक नायक अनुभाग शामिल होता है जिसमें a उत्तरदायी नेविगेशन बार, परिचयात्मक प्रति और मीडिया, और एक सीटीए। जवाबदेही केवल मोबाइल उपकरणों तक ही सीमित नहीं है। आपको टैबलेट, गेमिंग कंसोल और अन्य स्क्रीन पर भी विचार करना चाहिए। इसलिए, कुंजी यह है कि कम से कम वेबसाइट के पहले फ़ोल्ड व्यू के लिए बार-बार परीक्षण किया जाए। आप Chrome DevTools का उपयोग कर सकते हैं (प्रकाशस्तंभ) वेब पेज की गुणवत्ता का परीक्षण करने के लिए।
छोटी स्क्रीन पर सामग्री न छिपाएं
बहुत से लोग मानते थे कि मोबाइल उपयोगकर्ता हमेशा जल्दी में होते हैं, काटने के आकार की जानकारी की तलाश में होते हैं, जबकि डेस्कटॉप उपयोगकर्ता लंबे समय तक सामग्री में अधिक होते हैं। अब हम मानते हैं कि आज की दुनिया में यह सच नहीं है। लोग हर जगह मोबाइल उपकरणों का उपयोग कर रहे हैं, संपूर्ण सामग्री और सभी सेवाओं तक पूर्ण पहुंच की तलाश में हैं। आपको यह सुनिश्चित करना चाहिए कि सामग्री को छिपाने के बजाय, आप लेआउट और ब्रेकप्वाइंट को यथासंभव आसानी से और सहजता से प्रस्तुत करने के लिए प्रबंधित कर रहे हैं।
नेस्टेड ऑब्जेक्ट्स का उपयोग करके लेआउट प्रबंधित करें
साइट लेआउट और पोजिशनिंग तत्वों को सही ढंग से बनाने के लिए एक अच्छी मात्रा में प्रयास करना पड़ता है। आपने एक दूसरे पर निर्भर बहुत सारे तत्वों को प्रबंधित करने में भी कठिनाई का अनुभव किया होगा। इसलिए, आपको संबंधित तत्वों को एक कंटेनर में लपेटने पर विचार करना चाहिए या. यह कई तत्वों को एक में डालने के कार्य को कम करने में मदद करता है जिसमें आप केवल एक तत्व डाल रहे हैं।
उत्तरदायी डिजाइन: क्या आपको पहले डेस्कटॉप या मोबाइल के साथ जाना चाहिए?
डेस्कटॉप फर्स्ट अप्रोच का मतलब है कि आप बड़ी स्क्रीन के लिए CSS लिखेंगे और फिर छोटी स्क्रीन के लिए डिज़ाइन को सिकोड़ने के लिए मीडिया क्वेरीज़ को लागू करेंगे। इसके विपरीत, मोबाइल फर्स्ट एप्रोच में छोटी स्क्रीन वाले मोबाइल उपकरणों के लिए CSS लिखना और फिर बड़ी स्क्रीन के लिए डिज़ाइन का विस्तार करने के लिए मीडिया क्वेरीज़ को लागू करना शामिल है। मुख्य फोकस वेबसाइट और ऐप्स को पूर्ण अनिवार्यता तक कम करना है।
यदि आप अभी उत्तरदायी वेब विकास के साथ शुरुआत कर रहे हैं तो आपको डेस्कटॉप-प्रथम के लिए जाना चाहिए दिन के अंत में, आपको कंटेनर को मोबाइल पर एक के बाद एक ढेर करना होगा उपकरण। यद्यपि यह पूरी तरह से एक व्यक्तिगत निर्णय है, मोबाइल पहले दृष्टिकोण आपको इसकी संरचना करने में मदद करता है HTML बेहतर तरीके से जबकि डेस्कटॉप-प्रथम दृष्टिकोण आपको लेआउट और स्पेसिंग में मदद करेगा तकनीक।
यदि आप UX डिज़ाइन सीखना चाहते हैं या अपने कौशल में सुधार करना चाहते हैं, तो यहां छह सर्वश्रेष्ठ ऑनलाइन पाठ्यक्रम दिए गए हैं, जिन्हें आप अपना सकते हैं।
आगे पढ़िए
- प्रोग्रामिंग
- वेब
- वेब डिजाइन
- सीएसएस
नैंसी अत्यधिक प्रतिक्रियाशील वेबसाइटों और वेब प्रतियों के साथ कुशल सामग्री रणनीति बनाने में माहिर हैं। वह एक फ्रीलांस टेक राइटर हैं, जो ट्रेंडिंग टेक्नोलॉजी पर पैनी नजर रखती हैं।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें