Mobile friendly website कैसे बनाएँ: 10 बदलाव जो सच में फ़र्क़ डालते हैं

वेबसाइट को मोबाइल फ़्रेंडली बनाने के लिए सही viewport meta tag जोड़ें, लेआउट को तय पिक्सेल चौड़ाई के बजाय स्क्रीन की चौड़ाई के हिसाब से फैलने दें, छोटी स्क्रीन पर कंटेंट को दोबारा व्यवस्थित करने के लिए media queries इस्तेमाल करें, टेक्स्ट को पढ़ने लायक़ और बटन को आसानी से टैप होने लायक़ बनाएँ, और फ़ोन के हिसाब से साइज़ वाली इमेज भेजें। फिर असली मोबाइल व्यू में टेस्ट करें। नीचे के दस बदलाव वे ग़लतियाँ ठीक करते हैं जो लगभग हर नॉन-मोबाइल-फ़्रेंडली साइट में मिलती हैं, उसी क्रम में जिसमें इन पर काम करना चाहिए।

1. viewport meta tag जोड़ें

इसके बिना फ़ोन मान लेते हैं कि पेज डेस्कटॉप के लिए बना है, उसे लगभग 980 px चौड़ा बनाते हैं और फिर छोटा कर देते हैं। टेक्स्ट बहुत बारीक हो जाता है और यूज़र को उँगलियों से ज़ूम करना पड़ता है। हर पेज के <head> में यह लाइन डालें:

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

user-scalable=no या maximum-scale=1 न जोड़ें; ज़ूम रोकने से उन लोगों को परेशानी होती है जिन्हें बड़ा टेक्स्ट चाहिए। पूरी जानकारी: viewport meta tag क्या है।

2. तय चौड़ाई की जगह फ़्लूइड चौड़ाई

width: 960px वाला container 390 px की स्क्रीन में नहीं समा सकता। इसकी जगह प्रतिशत, max-width और आधुनिक लेआउट टूल इस्तेमाल करें:

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

flex-wrap: wrap के साथ Flexbox और repeat(auto-fit, minmax(16rem, 1fr)) के साथ CSS Grid कॉलम को अपने-आप अगली लाइन में जाने देते हैं, अक्सर बिना किसी media query के।

3. इमेज और embed को छोटा होने दें

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

embed किए गए वीडियो और मैप के लिए aspect-ratio: 16 / 9; width: 100% सेट करें, ताकि वे लेआउट तोड़े बिना छोटे-बड़े हों। यह एक नियम साइड में स्क्रॉल होने के कई मामले ख़त्म कर देता है।

4. Media queries से कंटेंट दोबारा व्यवस्थित करें

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

.layout { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 3fr 1fr; }
}

चौड़ाई चुनने के बारे में रिस्पॉन्सिव breakpoints में लिखा है, और syntax के बारे में CSS media queries गाइड में। mobile first तरीका ख़ुद mobile first डिज़ाइन में समझाया गया है।

5. पढ़ने लायक़ टेक्स्ट रखें

मुख्य टेक्स्ट कम-से-कम 16 px (ज़्यादातर ब्राउज़र में 1rem) और लाइन-हाइट लगभग 1.5 रखें। rem units इस्तेमाल करें ताकि टेक्स्ट यूज़र की ब्राउज़र फ़ॉन्ट सेटिंग को माने। बड़ी स्क्रीन पर लाइनें बहुत लंबी न हों, इसके लिए टेक्स्ट ब्लॉक पर max-width: 65ch लगाएँ। हेडिंग clamp() से स्क्रीन के साथ बढ़-घट सकती हैं:

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

6. टैप टारगेट बड़े और दूर-दूर रखें

उँगली माउस पॉइंटर जितनी सटीक नहीं होती। WCAG 2.2 टारगेट का न्यूनतम साइज़ 24 × 24 CSS पिक्सेल तय करता है; Apple और Google की डिज़ाइन गाइडलाइन आराम से टैप करने के लिए लगभग 44–48 px सुझाती हैं। टेक्स्ट के बीच वाले लिंक और आइकन बटन को पर्याप्त padding और पड़ोसियों से दूरी दें।

7. ऐसा मेन्यू बनाएँ जो hover के बिना चले

