वेबसाइट को मोबाइल-रिस्पॉन्सिव कैसे बनाएं

वेबसाइट को मोबाइल-रिस्पॉन्सिव बनाने के लिए, एक viewport meta tag जोड़ें, लेआउट को mobile-first बनाएं और लचीली चौड़ाई रखें, और बड़ी स्क्रीन के लिए CSS ब्रेकपॉइंट से उसे दोबारा व्यवस्थित करें — कॉलम एक के नीचे एक लगाएं, मेनू सिमटाएं और इमेज को फ़िट करें। फिर हर पेज को फ़ोन की चौड़ाई पर जाँचें: बगल में स्क्रॉल, बहुत छोटा टेक्स्ट, और ऐसे बटन जिन्हें छूना मुश्किल हो। AI से बनी साइट पर एक साफ़ prompt और फ़ोन-साइज़ प्रीव्यू में एक जाँच आमतौर पर ज़्यादातर समस्याएं ठीक कर देती है।

रिस्पॉन्सिव डिज़ाइन असल में क्या है

एक रिस्पॉन्सिव साइट एक ही पेज और URL सेट का इस्तेमाल करती है जो स्क्रीन के हिसाब से ढल जाता है। अलग "m." साइट के बजाय, CSS कुछ चौड़ाइयों पर लेआउट बदलता है, जिन्हें ब्रेकपॉइंट कहते हैं। इसके मूल तत्व:

• Viewport meta tag मोबाइल ब्राउज़र को डिवाइस की असली चौड़ाई इस्तेमाल करने को कहता है।
• लचीले लेआउट फ़िक्स्ड पिक्सल चौड़ाई के बजाय प्रतिशत, flexbox और grid इस्तेमाल करते हैं।
• Media queries (या Tailwind की md: जैसी फ़्रेमवर्क क्लास) किसी दी गई चौड़ाई से ऊपर लेआउट बदलती हैं।
• लचीला मीडिया — इमेज और वीडियो जो अपने कंटेनर में सिकुड़ते हैं।

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

विकल्प और ट्रेड-ऑफ़

Mobile-first आमतौर पर सरल होता है: एक कॉलम सबसे आसान लेआउट है, और जैसे-जैसे जगह बढ़े कॉलम जोड़ना, उन्हें हटाने से कम काम है।

वे हिस्से जो आमतौर पर टूटते हैं

Viewport tag

अगर कोई पेज फ़ोन पर एक छोटी डेस्कटॉप साइट जैसा दिखता है, तो viewport tag गायब है:

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

maximum-scale=1 या user-scalable=no न जोड़ें। पिंच-ज़ूम रोकने से कम दृष्टि वाले लोगों के लिए साइट इस्तेमाल करना मुश्किल हो जाता है।

फ़िक्स्ड चौड़ाई और क्षैतिज स्क्रॉल

सबसे आम रिस्पॉन्सिव बग है स्क्रीन से चौड़ी कोई चीज़: width: 1200px वाला फ़िक्स्ड कंटेनर, चौड़ी टेबल, लंबा URL या कोड ब्लॉक, या max-width: 100% के बिना इमेज। तब पूरा पेज बगल में स्क्रॉल होता है। width के बजाय max-width इस्तेमाल करें, टेक्स्ट को लपेटने दें, और चौड़ी चीज़ों को अपना स्क्रॉल एरिया दें।

नेविगेशन

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

टेक्स्ट और टैप टार्गेट

• फ़ोन पर बॉडी टेक्स्ट लगभग 16 px न्यूनतम रखना समझदारी है। छोटे टेक्स्ट वाले इनपुट पर iPhone टैप करने पर ज़ूम कर देते हैं।
• बटन और लिंक आसानी से छूने लायक बनाएं। WCAG 2.2 AA कम से कम 24 गुणा 24 CSS पिक्सल (या पर्याप्त दूरी) तय करता है; अंगूठे के लिए लगभग 44 पिक्सल ज़्यादा आरामदायक है।
• आसपास के लिंकों के बीच जगह छोड़ें ताकि लोग गलत लिंक न दबाएं।

टेबल और डेटा

