Responsive web design क्या होती है?

क्या कभी अपने सोचा है की एक ही वेबसाइट अलग अलग स्क्रीन साइज़ में कैसे दिखती है? क्या हर स्क्रीन के लिए अलग अलग वेबसाइट बनायी जाती है? इन सभी सवालों के जवाब इस लेख में आपको मिल जायेंगे|

कुछ वर्षों पहले ज्यादातर इन्टरनेट का उपयोग सिर्फ लैपटॉप और डेस्कटॉप पर ही किया जाता था| पर समय के साथ जैसे जैसे तकनीक का विकास हुआ और मोबाइल, टेबलेट जैसे डिवाइस आम होने लगे साथ ही 4G के आने से ज्यादातर वेबसाइट लोग मोबाइल पर ही खोलने लगे| शायद आपको जानकार हैरानी होगी की हमारी वेबसाइट ComputerHindiNotes.com को 80% से भी ज्यादातर समय मोबाइल पर खोला जाता है|

ऐसा होने से वेबसाइट बनाने का तरीका भी बदला, क्यूंकि अब ऐसी वेबसाइट बनाने की आवश्यकता पड़ने लगी जो स्क्रीन की साइज़ के अनुसार अपने आप adjust हो सके, यही Responsive web designing होती है|

रेस्पोंसिव वेब डिजाइनिंग क्या होती है? (What is Responsive Web Designing)

Responsive web designing एक प्रोसेस होती है, जिसका उपयोग करके वेबसाइट को स्क्रीन के अनुसार responsive बनाया जाता है| Responsive Website से मतलब है कि वेबसाइट को ऐसे डिजाइन किया जाता है कि वह किसी भी साइज की स्क्रीन जैसे लैपटॉप, डेक्सटॉप, टेबलेट और स्मार्टफोन की स्क्रीन के अनुसार अपने layout को Adjust कर ले, HTML और CSS का उपयोग करके हम वेबसाइट को responsive बना सकते हैं|

Responsive Web Design का इतिहास (History of Responsive Web Design)

Audi.com site को 2001 मे लॉन्च किया गया थाl इसका उपयोग करके स्क्रीन की width (चौड़ाई) के अनुसार layout को प्रदर्शित किया जा सकता था| इसे Razorfish नाम की एक टीम द्वारा बनाया गया था, जिसमें Jurgen Spangl और Jim Kabach (information architecture), ken Olling (design) और Jan Hoffmann (interface development) थे|
सबसे पहले Responsive Web Design शब्द का प्रयोग Ethan Marcotte ने 2010 में किया था|
Responsive Web Design का मतलब A List Apart के एक आर्टिकल में fluid grid, flexible images और media queries के रूप में बताया गया है|
2011 में, responsive web design के सिद्धांत और व्यवहार का वर्णन responsive web design नाम की किताब में किया गया था|
2013 को Mashable ने Responsive Web Design का वर्ष कहा था|

वेबसाइट को Responsive बनाने के लिए उपलब्ध फ्रेमवर्क
(Framework to create Responsive Websites)

वैसे तो Websites को Responsive बनाने के लिए हम खुद पूरी कोडिंग कर सकते हैं जिसमे HTML और CSS का प्रयोग किया जा सकता है| पर अब Responsive Web Designing के लिए बहुत सारी libraries और framework को तैयार किया गया है| जिनका उपयोग प्रोग्रामिंग को आसान बनाने के लिए किया जाता हैl जो इस प्रकार है –

1. Bootstrap

आजकल एक responsive या मोबाइल के अनूकुल website बनाने के लिए Bootstrap का सबसे ज्यादा उपयोग किया जाता है| Bootstrap एक तरह का फ्रेमवर्क होता है| जिसका उपयोग करके हम वेबसाइट को responsive बना सकते हैंl Bootstrap को twitter कंपनी के employee Mark otto और Jacob Thornton ने मिलकर बनाया था|

जिसे 19 अगस्त 2011 मे GitHub मे एक open source course के रूप में रिलीज कर दिया गया था| वेबसाइट बनाने के लिए वेब डिजाइनर को ज्यादा coding करने की जरूरत नहीं होती है| इसमें पहले से ही बहुत सी कोड दिए गए हैं, bootstrap मे CSS की बहुत सारी predefined classes होती है| जिसका उपयोग आप अपने पेज में आसानी से कर सकते हैं| आप दो तरीके से Bootstrap का उपयोग कर सकते हैं पहला डाउनलोड करके दूसरा CDN के द्वारा|

2. Skeleton

Skeleton एक simple, responsive, lightweight और CSS framework है| इसे मोबाइल को ध्यान में रखकर बनाया गया है| यह छोटे प्रोजेक्ट के लिए सबसे अच्छा है क्योंकि यह केवल प्रमुख Standard HTML Elements को ही style करता है| यह developer के लिए basic components जैसे lists, forms, buttons, tables आदि प्रदान करता है| इसकी ग्रिड सिस्टम सभी प्रकार की स्क्रीन जैसे small, medium, large में फिट बैठती है|

