रिस्पॉन्सिव वेब डिज़ाइन, कई मायनों में मोबाइल फ़ोन का हिस्सा था. स्मार्टफ़ोन दिखने से पहले, बहुत कम लोगों ने इस बात पर गंभीरता से विचार किया कि हैंडहेल्ड डिवाइसों पर वेबसाइटों को कैसा दिखना चाहिए. यह सुविधा बिल्ट-इन वेब ब्राउज़र वाले मोबाइल फ़ोन में होने वाली बढ़ोतरी से बदल गई.
रिस्पॉन्सिव वेब डिज़ाइन ने मान्यताओं पर सवाल उठाने वाली मानसिकता को बढ़ावा दिया. पहले यह मानकर चलना आम बात थी कि कोई वेबसाइट सिर्फ़ डेस्कटॉप कंप्यूटर पर ही देखी जाएगी, अब फ़ोन और टैबलेट के लिए भी उसी वेबसाइट को डिज़ाइन करना एक मानक तरीका है. असल में, वेब पर मोबाइल के इस्तेमाल ने अब डेस्कटॉप का इस्तेमाल करना छोड़ दिया है.
यह प्रतिक्रियाशील मानसिकता आपके भविष्य के लिए अच्छा काम करेगी. यह पूरी तरह से संभव है कि आपकी वेबसाइटें उन डिवाइसों और स्क्रीन पर ही देखी जाएं, जिनके बारे में हम आज भी सोच भी नहीं सकते. ऐसा इसलिए है, क्योंकि अब स्क्रीन पर भी लोगों को ये एलिमेंट नहीं दिखते. अब भी, लोग आपका कॉन्टेंट ऐक्सेस करने के लिए ऐसे डिवाइसों का इस्तेमाल कर रहे हैं जिन पर स्क्रीन नहीं है. अगर आप सिमैंटिक एचटीएमएल की मज़बूत बुनियाद का इस्तेमाल कर रहे हैं, तो वॉइस असिस्टेंट आपकी वेबसाइटों का इस्तेमाल कर सकती हैं.
स्क्रीन की दुनिया में भी प्रयोग हो रहा है. आज-कल मार्केट में फ़ोल्ड किए जा सकने वाले डिवाइस उपलब्ध हैं. इससे आपके डिज़ाइन के लिए कुछ चुनौतियां आ जाएंगी.
ड्यूअल स्क्रीन
फ़ोल्ड किए जा सकने वाले डिवाइस के उपयोगकर्ता, यह चुन सकते हैं कि उनका वेब ब्राउज़र सिर्फ़ एक स्क्रीन पर दिखे या दोनों स्क्रीन पर. अगर ब्राउज़र दोनों स्क्रीन पर दिखता है, तो डिस्प्ले पर दिखने वाली वेबसाइट दो स्क्रीन के बीच के कब्ज़े के हिसाब से दिखेगी. यह बहुत बढ़िया नहीं लग रहा है.
व्यूपोर्ट सेगमेंट
यहां प्रयोग के तौर पर एक मीडिया सुविधा है, जिसे यह पता लगाने के लिए डिज़ाइन किया गया है कि आपकी वेबसाइट ड्यूअल-स्क्रीन डिवाइस पर दिखाई जा रही है या नहीं. मीडिया सुविधा का प्रस्तावित नाम 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 मीडिया की सुविधा आपको नुकसान पहुंचाने वाले हिस्सों के इर्द-गिर्द डिज़ाइन करने में कोई मदद नहीं करेगी. आपको कब्ज़े का साइज़ जानना होगा. वहीं, एनवायरमेंट वैरिएबल से आपको मदद मिल सकती है.
सीएसएस में एनवायरमेंट वैरिएबल की मदद से, आपकी स्टाइल में डिवाइस से होने वाले अनचाहे ऑब्जेक्ट को शामिल किया जा सकता है. उदाहरण के लिए, safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, और safe-area-inset-left एनवायरमेंट वैल्यू का इस्तेमाल करके, iPhone X के "notch" के चारों ओर डिज़ाइन किया जा सकता है. इन कीवर्ड को 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 पर ये एनवायरमेंट वैरिएबल काम करें, इसके लिए meta एलिमेंट अपडेट करें, जो viewport की जानकारी देता है:
<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;
}
}
ड्यूअल स्क्रीन को अवसर के रूप में देखें. ऐसा हो सकता है कि एक स्क्रीन का इस्तेमाल, स्क्रोल किए जा सकने वाले टेक्स्ट कॉन्टेंट को दिखाने के लिए किया जाए, जबकि दूसरी स्क्रीन पर इमेज या मैप जैसा कोई तय एलिमेंट दिखाया जा सके.
आने वाला समय
क्या फ़ोल्ड किए जा सकने वाले डिसप्ले आपके लिए कारगर साबित होंगे? क्या पता. लोकप्रिय मोबाइल डिवाइस कितने लोकप्रिय होंगे, इसका कोई अंदाज़ा भी नहीं लगा सकता था. इसलिए, भविष्य के नाप या आकार के बारे में सोच-विचार करना ज़रूरी है.
इन सबसे ज़रूरी बात यह पक्का करना है कि आने वाले समय में वेबसाइट पर आने वाले समय में कोई भी कार्रवाई की जा सकती है. रिस्पॉन्सिव डिज़ाइन से आपको काम की तकनीकों का सिर्फ़ सेट नहीं मिलता, बल्कि आने वाले कल को बेहतर बनाने में मदद करने के लिए एक मानसिकता भी मिलती है.
आपने जो सीखा है उसकी जांच करें
स्क्रीन कॉन्फ़िगरेशन के बारे में अपनी जानकारी की जांच करें
कौनसी मीडिया क्वेरी, फ़ोल्ड किए जा सकने वाले डिवाइस को स्प्लिट लैंडस्केप मोड में टारगेट करती है?
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)एनवायरमेंट वैरिएबल क्या होते हैं? उदाहरण: env(safe-area-inset-top)