नया रिस्पॉन्सिव: कॉम्पोनेंट-आधारित दुनिया में वेब डिज़ाइन

रिस्पॉन्सिव वेब डिज़ाइन के नए युग में, मैक्रो और माइक्रो लेआउट को कंट्रोल करना.

Responsive Design Today

आज, "रिस्पॉन्सिव डिज़ाइन" शब्द का इस्तेमाल करते समय, हो सकता है कि आप डिज़ाइन के साइज़ को मोबाइल साइज़ से टैबलेट साइज़ और फिर डेस्कटॉप साइज़ में बदलते समय, लेआउट बदलने के लिए मीडिया क्वेरी का इस्तेमाल करने के बारे में सोच रहे हों.

हालांकि, जल्द ही रिस्पॉन्सिव डिज़ाइन को पेज लेआउट के लिए टेबल इस्तेमाल करने की तरह ही पुराना माना जा सकता है.

व्यूपोर्ट पर आधारित मीडिया क्वेरी, आपको कुछ बेहतरीन टूल देती हैं. हालांकि, इनमें बहुत कुछ बेहतर करने की ज़रूरत है. इनमें उपयोगकर्ता की ज़रूरतों के हिसाब से बदलाव करने की सुविधा नहीं होती. साथ ही, ये कॉम्पोनेंट में रिस्पॉन्सिव स्टाइल को खुद इंजेक्ट नहीं कर सकते.

अपने कॉम्पोनेंट को स्टाइल करने के लिए, ग्लोबल व्यूपोर्ट की जानकारी का इस्तेमाल किया जा सकता है. हालांकि, इसके बावजूद उनके पास अपनी स्टाइल का मालिकाना हक नहीं होता. साथ ही, यह तब काम नहीं करता, जब हमारे डिज़ाइन सिस्टम, पेज पर आधारित न होकर कॉम्पोनेंट पर आधारित हों.

अच्छी बात यह है कि खबरों का नेटवर्क बदल रहा है और तेज़ी से बदल रहा है. सीएसएस लगातार बेहतर हो रही है और रिस्पॉन्सिव डिज़ाइन का नया युग शुरू होने वाला है.

ऐसा हर 10 साल में होता है. 10 साल पहले, 2010-2012 के आस-पास, हमें मोबाइल और रिस्पॉन्सिव डिज़ाइन में काफ़ी बदलाव दिखे. साथ ही, सीएसएस3 का भी उदय हुआ.

इसलिए, यह साफ़ तौर पर पता चलता है कि सीएसएस में कुछ बड़े बदलाव करने के लिए, नेटवर्क फिर से तैयार है. Chrome और वेब प्लैटफ़ॉर्म के इंजीनियर, रिस्पॉन्सिव डिज़ाइन के अगले युग के लिए प्रोटोटाइप बना रहे हैं, स्पेसिफ़िकेशन तय कर रहे हैं, और इसे लागू करना शुरू कर रहे हैं.

इन अपडेट में, उपयोगकर्ता की प्राथमिकता के आधार पर मीडिया की सुविधाएं, कंटेनर क्वेरी, और नई स्क्रीन टाइप के लिए मीडिया क्वेरी शामिल हैं. जैसे, फ़ोल्ड होने वाली स्क्रीन.

उपयोगकर्ता के हिसाब से काम करना

उपयोगकर्ता की पसंद के मुताबिक मीडिया की नई सुविधाओं की मदद से, वेबसाइट पर उपयोगकर्ताओं को उनकी पसंद और ज़रूरतों के मुताबिक अनुभव दिया जा सकता है. इसका मतलब है कि प्राथमिकता वाले मीडिया की सुविधाओं की मदद से, उपयोगकर्ताओं को उनके हिसाब से अनुभव दिया जा सकता है.

उपयोगकर्ता की प्राथमिकता के हिसाब से मीडिया दिखाने की इन सुविधाओं में ये शामिल हैं:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• अन्य डेटा

पसंद के मुताबिक कॉन्टेंट दिखाने की सुविधाएं, उपयोगकर्ता के ऑपरेटिंग सिस्टम में सेट की गई प्राथमिकताओं को ध्यान में रखती हैं. साथ ही, वे खास तौर पर उन लोगों के लिए वेब पर बेहतर और मनमुताबिक अनुभव देने में मदद करती हैं जिन्हें सुलभता से जुड़ी ज़रूरतें होती हैं.

prefers-reduced-motion

जिन उपयोगकर्ताओं ने ऑपरेटिंग सिस्टम की सेटिंग में कम गति के लिए प्राथमिकताएं सेट की हैं वे आम तौर पर अपने कंप्यूटर का इस्तेमाल करते समय, कम ऐनिमेशन का अनुरोध कर रहे हैं. इसलिए, हो सकता है कि वे वेब का इस्तेमाल करते समय, शानदार शुरुआत वाली स्क्रीन, कार्ड फ़्लिप ऐनिमेशन, जटिल लोडर या अन्य शानदार ऐनिमेशन पसंद न करें.

prefers-reduced-motion की मदद से, अपने पेजों को कम मोशन के हिसाब से डिज़ाइन किया जा सकता है. साथ ही, उन लोगों के लिए बेहतर मोशन अनुभव बनाया जा सकता है जिनके पास यह प्राथमिकता सेट नहीं है.

इस कार्ड में दोनों तरफ़ जानकारी होती है. कम मोशन वाले बेसलाइन वर्शन में, यह जानकारी दिखाने के लिए क्रॉसफ़ेड का इस्तेमाल किया जाता है. वहीं, ज़्यादा मोशन वाले वर्शन में कार्ड फ़्लिप का इस्तेमाल किया जाता है.

Prefers-reduced-motion का मतलब "कोई मोशन नहीं" नहीं होना चाहिए, क्योंकि ऑनलाइन जानकारी देने के लिए मोशन बहुत ज़रूरी है. इसके बजाय, उपयोगकर्ताओं को ऐसा बुनियादी अनुभव दें जो उन्हें बिना किसी अतिरिक्त कार्रवाई के, ऐप्लिकेशन के मुख्य हिस्सों तक ले जाए. साथ ही, ऐक्सेस करने से जुड़ी ज़रूरतों या प्राथमिकताओं के बिना, उपयोगकर्ताओं के लिए इस अनुभव को लगातार बेहतर बनाएं.

prefers-color-scheme

मीडिया की प्राथमिकता से जुड़ी एक और सुविधा, prefers-color-scheme है. इस सुविधा की मदद से, यूज़र इंटरफ़ेस (यूआई) को अपनी पसंद की थीम के हिसाब से कस्टमाइज़ किया जा सकता है. उपयोगकर्ता अपने ऑपरेटिंग सिस्टम में, हल्की, गहरे रंग वाली या अपने-आप बदलने वाली थीम के लिए प्राथमिकता सेट कर सकते हैं. यह थीम, दिन के समय के हिसाब से बदलती है. भले ही, उपयोगकर्ता डेस्कटॉप या मोबाइल का इस्तेमाल कर रहे हों.

अगर आपने सीएसएस कस्टम प्रॉपर्टी का इस्तेमाल करके अपना पेज सेट अप किया है, तो रंग की वैल्यू को आसानी से बदला जा सकता है. मीडिया क्वेरी में नई थीम के हिसाब से डाइनैमिक तौर पर अडजस्ट करने के लिए, backgroundColor और textOnPrimary जैसी कलर थीम की वैल्यू को तुरंत अपडेट किया जा सकता है.

इनमें से कुछ प्राथमिकता क्वेरी को आसानी से टेस्ट करने के लिए, हर बार अपनी सिस्टम प्राथमिकताएं खोलने के बजाय, इम्यूलेशन के लिए DevTools का इस्तेमाल किया जा सकता है.

गहरे रंग वाली थीम के लिए डिज़ाइन करना

गहरे रंग वाली थीम के लिए डिज़ाइन करते समय, सिर्फ़ बैकग्राउंड और टेक्स्ट के रंगों को उलटना या गहरे रंग वाले स्क्रोलबार बनाना ही नहीं होता. कुछ ऐसी बातें हैं जिनके बारे में शायद आपको पता न हो. उदाहरण के लिए, गहरे रंग वाले बैकग्राउंड पर रंगों की चमक कम करके, विज़ुअल वाइब्रेशन को कम किया जा सकता है.

