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

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

आज के हिसाब से तैयार किया गया डिज़ाइन

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

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

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

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

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

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

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

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

उपयोगकर्ता के लिए रिस्पॉन्सिव है

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

इन पसंदीदा मीडिया सुविधाओं में ये शामिल हैं:

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

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

prefers-reduced-motion

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

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

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

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

prefers-color-scheme

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

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

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

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

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

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

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

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

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

कंटेनर के लिए रिस्पॉन्सिव है

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

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

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

इतना लचीलापन सिर्फ़ मीडिया क्वेरी से मुमकिन नहीं है.

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

इसके लिए @container at-नियम की ज़रूरत होती है. यह @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 से कम होने पर समय के फ़ॉन्ट का साइज़ कम करता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कंटेनर क्वेरी बनाने के लिए, सीएसएस का काम करने वाला ग्रुप भी स्कोप वाली स्टाइल के बारे में सक्रिय रूप से चर्चा कर रहा है, ताकि कॉम्पोनेंट के लिए सही नाम स्पेसिंग और टकराव से बचने में मदद मिल सके.

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

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

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

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

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

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

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

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

स्क्रीन स्पैनिंग के लिए, प्रयोग के तौर पर शुरू की गई मीडिया क्वेरी से हमें यहां मदद मिल सकती है. फ़िलहाल, यह इस तरह काम करता है: @media (spanning: <type of fold>). डेमो एक ग्रिड लेआउट सेट अप करता है, जिसमें दो कॉलम हैं: एक की चौड़ाई --साइडबार-चौड़ाई है, जो डिफ़ॉल्ट रूप से 5 मी॰ होती है और दूसरे की 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 के ज़रिए ऐक्सेस किया जा सकता है.

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

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