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