उत्तरदायी डिजाइन क्या है? (व्याख्याकार वीडियो और इन्फोग्राफिक)

प्रतिक्रियात्मक वेब डिज़ाइन

एक दशक लग गया है प्रतिक्रियात्मक वेब डिज़ाइन (RWD) के बाद से मुख्यधारा में जाने के लिए कैमरन एडम्स ने पहली बार पेश किया संकल्पना। विचार सरल था - हम उन साइटों को डिज़ाइन क्यों नहीं कर सकते जो उस डिवाइस के व्यूपोर्ट के अनुकूल हों जिस पर इसे देखा जा रहा है?

उत्तरदायी डिजाइन क्या है?

उत्तरदायी वेब डिज़ाइन (RWD) एक वेब डिज़ाइन दृष्टिकोण है जिसका उद्देश्य साइटों को एक इष्टतम देखने का अनुभव प्रदान करना है - कम से कम रीसाइज़िंग, पैनिंग और स्क्रॉलिंग के साथ आसान पढ़ना और नेविगेशन - उपकरणों की एक विस्तृत श्रृंखला में (मोबाइल फोन से डेस्कटॉप कंप्यूटर तक) मॉनिटर करता है)। RWD के साथ डिज़ाइन की गई साइट, तरल पदार्थ, अनुपात-आधारित ग्रिड, लचीली छवियां, और CSS3 मीडिया क्वेरी, @media नियम के विस्तार का उपयोग करके लेआउट को देखने के वातावरण में बदल देती है।

विकिपीडिया

दूसरे शब्दों में, छवियों जैसे तत्वों को समायोजित किया जा सकता है और साथ ही उन तत्वों का लेआउट भी। यहां एक वीडियो है जो बताता है कि उत्तरदायी डिज़ाइन क्या है और साथ ही आपकी कंपनी को इसे क्यों लागू करना चाहिए। हमने हाल ही में का पुनर्विकास किया है DK New Media साइट उत्तरदायी और अब पर काम कर रहे हैं Martech Zone वही करने के लिए!

साइट उत्तरदायी बनाने की कार्यप्रणाली थोड़ी थकाऊ है क्योंकि आपको अपनी शैलियों के लिए पदानुक्रम की आवश्यकता होती है जो व्यूपोर्ट के आकार के आधार पर व्यवस्थित होती हैं।

ब्राउज़र अपने आकार के बारे में स्वयं जागरूक होते हैं, इसलिए वे स्क्रीन के आकार के लिए लागू शैलियों को क्वेरी करते हुए ऊपर से नीचे तक स्टाइलशीट लोड करते हैं। इसका मतलब यह नहीं है कि आपको हर आकार की स्क्रीन के लिए अलग-अलग स्टाइलशीट डिज़ाइन करनी होंगी, आपको बस आवश्यक तत्वों को स्थानांतरित करने की आवश्यकता है।

मोबाइल-प्रथम मानसिकता के साथ संचालन आज आधारभूत मानक है। सर्वश्रेष्ठ-इन-क्लास ब्रांड केवल इस बारे में नहीं सोच रहे हैं कि उनकी साइट मोबाइल के अनुकूल है, बल्कि पूर्ण ग्राहक अनुभव के बारे में।

लुसिंडा डंकलफे, मोनेटेट सीईओ

यहाँ मोनेट से एक इन्फोग्राफिक है जो कई उपकरणों के लिए एक उत्तरदायी डिज़ाइन बनाने के संभावित लाभों को दर्शाता है:

उत्तरदायी वेब डिज़ाइन इन्फोग्राफिक

यदि आप किसी प्रतिक्रियाशील साइट को सक्रिय देखना चाहते हैं, तो अपना इंगित करें गूगल क्रोम ब्राउज़र (मेरा मानना ​​है कि फ़ायरफ़ॉक्स में एक ही सुविधा है) DK New Media। अब चुनें दृश्य> डेवलपर> डेवलपर उपकरण मेनू से। यह ब्राउज़र के निचले भाग में टूल का एक गुच्छा लोड करेगा। डेवलपर टूल मेनू बार के बाईं ओर स्थित छोटे मोबाइल आइकन पर क्लिक करें।

उत्तरदायी परीक्षण-क्रोम

आप दृश्य को लैंडस्केप से पोर्ट्रेट में बदलने के लिए ऊपर के नेविगेशन विकल्पों का उपयोग कर सकते हैं, या यहां तक ​​कि पूर्व-प्रोग्राम किए गए व्यूपोर्ट आकारों की किसी भी संख्या का चयन कर सकते हैं। आपको पृष्ठ को फिर से लोड करना पड़ सकता है, लेकिन यह आपकी प्रतिक्रियाशील सेटिंग्स को सत्यापित करने और यह सुनिश्चित करने के लिए दुनिया का सबसे अच्छा टूल है कि आपकी साइट सभी उपकरणों पर अच्छी लगे!

3 टिप्पणियाँ

  1. 1
  2. 2

    इस अच्छी तरह से समझाया लेख के लिए बहुत बहुत धन्यवाद डगलस। हालांकि चीजों के सामग्री पक्ष पर मुझे इससे सहमत होना चाहिए। अधिकांश साइटों के लिए हम एक उत्तरदायी लेआउट बनाते हैं जो पर्याप्त नहीं होगा। हमें रिस्पॉन्सिव कंटेंट चाहिए। लेकिन अधिक बुनियादी वेबसाइटों के लिए हम निश्चित रूप से आपके अच्छी तरह से प्रलेखित लेख का उपयोग करने जा रहे हैं कि इसे कैसे संभालना है!

    • 3

      मुझे लगता है कि आप बिल्कुल सही हैं, हारून। केवल चीजों का आकार बदलना और स्थानांतरित करना पर्याप्त नहीं है... हमें वास्तव में सामग्री का भी प्रभावी ढंग से उपयोग करने की आवश्यकता है।

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.