चौड़ी टेबल रिस्पॉन्सिव ऐप का सबसे कठिन हिस्सा है। विकल्प, पसंद के क्रम में: फ़ोन पर कम कॉलम दिखाएं, हर पंक्ति को कार्ड में बदलें, या टेबल को क्षैतिज रूप से स्क्रॉल होने वाले कंटेनर में रखें जिसका पहला कॉलम स्थिर हो। चुनाव इस पर करें कि लोगों को तुलना क्या करनी है।

इमेज और मीडिया

max-width: 100% और height: auto इस्तेमाल करें, srcset से छोटी स्क्रीन को छोटी फ़ाइलें दें, और लेआउट की उछाल से बचने के लिए width और height सेट करें। एम्बेड किए गए वीडियो और मैप को रिस्पॉन्सिव रैपर चाहिए ताकि उनका अनुपात बना रहे। छोटी इमेज पेज को तेज़ भी बनाती हैं — देखें अपनी वेबसाइट को तेज़ कैसे बनाएं।

फ़ॉर्म

लेबल फ़ील्ड के ऊपर लगाएं, फ़ील्ड पूरी चौड़ाई के बनाएं, और सही इनपुट टाइप इस्तेमाल करें (type="email", type="tel", inputmode="numeric") ताकि फ़ोन सही कीबोर्ड दिखाए। सबमिट बटन वहाँ रखें जहाँ अंगूठा पहुँच सके, और कीबोर्ड खुलने पर भी वह दिखता रहे।

केवल होवर वाली इंटरैक्शन

फ़ोन पर होवर नहीं होता। टूलटिप, ड्रॉपडाउन और प्रीव्यू जो केवल होवर पर दिखते हैं, टच यूज़र्स को अदृश्य रहते हैं। उन्हें टैप पर भी काम करवाएं।

काम करने वाले prompts

नए बिल्ड के लिए, शुरू में ही कहें:

इसे mobile-first बनाएं। फ़ोन पर एक कॉलम, टैबलेट चौड़ाई से दो कॉलम, डेस्कटॉप पर पूरा लेआउट। 320 px चौड़ाई पर कोई क्षैतिज स्क्रॉल नहीं, बॉडी टेक्स्ट कम से कम 16 px, टैप टार्गेट कम से कम 44 px, छोटी स्क्रीन पर मेनू बटन, और फ़ोन पर कार्ड बनने वाली टेबल।

मौजूदा पेज के लिए, जो आप देख रहे हैं वह बताएं:

फ़ोन पर /pricing पेज बगल में स्क्रॉल होता है और तीनों प्लान कार्ड एक-दूसरे के बगल में दबे हुए हैं। 768 px से नीचे कार्ड को ऊपर-नीचे लगाएं, तुलना टेबल को उसके अपने कंटेनर में क्षैतिज रूप से स्क्रॉल होने दें जिसका फ़ीचर कॉलम स्थिर हो, और डेस्कटॉप लेआउट वैसा ही रखें।

हर पेज को 375 px चौड़ाई पर जाँचें। जो भी ओवरफ़्लो करता है, ओवरलैप करता है, 16 px से छोटा टेक्स्ट या 44 px से छोटे टैप टार्गेट हैं, या केवल होवर पर काम करता है, उसकी सूची बनाएं, फिर हर एक को ठीक करें।

चरण-दर-चरण

1. Viewport tag की पुष्टि करें कि वह पेज के head में है।
2. 320–375 px चौड़ाई पर टेस्ट करें ब्राउज़र के डिवाइस मोड या फ़ोन-साइज़ प्रीव्यू में। हर पेज ऊपर से नीचे तक स्क्रॉल करें।
3. पहले क्षैतिज स्क्रॉल ठीक करें। वह एलिमेंट खोजें जो बहुत चौड़ा है; जब तक वह न जाए, बाकी का आकलन मुश्किल है।
4. नेविगेशन सुलझाएं: मेनू बटन, और मुख्य कार्रवाइयाँ दिखती रहें।
5. टेक्स्ट, टैप टार्गेट और फ़ॉर्म हर मुख्य फ़्लो पर जाँचें — साइन अप, सर्च, चेकआउट, संपर्क।
6. टेबल और मीडिया संभालें: कार्ड या स्क्रॉल कंटेनर, रिस्पॉन्सिव इमेज और एम्बेड।
7. बीच की चौड़ाइयाँ जाँचें। चौड़ाई को धीरे-धीरे फ़ोन से डेस्कटॉप तक खींचें; लेआउट अक्सर टैबलेट चौड़ाई के आसपास टूटते हैं।
8. असली फ़ोन पर टेस्ट करें। एमुलेटर कुछ चीज़ें छोड़ देते हैं, जैसे ऑन-स्क्रीन कीबोर्ड का बटन ढकना, नॉच, और मोबाइल डेटा पर साइट कितनी तेज़ लगती है।