किसी एलिमेंट को आगे खींचने और उसमें गहराई देने के लिए, शैडो का इस्तेमाल करने के बजाय, एलिमेंट के बैकग्राउंड-रंग में लाइट का इस्तेमाल किया जा सकता है. ऐसा इसलिए है, क्योंकि गहरे रंग के बैकग्राउंड पर, परछाई उतनी असरदार नहीं दिखती.

गहरे रंग वाली थीम, उपयोगकर्ताओं को ज़्यादा पसंद के मुताबिक अनुभव देती हैं. साथ ही, ये AMOLED स्क्रीन की बैटरी लाइफ़ को भी बेहतर बनाती हैं. ये ऐसी स्क्रीन हैं जो हमें नए और बेहतर फ़ोन में दिख रही हैं. साथ ही, ये मोबाइल डिवाइसों में लगातार लोकप्रिय हो रही हैं.

2018 में Android के लिए की गई एक स्टडी में पता चला है कि गहरे रंग वाली थीम का इस्तेमाल करने पर, डिवाइस की बैटरी 60% तक कम खर्च होती है. यह स्क्रीन की चमक और यूज़र इंटरफ़ेस पर निर्भर करता है. 60% का आंकड़ा, YouTube की प्लेलिस्ट स्क्रीन की तुलना में, ऐप्लिकेशन के यूज़र इंटरफ़ेस के लिए हल्के रंग वाली थीम के मुकाबले, गहरे रंग वाली थीम का इस्तेमाल करके, रोके गए वीडियो की स्क्रीन की चमक 100% पर करने से मिला.

जब भी संभव हो, अपने उपयोगकर्ताओं को हमेशा गहरे रंग वाली थीम का अनुभव दें.

कंटेनर के हिसाब से काम करना

सीएसएस में सबसे दिलचस्प और नए क्षेत्रों में से एक है कंटेनर क्वेरी. इन्हें अक्सर एलिमेंट क्वेरी भी कहा जाता है. यह कहना मुश्किल है कि पेज-आधारित रिस्पॉन्सिव डिज़ाइन से कंटेनर-आधारित रिस्पॉन्सिव डिज़ाइन पर स्विच करने से, डिज़ाइन के पारिस्थितिक तंत्र को कैसे बेहतर बनाया जा सकता है.

यहां कंटेनर क्वेरी की बेहतर सुविधाओं का उदाहरण दिया गया है. पैरंट कंटेनर के आधार पर, कार्ड एलिमेंट के किसी भी स्टाइल में बदलाव किया जा सकता है. जैसे, लिंक की सूची, फ़ॉन्ट के साइज़, और पूरे लेआउट में बदलाव किया जा सकता है:

इस उदाहरण में, दो अलग-अलग साइज़ के कंटेनर वाले दो एक जैसे कॉम्पोनेंट दिखाए गए हैं. ये दोनों कॉम्पोनेंट, सीएसएस ग्रिड का इस्तेमाल करके बनाए गए लेआउट में जगह ले रहे हैं. हर कॉम्पोनेंट, अपने लिए तय किए गए स्पेस में फ़िट हो जाता है और अपने हिसाब से स्टाइल में दिखता है.

मीडिया क्वेरी के साथ इतना फ़्लेक्सिबिलिटी नहीं मिलता.

कंटेनर क्वेरी, रिस्पॉन्सिव डिज़ाइन के लिए ज़्यादा डाइनैमिक तरीका उपलब्ध कराती हैं. इसका मतलब है कि अगर इस कार्ड कॉम्पोनेंट को किसी साइडबार या हीरो सेक्शन में या किसी पेज के मुख्य हिस्से में मौजूद ग्रिड में डाला जाता है, तो कॉम्पोनेंट के पास अपनी रिस्पॉन्सिव जानकारी और साइज़ का मालिकाना हक होता है. यह जानकारी और साइज़, व्यूपोर्ट के हिसाब से नहीं, बल्कि कंटेनर के हिसाब से तय होते हैं

इसके लिए, @container at-rule की ज़रूरत होती है. यह @media के साथ मीडिया क्वेरी की तरह ही काम करता है. हालांकि, @container जानकारी के लिए व्यूपोर्ट और उपयोगकर्ता एजेंट के बजाय, पैरंट कंटेनर से क्वेरी करता है.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

