Best Practices for Responsive Design In Hindi
एचटीएमएल वेबसाइट वेबपेज में सीएसएस रिस्पॉन्सिव डिज़ाइन बनाने से आप अपने वेबसाइट को ग्लोबली हर किसी भी पर्टिकुलर इलेट्रॉनिक डिवाइस और गैजेट्स के कम्पेटिबल बना सकते है. जिसमे डेस्कटॉप, लैपटॉप, नोटबुक कंप्यूटर, टेबलेट, स्मार्टवॉचेस, इलेक्ट्रॉनिक डिवाइस और अन्य गैजेट्स शामिल है. यहाँ रेस्पॉन्सिव वेब डेवलपमेंट प्रोसेस आपके बेसिक वेबसाइट को मोर कमर्शियल अट्रैक्टिव और इफेक्टिव यूजर इंटरफ़ेस और यूजर एक्सपेरिएंस डेवलप करते है. जहा रेस्पॉन्सिव वेब डेवलपमेंट मेथड सभी कम्पेटिबल डिवाइस और गैजेट्स में प्रॉपर्ली प्रीव्यू और डिस्प्ले हो सके. वर्त्तमान समय में रेस्पॉन्सिव वेब डेवलपमेंट एक बेस्ट वेब डेवलपमेंट तकनीक है।
So, let’s know css responsive web development better in HTML web development.
Responsive mobile-first development approach.
- Develop for small devices – रेस्पॉन्सिव वेब डेवलपमेंट में आप पहले सबसे स्माल डिवाइस स्क्रीन के लिए वेब डेवलपमेंट डिज़ाइन करना शुरू करें। जिससे आपको यह सुनिश्चित हो सके कि आपकी डेवलप वेबसाइट मोबाइल यूजर के लिए फुल्ली ऑप्टिमाइज़ और कम्पेटिबल हो. आज के समय में 92% वेबसाइट और वेब ट्रैफ़िक सेलफोन यूजर के द्वारा ही एक्सेस किया जाता है।
- Develop progressive enhancements – रेस्पॉन्सिव वेबसाइट डेवलपमेंट में वेबसाइट जरूरत के अनुसार लार्ज डिवाइस स्क्रीन के लिए अतिरिक्त फीचर्स फंक्शन और स्टाइल्स को अप्लाई करे।
Responsive fluid grid and layout approach.
- Percentage-based widths – रेस्पॉन्सिव वेब डेवेलपमेंट लेआउट एलिमेंट के लिए आप रिलेटिव यूनिट में जैसे, परसेंटेज % और vw/vh को अप्लाई करें। यह आपके वेबसाइट रेस्पॉन्सिव एलिमेंट को एक पर्टिकुलर परसेंटेज या साइज में रेस्पॉन्सिव प्रीव्यू करते है।
- CSS Grid and Flexbox – बेस्ट रेस्पॉन्सिव वेब डेवेलोपमेंट एप्रोच में आप मल्टीप्ल स्क्रीन साइज़ के अकॉर्डिंग फुल्ली ऑप्टिमाइज़ फ्लेक्सिबल, रिस्पॉन्सिव वेबसाइट स्ट्रक्चर लेआउट बनाने के लिए सीएसएस ग्रिड और फ्लेक्सबॉक्स जैसे एडवांस्ड डिज़ाइन स्ट्रक्चर और लेआउट को अप्लाई करे।
Responsive image approach.
- Use srcset and <picture> – बेस्ट रेस्पॉन्सिव वेब डेवलपमेंट एप्रोच के लिए वेबसाइट में यूज़ इमेज लोडिंग समय को कस्टमाइज करने के लिए पर्टिकुलर डिवाइस के पिक्सेल रिज़ॉल्यूशन और स्क्रीन आकार के आधार पर अलग-अलग इमेज साइज़ को उपयोग करे।
Responsive image approach example.
<img src=”smallimage.jpg”
srcset=”mediumimage.jpg 700w, largeimage.jpg 1300w”
sizes=”(max-width: 700px) 110vw, 70vw”
alt=”Image Description”>
- Max-width – वेबसाइट में इमेज ओवरफ़्लो को रोकने के लिए और इसमें उचित रूप से स्केल डाउन एप्रोच अप्लाई हों. जहा आप यूज़ इमेज में मैक्सिमम-विड्थ: 100% स्केल पर सेट करे।
css media queries.
- Breakpoint strategy – बेस्ट रेस्पॉन्सिव वेबसाइट स्पेफिक डिवाइस के बजाय वेबसाइट कंटेंट के अकॉर्डिंग ब्रेकपॉइंट को डिफाइन करे। जहा मीडिया क्वेरी में रेस्पॉन्सिव डिज़ाइन बेसिक ब्रेकपॉइंट विड्थ पर आधारित होते हैं.
media queries example.
@media (max-width: 700px) {
/* develop Styles for mobile device */
}
@media (min-width: 601px) and (max-width: 1024px) {
/* develop Styles for tablets device */
}
@media (min-width: 1025px) {
/* develop Styles for desktops or laptop devices */
}
Responsive touch-friendly design approach.
- Responsive interactive elements – रेस्पॉन्सिव स्मार्टफोन डिवाइस के लिए उपयोग होने वाले वेबसाइट बटन और नेविगेशन लिंक आसानी से टच या टैप करने के लिए प्रॉपर साइज में हो जहा कम से कम 44×44 पिक्सेल रेसोलुशन होंना चाहिए।
- Responsive spacing – बेस्ट टच फ्रेंडली डिवाइस इंटरेक्शन में सडनली टैप को रोकने के लिए क्लिकएबल वेब एलिमेंट के मध्य प्रॉपर स्पेस होना चाहिए।
css font typography.
- Responsive font size – बेस्ट रेस्पॉन्सिव फॉण्ट टाइपोग्राफी में प्रॉपर वेबसाइट कंटेंट फ़ॉन्ट साइज़ के लिए em या rem जैसी रिलेटिव यूनिट का उपयोग करें। ताकि वेब विजिटर इन्हे अपनी जरूरत के अनुसार स्केल कर सके।
Font typography example.
body {
font-size: 17px; /* set Base font size */
}
h1 {
font-size: 2.4rem; /* set font size 2.4em */
}
- Line length and height – रेस्पॉन्सिव वेबसाइट में टेक्स्ट एलिमेंट की लाइन की लंबाई को अच्छा बनाए रखने के लिए 50-75 करैक्टर उपयोग करे और यूजर रीडेबल के लिए पर्याप्त लाइन-विड्थ का उपयोग करें।
Responsive navigation design.
- Mobile navigation – छोटे स्क्रीन में अधिक जगह रखने के लिए मोबाइल डिवाइस के लिए हैमबर्गर या 3 डॉट मेनू या बॉटम नेविगेशन मेनू का उपयोग करें।
- Sticky navigation – स्माल डिवाइस में रेस्पॉन्सिव मोबाइल नेविगेशन ऑप्शन को एक्सेस करने के लिए स्टिकी हेडर या फ़ुटर डिज़ाइन एप्रोच का उपयोग करें।
Test responsiveness on all devices.
- Real device testing – बेस्ट रेस्पॉन्सिव वेब डेवलपमेंट रिजल्ट के लिए जहा तक संभव हो रियल टाइम डिवाइस हार्डवेयर में टेस्टिंग करें। ताकि यह सुनिश्चित किया जा सके कि आपका वेब डेवलपमेंट डिज़ाइन रियलटाइम वर्ल्ड एनवायरनमेंट कैसे बिहेव करता है।
- Browser developer tools – बेस्ट रेस्पॉन्सिव वेब डेवलपमेंट एप्रोच में मल्टीप्ल डिवाइस स्क्रीन साइज को फॉलो करने के लिए डेवलपर टूल में रिस्पॉन्सिव डिज़ाइन मोड को प्रॉपर उपयोग करें।
Responsive performance optimization.
- Minimize HTTP requests – हर किसी डिवाइस और इलेट्रॉनिक गैजेट्स में वेबसाइट लोडिंग समय को कम करने के लिए सीएसएस और जावास्क्रिप्ट फ़ाइलों को ऑप्टिमाइज़ कर कंबाइंड करें।
- Image lazy loading – रेस्पॉन्सिव वेबसाइट डिज़ाइन एप्रोच में इनिशियल लोड स्पीड को बेहतर करने के लिए इमेजेज और वेबसाइट रिसोर्सेज के लिए लेज़ी लोडिंग मेथड को अप्लाई करें, स्पेशल्ली पोर्टेबल स्मार्ट सेलफोन डिवाइस में।
Responsive accessibility.
- Color contrast – बेस्ट रेस्पॉन्सिव यूजर वेब डेवलपमेंट के लिए टेक्स्ट रीडेबिलिटी के लिए वेबसाइट पेज पोस्ट टेक्स्ट और बैकग्राउंड कलर्स के अंदर पर्याप्त कंट्रास्ट इफ़ेक्ट को अप्लाई करें।
- Keyboard navigation – रेस्पॉन्सिव वेब डेवलपमेंट एप्रोच में आप पहले यह तय करें कि डिसेबल इंटरनेट यूजर के लिए सभी इंटरैक्टिव ऑब्जेक्ट एलिमेंट को कीबोर्ड के माध्यम से आसानी से एक्सेस और उपयोग किया जा सके।
Use Css Frameworks Wisely
- Ready-made CSS frameworks – बेस्ट रेस्पॉन्सिव वेब साइट डिज़ाइन के लिए बूटस्ट्रैप तैलविन्ड जैसे सीएसएस फ़ाउंडेशन रिस्पॉन्सिव सीएसएस फ्रेमवर्क को अप्लाई करे. जो आपको बेस्ट रेस्पॉन्सिव डिज़ाइन के लिए पहले से निर्मित रिस्पॉन्सिव वेब कॉम्पोनेन्ट और ग्रिड सिस्टम एलिमेंट प्रदान करते हैं।
- Customize css frameworks – आप अपने मौजूदा वेब डेवलपमेंट जरूरत के अनुसार रेडीमेड सीएसएस फ्रेमवर्क को कस्टमाइज़ करे और केवल उन ही सीएसएस फ्रेमवर्क कॉम्पोनेन्ट को अप्लाई करे, जिनकी आपको अपने वेब डेवलपमेंट प्रोजेक्ट में ज़रूरत है, जहा तक हो बहुत ज़्यादा रेडीमेड सीएसएस फ़्रेमवर्क उपयोग से बचें। ये आपकी वेबसाइट की स्पीड को एफेक्ट करते है.
Web content prioritization.
- Web content hierarchy – रेस्पॉन्सिव वेब डेवलपमेंट एप्रोच में आप अपने महत्व के आधार पर वेब कंटेंट को प्रायोरिटी दें, ज्यादातर पर छोटी स्क्रीन स्माल सेलफोन डिवाइस के लिए, जहाँ स्माल स्पेस स्क्रीन है। सेकेंडरी वेब डेवलपमेंट एप्रोच के लिए सेकेंडरी वेब कंटेंट के लिए कोलैप्सेबल सेक्शन या अकॉर्डियन एलिमेंट का उपयोग करें।
- Simplify web forms – वेब विजिटर की ऑनलाइन एक्सेस को बढ़ाने के लिए मोबाइल पर ऑनलाइन यूजर फ़ॉर्म को छोटा और सिंपल डिज़ाइन करे।
Continuously improve responsive design.
- Web user feedback – बेस्ट रेस्पॉन्सिव वेब विजिटर एक्सपेरिएंस फीडबैक के लिए नियमित रूप से इंटरनेट यूजर से फ़ीडबैक कलेक्ट करें और मौजूदा वेबसाइट डिज़ाइन में सुधार के ऑब्जेक्ट और एलिमेंट की पहचान करने और उनका एनालिसिस करें।
- Always stay updated – वर्तमान समय के अनुसार अपनी वेबसाइट को हमेशा अपडेट और वेब विजिटर के अनुकूल बनाए रखने के लिए रिस्पॉन्सिव डिज़ाइन में मॉडर्न रुझानों और बेस्ट रेस्पॉन्सिव प्रैक्टिसेज को अप्लाई करे।
Best css responsive design practices conclusion.
बेस्ट रेस्पॉन्सिव वेब डेवलपमेंट एप्रोच के लिए आप रिस्पॉन्सिव डिज़ाइन के लिए इन मॉडर्न एप्रोच को अप्लाई करने से आप एक ऐसी वेबसाइट बना सकते है. जो सभी इलेक्ट्रॉनिक डिवाइस और गैजेट्स में एक सहज यूजर एक्सपेरिएंस प्रदान करती है। आप अपनी वेबसाइट को रेस्पॉन्सिव वेब डिज़ाइन एप्रोच के साथ फुल्ली कम्पेटिबल और ऑप्टिमाइज़ करे. जो वेब विजिटर की उपयोगिता, बेस्ट प्रदर्शन और यूजर पहुँच पर अधिक ध्यान दें.
