मोबाइल-फर्स्ट डिजाइन क्या है और रिस्पॉन्सिव डिजाइन से कैसे अलग है; मोबाइल-फर्स्ट साइट डिजाइन और निर्माण कैसे करें—सामग्री क्रम, टच बटन, CSS min-width ब्रेकपॉइंट, तस्वीरें और जांच, साथ में कई स्थान वाले कारोबार के सुझाव।
रिस्पॉन्सिव डिजाइन का मतलब है एक साइट जो हर स्क्रीन आकार के अनुसार अपना लेआउट बदलती है। मोबाइल-फर्स्ट वह क्रम है जिसमें डिजाइन और कोड बनाते हैं: छोटी स्क्रीन से शुरू करके बड़ी स्क्रीन के लिए विस्तार करें। मोबाइल-फर्स्ट साइट रिस्पॉन्सिव होती है, लेकिन डेस्कटॉप से शुरू की गई रिस्पॉन्सिव साइट का मोबाइल रूप अक्सर तंग और बाद में जोड़ा हुआ लगता है।
Google मोबाइल-फर्स्ट इंडेक्सिंग करता है; यानी पेज को इंडेक्स और रैंक करने के लिए मुख्य रूप से उसका मोबाइल संस्करण इस्तेमाल करता है। मोबाइल पर सामग्री, हेडिंग, स्ट्रक्चर्ड डेटा या लिंक न हों तो Google उन्हें देख नहीं सकता।
सामग्री तय करे: ब्राउज़र चौड़ा करते जाएं और जब लेआउट खिंचा हुआ लगे, वहीं ब्रेकपॉइंट जोड़ें। आम शुरुआती आकार करीब 640px, 768px, 1024px और 1280px हैं, जिन्हें कई CSS फ्रेमवर्क min-width मीडिया क्वेरी के रूप में लिखते हैं।
WCAG 2.2 कम से कम 24 x 24 CSS पिक्सेल (AA स्तर) का टारगेट तय करता है और 44 x 44 (AAA स्तर) सुझाता है। Apple के दिशानिर्देश 44 points और Google Material 48dp इस्तेमाल करते हैं। मुख्य बटन और मेन्यू लिंक करीब 44 से 48 पिक्सेल रखें।
एक साझा टेम्पलेट रखें और हर फ्रैंचाइज़ के लिए अलग स्थान पेज बनाएं। सबसे ऊपर टैप-टू-कॉल, दिशा पाने के लिए टैप, समय और उस स्टोर की बुकिंग या ऑर्डर कार्रवाई हो। “मेरे पास” खोजने वाले मोबाइल आगंतुक तुरंत काम करना चाहते हैं, इसलिए स्थान खोज और मुख्य कार्रवाई एक अंगूठे से चलनी चाहिए।
संक्षिप्त जवाब: मोबाइल-फर्स्ट वेब डिजाइन में पहले पेज का फोन वाला रूप डिजाइन और बनाते हैं, फिर स्क्रीन चौड़ी होने पर टैबलेट और डेस्कटॉप का लेआउट जोड़ते हैं। कोड में बेस CSS मोबाइल का लेआउट है और बड़े स्क्रीन के लिए min-width मीडिया क्वेरी से विस्तार होता है। इससे हर पेज पर सबसे जरूरी बात तय करनी पड़ती है और Google आज जिस तरह साइट इंडेक्स करता है, उससे मेल बैठता है।
लोग दोनों शब्द एक-दूसरे की जगह बोलते हैं, लेकिन दोनों अलग सवालों का जवाब हैं।
| रिस्पॉन्सिव डिजाइन | मोबाइल-फर्स्ट डिजाइन | |
|---|---|---|
| क्या है | एक साइट जिसका लेआउट स्क्रीन के अनुसार बदलता है | प्रक्रिया: छोटी स्क्रीन से शुरू, फिर विस्तार |
| CSS तरीका | max-width (डेस्कटॉप को छोटा करें) या min-width हो सकता है | min-width (मोबाइल से बढ़ाएं) |
| सामग्री की प्राथमिकता | अक्सर डेस्कटॉप पर तय, फिर सिकुड़ती है | सबसे छोटी स्क्रीन पर तय होती है |
| आम समस्या | छिपी सामग्री, छोटे टैप बटन, फोन पर भारी पेज | आगे विस्तार न हो तो डेस्कटॉप लेआउट विरला लगता है |
सबसे अच्छा तरीका दोनों है: मोबाइल-फर्स्ट से बनाई रिस्पॉन्सिव साइट।
संकीर्ण स्क्रीन पर सब कुछ एक कॉलम में होता है, इसलिए क्रम ही पूरा लेआउट है। हर पेज के लिए फोन इस्तेमाल करने वाले आगंतुक की जरूरत के अनुसार हिस्सों की क्रमांकित सूची बनाएं।
स्थानीय सेवा के होमपेज का क्रम ऐसा हो सकता है:
इस सूची में जगह न पाने वाली चीज शायद डेस्कटॉप पर भी नहीं होनी चाहिए।
हर पेज के head में viewport टैग से शुरू करें:
``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``
फोन के लिए बेस स्टाइल बिना मीडिया क्वेरी लिखें। फिर जगह मिलने पर min-width क्वेरी जोड़ें:
```css .services { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* पूरा नेविगेशन दिखाएं, मेन्यू बटन छिपाएं */ } ```
काम आसान करने वाली कुछ तकनीकें:
font-size: clamp(1.75rem, 5vw, 3rem); इससे कम ब्रेकपॉइंट चाहिए।grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) जगह होने पर ही कॉलम बनाता है।md: जैसी क्लास उस चौड़ाई से ऊपर लागू होती है।ब्रेकपॉइंट सामग्री जहां बिगड़ने लगे वहां रखें, किसी खास फोन मॉडल के लिए नहीं।
फोन का प्रोसेसर डिजाइन वाले लैपटॉप से धीमा और नेटवर्क कम भरोसेमंद होता है। Google के Core Web Vitals यह मापते हैं: Largest Contentful Paint (लोडिंग), Interaction to Next Paint (जवाब की रफ्तार) और Cumulative Layout Shift (दृश्य स्थिरता)।
srcset और sizes से फोन पर छोटी फाइलें भेजें, WebP या AVIF जैसे आधुनिक फॉर्मेट इस्तेमाल करें।loading="lazy" लगाएं, मुख्य हीरो तस्वीर पर नहीं।फोन का लेआउट काम करने लगे तो ब्राउज़र चौड़ा करके सिर्फ खाली जगह नहीं, अतिरिक्त सुविधा दें:
फ्रैंचाइज़ और कई स्थानों वाली साइट की खास मोबाइल समस्या है: अधिकतर आगंतुक फोन पर “मेरे पास” खोजकर आते हैं और तुरंत किसी एक स्थान की जानकारी चाहते हैं।
We.Inc की हर साइट शुरू से रिस्पॉन्सिव होती है। एडिटर में फोन का लेआउट प्रीव्यू करें और दृश्य रूप में या कोड से सुधारें। टेम्पलेट देखें कि लेआउट एक कॉलम में कैसे सिमटता है, या अपने कारोबार का वर्णन दें और फोन पर जांचने के लिए पहला ड्राफ्ट पाएं।
फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं