वेबसाइट का मोबाइल संस्करण: पहले-बाद के उदाहरणों के साथ 10 नियम

ऑनलाइन स्टोर के ज़्यादातर विज़िटर फ़ोन से आते हैं और वहीं तय करते हैं कि खरीदें या नहीं। यहाँ मोबाइल वेबसाइट के 10 नियम पहले-बाद के उदाहरणों के साथ हैं, और Apple, Google व WCAG के अनुसार बटन और फ़ॉन्ट के सटीक आकार भी।

मोबाइल संस्करण «छोटी की गई» वेबसाइट क्यों नहीं है?

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

उदाहरणों के साथ 10 नियम

1. बटन बड़े बनाएँ

लोग उंगली से टैप करते हैं, कर्सर से नहीं। Apple कम से कम 44 × 44 pt का टैप क्षेत्र सुझाता है, Android 48 × 48 dp, और सुलभता मानक WCAG 2.2 न्यूनतम 24 × 24 px तय करता है।

2. फ़ॉन्ट बड़ा करें

जो कंप्यूटर पर ठीक है, वह फ़ोन पर पढ़ा नहीं जाता। मुख्य टेक्स्ट आमतौर पर 16 px या ज़्यादा रखा जाता है ताकि ज़ूम न करना पड़े; Google का Lighthouse उन पेजों को चिह्नित करता था जहाँ 40% से ज़्यादा टेक्स्ट 12 px से छोटा था।

3. अंतराल का ध्यान रखें

ब्लॉक सटे हों तो स्क्रीन भरी और सस्ती लगती है। जितना लगता है, उससे ज़्यादा खाली जगह चाहिए।

4. बटन एक के नीचे एक रखें

फ़ोन पर दो बटन साथ-साथ संकरे हो जाते हैं। पूरी चौड़ाई वाले बटन एक के नीचे एक दबाने में आसान हैं और गलत टैप कम होते हैं।

5. बताएँ कि स्वाइप हो सकता है

अगर कार्ड स्वाइप होते हैं तो यह दिखना चाहिए: अगले कार्ड का किनारा, बिंदु या तीर बताते हैं कि आगे और है।

6. मेन्यू छोटा करें

हेडर आधी स्क्रीन नहीं घेरना चाहिए। लोगो और मेन्यू बटन वाला छोटा हेडर ज़रूरी चीज़ों के लिए जगह छोड़ता है।

7. गौण सामग्री छिपाएँ

फ़ोन पर सब कुछ एक साथ दिखाने की ज़रूरत नहीं: अकॉर्डियन, टैब और «और दिखाएँ» पेज को साफ़ रखते हैं। छिपाएँ, हटाएँ नहीं — Google मोबाइल संस्करण इंडेक्स करता है, इसलिए सामग्री डेस्कटॉप जैसी ही होनी चाहिए।

8. संपर्क क्लिक करने योग्य बनाएँ

फ़ोन नंबर और ईमेल एक टैप में खुलने चाहिए — इसी के लिए tel: और mailto: लिंक हैं। «कॉल करें» बटन और भी आसान है।

9. पहली स्क्रीन पर बोझ न डालें

ऊपर जगह कम है: एक शीर्षक, छोटा विवरण और एक मुख्य क्रिया। बैनर, छूट और सब्सक्रिप्शन नीचे रखें।

10. डेस्कटॉप की हूबहू नकल न करें

मोबाइल संस्करण छोटी वेबसाइट नहीं है। ब्लॉक का क्रम बदलें, तीन कॉलम को एक करें, फ़ालतू हटाएँ।

Metriverra में दिखता है कि फ़ोन और कंप्यूटर के विज़िटर कैसे कन्वर्ट होते हैं, जिससे आसानी से जाँच सकते हैं कि मोबाइल सुधारों से बिक्री बढ़ी या नहीं।

संक्षेप में

• बटन कम से कम 44 × 44 pt (Apple) या 48 × 48 dp (Android); WCAG न्यूनतम 24 × 24 px।
• मुख्य टेक्स्ट कम से कम 16 px, ब्लॉकों के बीच अंतराल के साथ।
• बटन पूरी चौड़ाई में एक के नीचे एक; संपर्क टैप करने योग्य।
• पहली स्क्रीन पर एक मुख्य क्रिया; गौण सामग्री अकॉर्डियन में।
• मोबाइल नया संयोजन है, छोटी साइट नहीं; सामग्री डेस्कटॉप जैसी।

स्रोत: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing