Mobile-Friendly Website: दोस्तों, मैंने जब पहली बार अपनी वेबसाइट मोबाइल पर खोली थी ना, तो सच में दिल टूट गया था। पूरी साइट इधर-उधर बिखरी पड़ी थी, टेक्स्ट इतना छोटा कि चश्मा लगाने पर भी कुछ नहीं दिख रहा था, और बटन दबाने की कोशिश करो तो गलत जगह क्लिक हो जाता था। उस दिन समझ आया कि आज के जमाने में अगर तुम्हारी वेबसाइट Mobile Friendly नहीं है, तो तुम आधे से ज्यादा विजिटर पहले सेकंड में खो चुके हो।
अब मैं तुम्हें बिल्कुल दिल से, बिल्कुल घर की भाषा में बताता हूं कि अपनी वेबसाइट को मोबाइल पर इतना प्यारा बना दो कि लोग बार-बार आएं और कहें – “वाह भाई, क्या बात है!”
1. सबसे पहले Responsive Design अपना लो
Responsive Design मतलब तुम्हारी साइट खुद-ब-खुद हर स्क्रीन पर ढल जाए। बड़ा लैपटॉप हो या छोटा फोन, सब जगह सुंदर लगे।
मैंने अपनी साइट पर Bootstrap यूज किया था। बस एक लाइन कोड डाला और आधा काम हो गया। तुम भी कर सकते हो। अगर कोडिंग से डर लगता है तो Elementor या Gutenberg में ही “Mobile Responsive” ऑप्शन होता है – बस उसे ऑन कर दो। दिल खुश हो जाएगा।
2. Viewport Meta Tag जरूर डालो
ये छोटी सी लाइन है जो मोबाइल को बताती है – “भाई, जूम मत करना, पूरी चौड़ाई ले ले।” <head> में बस ये एक लाइन डाल दो: <meta name=”viewport” content=”width=device-width, initial-scale=1″>
ये नहीं डाला तो मोबाइल तुम्हारी साइट को डेस्कटॉप की तरह दिखाएगा और सब कुछ बहुत छोटा हो जाएगा। मैंने एक बार भूल गया था, फिर दो घंटे सर पकड़ कर बैठा रहा।
3. इमेज को Flexible बनाओ
बड़ी-बड़ी फोटो डालोगे तो मोबाइल पर लोडिंग इतनी स्लो होगी कि विजिटर भाग जाएगा।
हमेशा इमेज का size छोटा करो (TinyPNG से), और कोड में लिखो:
img { max-width: 100%; height: auto; }
अब फोटो खुद-ब-खुद स्क्रीन के हिसाब से सिकुड़-फैलेगी। कितना सुकून मिलता है ये देखकर!
4. फॉन्ट साइज और बटन बड़े रखो
मोबाइल पर उंगली से टच करना है, माउस से नहीं। फॉन्ट कम से कम 16px रखो। बटन इतने बड़े कि अंगूठा आसानी से लग जाए।
मैंने एक बार छोटे बटन रखे थे। विजिटर बार-बार गलत क्लिक कर रहा था और गुस्सा होकर चला गया। अब मैं बटन 48×48px से कम कभी नहीं रखता।
5. Media Queries का जादू
ये सबसे मजेदार पार्ट है। तुम अलग-अलग स्क्रीन के लिए अलग स्टाइल लिख सकते हो।
उदाहरण:
@media (max-width: 768px) { .menu { flex-direction: column; } .header-text { font-size: 28px; } }
मतलब जब स्क्रीन 768px से छोटी होगी, तो मेन्यू ऊपर-नीचे हो जाएगा। जब पहली बार ये काम किया तो रात भर खुशी से सो नहीं पाया।
6. स्पीड है सब कुछ
मोबाइल पर 3 सेकंड से ज्यादा लगी तो समझो विजिटर चला गया।
- अनावश्यक प्लगइन हटाओ
- इमेज कंप्रेस करो
- Cache प्लगिन यूज करो (WP Rocket बहुत अच्छा है)
- CDN लगा लो
मेरी साइट पहले 8 सेकंड लेती थी, अब 1.8 सेकंड में खुल जाती है। हर बार PageSpeed में 95+ स्कोर आता है तो दिल गार्डन-गार्डन हो जाता है।
आखिरी बात
दोस्त, जब तुम अपनी वेबसाइट मोबाइल पर खोलोगे और सब कुछ परफेक्ट दिखेगा – फोटो सही जगह, टेक्स्ट साफ, बटन आसानी से दब रहे – उस वक्त जो खुशी मिलेगी ना, वो बयां नहीं कर सकता।
बस आज ही शुरू कर दो। एक-एक स्टेप फॉलो करो। और जब साइट Mobile Friendly हो जाए, तो मुझे जरूर बताना। मैं सबसे पहले विजिट करूंगा और दिल से तारीफ करूंगा।
तुम कर सकते हो। मैंने किया है, तुम भी कर लोगे। ❤️