जैसे-जैसे स्क्रीन आकार की सीमा बढ़ी है, डिजाइनरों (designers) को एक अनूठी चुनौती का सामना करना पड़ा है: आप एक ऐसा लेआउट कैसे डिज़ाइन करते हैं जो रचनात्मक हो लेकिन किसी भी रिज़ॉल्यूशन resolution) या स्क्रीन(Screen) आकार पर भी प्रभावी हो? ब्लॉक-आधारित डिज़ाइन (block-based design), जो आसानी से स्क्रीन पर लागू होते हैं, एक सामान्य समाधान बन गए हैं।
लेकिन जबकि यह दृष्टिकोण असंख्य स्क्रीन आकारों के लिए डिजाइनिंग की समस्या को हल करता है, यह रचनात्मकता को सीमित करता है, डिजाइनरों को टेम्पलेट (Template) सोच के साथ वेबसाइट बनाने के लिए कहता है, न कि डिजाइन सोच के साथ। इस प्रकार, एक और चुनौती पैदा होती है: आप ग्राहक के ब्रांड के लिए अनुकूलित एक सुंदर डिज़ाइन कैसे प्रदान करते हैं जो कभी भी, कहीं भी लागू होने में सक्षम है?
उत्तर: CSS ग्रिड लेआउट (grid layout), जो डिज़ाइनर-डेवलपर इंटरैक्शन (designer-developer interaction) के भविष्य के लिए एक आधार प्रदान करता है। एक डिजाइनर के लिए, CSS ग्रिड क्लाइंट के संदेश को प्रभावशाली तरीके से संप्रेषित करने का एक उपकरण है।
डेवलपर्स के लिए, जिन्हें अनंत स्क्रीन आकार, पृष्ठ लोडिंग गति, कोड पुन: प्रयोज्य, और इसी तरह की चीजों से निपटना पड़ता है, सीएसएस ग्रिड (css grid)उन्हें एक नियम देता है, जिस पर डेवलपर की निरंतर भागीदारी की आवश्यकता को कम करते हुए वेबसाइट संचालित होती है।
आइए देखें कि ग्रिड अच्छी कला और डिज़ाइन को क्यों प्रभावित करता है और कैसे CSS ग्रिड लेआउट डिजाइनरों, डेवलपर्स और उपयोगकर्ताओं के लिए बेहतर अनुभव को सक्षम कर सकता है।
एक ग्रिड क्या है?
ग्रिड लाइनों का एक नेटवर्क है जो एक दूसरे को पार करके स्तंभों में वर्गों या आयतों की एक श्रृंखला बनाता है। यह लंबे समय से दृश्य कलाकारों का एक उपकरण रहा है।
वेब डिज़ाइन में, ग्रिड बाधाओं का एक समूह बन जाता है जो तत्वों को एक साथ जोड़ता है लेकिन तत्वों को ग्रिड को निर्देशित करने की अनुमति भी देता है। CSS ग्रिड वेब डिज़ाइनरों के लिए एक अनिवार्य उपकरण है, क्योंकि यह उन्हें वास्तव में प्रतिक्रियाशील लेआउट बनाने में मदद करता है।
CSS ग्रिड लेआउट को 2011 में पेश किया गया था, जो एक ब्राउज़र द्वारा प्रयोगात्मक सुविधा के रूप में समर्थित था। तब से, यह एक लंबा सफर तय कर चुका है, 2017 में सभी प्रमुख ब्राउज़र बोर्ड पर कूद गएइससे पहले, टेबल लेआउट का उपयोग करके पृष्ठ बनाए गए थे, जिसके लिए सामग्री को सुलभ और इंटरैक्टिव तरीके से प्रदर्शित करने के लिए कुछ सुरुचिपूर्ण समाधानों की आवश्यकता थी।
बाद में, एक सार्वभौमिक मार्कअप के मुद्दे को हल करने में मदद के लिए एक आयामी लचीला बॉक्स मॉड्यूल (फ्लेक्सबॉक्स) बनाया गया था। हालांकि, इसे काम करने के लिए, डेवलपर्स ने हैक किया, ट्वीक किया, वर्कअराउंड बनाया, और सीएसएस फ्रेमवर्क का आविष्कार किया – इनमें से कोई भी इन विधियों की व्यवहार्यता में नहीं जोड़ा गया।
2018 में, CSS ग्रिड ने लेआउट के नए युग की शुरुआत की। ग्रिड क्षैतिज और लंबवत रेखाओं को काटने का एक सेट है; इस प्रकार, यह एक द्वि-आयामी लेआउट है जिसे मार्कअप को प्रभावित किए बिना बदला जा सकता है।
ग्रिड एक पृष्ठ पर प्रस्तुत किए गए तत्वों के लिए एक आदेश प्रदान करता है, और, फ्लेक्सबॉक्स की तरह, एक वेब डिज़ाइन ग्रिड को तत्वों को प्रदर्शित होने के क्रम में रखने की आवश्यकता नहीं होती है। CSS उन्हें स्क्रीन आकार की प्राथमिकताओं के आधार पर किसी भी क्रम में वितरित कर सकता है।
CSS ग्रिड लेआउट में लीवरेजिंग डिज़ाइन
ऐसा नहीं है कि सीएसएस ग्रिड के बिना लचीली, आधुनिक दिखने वाली वेबसाइटें मौजूद नहीं हैं। फ्लेक्सबॉक्स के साथ निर्मित वेबसाइटों में एक-आयामी लचीलापन होता है जो साइट पर विभिन्न तत्वों को स्क्रीन आकार के आधार पर आकार बदलने की अनुमति देता है। हालांकि, एक निश्चित तरीके से तत्वों को स्थापित करने की तुलना में वेबसाइट डिजाइन करने के लिए और भी बहुत कुछ है। डिज़ाइन किसी तत्व को उसकी दृश्य प्रस्तुति से परे सार्थक रूप से विस्तारित कर सकता है। लेआउट धारणा को प्रभावित करता है।
एक डिजाइनर द्वारा बनाई गई प्रत्येक रचना सिद्धांतों के एक समूह पर आधारित होती है। सिद्धांत जितना अधिक परिष्कृत होगा, कलात्मक प्रभाव उतना ही मजबूत होगा। यदि कोई लेआउट एक सिद्धांत को फिर से नहीं बना सकता है, तो वह प्रभाव – और उपयोगकर्ता और ब्रांड दोनों के लिए इसके सभी संभावित लाभ – खो जाते हैं। इसलिए, एक डिजाइनर के लिए, एक लचीली सार्वभौमिक लेआउट क्षमता एक पूर्वापेक्षा है।
वेब के शुरुआती दिनों में, इनमें से कोई भी मायने नहीं रखता था। प्रकाशित डिजिटल मीडिया के जादू ने उपयोगकर्ताओं को पेज के जटिल और कम आकर्षक बैकएंड लुक से विचलित कर दिया।
दूसरे शब्दों में, इंटरनेट के शुरुआती दिनों में असाधारण दिखने के लिए डिज़ाइन की आवश्यकता नहीं थी – फॉर्म का तथ्य अपने आप में काफी आश्चर्यजनक था। वेबसाइटों ने ध्यान आकर्षित करने के लिए लड़ाई नहीं की और इस प्रकार, उपयोगकर्ता बातचीत के भावनात्मक प्रभाव पर विचार करने की आवश्यकता नहीं थी।
समय, जिसमें सब कुछ अपनी जगह पर रखने का एक तरीका है, ने अंततः बेहतर डिजाइन के लिए इंटरनेट को एक और युद्धक्षेत्र में बदल दिया। पिछले डिज़ाइन प्रथाओं और लेआउट को ऑनलाइन शामिल करना आम बात थी क्योंकि डिजाइनरों को डिजिटल स्पेस बनाने में लाया गया था।
समय बीतने के साथ, एक डिजाइनर/कलाकार ग्रिड ऑनलाइन आनुपातिक सटीकता तक पहुंचने के लिए एक उपकरण में बदल गया है। ग्रिड लंबे समय से एक ढांचा रहा है जिसका उपयोग कलाकारों ने व्यावसायिक ललित कला के निर्माण के लिए किया है, और ग्राफिक डिजाइनरों ने एक स्विस डिजाइनर जोसेफ मुलर-ब्रॉकमैन के मार्ग का अनुसरण करते हुए ऐसा ही किया है, जिन्होंने ग्रिड को “एक संगठनात्मक प्रणाली के रूप में परिभाषित किया है जो इसे आसान बनाता है। संदेश पढ़ने के लिए। ”
ग्रिड गैप अवसर
CSS ग्रिड लेआउट पहला वास्तविक समाधान है जो डिजाइनरों और डेवलपर्स के बीच लेआउट की समस्याओं को दूर करने और उन्हें ठीक करने में मदद करता है। तो क्यों, जब से सीएसएस ग्रिड को फ्रंट-एंड समुदाय में सक्रिय रूप से बढ़ावा दिया गया है, क्या यह अभी भी एक तकनीक नहीं है? मास्को के पीछे के मास्टरमाइंड सर्गेई पोपोव का कहना है कि इसके दो कारण हैं:
1 – डिजाइनर जटिल कार्यों के साथ डेवलपर्स को चुनौती नहीं दे रहे हैं
2 – डेवलपर्स यह नहीं देखते हैं कि उन्हें साधारण परियोजनाओं पर ग्रिड क्यों लागू करना चाहिए
अधिकांश वेबसाइटें एक साधारण टेबल लेआउट के साथ जाने के लिए अच्छी हैं क्योंकि उन्हें मार्केटिंग की जरूरतों के अनुसार, समय-खराब शेड्यूल पर और दुर्लभ तकनीकी विविधता की स्थितियों में डिज़ाइन किया गया है।
कंस्ट्रक्टर जैसे लैंडिंग पृष्ठों के लिए रास्ता बनाने के लिए अपरंपरागत ग्रिड और जटिल लेआउट डिजाइन दृष्टिकोण से गायब हो गए हैं। अब, जब विकास उपकरण और ब्राउज़र जटिल लेआउट की अनुमति देते हैं, तो यह अंतर एक व्यर्थ अवसर है।
CSS ग्रिड केवल एक जटिल लेआउट से अधिक सक्षम बनाता है। ग्रिड यूआई को आसानी से लागू करने और विभिन्न संदर्भों में रखे जाने की अनुमति देता है। इसका उपयोग सरल तीन-स्तंभ लेआउट में किया जा सकता है, अंतहीन रैपिंग को बचा सकता है, और लेआउट की संरचना को उत्तरदायी रूप से बदल सकता है।
CSS ग्रिड वेब डिज़ाइनरों को एक महाशक्ति प्रदान करता है। ग्रिड के लिए धन्यवाद, डिजाइनर बाधाओं को तोड़ सकते हैं और आकर्षक दृश्य लेआउट तैयार कर सकते हैं। अपने लेख “सीएसएस ग्रिड टेम्पलेट क्षेत्रों के साथ वेब के लिए कला निर्देशन” में, वेब डिज़ाइनर एंडी क्लार्क ग्रिड-आधारित लेआउट के कुछ दिलचस्प उदाहरणों के साथ-साथ उन्हें लागू करने के तरीके के बारे में सुझाव देते हैं। आइए ग्रिड-आधारित लेआउट के साथ बनाई गई वेबसाइटों के कुछ अन्य उदाहरण देखें:
निष्कर्ष
ग्रिड डिजाइन और डेवलपर्स के बीच तालमेल को सक्षम बनाता है। इसके साथ, एक डिज़ाइनर एक ऐसा लेआउट बना सकता है जो रचनात्मक और ब्रांड-सुंदर हो, और डिज़ाइनर उस ग्रिड लेआउट को एक प्रतिक्रियाशील लेआउट में बदल सकते हैं—बिना किसी डिज़ाइनर के सौंदर्यशास्त्र या डेवलपर की महत्वाकांक्षाओं का त्याग किए। सीएसएस ग्रिड दोनों दर्शनों को एक बेहतर अंतिम उत्पाद के लाभ के लिए एक साथ आने का अधिकार देता है।