गाइड / वेब की बुनियादी बातें

रिस्पॉन्सिव डिज़ाइन: हर स्क्रीन पर फ़िट वेबसाइट

आपकी वेबसाइट लैपटॉप के साथ फ़ोन पर भी क्यों ठीक चलनी चाहिए, यह कैसे होता है, और अपनी वेबसाइट कैसे जांचें।

फ़ोन पर चलना क्यों ज़रूरी है

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

रिस्पॉन्सिव डिज़ाइन का मतलब है एक ऐसी वेबसाइट बनाना जो हर स्क्रीन के हिसाब से अपना लेआउट बदल ले। लैपटॉप पर किसी सेक्शन में तीन कार्ड अगल-बगल दिख सकते हैं। फ़ोन पर वही कार्ड एक कॉलम में ऊपर-नीचे आ जाते हैं। शब्द और फ़ोटो वही रहते हैं। बस उनकी जगह बदलती है।

सर्च इंजन भी इसका ध्यान रखते हैं। पेज की रैंकिंग तय करते समय Google ज़्यादातर पेज का फ़ोन वाला रूप देखता है। हमारी SEO गाइड में इसके बारे में और है।

कदम 1: viewport टैग

फ़ोन तब आए जब ज़्यादातर वेबसाइटें उनके लिए तैयार नहीं थीं। इसलिए फ़ोन का ब्राउज़र अपने आप मान लेता है कि उसकी स्क्रीन चौड़ी है, करीब 980 पिक्सल, और पूरे पेज को छोटा करके उसमें फ़िट कर देता है। सब कुछ बहुत छोटा दिखता है। पेज के head में एक लाइन इसे बंद कर देती है:

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

width=device-width ब्राउज़र से कहता है कि स्क्रीन की असली चौड़ाई इस्तेमाल करे। initial-scale=1 का मतलब है "बिना ज़ूम के शुरू करो"। इस लाइन के बिना इस पेज की कोई और बात फ़ोन पर काम नहीं करती। Kodebloc की बनाई हर वेबसाइट में यह लाइन head में सबसे ऊपर होती है।

कदम 2: लचीली चौड़ाई

ठीक 1000 पिक्सल चौड़ा बॉक्स 375 पिक्सल चौड़े फ़ोन में कभी फ़िट नहीं होगा। इसका हल है ऐसे साइज़ जो फैल और सिकुड़ सकें:

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

img {
  max-width: 100%;
  height: auto;
}

फ़ोन पर container पूरी स्क्रीन भर देता है, पर बड़ी स्क्रीन पर 1100 पिक्सल से ज़्यादा चौड़ा नहीं होता। margin: 0 auto उसे बीच में रखता है। padding टेक्स्ट को स्क्रीन के किनारों से चिपकने नहीं देती। img वाला नियम फ़ोटो को उनके बॉक्स में फ़िट होने तक छोटा होने देता है, और height: auto उन्हें खिंचकर बिगड़ने नहीं देता।

Flexbox और grid भी मदद करते हैं। जगह कम हो, तो वे चीज़ों को अगली लाइन में जाने दे सकते हैं। हमारी CSS की बुनियाद गाइड में दोनों की शुरुआती जानकारी है।

कदम 3: media query

कभी-कभी अलग साइज़ पर अलग लेआउट चाहिए होता है। media query CSS का ऐसा नियम है जो तभी लागू होता है जब स्क्रीन किसी शर्त से मेल खाए।

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

इसे ऐसे पढ़िए: "कार्ड एक कॉलम में दिखाओ। जब स्क्रीन कम से कम 768 पिक्सल चौड़ी हो, तो तीन कॉलम दिखाओ।" जिस चौड़ाई पर लेआउट बदलता है, उसे breakpoint कहते हैं।

क्रम पर ध्यान दीजिए। फ़ोन का आसान लेआउट पहले आता है, और media query उसके ऊपर चौड़ा लेआउट जोड़ती है। इसे mobile-first कहते हैं। इससे CSS अक्सर छोटी रहती है, क्योंकि फ़ोन का लेआउट आमतौर पर सबसे आसान होता है।

Kodebloc यह कैसे करता है

