स्क्रीन कॉन्फ़िगरेशन

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

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

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

स्क्रीन की दुनिया में भी एक्सपेरिमेंट किया जा रहा है. आज मार्केट में ऐसे डिवाइस उपलब्ध हैं जिनमें फ़ोल्ड किए जा सकने वाले डिवाइस मौजूद हैं. इससे आपके डिज़ाइन के लिए कुछ चुनौतियां आती हैं.

ड्यूअल स्क्रीन

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

व्यूपोर्ट सेगमेंट

इसमें एक्सपेरिमेंट के तौर पर उपलब्ध मीडिया सुविधा मौजूद है. इसे यह पता लगाने के लिए डिज़ाइन किया गया है कि आपकी वेबसाइट को ड्यूअल-स्क्रीन डिवाइस पर दिखाया जा रहा है या नहीं. मीडिया फ़ीचर का सुझाया गया नाम viewport-segments है. इसकी दो किस्में हैं: horizontal-viewport-segments और vertical-viewport-segments.

अगर horizontal-viewport-segments मीडिया सुविधा 2 की वैल्यू रिपोर्ट करती है और vertical-viewport-segments, 1 की वैल्यू रिपोर्ट करता है, तो इसका मतलब है कि डिवाइस का हिंज ऊपर से नीचे तक चलता है और कॉन्टेंट को दो साइड पैनल में बांट देता है.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

अगर vertical-viewport-segments मीडिया सुविधा 2 की वैल्यू और horizontal-viewport-segments की वैल्यू 1 रिपोर्ट करती है, तो हिंज अगल-बगल में चलता है और आपके कॉन्टेंट को दो पैनल में बांटता है, जैसे कि दूसरे पैनल के ऊपर.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

एनवायरमेंट वैरिएबल

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

सीएसएस में एनवायरमेंट वैरिएबल की मदद से, डिवाइस में आने वाली अजीब गतिविधियों को अपनी स्टाइल में शामिल किया जा सकता है. उदाहरण के लिए, आपके पास "नॉच" के चारों ओर डिज़ाइन करने का विकल्प है iPhone X पर, safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, और safe-area-inset-left एनवायरमेंट वैल्यू का इस्तेमाल करके. इन कीवर्ड को env() फ़ंक्शन में रैप किया जाता है.

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

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

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

वे एनवायरमेंट वैरिएबल iPhone X पर काम करें, इसके लिए viewport की जानकारी देने वाले meta एलिमेंट को अपडेट करें:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

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

फ़ोल्ड किए जा सकने वाले स्क्रीन के लिए, छह नए एनवायरमेंट वैरिएबल सुझाए गए हैं: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

यहां दो कॉलम वाले लेआउट का उदाहरण दिया गया है, जिसमें एक कॉलम दूसरे से ज़्यादा चौड़ा है.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

वर्टिकल हिंज वाली ड्यूअल स्क्रीन के लिए, पहले कॉलम की चौड़ाई पहली स्क्रीन और दूसरे कॉलम की चौड़ाई के हिसाब से सेट करें.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

ड्यूअल स्क्रीन को अवसर के तौर पर इस्तेमाल करें. ऐसा हो सकता है कि एक स्क्रीन का इस्तेमाल, स्क्रोल किया जा सकने वाला टेक्स्ट कॉन्टेंट दिखाने के लिए किया जा सके. वहीं दूसरी ओर, स्क्रीन पर इमेज या मैप जैसा कोई तय एलिमेंट दिखे.

आने वाला समय

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

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

देखें कि आपको कितना समझ आया है

स्क्रीन कॉन्फ़िगरेशन के बारे में अपनी जानकारी परखें