3. Pure CSS

Pure CSS छोटे प्रोजेक्ट के लिए बहुत अच्छा है| यह विशेष रूप से मोबाइल डिवाइसों के लिए डिजाइन किया गया है| वेब डेवलपर्स इसकी मदद से आसानी से ग्रिड, मेनू, फॉर्म, बटन आदि का उपयोग करके अच्छा अच्छा लेआउट बना सकते हैं| यह फाइल के आकार को छोटा रखता हैl Pure CSS द्वारा बनाए गए एलिमेंट सभी सभी साइज के स्क्रीन पर अच्छे लगते हैं| इसमें आसानी से नए CSS नियमों को जोड़ा जा सकता है|

4. UIKit

UIKit एक modular एंड रेस्पॉन्सिव फ्रेमवर्क है| इसमें कई UI एलिमेंट्स होते हैं| जो या तो HTML से या जावास्क्रिप्ट कोड से जुड़े रहते हैं| यह pixel-prefect web layout और powerful, fast web interface बना सकता है| यह इन-बिल्ट आइकॉन लाइब्रेरी है| यह काफी अच्छा फ्रेमवर्क है| इसमें कुछ डिजाइन एलिमेंट्स होते हैं|

Responsive Website के फायदे

Responsive website से होने वाले फायदे निम्न प्रकार है –

अगर आपने अपनी वेबसाइट को मोबाइल और टेबलेट के अनुसार optimize किया है तो इससे webpage को ओपन करने में कम समय लगेगा जिससे वेबसाइट की लोडिंग स्पीड कम हो जाएगी|
यदि आप डेस्कटॉप और मोबाइल दोनों के लिए अलग-अलग site बनाते हैं तो दोनों site को manage और प्रमोट करना आसान नहीं होगा| पर अगर वेबसाइट Responsive है, तो फिर दो अलग-अलग site बनाने की जरूरत नहीं पड़ेगी| एक site से भी आपका काम हो जाएगा|
Google भी responsive websites recommend करता है, क्योंकि रेस्पॉन्सिव वेबसाइट की URL सभी डिवाइस के लिए एक जैसी होती है| जिससे गूगल को इसे समझने में आसानी होती है|

अधिकतर पूछे जाने वाले सवाल

[sc_fs_multi_faq headline-0=”h3″ question-0=”Responsive CSS क्या है?” answer-0=”यह सभी डिवाइस डेक्सटॉप से लेकर मोबाइल तक जितनी भी डिवाइस से सभी के लिए होता है| इसे responsive web design भी कहा जाता है|” image-0=”” headline-1=”h3″ question-1=”Responsive Web design क्यों important है?” answer-1=”Responsive web design की मदद से बेबसाइट को responsive बना सकते हैंl हमें अलग-अलग डिवाइसों के लिए अलग-अलग साइट बनाने की जरूरत नहीं पड़ेगीl एक सिंगल साइट से भी हमारा काम हो जाएगाl जिससे हमें site को मैनेज और प्रमोट करने में आसानी होगी| इसलिए यह बहुत आवश्यक है|” image-1=”” headline-2=”h3″ question-2=”HTML और CSS मे Responsive Web Design क्या है?” answer-2=”इसमें किसी स्क्रीन पर लेआउट को अच्छा दिखाने के लिए, साइज बदलने के लिए , छोटा और बड़ा करने के लिए और भी बहुत से changes करने के लिए HTML और CSS कभी किया जाता है|” image-2=”” headline-3=”h3″ question-3=”Bootstrapping का क्या मतलब है?” answer-3=”Bootstrapping बिजनेस में उपयोग किए जाने वाले शब्द है, जो कंपनी को शुरू करने और विकसित करने के लिए केबल मौजूदा resource जैसे personal savings, personal computing उपकरण और garage space का उपयोग करने की प्रक्रिया को स्टार्ट करता है|” image-3=”” headline-4=”h3″ question-4=”Non Responsive Design क्या है?” answer-4=”Non Responsive Design, responsive Design के विपरीत होती है| Non Responsive site स्क्रीन के अनुसार लेआउट को adjust करने की बजाय, छोटी स्क्रीन मे फिट होने के लिए छोटी हो जाती है|” image-4=”” headline-5=”h3″ question-5=”Bootstrap Code क्या है?” answer-5=”Bootstrap HTML, CSS और JavaScript मे लिखे गये कोड के आसान, bits का एक विशाल संग्रह है| एक फ्रंटएंड डेवलपमेंट फ्रेमवर्क भी है जो डेवलपर्स और डिज़ाइनरो को पूरी तरह से responsive वेबसाइट बनाने में सक्षम बनाता है|” image-5=”” count=”6″ html=”true” css_class=””]

Table of Contents

Responsive web design क्या होती है?

रेस्पोंसिव वेब डिजाइनिंग क्या होती है? (What is Responsive Web Designing)

Responsive Web Design का इतिहास (History of Responsive Web Design)