touch स्क्रीन पर hover मेन्यू होते ही नहीं। छोटी स्क्रीन पर ऐसा मेन्यू बटन रखें जो टैप करने पर लिस्ट खोले, ऊपरी लेवल के आइटम कम रखें, और पक्का करें कि अंदर वाले आइटम टैप और कीबोर्ड दोनों से खुलें। यह भी जाँचें कि कोई लिंक चुनने पर मेन्यू बंद हो जाता है।

8. फ़ोन के लिए फ़ॉर्म ठीक करें

• सही input types (email, tel, url, number) और inputmode इस्तेमाल करें, ताकि फ़ोन मेल खाता कीबोर्ड दिखाए।
• autocomplete attributes (name, email, street-address, cc-number) जोड़ें ताकि autofill काम करे।
• इनपुट का टेक्स्ट 16 px या उससे बड़ा रखें; iOS Safari छोटे इनपुट पर फ़ोकस होते ही ज़ूम कर देता है।
• पतली स्क्रीन पर लेबल को इनपुट के ऊपर रखें और सबमिट बटन को पूरी चौड़ाई दें।

9. मोबाइल के साइज़ वाली इमेज भेजें

2400 px की hero इमेज फ़ोन पर भारी डाउनलोड है। रिस्पॉन्सिव इमेज इस्तेमाल करें ताकि ब्राउज़र सही फ़ाइल चुने:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     alt="Product dashboard on a phone">

WebP और AVIF जैसे आधुनिक फ़ॉर्मेट फ़ाइल साइज़ और घटाते हैं। पहली स्क्रीन से नीचे वाली इमेज में loading="lazy" जोड़ें। पेज तेज़ करने के बारे में मोबाइल पेज स्पीड टेस्ट गाइड में है।

10. मोबाइल पर परेशान करने वाली चीज़ें हटाएँ

आते ही पूरी स्क्रीन वाले पॉप-अप, “Buy” बटन के ऊपर चैट बबल और स्क्रीन का चौथाई हिस्सा घेरने वाली sticky पट्टियाँ फ़ोन पर साइट को चिढ़ाने वाला बना देती हैं। पॉप-अप देर से दिखाएँ, उन्हें बंद करना आसान रखें, और sticky एलिमेंट छोटे रखें।

अपना काम कैसे जाँचें

हर बदलाव के बाद पेज को फ़ोन के साइज़ वाली स्क्रीन पर देखें। तेज़ तरीका है डेस्कटॉप Chrome में मोबाइल व्यू: DevTools का device mode, या Mobile View Extension जैसा एक-क्लिक एक्सटेंशन, जो टैब को असली मोबाइल user agent के साथ रीलोड करता है और डिवाइस साइज़ की तुलना करने देता है। फिर Lighthouse मोबाइल ऑडिट चलाएँ और लॉन्च से पहले मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट से गुज़रें। Google के पुराने एक-क्लिक टेस्ट की जगह लेने वाले टूल Mobile Friendly Test के विकल्प में हैं।

WordPress इस्तेमाल करते हैं? सिद्धांत वही हैं, लेकिन ज़्यादातर बदलाव थीम में होते हैं। देखें WordPress साइट को मोबाइल फ़्रेंडली कैसे बनाएँ।

अक्सर पूछे जाने वाले सवाल

पुरानी वेबसाइट को मोबाइल फ़्रेंडली बनाने का सबसे तेज़ तरीका क्या है?

viewport meta tag जोड़ें, इमेज और embed पर max-width: 100% लगाएँ, मुख्य container से तय चौड़ाई हटाएँ, और एक media query से कॉलम को ऊपर-नीचे कर दें। इससे साइड में स्क्रॉलिंग और बारीक टेक्स्ट की ज़्यादातर समस्याएँ एक दोपहर में ठीक हो जाती हैं।

क्या अलग मोबाइल वेबसाइट चाहिए?

नहीं। स्क्रीन के हिसाब से ढलने वाली एक रिस्पॉन्सिव साइट को संभालना आसान है, और Google भी यही सुझाता है। अलग m. वाली साइटें पुराना तरीका हैं।

कैसे पता करें कि मेरी वेबसाइट मोबाइल फ़्रेंडली है?

उसे फ़ोन के साइज़ वाली स्क्रीन पर देखें, मोबाइल मोड में Lighthouse ऑडिट चलाएँ, और Google Search Console के URL Inspection का स्क्रीनशॉट देखें। ये तीनों मिलकर Google के बंद हो चुके Mobile-Friendly Test की जगह ले लेते हैं।