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

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

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

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

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

विकिपीडिया

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

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

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

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

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

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

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

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

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

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

3 टिप्पणियाँ

  1. 1
  2. 2

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

    • 3

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

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

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