सबसे पहले, पैरंट एलिमेंट पर कंटेनमेंट सेट करें. इसके बाद, min-width या max-width का इस्तेमाल करके, कंटेनर में मौजूद किसी भी एलिमेंट को उसके साइज़ के आधार पर स्टाइल करने के लिए, @container क्वेरी लिखें.

ऊपर दिया गया कोड, max-width का इस्तेमाल करता है और लिंक को display:none पर सेट करता है. साथ ही, जब कंटेनर 850px से कम चौड़ा होता है, तो समय के फ़ॉन्ट साइज़ को कम करता है.

कंटेनर क्वेरी कार्ड

इस डेमो प्लांट की वेबसाइट में, हर प्रॉडक्ट कार्ड एक जैसे हैं. इनमें हीरो, हाल ही में देखे गए आइटम का साइडबार, और प्रॉडक्ट ग्रिड शामिल हैं. इन सभी का मार्कअप एक जैसा है.

इस पूरे लेआउट को बनाने के लिए, कोई मीडिया क्वेरी इस्तेमाल नहीं की गई है. इसमें सिर्फ़ कंटेनर क्वेरी का इस्तेमाल किया गया है. इससे हर प्रॉडक्ट कार्ड को सही लेआउट में शिफ़्ट किया जा सकता है, ताकि वह अपनी जगह भर सके. उदाहरण के लिए, ग्रिड में एलिमेंट को उनके स्पेस में फ़्लो करने के लिए, कम से कम कॉलम लेआउट का इस्तेमाल किया जाता है. साथ ही, जब वह स्पेस बहुत छोटा हो जाता है, तो ग्रिड को फिर से लेआउट किया जाता है. इसका मतलब है कि वह कम से कम साइज़ पर पहुंच गया है.

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

जब ग्रिड में कम से कम 350px स्पेस होता है, तो कार्ड लेआउट display: flex पर सेट करके हॉरिज़ॉन्टल हो जाता है. इसका डिफ़ॉल्ट फ़्लेक्स-डायरेक्शन "लाइन" होता है.

कम जगह होने पर, प्रॉडक्ट कार्ड स्टैक हो जाते हैं. हर प्रॉडक्ट कार्ड अपने हिसाब से स्टाइल करता है. ऐसा सिर्फ़ ग्लोबल स्टाइल की मदद से नहीं किया जा सकता.

मीडिया क्वेरी के साथ कंटेनर क्वेरी का इस्तेमाल करना

कंटेनर क्वेरी का इस्तेमाल कई तरह से किया जा सकता है. जैसे, कैलेंडर कॉम्पोनेंट. पैरंट की उपलब्ध चौड़ाई के आधार पर, कैलेंडर इवेंट और अन्य सेगमेंट का लेआउट फिर से तय करने के लिए, कंटेनर क्वेरी का इस्तेमाल किया जा सकता है.

इस डेमो कंटेनर में, कैलेंडर की तारीख और हफ़्ते के दिन के लेआउट और स्टाइल को बदलने के लिए क्वेरी की गई हैं. साथ ही, शेड्यूल किए गए इवेंट के मार्जिन और फ़ॉन्ट साइज़ में बदलाव किया गया है, ताकि वे स्पेस में बेहतर तरीके से फ़िट हो सकें.

इसके बाद, मीडिया क्वेरी का इस्तेमाल करके पूरे लेआउट को छोटे स्क्रीन साइज़ के लिए शिफ़्ट करें. इस उदाहरण से पता चलता है कि मीडिया क्वेरी (ग्लोबल या मैक्रो स्टाइल में बदलाव करना) और कंटेनर क्वेरी (कंटेनर के चाइल्ड और उनकी माइक्रो स्टाइल में बदलाव करना) को मिलाकर इस्तेमाल करने की सुविधा कितनी असरदार है.

इसलिए, अब हम एक ही यूज़र इंटरफ़ेस कॉम्पोनेंट में मैक्रो और माइक्रो लेआउट के बारे में सोच सकते हैं, ताकि डिज़ाइन से जुड़े कुछ बेहतर फ़ैसले लिए जा सकें.

