रिस्पॉन्सिव वेब डिज़ाइन से जुड़ी बुनियादी बातें

ऐसी साइटें कैसे बनाएं जो उस डिवाइस की ज़रूरतों और क्षमताओं के मुताबिक हों जिस पर उन्हें देखा जाता है.

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

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

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

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

व्यूपोर्ट सेट करना

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

width=device-width मेटा व्यूपोर्ट वैल्यू का इस्तेमाल करने से, पेज को डिवाइस-इंडिपेंडेंट पिक्सल में स्क्रीन की चौड़ाई से मैच करने का निर्देश मिलता है. डिवाइस (या सघनता) स्वतंत्र पिक्सल में एक पिक्सल दिखाया जाता है, जो हाई डेंसिटी वाली स्क्रीन पर कई फ़िज़िकल पिक्सल हो सकता है. इससे पेज को अलग-अलग साइज़ की स्क्रीन के हिसाब से कॉन्टेंट को रीफ़्लो करने की सुविधा मिलती है. भले ही, उन्हें छोटे मोबाइल फ़ोन या बड़े डेस्कटॉप मॉनिटर पर रेंडर किया गया हो.

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

कुछ ब्राउज़र, लैंडस्केप मोड में घुमाते समय पेज की चौड़ाई को एक जैसा रखते हैं. साथ ही, स्क्रीन भरने के लिए, रीफ़्लो के बजाय ज़ूम करते हैं. initial-scale=1 वैल्यू जोड़ने से, ब्राउज़र को सीएसएस पिक्सल और डिवाइस-इंडिपेंडेंट पिक्सल के बीच 1:1 का संबंध बनाने का निर्देश मिलता है, भले ही डिवाइस की स्क्रीन की दिशा कुछ भी हो. साथ ही, इससे पेज को पूरी लैंडस्केप चौड़ाई का फ़ायदा मिलता है.

width या initial-scale वाला <meta name="viewport"> टैग नहीं है Lighthouse ऑडिट की मदद से, प्रोसेस को ऑटोमेट किया जा सकता है. इससे यह पक्का होता है कि आपके एचटीएमएल दस्तावेज़, व्यूपोर्ट मेटा टैग का सही तरीके से इस्तेमाल कर रहे हैं या नहीं.

पक्का करना कि व्यूपोर्ट को ऐक्सेस किया जा सके

initial-scale को सेट करने के अलावा, व्यूपोर्ट पर इन एट्रिब्यूट को भी सेट किया जा सकता है:

  • minimum-scale
  • maximum-scale
  • user-scalable

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

कॉन्टेंट का साइज़, व्यूपोर्ट के हिसाब से करें

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

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

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

इमेज

किसी इमेज के डाइमेंशन तय हैं. हालांकि, अगर वह व्यूपोर्ट से बड़ी होती है, तो एक स्क्रोलबार दिखता है. इस समस्या से निपटने का सबसे अच्छा तरीका यह है कि सभी इमेज को 100% का max-width दिया जाए. अगर व्यूपोर्ट का साइज़, इमेज से छोटा होता है, तो इमेज के साइज़ के हिसाब से वह छोटा हो जाएगा. हालांकि, width के बजाय max-width, 100% है, इसलिए इमेज अपने सामान्य साइज़ से बड़ी नहीं होगी. आम तौर पर अपनी स्टाइलशीट में इन्हें जोड़ना सुरक्षित होता है, ताकि आपको स्क्रोलबार बनाने वाली इमेज से कोई समस्या न हो.

img {
  max-width: 100%;
  display: block;
}

img एलिमेंट में इमेज के डाइमेंशन जोड़ें

max-width: 100% का इस्तेमाल करते समय, इमेज के नैचुरल डाइमेंशन को बदल दिया जाता है. हालांकि, आपको अब भी अपने <img> टैग पर width और height एट्रिब्यूट का इस्तेमाल करना चाहिए. इसकी वजह यह है कि मॉडर्न ब्राउज़र इस जानकारी का इस्तेमाल, इमेज के लोड होने से पहले उसके लिए जगह सुरक्षित रखने के लिए करेंगे. इससे, कॉन्टेंट लोड होने पर लेआउट में बदलाव से बचने में मदद मिलेगी.

लेआउट

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

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

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

चौड़ाई के लिए प्रतिशत का इस्तेमाल करने से, कॉलम हमेशा कंटेनर का कुछ प्रतिशत बने रहते हैं. इसका मतलब है कि स्क्रोलबार के बजाय, कॉलम छोटे हो जाते हैं.

Flexbox, Grid Layout, और Multicol जैसी मॉडर्न सीएसएस लेआउट तकनीकों से, इन लचीली ग्रिड को बनाने में आसानी होती है.

फ़्लेक्सबॉक्स

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

.items {
  display: flex;
  justify-content: space-between;
}

रिस्पॉन्सिव डिज़ाइन में, आइटम को एक पंक्ति के रूप में दिखाने के लिए Flexbox का इस्तेमाल किया जा सकता है. या जगह कम होने पर, इन्हें कई पंक्तियों में रैप किया जा सकता है.