आम गलतियाँ

• सिर्फ़ एक फ़ोन साइज़ पर टेस्ट करना। एक छोटा फ़ोन, एक बड़ा फ़ोन और एक टैबलेट जाँचें।
• फ़िट करने के लिए मोबाइल पर कंटेंट छुपाना। Google मोबाइल वर्शन इंडेक्स करता है, और फ़ोन यूज़र को भी वही जानकारी चाहिए।
• viewport tag में ज़ूम बंद करना।
• फ़ोन पर डेस्कटॉप-आकार की इमेज, जो लोड समय और डेटा खर्च करती हैं।
• फ़िक्स्ड पोज़िशन वाले एलिमेंट का ढेर: एक स्टिकी हेडर, कुकी बैनर और चैट बबल मिलकर फ़ोन स्क्रीन का आधा हिस्सा ढक सकते हैं।
• ऐसे पॉप-अप जो छोटी स्क्रीन पर बंद न हो सकें, क्योंकि बंद करने वाला बटन स्क्रीन से बाहर है।

मोबाइल चेकलिस्ट

• Viewport meta tag मौजूद; ज़ूम बंद नहीं किया गया
• किसी भी पेज पर 320 px पर कोई क्षैतिज स्क्रॉल नहीं
• बॉडी टेक्स्ट लगभग 16 px; इनपुट ज़ूम नहीं करते
• टैप टार्गेट आराम से बड़े और दूरी पर
• मेनू फ़ोन पर और कीबोर्ड से काम करता है
• फ़ोन पर टेबल पढ़ने योग्य (कार्ड, कम कॉलम या स्क्रॉल कंटेनर)
• इमेज और एम्बेड स्केल होते हैं; सही आकार की फ़ाइलें दी जाती हैं
• फ़ॉर्म सही इनपुट टाइप इस्तेमाल करते हैं; सबमिट बटन पहुँच में है
• कुछ भी ज़रूरी होवर पर निर्भर नहीं है
• कम से कम एक असली फ़ोन पर टेस्ट किया गया

रिस्पॉन्सिव लेआउट एक्सेसिबिलिटी का भी हिस्सा है: WCAG चाहता है कि कंटेंट 320 px चौड़ाई पर और 200% ज़ूम पर काम करे। अगर आप ऐसा ऐप बना रहे हैं जिसे लोग रोज़ अपने फ़ोन पर इस्तेमाल करेंगे, तो मोबाइल-फ़्रेंडली वेब ऐप कैसे बनाएं इंस्टॉल हो सकने वाले PWA सहित आगे बताता है।

Mythex पर रिस्पॉन्सिव डिज़ाइन

Mythex रिस्पॉन्सिव वेब ऐप बनाता है, और Pro पर उन्हें Android और iPhone ऐप के रूप में रैप कर सकता है। वर्कस्पेस में, Preview के ऊपर फ़ोन आइकन (Switch to Mobile) पर क्लिक करके अपना ऐप फ़ोन-साइज़ फ़्रेम में देखें, और फ़्रेम का किनारा खींचकर दूसरी चौड़ाइयाँ आज़माएं (Preview और Code)। डॉक्स में मोबाइल-रिस्पॉन्सिव prompts में छोटी स्क्रीन का लेआउट ठीक करने का एक छोटा स्टार्टर prompt है। असली फ़ोन पर भी जाँचें — प्रकाशित URL खोलें, या प्रीव्यू लिंक शेयर करके अपने फ़ोन पर खोलें।

सवाल