कंटेनर क्वेरी का इस्तेमाल आज ही करना

ये डेमो अब Chrome Canary में, फ़्लैग के पीछे खेलने के लिए उपलब्ध हैं. Canary में about://flags पर जाएं और #enable-container-queries फ़्लैग को चालू करें. इससे contain प्रॉपर्टी के लिए @container, inline-size, और block-size वैल्यू के साथ-साथ, LayoutNG ग्रिड लागू करने की सुविधा चालू हो जाएगी.

इस फ़्लैग से, Chrome DevTools की उससे जुड़ी सुविधाएं भी चालू हो जाती हैं. DevTools में कंटेनर क्वेरी की जांच करने और उन्हें डीबग करने का तरीका जानें.

स्कोप वाली स्टाइल

कंटेनर क्वेरी बनाने के लिए, @scope के साथ स्कोप वाली स्टाइल का इस्तेमाल करें, ताकि आपके सिलेक्टर की पहुंच सीमित हो.

स्कोप वाली स्टाइल की मदद से, कॉम्पोनेंट के हिसाब से स्टाइल तय की जा सकती है, ताकि नामों में कोई गड़बड़ी न हो. सीएसएस मॉड्यूल जैसे कई फ़्रेमवर्क और प्लग इन, हमें फ़्रेमवर्क में पहले से ही ऐसा करने की सुविधा देते हैं. स्कोप वाली स्टाइल की मदद से, मार्कअप में बदलाव किए बिना, पढ़ने लायक सीएसएस वाले कॉम्पोनेंट के लिए, नेटिव तौर पर एन्कैप्सुलेट की गई स्टाइल लिखी जा सकती हैं.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

स्कोपिंग की मदद से, "डोनट के आकार" वाले सिलेक्टर बनाए जा सकते हैं. इनमें ऊपरी और निचली सीमा तय की जा सकती है. @scope नियम में मौजूद सिलेक्टर, उन सीमाओं के बीच मैच हो जाते हैं.

इसका एक उदाहरण टैब पैनल है. इसमें आपको टैब में स्कोप वाली स्टाइल चाहिए, लेकिन उन टैब में मौजूद पैनल पर उन स्कोप वाली स्टाइल का असर नहीं पड़ना चाहिए.

डिवाइस के नाप या आकार के हिसाब से काम करना

रिस्पॉन्सिव डिज़ाइन के नए युग के बारे में हमारी बातचीत का अगला विषय, डिवाइस के फ़ॉर्म फ़ैक्टर में बदलाव है. साथ ही, वेब कम्यूनिटी के तौर पर हमें किन चीज़ों को डिज़ाइन करना होगा, इसकी बढ़ती संभावनाएं. जैसे, स्क्रीन का आकार बदलना या वर्चुअल रिएलिटी.

फ़ोल्ड होने वाली या फ़्लेक्सिबल स्क्रीन और स्क्रीन के साइज़ को बढ़ाने के लिए डिज़ाइन करना, फ़ॉर्म फ़ैक्टर में हुए बदलाव का एक उदाहरण है. इन नए फ़ॉर्म फ़ैक्टर और ज़रूरतों को पूरा करने के लिए, स्क्रीन-स्पैनिंग एक और स्पेसिफ़िकेशन है जिस पर काम किया जा रहा है.

स्क्रीन-स्पैनिंग के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध मीडिया क्वेरी से हमें मदद मिल सकती है. फ़िलहाल, यह इस तरह काम करता है: @media (spanning: <type of fold>). इस डेमो में, दो कॉलम वाला ग्रिड लेआउट सेट अप किया गया है: एक कॉलम की चौड़ाई --sidebar-width है, जो डिफ़ॉल्ट रूप से 5rem होती है और दूसरे कॉलम की चौड़ाई 1fr है. जब लेआउट को ड्यूअल स्क्रीन पर देखा जाता है, जिसमें एक वर्टिकल फ़ोल्ड होता है, तो --sidebar-width की वैल्यू को बाईं ओर मौजूद फ़ोल्ड के एनवायरमेंट की वैल्यू से अपडेट किया जाता है.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

