वेबसाइट मोबाइल-रिस्पॉन्सिव्ह कशी बनवायची

वेबसाइट मोबाइल-रिस्पॉन्सिव्ह करण्यासाठी, व्ह्यूपोर्ट मेटा टॅग जोडा, लेआउट मोबाइल-फर्स्ट पद्धतीने लवचिक रुंदींसह बांधा, आणि मोठ्या स्क्रीनवर लेआउट पुन्हा मांडण्यासाठी CSS ब्रेकपॉइंट्स वापरा — कॉलम्स एकावर एक ठेवून, मेनू आकुंचन करून आणि प्रतिमा बसतील इतक्या लहान करून. मग प्रत्येक पेज फोनच्या रुंदीवर तपासा: बाजूला स्क्रोल होते का, मजकूर खूप लहान आहे का, किंवा बटणे टॅप करण्यासाठी खूप लहान आहेत का ते पहा. AI ने बनवलेल्या साइटवर, एक स्पष्ट प्रॉम्प्ट आणि फोन-आकाराच्या प्रीव्ह्यूमधील एक तपासणी सहसा बहुतेक समस्या सोडवते.

रिस्पॉन्सिव्ह डिझाइन म्हणजे नेमके काय

रिस्पॉन्सिव्ह साइट पेजेसचा आणि URL चा एकच संच वापरते जो स्क्रीनशी जुळवून घेतो. वेगळी "m." साइट बनवण्याऐवजी, CSS विशिष्ट रुंदींवर लेआउट बदलते. त्याचे घटक:

• व्ह्यूपोर्ट मेटा टॅग मोबाइल ब्राउझरला उपकरणाची खरी रुंदी वापरायला सांगतो.
• फ्लुइड लेआउट्स निश्चित पिक्सेल रुंदींऐवजी टक्केवारी, flexbox आणि grid वापरतात.
• मीडिया क्वेरीज (किंवा Tailwind चे md: सारखे फ्रेमवर्क क्लासेस) दिलेल्या रुंदीपेक्षा वरील लेआउट बदलतात.
• लवचिक मीडिया — प्रतिमा आणि व्हिडिओ जे त्यांच्या कंटेनरमध्ये बसण्यासाठी आकुंचन पावतात.

हे महत्त्वाचे आहे कारण तुमचा बराचसा ट्रॅफिक फोनवरून येण्याची शक्यता आहे, आणि Google तुमच्या पेजेसची मोबाइल आवृत्ती अनुक्रमित करते. कंटेंट किंवा लिंक्स फक्त डेस्कटॉपवर असतील, तर Google ते पाहणारही नाही.

पर्याय आणि तडजोडी

मोबाइल-फर्स्ट सहसा सोपे असते: एकच कॉलम सर्वात सोपा लेआउट आहे, आणि जागा वाढत असताना कॉलम्स जोडणे, ते काढण्यापेक्षा कमी काम आहे.

सहसा तुटणारे भाग

व्ह्यूपोर्ट टॅग

फोनवर पेज लहान डेस्कटॉप साइटसारखा दिसत असेल, तर व्ह्यूपोर्ट टॅग गहाळ आहे:

<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 सह लहान फाइल्स द्या, आणि लेआउट उड्या टाळण्यासाठी रुंदी आणि उंची सेट करा. एम्बेड केलेले व्हिडिओ आणि नकाशे त्यांचे आस्पेक्ट रेशो राखण्यासाठी रिस्पॉन्सिव्ह रॅपरची गरज असते. लहान प्रतिमा पेजेसला वेगवान बनवतात — तुमची वेबसाइट वेगवान कशी बनवायची पहा.

फॉर्म्स

लेबल्स फील्ड्सच्या वर ठेवा, फील्ड्स पूर्ण रुंदीचे करा, आणि योग्य इनपुट प्रकार वापरा (type="email", type="tel", inputmode="numeric") जेणेकरून फोन जुळणारा कीबोर्ड दाखवेल. सबमिट बटण अंगठ्याला पोहोचेल अशा ठिकाणी ठेवा आणि कीबोर्ड उघडल्यावरही ते दिसत राहील याची खात्री करा.

फक्त-होव्हर परस्परसंवाद

फोन होव्हर करत नाहीत. फक्त होव्हरवर दिसणारे टूलटिप्स, ड्रॉपडाउन्स आणि प्रीव्ह्यूज टच वापरकर्त्यांना अदृश्य असतात. ते टॅपवरही काम करतील असे बनवा.

उपयोगी प्रॉम्प्ट्स

नव्या बिल्डसाठी, सुरुवातीलाच सांगा:

हे मोबाइल-फर्स्ट बनवा. फोनवर एकच कॉलम, टॅब्लेटच्या रुंदीपासून दोन कॉलम्स, डेस्कटॉपवर पूर्ण लेआउट. 320 px रुंदीवर क्षैतिज स्क्रोल नाही, मुख्य मजकूर किमान 16 px, टॅप लक्ष्ये किमान 44 px, लहान स्क्रीनवर मेनू बटण, आणि फोनवर कार्ड्समध्ये बदलणारे टेबल्स.

विद्यमान पेजसाठी, तुम्हाला काय दिसते ते वर्णन करा:

फोनवर /pricing पेज बाजूला स्क्रोल होते आणि तीन प्लॅन कार्ड्स शेजारी शेजारी चिरडलेले दिसतात. 768 px च्या खाली कार्ड्स उभे रचा, तुलना टेबल त्याच्या स्वतःच्या कंटेनरमध्ये क्षैतिज स्क्रोल होऊ द्या आणि फीचर कॉलम स्थिर ठेवा, आणि डेस्कटॉप लेआउट बदलू नका.

