How Make a Responsive Website
The responsive web design term was largely developed by Ethan Marcotte. Responsive websites have three defining features:
रिस्पॉन्सिव वेब डिज़ाइन शब्द मोटे तौर पर ईथन मार्कोटे द्वारा विकसित किया गया था। रिस्पॉन्सिव वेबसाइटों में तीन परिभाषित विशेषताएं हैं:
1. Media queries – मीडिया क्वेरीज– “A media query allows us to target not only certain device classes but to actually inspect the physical characteristics of the device rendering our work,” Ethan explains. Media queries thus allow developers to use condition checks to alter web designs based on the properties of the user’s device.
एक मीडिया क्वेरी हमें न केवल कुछ डिवाइस क्लॉसेस को टार्गेट करने की अनुमति देती है, बल्कि वास्तव में हमारे काम को प्रस्तुत करने वाले डिवाइस की भौतिक विशेषताओं का निरीक्षण करती है। मीडिया के प्रश्न इस प्रकार डेवलपर्स को उपयोगकर्ता के डिवाइस के गुणों के आधार पर वेब डिजाइनों को बदलने के लिए कंडीशन चेक का उपयोग करने की अनुमति देते हैं।
2. Fluid grids-फ्लूड ग्रिड्स: When flexible grids are created using CSS, the columns automatically rearrange themselves to fit the size of the screen or browser window, whether the user is on a 21-inch desktop computer, a 13-inch laptop, a 9.7-inch tablet or a 5.5-inch mobile phone. This enables designers to maintain a consistent look and feel across multiple devices. Plus, it saves everyone time and money by allowing designers to update one version of the website versus many.
जब सीएसएस का उपयोग करके लचीले ग्रिड बनाए जाते हैं, तो कॉलम स्वचालित रूप से स्क्रीन या ब्राउजर विंडो के आकार को फिट करने के लिए खुद को पुर्नव्यवस्थित करता है, चाहे उपयोगकर्ता 21 इंच के डेस्कटॉप कंप्यूटर, 13 इंच के लैपटॉप, 9.7 इंच के टैबलेट पर हो, या 5.5 इंच का मोबाइल फोन पर कार्य कर रहा हो। यह डिजाइनरों को एक सुसंगत रूप बनाए रखने और कई उपकरणों में महसूस करने में सक्षम बनाता है। साथ ही, यह डिजाइनरों को वेबसाइट बनाम एक के कई वर्जनो को अपडेट करने की अनुमति देकर समय और धन बचाता है।
3. Flexible visuals –फ्लेक्सिबल विजुअल्स: Marcotte refers here to using code that prevents rich media files from exceeding the dimensions of their containers, as well as view ports. As the “flexible container resizes itself,” he explains, so does the visual within it. Given that there are over 8.48 Billion unique devices in existence today, this functionality allow teams to create timeless designs capable of adapting to any device, regardless of its size or shape.
मार्कोटे यहां कोड का उपयोग करने के लिए संदर्भित करता है जो मीडिया फाइलों को उनके कंटेनरों के आयामों से अधिक होने से रोकता है, साथ ही व्यूपोर्ट के लायक भी बनाता है। “फ्लेक्सिबल विजुअल्स खुद को आकार देता है,” वह बताते हैं, इसलिए विजुअल्स इस के भीतर ही होता है। यह देखते हुए कि आज अस्तित्व में 8.48 बिलियन से अधिक अद्वितीय डिवाइस है, यह कार्यक्षमता टीमों को किसी भी डिवाइस को आकार देने में सक्षम डिजाइन बनाने की अनुमति देती है, चाहे उसका आकार या शेप कुछ भी हो।
Together, these three types of functionality allow designers to craft responsive websites. एक साथ, ये तीन प्रकार की कार्य प्रणाली डिजाइनरों को उत्तरदायी वेबसाइटों को डिजाइन करने की अनुमति देती है।
Comparison Chart – तुलनात्मक चार्ट
| Detail विवरण | Client-Site Scripting क्लाइंट साईट स्क्रिप्टिंग | Server-Side Scripting सर्वर साईट स्क्रिप्टिंग |
| Basic बेसिक | Work at the front end and script is visible among the users. फ्रंट एण्ड पर काम करता है और स्क्रिप्ट उपयोगकर्ताओं के बीच दिखाई देते हैं । | Work in the back end which could not be visible at the client end. बैक एण्ड में काम करता है जो क्लाइंट एण्ड पर दिखाई नहीं दे सकता है । |
| Processing प्रोसेसिंग | Does not need interaction with the server. सर्वर के साथ इंटरेक्शन की आवश्यकता नहीं होती । | Requires Server interaction. सर्वर के साथ इंटरेक्शन की आवश्कता है । |
| Languages Involved भाषाएँ शामिल हैं | HTML, CSS, JavaScript, etc. एचटीएमएल, सीएसएस जावास्क्रिप्ट और अन्य । | PHP, ASP .net, Ruby on Rails, ColdFusion, Python, etc. पीएचपी एसपी.नेट, रूबी ऑन रेल्स, कोल्डफ्यूज़न, पायथन, और अन्य । |
| Affect प्रभावित | Can reduce the load to the server. सर्वर पर लोड को कम कर सकते हैं । | Could effectively customize the web pages and provide dynamic websites. वेब पेजों को प्रभावी ढंग से अनुकूलित वेबसाइट प्रदान कर सकता है । |
| Security सुरक्षा | Insecure असुरक्षित | Relatively secure. अपेक्षाकृत सुक्रिक्षित है । |
The scripts can be written in two forms, at the server end or at the client end. The main difference between server-side scripting and client-side scripting is that the server side scripting involves server for its processing. On the other hand, client-side scripting requires browsers to run the scripts on the client machine but does not interact with the server while processing the client-side scripts.
स्क्रिप्ट दो रूपों में, सर्वर इंड या क्लाइंट इंड पर लिखी जा सकती हैं। सर्वर–साइड स्क्रिप्टिंग और क्लाइंट-साइड स्क्रिप्टिंग के बीच मुख्य अंतर यह है कि सर्वर साइड स्क्रिप्टिंग में इसे रन कराने के लिए सर्वर सम्मिलित है। दूसरी ओर, क्लाइंट-साइड स्क्रिप्टिंग को क्लाइंट मशीन पर स्क्रिप्ट चलाने के लिए ब्राउजर की आवश्यकता होती है, लेकिन क्लाइंट-साइड स्क्रिप्ट को रन करते समय ब्राउजर सर्वर के साथ इंटरैक्ट नहीं करता है।
The Internet took off faster than anyone would have predicted, growing like crazy. Now, for the past few years, mobile growth has expanded in day to day life. These days it is hard to find someone who doesn’t own a mobile device connected to the Internet. With the expansion in mobile Internet usage comes the question of how to build websites suitable for all users including mobile users. The industry response to this question has become responsive web design, also known as RWD.
इंटरनेट ने तेजी से उड़ान भरी है। अब, पिछले कुछ वर्षों से, दिन-प्रतिदिन के जीवन में मोबाइल विकास का विस्तार हुआ है। इन दिनों किसी ऐसे व्यक्ति को ढूढ़ना मुश्किल है, जो इंटरनेट से जुड़ा मोबाइल डिवाइस न रखता हो। मोबाइल इंटरनेट के उपयोग में विस्तार के साथ सभी उपयोगकर्ताओं के लिए उपयुक्त वेबसाइटों का निर्माण करने का प्रश्न आता है। इस सवाल के जवाब में ही उत्तरदायी (रिस्पॉन्सिव) वेब डिजाइन की संकल्पना हुई, जिसे RWD के रूप में भी जाना जाता है।
Responsive web (रेस्पोंसिव वेब) design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive Web Design is a method through which we automatically resize, hide, shrink or enlarge, a website, to make it look good on all devices (desktops, tablets and mobile phones). A web page should look good on any device. Responsive images are images that scale nicely to fit any browser size. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device.
रिस्पॉन्सिव डिजाइन प्रत्येक डिवाइस और स्क्रीन के आकार पर काम करने के लिए उपयुक्त वेबसाइट बनाने की एक प्रक्रिया को कहते हैं, चाहे वह कितना भी बड़ा या छोटा हो, मोबाइल हो या डेस्कटॉप हो। रेस्पोंसिव वेब डिजाइन एक ऐसी विधि है जिसके माध्यम से हम स्वचालित रूप से सभी डिवाइसों (डेस्कटॉप, टैबलेट और मोबाइल फोन) पर अच्छा दिखने के लिए एक वेबसाइट का आकार बदल सकते हैं, उसे आवश्यकतानुसार अदृश्य कर सकते हैं, छोटा या बड़ा कर सकते हैं। यह आवश्यक है कि किसी भी डिवाइस पर वेब पेज अच्छा दिखना चाहिए । रेस्पोंसिव फोटो ऐसी फोटो है, जो किसी भी ब्राउजर आकार को फिट करने के लिए अच्छी तरह से पैमाने पर फिट हो जाती है। वेब पेजों से छोटे टूल्स को फिट करने के लिए पेज की जानकारी को कम नहीं छोड़ सकते हैं, बल्कि किसी भी टूल को फिट करने के लिए इसकी सामग्री को उसी के अनुसार तैयार करना चाहिए।
Types of Websites (Static and Dynamic Websites) –
वेबसाइट के प्रकार (स्टैटिक और डॉयनामिक वेबसाईट)
Website is a set of related web pages that may contain text, images, audio and video. A website can be of two types, one is Static Website and other one is Dynamic Website. Websites that only use HTML and CSS are called static websites, and websites with scripting languages are called dynamic websites. When creating your website, it’s important to recognize which kind of site you want. Let us see in brief regarding static and dynamic website.
वेबसाईट संबंधित वेब पृष्ठों का एक सेट है। जिसमें टेक्स्ट, इमेज, ऑडियो और वीडियो शामिल हो सकते हैं। एक वेबसाइट दो प्रकार की हो सकती है, एक है स्टैटिक वेबसाइट और दूसरी है डॉयनामिक वेबसाइट । वे वेबसाइट जो केवल HTML और CSS का उपयोग करती हैं, उन्हें स्टैटिक वेबसाईट कहा जाता है, और स्क्रिप्टिंग वाली वेबसाईटों को डॉयनामिक वेबसाईट कहा जाता है। अपनी वेबसाईट बनाते समय, यह पहचानना महत्वपूर्ण है कि आप किस प्रकार की साईट चाहते हैं। स्टैटिक और डॉयनामिक वेबसाईट के बारे में संक्षेप में देखें।
Static website – स्टैटिक वेबसाईट
Static website refers to a collection of Web Pages whose content is fixed and is the same for every user. Fixed content means no use of database in the website. Static web pages (स्टैटिक वेब पेजेज) are often HTML documents stored as files in the file system and made available by the web server over HTTP. Static websites do not require any Web programming or database design. Additionally, making updates to static websites (स्टैटिक वेब साईट) means going directly into the HTML and making the changes from there.
स्टैटिक वेबसाईट उन वेब पेजों के संग्रह को दर्शाती है, जिनमे कन्टेंट निश्चित होते है और प्रत्येक यूजर के लिए समान है। निश्चित कन्टेंट का अर्थ है वेबसाइट में डेटाबेस का उपयोग नहीं किया जा रहा है। स्टैटिक वेब पेज अक्सर HTML डॉक्यूमेंट होते हैं जिन्हें फाइल सिस्टम में फाइल के रूप में संग्रहीत किया जाता है और HTTP पर वेब सर्वर द्वारा उपलब्ध कराया जाता है। स्टैटिक वेबसाईटों को किसी भी वेब प्रोग्रामिंग या डेटाबेस डिजाइन की आवश्यकता नहीं होती है। इसके अतिरिक्त, स्टैटिक वेबसाईटों को अपडेट करने का अर्थ है सीधे HTML में जाना और वहां से परिवर्तन करना।
Static website is the fundamental type of website that is easy to build. You don’t need the knowledge of web programming and database design to create a static website. This means that every user who visits that website will receive the exact same information. Additionally, making updates to static websites means going directly into the HTML and making the changes from there.
स्टैटिक वेबसाईट मूलभूत प्रकार की वेबसाइट है जिसे बनाना आसान है। स्टैटिक वेबसाईट बनाने के लिए आपको वेब प्रोग्रामिंग और डेटाबेस डिज़ाइन के ज्ञान की आवश्यकता नहीं है। इसका मतलब यह है कि प्रत्येक उपयोगकर्ता जो उस वेबसाईट पर जाता है, वही सटीक जानकारी प्राप्त करेगा। इसके अतिरिक्त, स्टैटिक वेबसाईटों को अपडेट करने का अर्थ है सीधे HTML में जाना और वहां से परिवर्तन करना।
Advantages Disadvantages of static and dynamic website
About me