इससे एक ऐसा लेआउट चालू होता है जिसमें साइडबार, इस मामले में नेविगेशन, एक फ़ोल्ड के स्पेस को भरता है, जबकि ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) दूसरे फ़ोल्ड को भरता है. इससे यूज़र इंटरफ़ेस में "क्रीज़" नहीं होता.

Chrome DevTools के एमुलेटर में फ़ोल्ड होने वाली स्क्रीन की जांच की जा सकती है. इससे, सीधे ब्राउज़र में स्क्रीन को डीबग करने और प्रोटोटाइप बनाने में मदद मिलती है.

नतीजा

फ़्लैट स्क्रीन के अलावा, यूआई डिज़ाइन को एक्सप्लोर करना भी एक और वजह है कि कंटेनर क्वेरी और स्कोप वाली स्टाइल इतनी ज़रूरी हैं. इनकी मदद से, पेज लेआउट और ग्लोबल स्टाइल के साथ-साथ उपयोगकर्ता स्टाइल से, सिलो कॉम्पोनेंट स्टाइल को अलग किया जा सकता है. इससे, ज़्यादा बेहतर रिस्पॉन्सिव डिज़ाइन बनाने में मदद मिलती है. इसका मतलब है कि अब पेज पर आधारित मीडिया क्वेरी का इस्तेमाल करके, मैक्रो लेआउट डिज़ाइन किए जा सकते हैं. इनमें स्क्रीन पर दिखने वाले बारीकियों को भी शामिल किया जा सकता है. साथ ही, कॉम्पोनेंट पर कंटेनर क्वेरी के साथ माइक्रो लेआउट का इस्तेमाल करें. साथ ही, उपयोगकर्ता की पसंद के आधार पर मीडिया क्वेरी जोड़ें, ताकि उपयोगकर्ताओं को उनकी पसंद और ज़रूरत के हिसाब से अनुभव दिया जा सके.

यह नया रिस्पॉन्सिव है.

इसमें मैक्रो लेआउट को माइक्रो लेआउट के साथ जोड़ा जा रहा है. साथ ही, उपयोगकर्ता के हिसाब से बदलाव करने की सुविधा और फ़ॉर्म फ़ैक्टर को भी ध्यान में रखा जा रहा है.

इनमें से किसी भी बदलाव से, वेब के लिए डिज़ाइन करने के हमारे तरीके में काफ़ी बदलाव होगा. हालांकि, इन दोनों के साथ मिलकर, रिस्पॉन्सिव डिज़ाइन के बारे में सोचने के हमारे तरीके में काफ़ी बदलाव हुआ है. अब समय आ गया है कि हम व्यूपोर्ट साइज़ के अलावा, रिस्पॉन्सिव डिज़ाइन के बारे में भी सोचें. साथ ही, बेहतर कॉम्पोनेंट-आधारित और पसंद के मुताबिक अनुभव के लिए, इन सभी नए ऐक्सिस पर विचार करना शुरू करें.

रिस्पॉन्सिव डिज़ाइन का नया युग आ चुका है और इसे खुद भी आज़माया जा सकता है.

web.dev/learnCSS

अगर आपको सीएसएस के बारे में ज़्यादा जानना है और कुछ बुनियादी बातों को दोबारा याद करना है, तो मेरी टीम web.dev पर एक नया और पूरी तरह से मुफ़्त सीएसएस कोर्स और रेफ़रंस लॉन्च कर रही है. इसे web.dev/learnCSS पर जाकर ऐक्सेस किया जा सकता है.

हमें उम्मीद है कि आपको रिस्पॉन्सिव डिज़ाइन के अगले युग और इसके साथ आने वाले कुछ प्राइमिटिव के बारे में यह खास जानकारी पसंद आई होगी. हमें यह भी उम्मीद है कि वेब डिज़ाइन के भविष्य के लिए, इस बारे में आप भी उतने ही उत्साहित हैं जितने हम हैं.

यूज़र इंटरफ़ेस (यूआई) कम्यूनिटी के तौर पर, हमारे लिए यह एक बहुत बड़ा अवसर है. इससे हमें कॉम्पोनेंट पर आधारित स्टाइल और नए फ़ॉर्म फ़ैक्टर को अपनाने के साथ-साथ, उपयोगकर्ताओं के हिसाब से अनुभव बनाने में मदद मिलेगी.