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

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

Una Kravets

आज के समय में रिस्पॉन्सिव डिज़ाइन

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

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

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

ध्यान दें: इस लेख में कॉम्पोनेंट का मतलब एलिमेंट से है. इनमें ऐसे एलिमेंट भी शामिल हैं जो अन्य एलिमेंट से बने होते हैं, जैसे कि कार्ड या साइडबार. इन कॉम्पोनेंट से हमारे वेब पेज बनते हैं.

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

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

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

सोर्स: Web Design Museum.

इसलिए, ऐसा लगता है कि सीएसएस में कुछ बड़े बदलाव होने वाले हैं. 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% पर सेट करके, ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के लिए गहरे रंग वाली थीम और हल्के रंग वाली थीम की तुलना करने पर मिला.

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

कंटेनर के हिसाब से रिस्पॉन्सिव

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

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

Codepen पर डेमो देखें (Canary में फ़्लैग के पीछे).

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

इतनी ज़्यादा सुविधाएं, सिर्फ़ मीडिया क्वेरी से नहीं मिल सकतीं.

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

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

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

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

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

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

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

Codepen पर डेमो देखें (Canary में फ़्लैग के पीछे).

इस पूरे लेआउट को बनाने के लिए, किसी भी मीडिया क्वेरी का इस्तेमाल नहीं किया गया है. इसमें सिर्फ़ कंटेनर क्वेरी का इस्तेमाल किया गया है. इससे हर प्रॉडक्ट कार्ड, अपनी जगह भरने के लिए सही लेआउट में शिफ़्ट हो जाता है. उदाहरण के लिए, ग्रिड में 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 पर सेट किया जाता है. इसमें डिफ़ॉल्ट फ़्लेक्स-डायरेक्शन "लाइन" होती है.

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

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

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

Codepen पर डेमो देखें (Canary में फ़्लैग के पीछे).

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

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

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

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

ये डेमो अब 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 नियम में शामिल सिलेक्टर, उन सीमाओं के बीच मैच होते हैं.

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

डिवाइस के नाप या आकार के हिसाब से अडजस्ट होना

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

Microsoft Edge Explainers का डायग्राम.

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

स्क्रीन-स्पैनिंग के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध मीडिया क्वेरी से हमें यहां मदद मिल सकती है. फ़िलहाल, यह इस तरह काम करता है: @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 पर जाकर ऐक्सेस किया जा सकता है.

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

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