प्रत्येक पेज 375 px रुंदीवर तपासा. ओव्हरफ्लो, ओव्हरलॅप, 16 px पेक्षा लहान मजकूर, 44 px पेक्षा लहान टॅप लक्ष्ये, किंवा फक्त होव्हरवर चालणारे काहीही यादी करा, मग प्रत्येकाची दुरुस्ती करा.

पायरीवार

1. व्ह्यूपोर्ट टॅग पेजच्या हेडमध्ये आहे याची पुष्टी करा.
2. 320–375 px रुंदीवर चाचणी घ्या ब्राउझरच्या डिव्हाइस मोडमध्ये किंवा फोन-आकाराच्या प्रीव्ह्यूमध्ये. प्रत्येक पेज वरपासून खालपर्यंत स्क्रोल करा.
3. आधी क्षैतिज स्क्रोल सोडवा. जो घटक खूप रुंद आहे तो शोधा; तो गेल्याशिवाय बाकी काहीही नीट ठरवता येत नाही.
4. नेव्हिगेशन ठीक करा: मेनू बटण, महत्त्वाच्या कृती दृश्यमान.
5. प्रत्येक मुख्य प्रवाहात मजकूर, टॅप लक्ष्ये आणि फॉर्म्स तपासा — साइन अप, शोध, चेकआउट, संपर्क.
6. टेबल्स आणि मीडिया हाताळा: कार्ड्स किंवा स्क्रोल कंटेनर, रिस्पॉन्सिव्ह प्रतिमा आणि एम्बेड्स.
7. मधल्या आकारांची तपासणी करा. रुंदी फोनपासून डेस्कटॉपपर्यंत हळूहळू ओढा; लेआउट्स अनेकदा टॅब्लेटच्या रुंदीजवळ तुटतात.
8. खऱ्या फोनवर चाचणी घ्या. एमुलेटर काही गोष्टी चुकवतात, जसे ऑन-स्क्रीन कीबोर्ड बटण झाकणे, नॉच, आणि मोबाइल डेटावर साइट किती वेगवान वाटते.

सामान्य चुका

• फक्त एकाच फोन आकारावर चाचणी. लहान फोन, मोठा फोन आणि टॅब्लेट तपासा.
• बसवण्यासाठी मोबाइलवरील मजकूर लपवणे. Google मोबाइल आवृत्ती अनुक्रमित करते, आणि फोन वापरकर्त्यांना तीच माहिती हवी असते.
• व्ह्यूपोर्ट टॅगमध्ये झूम बंद करणे.
• मोबाइलवर डेस्कटॉप-आकाराच्या प्रतिमा, ज्या लोड वेळ आणि डेटा खर्च करतात.
• फिक्स्ड-पोझिशन घटकांचा ढीग: स्टिकी हेडर, कुकी बॅनर आणि चॅट बबल मिळून अर्धी फोन स्क्रीन झाकू शकतात.
• लहान स्क्रीनवर बंद न करता येणारे पॉप-अप्स, कारण क्लोज बटण स्क्रीनच्या बाहेर असते.

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

• व्ह्यूपोर्ट मेटा टॅग आहे; झूम बंद नाही
• कोणत्याही पेजवर 320 px वर क्षैतिज स्क्रोल नाही
• मुख्य मजकूर सुमारे 16 px; इनपुट्समुळे झूम होत नाही
• टॅप लक्ष्ये आरामात मोठी आणि अंतरावर आहेत
• मेनू फोनवर आणि कीबोर्डने काम करतो
• टेबल्स फोनवर वाचता येतात (कार्ड्स, कमी कॉलम्स किंवा स्क्रोल कंटेनर)
• प्रतिमा आणि एम्बेड्स बसतात; योग्य आकाराच्या फाइल्स दिल्या जातात
• फॉर्म्स योग्य इनपुट प्रकार वापरतात; सबमिट बटण पोहोचण्याजोगे आहे
• काहीही महत्त्वाचे होव्हरवर अवलंबून नाही
• किमान एका खऱ्या फोनवर चाचणी घेतली

रिस्पॉन्सिव्ह लेआउट सुलभता चाही भाग आहे: WCAG मागते की कंटेंट 320 px रुंदीवर आणि 200% झूमवर काम करावा. तुम्ही बांधत असलेले ॲप लोक दररोज फोनवर वापरतील, तर मोबाइल-फ्रेंडली वेब ॲप कसे बनवायचे पुढे जाऊन इंस्टॉल करता येणारे PWA समाविष्ट करते.

Mythex वर रिस्पॉन्सिव्ह डिझाइन

Mythex रिस्पॉन्सिव्ह वेब ॲप्स बनवते, आणि Pro वर ते त्यांना Android आणि iPhone ॲप्समध्ये गुंडाळू शकते. वर्कस्पेसमध्ये, तुमचे ॲप फोन-आकाराच्या फ्रेममध्ये पाहण्यासाठी Preview च्या वर फोन आयकॉनवर क्लिक करा (Switch to Mobile), आणि फ्रेमची कड ओढून इतर रुंदी वापरून पहा (Preview and Code). लहान-स्क्रीन लेआउट दुरुस्त करण्यासाठी एक छोटा स्टार्टर प्रॉम्प्ट मोबाइल-रिस्पॉन्सिव्ह प्रॉम्प्ट्स मध्ये आहे. खऱ्या फोनवरही तपासा — प्रकाशित URL उघडा, किंवा प्रीव्ह्यू लिंक शेअर करून तुमच्या फोनवर उघडा.

प्रश्न