Flexbox के बारे में ज़्यादा पढ़ें.

सीएसएस ग्रिड लेआउट

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

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

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

सीएसएस ग्रिड लेआउट के बारे में ज़्यादा जानें

कई कॉलम वाला लेआउट

कुछ तरह के लेआउट के लिए, एक से ज़्यादा कॉलम वाले लेआउट (मल्टीकॉल) का इस्तेमाल किया जा सकता है. इससे column-width प्रॉपर्टी वाले कॉलम के रिस्पॉन्सिव नंबर बनाए जा सकते हैं. नीचे दिए गए डेमो में, आप देख सकते हैं कि अगर किसी दूसरे 200px कॉलम के लिए जगह बची है, तो कॉलम जोड़े गए हैं.

मल्टीकॉल के बारे में ज़्यादा पढ़ें

जवाब देने के लिए, सीएसएस मीडिया क्वेरी का इस्तेमाल करें

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

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

प्रिंटिंग के लिए अलग-अलग स्टाइल इस्तेमाल करने के लिए, आपको आउटपुट के टाइप को टारगेट करना होगा, ताकि आप प्रिंट स्टाइल के साथ स्टाइलशीट इस तरह शामिल कर सकें:

<!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)
  • orientation
  • aspect-ratio

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

डिवाइस की क्षमता के आधार पर मीडिया क्वेरी

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

  • hover
  • pointer
  • any-hover
  • any-pointer

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

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

any-hover और any-pointer का इस्तेमाल किया जा रहा है

any-hover और any-pointer सुविधाओं की मदद से यह जांच की जाती है कि उपयोगकर्ता के पास कर्सर घुमाने या उस तरह के पॉइंटर का इस्तेमाल करने की सुविधा है या नहीं. भले ही, वह अपने डिवाइस से इंटरैक्ट करने का मुख्य तरीका न हो. इनका इस्तेमाल करते समय सावधानी बरतें. अपनी टचस्क्रीन का इस्तेमाल करते समय, किसी उपयोगकर्ता को माउस पर स्विच करने के लिए मजबूर करना ज़्यादा आसान नहीं है! हालांकि, any-hover और any-pointer तब काम आ सकते हैं, जब यह पता लगाना ज़रूरी हो कि उपयोगकर्ता के पास किस तरह का डिवाइस है. उदाहरण के लिए, टचस्क्रीन और ट्रैकपैड वाले लैपटॉप को कर्सर घुमाने के अलावा, मोटे और सटीक पॉइंटर से भी मेल खाना चाहिए.

ब्रेकपॉइंट चुनने का तरीका

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

छोटे ब्रेक से शुरुआत करके, बड़े ब्रेकपॉइंट चुनें

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

आइए, शुरू में देखे गए उदाहरण की मदद से जानते हैं: मौसम का पूर्वानुमान. पहला कदम, छोटी स्क्रीन पर अनुमान को बेहतर बनाना है.

मोबाइल पर मौसम की जानकारी देने वाले ऐप्लिकेशन का स्क्रीनशॉट
ऐप्लिकेशन की चौड़ाई कम हो.

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

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

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

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

आखिर में, सीएसएस की रीफ़ैक्टर करें. 600px के max-width के लिए मीडिया क्वेरी में, ऐसी सीएसएस जोड़ें जो सिर्फ़ छोटी स्क्रीन के लिए है. 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;
  }
}

कॉन्टेंट को सिर्फ़ छिपाने से बचें

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

Chrome DevTools में मीडिया क्वेरी ब्रेकपॉइंट देखें

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

DevTools का स्क्रीनशॉट, जिसमें मौसम की जानकारी देने वाला हमारा ऐप्लिकेशन खुला हुआ है. साथ ही, इसकी चौड़ाई 822 पिक्सल है.
DevTools के ज़रिए मौसम की जानकारी देने वाला ऐप्लिकेशन दिखाया जा रहा है, क्योंकि यह व्यूपोर्ट के बड़े साइज़ को दिखाता है.
DevTools का स्क्रीनशॉट, जिसमें मौसम की जानकारी देने वाला हमारा ऐप्लिकेशन खुला हुआ है. साथ ही, इसकी चौड़ाई 436 पिक्सल को चुनी गई है.
DevTools के ज़रिए मौसम की जानकारी देने वाला ऐप्लिकेशन दिखाया जा रहा है, क्योंकि यह व्यूपोर्ट का छोटा साइज़ दिखाता है.

अपने पेज को अलग-अलग ब्रेकपॉइंट में देखने के लिए:

DevTools खोलें और फिर डिवाइस मोड चालू करें. यह डिफ़ॉल्ट रूप से रिस्पॉन्सिव मोड में खुलता है.

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

किसी एक बार पर क्लिक करके उस मीडिया क्वेरी के चालू रहने पर अपना पेज देखें. मीडिया क्वेरी की परिभाषा पर जाने के लिए, किसी बार पर राइट क्लिक करें.