इंटरनेट का इस्तेमाल करने वाले मोबाइल फ़ोन उपयोगकर्ताओं की संख्या में लगातार बढ़ोतरी हो रही है. इसलिए, वेब डिज़ाइनर के लिए यह ज़रूरी हो गया है कि वे कॉन्टेंट को इस तरह से लेआउट करें कि वह अलग-अलग स्क्रीन साइज़ के लिए अच्छी तरह से काम करे. रिस्पॉन्सिव वेब डिज़ाइन, डिज़ाइन की एक ऐसी रणनीति है जो उपयोगकर्ताओं की ज़रूरतों और उनके डिवाइसों की क्षमताओं के हिसाब से काम करती है. इसे सबसे पहले, A List Apart में Ethan Marcotte ने बताया था. इसमें, इस्तेमाल किए जा रहे डिवाइस के हिसाब से साइट के लेआउट को बदला जाता है. उदाहरण के लिए, रिस्पॉन्सिव साइट पर कॉन्टेंट को फ़ोन पर एक कॉलम में, टैबलेट पर दो कॉलम में, और डेस्कटॉप कंप्यूटर पर तीन या चार कॉलम में दिखाया जा सकता है.
इंटरनेट से कनेक्ट होने वाले डिवाइसों की स्क्रीन का साइज़ अलग-अलग होता है. इसलिए, यह ज़रूरी है कि आपकी साइट, मौजूदा या आने वाले समय में उपलब्ध होने वाले किसी भी स्क्रीन साइज़ के हिसाब से अडजस्ट हो जाए. मॉडर्न रिस्पॉन्सिव डिज़ाइन में, इंटरैक्शन के तरीकों को भी ध्यान में रखा जाता है. जैसे, टच स्क्रीन. हमारा मकसद, सभी के लिए बेहतर अनुभव देना है.
व्यूपोर्ट सेट करना
अलग-अलग डिवाइसों के लिए ऑप्टिमाइज़ किए गए पेजों में, दस्तावेज़ के हेड में मेटा व्यूपोर्ट टैग शामिल होना चाहिए. यह टैग, ब्राउज़र को पेज के डाइमेंशन और स्केलिंग को कंट्रोल करने का तरीका बताता है.
मोबाइल ब्राउज़र, पेज को डेस्कटॉप स्क्रीन की चौड़ाई (आम तौर पर, करीब 980px, हालांकि यह डिवाइस के हिसाब से अलग-अलग होती है) के हिसाब से रेंडर करते हैं, ताकि बेहतर अनुभव दिया जा सके. इसके बाद, कॉन्टेंट को बेहतर तरीके से दिखाने के लिए, मोबाइल ब्राउज़र फ़ॉन्ट का साइज़ बढ़ाकर और कॉन्टेंट को छोटा-बड़ा करके, स्क्रीन में फ़िट करने की कोशिश करते हैं. इससे फ़ॉन्ट अलग-अलग दिख सकते हैं. साथ ही, कॉन्टेंट देखने और उसके साथ इंटरैक्ट करने के लिए, उपयोगकर्ताओं को ज़ूम इन करना पड़ सकता है.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
मेटा व्यूपोर्ट वैल्यू width=device-width का इस्तेमाल करने से, पेज को डिवाइस-इंडिपेंडेंट पिक्सल (डीआईपी) में स्क्रीन की चौड़ाई से मैच करने के लिए कहा जाता है. यह स्टैंडर्ड विज़ुअल पिक्सल यूनिट होती है. इसे ज़्यादा डेंसिटी वाली स्क्रीन पर कई फ़िज़िकल पिक्सल से बनाया जा सकता है. इससे पेज पर मौजूद कॉन्टेंट को अलग-अलग स्क्रीन साइज़ के हिसाब से फिर से व्यवस्थित किया जा सकता है.
कुछ ब्राउज़र, लैंडस्केप मोड में रोटेट करने पर पेज की चौड़ाई को स्थिर रखते हैं. साथ ही, टेक्स्ट को फिर से व्यवस्थित करने के बजाय, स्क्रीन को भरने के लिए ज़ूम करते हैं. initial-scale=1 वैल्यू जोड़ने से ब्राउज़र को यह निर्देश मिलता है कि वह सीएसएस पिक्सल और डिवाइस से स्वतंत्र पिक्सल के बीच 1:1 का अनुपात सेट करे. इससे कोई फ़र्क़ नहीं पड़ता कि डिवाइस किस ओरिएंटेशन में है. इससे पेज को लैंडस्केप मोड में पूरी चौड़ाई का फ़ायदा मिलता है.
width या initial-scale के साथ <meta name="viewport"> टैग मौजूद नहीं है
Lighthouse ऑडिट की मदद से, यह पक्का करने की प्रोसेस को अपने-आप पूरा किया जा सकता है कि आपके एचटीएमएल दस्तावेज़, व्यूपोर्ट मेटा टैग का सही तरीके से इस्तेमाल करते हैं.
कॉन्टेंट का साइज़ व्यूपोर्ट के मुताबिक करना
डेस्कटॉप और मोबाइल डिवाइस, दोनों पर उपयोगकर्ता वेबसाइटों को वर्टिकल तरीके से स्क्रोल करते हैं, न कि हॉरिज़ॉन्टल तरीके से. उपयोगकर्ता को पूरे पेज को देखने के लिए, हॉरिज़ॉन्टल स्क्रोल करने या ज़ूम आउट करने के लिए मजबूर करने से, उपयोगकर्ता अनुभव खराब होता है.
मेटा व्यूपोर्ट टैग का इस्तेमाल करके मोबाइल साइट डेवलप करते समय, ऐसा अक्सर होता है कि पेज का कॉन्टेंट गलती से ऐसा बन जाता है जो तय किए गए व्यूपोर्ट में पूरी तरह से फ़िट नहीं होता. उदाहरण के लिए, व्यूपोर्ट से ज़्यादा चौड़ी इमेज दिखाने पर, हॉरिज़ॉन्टल स्क्रोलिंग हो सकती है. ऐसा होने से रोकने के लिए, अपने कॉन्टेंट को व्यूपोर्ट के हिसाब से बनाएं.
कॉन्टेंट का साइज़, व्यूपोर्ट के हिसाब से सही नहीं है लाइटहाउस ऑडिट की मदद से, व्यूपोर्ट से बाहर जाने वाले कॉन्टेंट का पता लगाने की प्रोसेस को अपने-आप होने वाली प्रोसेस में बदला जा सकता है.
इमेज
अगर इमेज का डाइमेंशन तय है और वह व्यूपोर्ट से बड़ी है, तो पेज स्क्रोल होता है. हमारा सुझाव है कि सभी इमेज को 100% का max-width दें. इससे इमेज, उपलब्ध जगह के हिसाब से छोटी हो जाती हैं. साथ ही, वे अपने शुरुआती साइज़ से ज़्यादा बड़ी नहीं होती हैं.
ज़्यादातर मामलों में, स्टाइल शीट में यह कोड जोड़कर ऐसा किया जा सकता है:
img {
max-width: 100%;
display: block;
}
img एलिमेंट में इमेज के डाइमेंशन जोड़ना
max-width: 100% सेट करने के बाद भी, हमारा सुझाव है कि आप अपने <img> टैग में width और height एट्रिब्यूट जोड़ें. इससे ब्राउज़र, इमेज लोड होने से पहले उनके लिए जगह रिज़र्व कर सकता है. इससे लेआउट शिफ़्ट को रोकने में मदद मिलती है.
लेआउट
अलग-अलग डिवाइसों में, स्क्रीन डाइमेंशन और सीएसएस पिक्सल में चौड़ाई अलग-अलग होती है. उदाहरण के लिए, फ़ोन और टैबलेट के बीच, और यहां तक कि अलग-अलग फ़ोन के बीच भी. इसलिए, कॉन्टेंट को अच्छी तरह से रेंडर करने के लिए, किसी खास व्यूपोर्ट की चौड़ाई पर निर्भर नहीं रहना चाहिए.
पहले, इसके लिए लेआउट एलिमेंट को प्रतिशत में सेट करना पड़ता था. पिक्सेल मेज़रमेंट का इस्तेमाल करने पर, छोटी स्क्रीन पर उपयोगकर्ता को हॉरिज़ॉन्टल तौर पर स्क्रोल करना पड़ता है:
प्रतिशत का इस्तेमाल करने पर, छोटी स्क्रीन पर कॉलम छोटे हो जाते हैं. ऐसा इसलिए होता है, क्योंकि हर कॉलम हमेशा स्क्रीन की चौड़ाई का एक जैसा प्रतिशत लेता है:
सीएसएस लेआउट की आधुनिक तकनीकों, जैसे कि फ़्लेक्सबॉक्स, ग्रिड लेआउट, और मल्टीकॉलम की मदद से, इन फ़्लेक्सिबल ग्रिड को बनाना बहुत आसान हो जाता है.
Flexbox
अगर आपके पास अलग-अलग साइज़ के आइटम का सेट है और आपको उन्हें एक या एक से ज़्यादा लाइनों में इस तरह से व्यवस्थित करना है कि छोटे आइटम कम जगह लें और बड़े आइटम ज़्यादा जगह लें, तो फ़्लेक्सबॉक्स का इस्तेमाल करें.
.items {
display: flex;
justify-content: space-between;
}
फ़्लेक्सबॉक्स का इस्तेमाल करके, आइटम को एक लाइन में दिखाया जा सकता है. इसके अलावा, जगह कम होने पर उन्हें कई लाइनों में रैप किया जा सकता है.
फ़्लेक्सबॉक्स के बारे में ज़्यादा जानें.
सीएसएस ग्रिड लेआउट
सीएसएस ग्रिड लेआउट की मदद से, फ़्लेक्सिबल ग्रिड बनाए जा सकते हैं. ग्रिड लेआउट और fr यूनिट का इस्तेमाल करके, पहले दिए गए उदाहरण को बेहतर बनाया जा सकता है. fr यूनिट, कंटेनर में उपलब्ध जगह के एक हिस्से को दिखाती है.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
ग्रिड का इस्तेमाल करके, नियमित ग्रिड लेआउट भी बनाए जा सकते हैं. इनमें ज़्यादा से ज़्यादा आइटम शामिल किए जा सकते हैं. स्क्रीन का साइज़ कम होने पर, उपलब्ध ट्रैक की संख्या कम हो जाती है. इस डेमो में, एक ग्रिड दिखाया गया है. इसमें हर लाइन में उतने कार्ड हैं जितने आ सकते हैं. साथ ही, हर कार्ड का कम से कम साइज़ 200px है.
सीएसएस ग्रिड लेआउट के बारे में ज़्यादा जानें
कई कॉलम वाला लेआउट
कुछ तरह के लेआउट के लिए, मल्टीपल-कॉलम लेआउट (मल्टीकॉल) का इस्तेमाल किया जा सकता है. यह column-width प्रॉपर्टी के साथ, रिस्पॉन्सिव कॉलम की संख्या बनाता है.
यहां दिए गए डेमो में, पेज पर तब कॉलम जोड़े जाते हैं, जब एक और 200px कॉलम जोड़ने की जगह होती है.
Multicol के बारे में ज़्यादा जानें
रिस्पॉन्सिवनेस के लिए सीएसएस मीडिया क्वेरी का इस्तेमाल करना
कभी-कभी, आपको कुछ स्क्रीन साइज़ के लिए अपने लेआउट में ज़्यादा बदलाव करने पड़ सकते हैं. ऐसा इसलिए, क्योंकि पहले बताई गई तकनीकें, इन बदलावों को लागू करने की अनुमति नहीं देती हैं. ऐसे में, मीडिया क्वेरी काम आती हैं.
मीडिया क्वेरी, आसान फ़िल्टर होते हैं. इन्हें सीएसएस स्टाइल पर लागू किया जा सकता है, ताकि कॉन्टेंट रेंडर करने वाले डिवाइसों के टाइप के हिसाब से उन स्टाइल में बदलाव किया जा सके. वे डिवाइस की सुविधाओं के आधार पर स्टाइलिंग में बदलाव भी कर सकते हैं. जैसे, चौड़ाई, ऊंचाई, ओरिएंटेशन, और डिवाइस को टचस्क्रीन के तौर पर इस्तेमाल किया जा रहा है या नहीं.
प्रिंटिंग के लिए अलग-अलग स्टाइल देने के लिए, आउटपुट टाइप को टारगेट किया जा सकता है. साथ ही, प्रिंट स्टाइल के लिए स्टाइल शीट शामिल की जा सकती है:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
अपनी मुख्य स्टाइल शीट में प्रिंट स्टाइल शामिल करने के लिए, मीडिया क्वेरी का इस्तेमाल भी किया जा सकता है:
@media print {
/* print styles go here */
}
रिस्पॉन्सिव वेब डिज़ाइन के लिए, डिवाइस की सुविधाओं के बारे में सबसे ज़्यादा क्वेरी की जाती हैं. इसलिए, टचस्क्रीन या छोटी स्क्रीन के लिए अपने लेआउट को पसंद के मुताबिक बनाया जा सकता है.
व्यूपोर्ट के साइज़ के आधार पर मीडिया क्वेरी
मीडिया क्वेरी की मदद से, रिस्पॉन्सिव अनुभव बनाया जा सकता है. इससे स्क्रीन के साइज़ के हिसाब से स्टाइल लागू की जा सकती हैं. स्क्रीन के साइज़ के लिए क्वेरी, इन चीज़ों की जांच कर सकती हैं:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
डिवाइस की क्षमता के आधार पर मीडिया क्वेरी
अलग-अलग तरह के डिवाइस उपलब्ध होने की वजह से, डेवलपर यह नहीं मान सकते कि हर बड़े डिवाइस में रेगुलर डेस्कटॉप या लैपटॉप कंप्यूटर है. इसके अलावा, वे यह भी नहीं मान सकते कि हर छोटे डिवाइस में टचस्क्रीन का इस्तेमाल किया जाता है. मीडिया क्वेरी स्पेसिफ़िकेशन में हाल ही में जोड़े गए कुछ नए फ़ीचर की मदद से, इन सुविधाओं को टेस्ट किया जा सकता है: डिवाइस के साथ इंटरैक्ट करने के लिए इस्तेमाल किए गए पॉइंटर का टाइप और क्या उपयोगकर्ता एलिमेंट पर पॉइंटर को होल्ड कर सकता है.
hoverpointerany-hoverany-pointer
इस डेमो को अलग-अलग डिवाइसों पर देखें. जैसे, डेस्कटॉप कंप्यूटर, फ़ोन या टैबलेट.
ये नई सुविधाएं, सभी मॉडर्न ब्राउज़र पर अच्छी तरह से काम करती हैं. hover, any-hover, pointer, और any-pointer के लिए, MDN पेजों पर जाकर ज़्यादा जानें.
any-hover और any-pointer का इस्तेमाल करना
any-hover और any-pointer सुविधाएं यह जांच करती हैं कि उपयोगकर्ता, एलिमेंट पर पॉइंटर को होल्ड कर सकता है (इसे अक्सर होवर करना कहा जाता है) या पॉइंटर का इस्तेमाल कर सकता है या नहीं. भले ही, यह डिवाइस के साथ इंटरैक्ट करने का मुख्य तरीका न हो. इनका इस्तेमाल करते समय बहुत सावधानी बरतें. उदाहरण के लिए, टचस्क्रीन का इस्तेमाल करने वाले व्यक्ति को माउस पर स्विच करने के लिए मजबूर न करें.
हालांकि, अगर यह जानना ज़रूरी है कि उपयोगकर्ता के पास किस तरह का डिवाइस है, तो any-hover और any-pointer का इस्तेमाल किया जा सकता है. उदाहरण के लिए, टचस्क्रीन और ट्रैकपैड वाले लैपटॉप में, कर्सर को घुमाने और सटीक तरीके से घुमाने की सुविधा के साथ-साथ, होवर करने की सुविधा भी होनी चाहिए.
ब्रेकपॉइंट चुनने का तरीका
डिवाइस क्लास या किसी प्रॉडक्ट, ब्रैंड के नाम या ऑपरेटिंग सिस्टम के आधार पर ब्रेकपॉइंट तय न करें. इससे आपके कोड को बनाए रखना मुश्किल हो जाता है. इसके बजाय, कॉन्टेंट को यह तय करने दें कि कंटेनर के हिसाब से उसका लेआउट कैसे बदलेगा.
छोटे से शुरू करके, बड़े ब्रेकपॉइंट चुनें
सबसे पहले, कॉन्टेंट को छोटी स्क्रीन के हिसाब से डिज़ाइन करें. इसके बाद, स्क्रीन को तब तक बड़ा करें, जब तक कि ब्रेकपॉइंट ज़रूरी न हो जाए. इससे आपको अपने पेज पर ब्रेकपॉइंट की संख्या कम करने और उन्हें कॉन्टेंट के हिसाब से ऑप्टिमाइज़ करने में मदद मिलती है.
यहां दिए गए उदाहरण में, इस पेज की शुरुआत में दिए गए मौसम के पूर्वानुमान वाले विजेट के उदाहरण के बारे में बताया गया है. पहला चरण, छोटी स्क्रीन पर अनुमान को बेहतर तरीके से दिखाना है:
इसके बाद, ब्राउज़र का साइज़ तब तक बदलें, जब तक कि एलिमेंट के बीच बहुत ज़्यादा खाली जगह न हो जाए. इससे विजेट अच्छा दिखेगा. यह फ़ैसला व्यक्तिपरक है, लेकिन 600px से ज़्यादा का अंतर बहुत ज़्यादा है.
600px पर ब्रेकपॉइंट डालने के लिए, कॉम्पोनेंट के सीएसएस के आखिर में दो मीडिया क्वेरी बनाएं: एक का इस्तेमाल तब किया जाएगा, जब ब्राउज़र 600px या इससे छोटा हो. वहीं, दूसरी का इस्तेमाल तब किया जाएगा, जब ब्राउज़र 600px से बड़ा हो.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
आखिर में, सीएसएस को फिर से फ़ैक्टर करें. max-width के 600px के लिए मीडिया क्वेरी में, वह सीएसएस जोड़ें जो सिर्फ़ छोटी स्क्रीन के लिए है. 601px के min-width के लिए मीडिया क्वेरी में, बड़ी स्क्रीन के लिए सीएसएस जोड़ें.
ज़रूरत पड़ने पर छोटे ब्रेकपॉइंट चुनें
लेआउट में काफ़ी बदलाव होने पर, मुख्य ब्रेकपॉइंट चुनने के साथ-साथ, छोटे-मोटे बदलावों के लिए भी ब्रेकपॉइंट को अडजस्ट करना फ़ायदेमंद होता है. उदाहरण के लिए, मुख्य ब्रेकपॉइंट के बीच किसी एलिमेंट के मार्जिन या पैडिंग को अडजस्ट करना या फ़ॉन्ट का साइज़ बढ़ाना फ़ायदेमंद हो सकता है, ताकि लेआउट में वह ज़्यादा नैचुरल लगे.
यह उदाहरण, पिछले उदाहरण के पैटर्न को फ़ॉलो करता है. इसमें सबसे पहले, छोटी स्क्रीन के लेआउट को ऑप्टिमाइज़ किया जाता है. सबसे पहले, व्यूपोर्ट की चौड़ाई 360px से ज़्यादा होने पर, फ़ॉन्ट को बूस्ट करें. इसके बाद, जब आपके पास काफ़ी जगह हो, तो ज़्यादा और कम तापमान को अलग-अलग करके एक ही लाइन में दिखाया जा सकता है. साथ ही, मौसम के आइकॉन को बड़ा किया जा सकता है.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
हमारा सुझाव है कि बड़ी स्क्रीन के लिए, पूर्वानुमान पैनल की चौड़ाई को सीमित करें, ताकि यह पूरी स्क्रीन की चौड़ाई का इस्तेमाल न करे.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
पढ़ने के लिए टेक्स्ट को ऑप्टिमाइज़ करना
पढ़ने में आसानी से जुड़ी क्लासिक थ्योरी के मुताबिक, किसी कॉलम में हर लाइन में 70 से 80 वर्ण होने चाहिए. अंग्रेज़ी में यह संख्या करीब 8 से 10 शब्द होती है. जब भी किसी टेक्स्ट ब्लॉक की चौड़ाई 10 शब्दों से ज़्यादा हो जाए, तो ब्रेकपॉइंट जोड़ें.
इस उदाहरण में, 1em पर मौजूद Roboto फ़ॉन्ट, छोटी स्क्रीन पर हर लाइन में 10 शब्द दिखाता है. हालांकि, बड़ी स्क्रीन के लिए ब्रेकपॉइंट की ज़रूरत होती है. इस मामले में, अगर ब्राउज़र की चौड़ाई 575px से ज़्यादा है, तो कॉन्टेंट की सही चौड़ाई 550px होगी.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
कॉन्टेंट छिपाने से बचें (:#avoid-hiding-content)
स्क्रीन के साइज़ के हिसाब से, कॉन्टेंट को छिपाने या दिखाने के लिए सावधानी बरतें. सिर्फ़ इसलिए कॉन्टेंट न छिपाएं, क्योंकि उसे स्क्रीन पर नहीं दिखाया जा सकता. स्क्रीन के साइज़ से यह अनुमान नहीं लगाया जा सकता कि कोई उपयोगकर्ता क्या देखना चाहता है. उदाहरण के लिए, मौसम के पूर्वानुमान से पराग की संख्या हटाने से, वसंत के मौसम में एलर्जी से पीड़ित लोगों के लिए गंभीर समस्या हो सकती है. उन्हें यह जानकारी इसलिए चाहिए, ताकि वे यह तय कर सकें कि उन्हें बाहर जाना चाहिए या नहीं.
Chrome DevTools में मीडिया क्वेरी ब्रेकपॉइंट देखना
मीडिया क्वेरी ब्रेकपॉइंट सेट अप करने के बाद, देखें कि इनसे आपकी साइट के दिखने के तरीके पर क्या असर पड़ता है. ब्रेकपॉइंट ट्रिगर करने के लिए, ब्राउज़र विंडो का साइज़ बदला जा सकता है. हालांकि, Chrome DevTools में पहले से मौजूद एक सुविधा होती है. इससे पता चलता है कि अलग-अलग ब्रेकपॉइंट पर कोई पेज कैसा दिखता है.
अलग-अलग ब्रेकपॉइंट पर अपना पेज देखने के लिए:
- DevTools खोलें.
- डिवाइस मोड चालू करें. यह डिफ़ॉल्ट रूप से रिस्पॉन्सिव मोड में खुलता है.
- मीडिया क्वेरी देखने के लिए, डिवाइस मोड मेन्यू खोलें और मीडिया क्वेरी दिखाएं को चुनें. इससे आपके पेज पर सबसे ऊपर, रंगीन बार के तौर पर ब्रेकपॉइंट दिखते हैं.
- मीडिया क्वेरी के चालू होने पर अपना पेज देखने के लिए, किसी बार पर क्लिक करें. किसी मीडिया क्वेरी की परिभाषा पर जाने के लिए, बार पर राइट क्लिक करें.