Kodebloc का नियम है कि हर वेबसाइट mobile-first बने और तीन साइज़ पर अच्छी दिखे: 375 पिक्सल (फ़ोन), 768 पिक्सल (टैबलेट) और 1024 पिक्सल या उससे चौड़ा (लैपटॉप)। वह स्टाइल Tailwind CSS में लिखता है, जहां breakpoint किसी class के आगे लगा एक छोटा शब्द होता है:

<section class="grid gap-10 md:grid-cols-2">
  <h1 class="text-5xl sm:text-6xl">Back on the road by Friday.</h1>
  <p class="text-lg">Same-week servicing for road, city and cargo bikes.</p>
</section>

• grid gap-10 हर स्क्रीन पर लागू होता है। फ़ोन पर हेडिंग और पैराग्राफ़ ऊपर-नीचे आते हैं।
• md:grid-cols-2 का मतलब है "768 पिक्सल चौड़ाई से दो कॉलम", इसलिए टैबलेट या लैपटॉप पर दोनों अगल-बगल आ जाते हैं।
• sm:text-6xl 640 पिक्सल चौड़ाई से हेडिंग को बड़ा कर देता है।

आगे लगा हर ऐसा शब्द असल में एक media query ही है। md: वही है जो @media (min-width: 768px), और lg: 1024 पिक्सल से शुरू होता है।

Kodebloc फ़ोन के लिए एक काम और करता है: पेज में नीचे वाली फ़ोटो तभी लोड होती हैं जब देखने वाला स्क्रॉल करके उनके पास पहुंचे। फ़ोन पर इंटरनेट धीमा हो, तो इससे पेज का ऊपरी हिस्सा जल्दी दिखता है।

अपनी वेबसाइट कैसे जांचें

Kodebloc एडिटर में

आपकी वेबसाइट के प्रीव्यू के ऊपर तीन छोटे बटन हैं: मॉनिटर (Desktop view), टैबलेट (Tablet view) और फ़ोन (Mobile view)। फ़ोन पर क्लिक करके अपनी वेबसाइट 375 पिक्सल चौड़ाई पर देखिए, और टैबलेट पर क्लिक करके 768 पिक्सल पर। हर साइज़ पर पूरा पेज स्क्रॉल कीजिए।

ब्राउज़र के device toolbar में

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

1. अपनी वेबसाइट Chrome, Edge या Firefox में खोलिए।
2. developer tools खोलने के लिए F12 दबाइए (Mac पर Cmd+Option+I)।
3. device toolbar चालू करने के लिए Ctrl+Shift+M दबाइए (Mac पर Cmd+Shift+M)।
4. ऊपर की लिस्ट से कोई फ़ोन चुनिए, या पेज का किनारा खींचकर उसे पतला और चौड़ा कीजिए।

चौड़े से पतला करते हुए धीरे-धीरे खींचिए, यह बढ़िया जांच है। देखते रहिए कि कहां कुछ बिगड़ता है, जैसे टेक्स्ट एक-दूसरे पर चढ़ जाए या कोई लाइन बगल से बाहर निकल जाए।

असली फ़ोन पर

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

क्या देखें

• क्या बिना ज़ूम किए हर शब्द पढ़ा जा रहा है?
• क्या पेज बगल में खिसकता है? बिल्कुल नहीं खिसकना चाहिए।
• क्या बटन और लिंक इतने बड़े हैं कि आराम से दबें, और उनके बीच जगह है?
• क्या मेन्यू खुलता-बंद होता है, और मेन्यू का हर लिंक चलता है?
• क्या फ़ोटो फ़िट हैं, बिना किसी अजीब जगह से कटे या खिंचे?
• क्या कॉन्टैक्ट फ़ॉर्म फ़िट है, और क्या हर बॉक्स में लिख पा रहे हैं?

कोई दिक्कत मिली? प्रीव्यू को Mobile view पर कीजिए, मैसेज बॉक्स के पास + पर क्लिक कीजिए, Pick a part of your page चुनिए, जो हिस्सा गड़बड़ दिखे उस पर क्लिक कीजिए, और चैट में सुधार बताइए, जैसे "फ़ोन पर ये तीनों कार्ड एक कॉलम में ऊपर-नीचे कर दीजिए"।