Designing for Different Devices In Hindi
एचटीएमएल वेबसाइट वेबपेज में सीएसएस का उपयोग कर मल्टीप्ल डिफरेंट डिवाइसेस के लिए रेस्पॉन्सिव वेबपेज वेबसाइट डिज़ाइन करना एक मॉडर्न आर्ट है. जो वेब डेवलपर को मल्टीप्ल इलेट्रॉनिक डिवाइस स्क्रीन साइज़, लैपटॉप, डेस्कटॉप, नोटबुक, सेलफोन, स्मार्टवॉच स्क्रीन रिज़ॉल्यूशन और ओरिएंटेशन के अकॉर्डिंग हो। जहा आप रेस्पॉन्सिव वेब डेवलपमेंट मेथड से किसी भी डिवाइस और गैजेट्स के लिए इफेक्टिव और कमर्शियल वेब डेवलपमेंट कर सकते है।
Types of multiple devices in responsive web development.
- Desktop computers – डेस्कटॉप कंप्यूटर में रेस्पॉन्सिव वेब डेवलपमेंट ज्यादातर 1920 X 1080 पिक्सेल से अधिक बड़ी स्क्रीन और हाई-रेजोलुशन कम्पेटिबल होते हैं।
- Laptop computers – डेस्कटॉप कंप्यूटर के बराबर लैपटॉप कंप्यूटर में पिक्चर स्क्रीन साइज जहा अक्सर अलग-अलग लैपटॉप स्क्रीन रेजोलुशन, जिसमे 14-इंच, 15-इंच, 17-इंच आकार में स्क्रीन रेजोलुशन के अनुसार रेस्पॉन्सिव वेब डेवलपमेंट कर सकते हैं।
- Tablet computers – लैपटॉप या नोटबुक कंप्यूटर की तुलना में छोटे आकार में मीडियम स्क्रीन रेजोलुशन साइज में टेबलेट डिवाइस के लिए टच डिवाइस इंटरफ़ेस के साथ रेस्पॉन्सिव वेब डेवलपमेंट कर सकते है।
- Smartphones – स्मार्टफोन डिवाइस छोटी टच स्क्रीन बिहैवियर के साथ पोर्ट्रेट-ओरिएंटेड और लैंडस्केप ओरिएंटेशन के साथ टच इनेबल डिवाइस नेविगेशन के लिए रेस्पॉन्सिव वेब डेवलपमेंट कर सकते है।
- Wearables device – आजकल हाथो में पहनने वाले स्मार्ट वाच बहुत छोटे डिस्प्ले स्पेस वाले स्मार्टवॉच जैसे डिवाइस के लिए रेस्पॉन्सिव वेब डेवलपमेंट कर सकते है।
CSS Responsive Web Design in HTML Website Webpage.
मौजूदा समय में अलग अलग डिवाइस और इलेक्ट्रॉनिक गैजेट्स के लिए रिस्पॉन्सिव वेब डिज़ाइन एक कम्पलीट वेब डेवलपमेंट प्रोसेस मेथड है. जो वेब डेवलपर और वेब विजिटर को सभी डिवाइस के लिए एक कम्पेटिबल रेस्पॉन्सिव वेब डेवलपमेंट सुनिश्चित करता है कि आपके द्वारा डिज़ाइन वेब कंटेंट मल्टीप्ल डिवाइस के लिए फुल्ली कस्टमाइज हो।
Responsive web design strategy.
- css fluid grid – रेस्पॉन्सिव वेब डेवलपमेंट लेआउट ऑब्जेक्ट एलिमेंट के लिए सर्टेन आर्डर में पिक्सेल के अलावा परसेंटेज बेस्ड विड्थ को अप्लाई करें।
- css flexible images – मौजूदा डिज़ाइन वेबपेज में पहले या सुनिश्चित करें कि वेब पेज में उपयोग इमेजेज अपने होल्ड कंटेनर के अंदर साइज को बदलें। जहा आपको मैक्सिमम-विड्थ को 100% पर सीएसएस अप्लाई करे।
- CSS media queries – रेस्पॉन्सिव वेब डेवलपमेंट प्रोसेस के अंतर्गत डिवाइस स्क्रीन साइज बेस्ड पर मल्टीप्ल मीडिया क्वेरी स्टाइल को अप्लाई करें।
Responsive web design example.
img {
max-width: 100%;
height: auto;
}
Responsive web development breakpoints.
रेस्पॉन्सिव वेब डेवलपमेंट में ब्रेकपॉइंट पर्टिकुलर डिवाइस पर्टिकुलर स्क्रीन विड्थ हैं. जहाँ आपका वेबपेज वेबसाइट डिज़ाइन मॉडिफाई होगा।
Common breakpoints in basic responsive web development.
- Responsive small devices (cellphones) – किसी भी स्माल डिवाइस सेलफोन वेबपेज डिज़ाइन के लिए मैक्सिमम-विड्थ: 600px तक सेट कर सकते है.
- Responsive medium devices (tablets) – मीडियम टेबलेट डिवाइस के लिए मिनिमम-विड्थ : 601px और मैक्सिमम-विड्थ: 1024px पिक्सेल तक सेट कर सकते है.
- Responsive large devices (desktops) – लार्ज और बड़ी स्क्रीन साइज में रेस्पॉन्सिव वेब डेवलपमेंट के लिए आप मिनिमम-विड्थ: 1025px पिक्सेल तक सेट कर सकते है.
Do responsive web development with a mobile-first approach.
वर्त्तमान समय में ज्यादातर इंटरनेट यूजर वेब कंटेंट को मोबाइल पे ज्यादातर एक्सेस और सर्फ कर सकते है. मोबाइल-फ़र्स्ट ओवरव्यू में पहले आपको वेब डेवलपमेंट छोटी सेलफोन स्क्रीन के लिए डिज़ाइन करना और बाद में उन्हें डेस्कटॉप, लैपटॉप बड़ी स्क्रीन साइज के लिए रेस्पॉन्सिव डेवलपमेंट करना है।
Example of mobile first approach.
/* apply style for cellphone */
body {
font-size: 14px;
padding: 12px;
}
/* tablet Medium devices */
@media (min-width: 601px) {
body {
font-size: 20px;
padding: 22px;
}
}
/* Large desktop or laptop devices */
@media (min-width: 1025px) {
body {
font-size: 18px;
padding: 28px;
}
}
Designing touch-friendly responsive web development.
- Button size – पोर्टेबल टच डिवाइस जैसे, टैबलेट और स्मार्टफ़ोन के लिए वेब डेवलपमेंट में सुनिश्चित करें कि बटन और क्लिकएबल एलिमेंट आसानी से टैप टच किए जाने के लिए पर्याप्त आकार में बड़े हों. जहा, रेकमेंडेड मिनिमम साइज 44×44 पिक्सेल सेट हो।
- Spacing – प्रॉपर रेस्पॉन्सिव वेब डेवलपमेंट में इमीडियेट क्लिक को रोकने के लिए इंटरैक्टिव वेब एलिमेंट के मध्य प्रॉपर स्पेस को एडजस्ट करे।
Responsive Navigation Web Design.
वर्त्तमान समय में वेब डेवलपर या क्लाइंट को मल्टीप्ल सेपरेट डिवाइस के लिए अलग-अलग रेस्पॉन्सिव नेविगेशन मेनू वेबसाइट ओवरव्यू हो सकती है.
- Mobile Navigation Design – रेस्पॉन्सिव वेब डिज़ाइन मेनू इजी एक्सेस के लिए हैमबर्गर या थ्री डॉट मेनू या बॉटम में वेबसाइट वेबपेज एक्सेस के लिए प्रॉपर नेविगेशन मेनू को अप्लाई करे।
- Tablet/Desktop Navigation Design – डेस्कटॉप या लैपटॉप कंप्यूटर में बिग स्क्रीन स्पेस के कारण वेब डेवलपर बेहतर बड़े आकार में नेविगेशन मेनू को डेवलप कर सकते हैं।
Test the responsive website design on all devices.
रेस्पॉन्सिव वेब डेवेलपमेंट में बेहतर यूजर एक्सपेरिएंस के लिए रेस्पॉन्सिव डिज़ाइन को सभी डिवाइस और इलेट्रॉनिक गैजेट्स के लिए टेस्ट करे।
Follow the steps below for responsive design.
- Browser developer tools – किसी भी रेस्पॉन्सिव वेब डेवलपमेंट में मल्टीप्ल स्क्रीन साइज को फॉलो करने के लिए रेस्पॉन्सिव वेब डिज़ाइन मोड को टेस्ट करें।
- Real devices – रियल टाइम में रेस्पॉन्सिव डिवाइस टेस्टिंग के लिए रियल डिवाइस में रेस्पॉन्सिव वेब डेवलपमेंट प्रोजेक्ट को टेस्ट करें।
- Online testing tools – आप ऑनलाइन रेस्पॉन्सिव वेब डेवलपमेंट को चेक करने के लिए BrowserStack और Responsinator जैसे टूल्स से आप अपनी रेस्पॉन्सिव वेबसाइट को मल्टीप्ल विभिन्न डिवाइस और वेब ब्राउज़र में कैसे प्रदर्शित होती है।
Responsive device display optimization.
- Responsive image optimization – रेस्पॉन्सिव वेब डेवलपमेंट में मल्टीप्ल इलेक्ट्रॉनिक डिवाइस स्क्रीन पिक्सेल रिज़ॉल्यूशन के आधार पर प्रॉपर इमेज साइज प्रोवाइड करने के लिए <picture> और srcset जैसे ऐट्रिब्यूट्स को अप्लाई करें।
- Minimize HTTP requests – फ़ास्ट रेस्पॉन्सिव वेब डेवलपमेंट प्रोसेस में जहाँ तक पॉसिबल हो वहा तक सीएसएस और जावास्क्रिप्ट फ़ाइलों को कंबाइंड कर उपयोग करे, और इन फ़ाइल की साइज को कम करने के लिए मिनिमाइज़ेशन तकनीक को अप्लाई करें।
- Use lazy loading – रेस्पॉन्सिव वेब पेज को इनिशियल पेज लोड टाइम को बेहतर और कम करने के लिए इमेजेज और रिसोर्सेज के लिए लेज़ी लोडिंग मेथड को अप्लाई करे, ज्यादातर स्माल टचस्क्रीन मोबाइल डिवाइस में इसे अप्लाई करे।
Accessibility considerations in responsive web development.
वेब डिज़ाइन में मल्टीप्ल स्क्रीन डिवाइस के लिए वेब डेवलपमेंट डिज़ाइन करते समय यूजर एक्सेस को प्रॉपर फॉलो करना चाहिए।
- Text size – रेस्पॉन्सिव वेब डेवलपमेंट प्रोसेस में ये पहले ये सुनिश्चित करें कि वेब पेज टेक्स्ट सभी इलेक्ट्रॉनिक डिवाइस पर पढ़ने योग्य हो और छोटे फ़ॉन्ट साइज़ का उपयोग करने से बचें।
- Color contrast – रेस्पॉन्सिव वेब डेवलपमेंट प्रोसेस में वेबपेज टेक्स्ट रिडेबिलिटी के लिए टेक्स्ट और वेब पेज कंटेंट में बैकग्राउंड के बीच पर्याप्त कंट्रास्ट को अप्लाई करें।
Responsive Web Development Conclusion.
वर्तमान समय में मल्टीप्ल इलेक्ट्रॉनिक डिवाइस और गैजेट्स के लिए रेस्पॉन्सिव वेब डिज़ाइन करना एसेंशियल है। जहा वेब डेवलपर वेब डेवलपमेंट प्रोसेस में रेस्पॉन्सिव प्रिंसिपल्स को अप्लाई करे, रेस्पॉन्सिव वेब कंटेंट और डिज़ाइन, और मल्टीप्ल हार्डवेयर डिवाइस और प्लेटफ़ॉर्म पर रेस्पॉन्सिव कंटेंट को टेस्ट करके, आप यूनिवर्सल वेब विजिटर के लिए एक रेस्पॉन्सिव वेब डिज़ाइन एक्सपेरिएंस क्रिएट कर सकते हैं, चाहे वे किसी भी डिवाइस या इलेक्ट्रॉनिक गैजेट्स से उस वेबपेज या वेबसाइट को एक्सेस कर रहे हो। इससे उन्हें एक बेहतर वेब सर्फिंग विजिट अनुभव प्राप्त होता हो.
