Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

रेस्पॉन्सिव मूल्य निर्धारण सारणी का उपयोग: छोटे स्क्रीन के लिए लक्ष्य

by
Difficulty:IntermediateLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

मूल्य निर्धारण तालिका जानकारी प्रदर्शित करने और उपयोगकर्ताओं को उपलब्ध विकल्पों को अलग करने में मदद करने का एक बहुत ही प्रभावी माध्यम हो सकता है। आखिरकार, मूल्य निर्धारण सारणी गुजरने वाले आगंतुकों को मूल्यवान ग्राहकों में परिवर्तित कर सकती हैं, इसलिए यह महत्वपूर्ण है कि हम विचार करें कि वे विभिन्न स्क्रीन और उपकरणों पर कैसे काम करते हैं।

हम एक तरल मूल्य निर्धारण तालिका बनाने जा रहे हैं, फिर मीडिया क्वेरीज का उपयोग करके विभिन्न व्यूपोर्ट आकारों पर प्रदर्शित होने के तरीके को बदलें। आएँ शुरू करें!


एक रेस्पॉन्सिव CSS फ्रेमवर्क का चयन

हम अपने ग्रिड माप और मीडिया क्वेरीज को हल करने के लिए पूर्व-मौजूदा ढांचे पर दुबला होने जा रहे हैं। यह महत्वपूर्ण नहीं है, लेकिन ये कुछ समय बचाएगा।

हमारे यहां कुछ विकल्प हैं, जो मूल रूप से अनुकूली और रेस्पॉन्सिव लेआउट के बीच हैं।

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

मैं रेस्पॉन्सिव डिज़ाइन बनाने के लिए Skeleton Framework पसंद करता हूं, लेकिन डिफ़ॉल्ट स्केलेटन फ्रेमवर्क निश्चित लेआउट की एक श्रृंखला का उपयोग करता है। इसके बजाय, मैं इस ट्यूटोरियल में, fluid version of Skeleton के द्रव संस्करण का उपयोग करने जा रहा हूं।


चरण 1: डेस्कटॉप स्क्रीन के लिए मार्कअप

पारंपरिक रूप से, डेस्कटॉप कंप्यूटर या लैपटॉप के लिए डिज़ाइन करते समय हमने मानक चौड़ाई के रूप में 960px पर भरोसा किया है। आसानी के लिए, इस तरह हम यहां कूदने जा रहे हैं - तो देखते हैं कि हम बड़ी स्क्रीन के लिए हमारी मूल्य निर्धारण तालिका कैसे डिज़ाइन कर सकते हैं।

प्रारंभ में हमें मूल्य निर्धारण तालिका के लिए स्केलेटन फ्रेमवर्क और कस्टम स्टाइल्स के लिए सभी आवश्यक सीएसएस फाइलों को शामिल करना होगा।

इस नकली में मैंने मूल्य निर्धारण तालिका के केवल एक हिस्से के लिए HTML शामिल किया है (अन्य सभी समान हैं)। आपको अपने तत्वों के लिए एक कंटेनर बनाना होगा। स्केलेटन में आप सभी मुख्य कंटेनर में क्लास container असाइन कर सकते हैं। सभी कॉलम उस तत्व के अंदर जाना चाहिए।

स्केलेटन मुख्य कंटेनर को 16 कॉलम में विभाजित करता है। मैंने 4 मूल्य निर्धारण पैकेजों के लिए प्रत्येक चार columns का उपयोग किया है - क्लास four columns के साथ div को देखें।

डेटा के लिए, मैंने मूल्य निर्धारण पैकेज सुविधाओं को दिखाने के लिए एक सरल विवरण सूची का उपयोग किया है।


चरण 2: बड़े स्क्रीन के लिए CSS

चलिए मूल्य निर्धारण तालिका के स्वरूप और अनुभव को बेहतर बनाने के लिए कुछ बुनियादी स्टाइल्स को जोड़ें:

यह पहली खंड डेटा पंक्तियों के लिए वैकल्पिक ज़ेबरा पट्टियों को स्टाइल्स बनाती है, प्रत्येक पैकेज को एक अद्वितीय रंग योजना देता है और कुछ टाइपोग्राफिक नियम सेट करता है।

शेष स्टाइल्स में सुंदर चीजें हैं, लेकिन कुछ आइकनों से भी निपटती हैं जिन्हें हम छोटी स्क्रीन पर उपयोग करेंगे। जैसा कि आप देख सकते हैं, .plan_more में एक display: none; सेट करें, इसलिए यह बड़े स्क्रीन आकारों पर अदृश्य है, भले ही हमने इसके अंदर आइकन स्टाइल किया हो।

नीचे दी गई इमेज से पता चलता है कि बड़ी स्क्रीन पर मूल्य निर्धारण तालिका कैसे प्रदर्शित होती है।


Step 3: टेबलेट्स के लिए डिजाइनिंग

उपकरणों के संदर्भ में स्क्रीन आकार को परिभाषित करना खतरनाक है (तथ्य यह है कि, हम निश्चित रूप से कभी नहीं जानते कि हमारे पृष्ठ को देखने के लिए किस डिवाइस का उपयोग किया जा रहा है), लेकिन, आमतौर पर, टैबलेट में 768px और 959px के बीच स्क्रीन चौड़ाई होगी। इस धारणा के लिए समायोजित करने के लिए, हम आवश्यक स्टाइल्स से निपटने के लिए एक मीडिया क्वेरी लिखेंगे।

अपने घुमावदार स्टेट में, डेमो पूरी तरह से चौड़ाई वाली टैबलेट स्क्रीन पर प्रदर्शित होगा। इसलिए मैं टैबलेट के लिए किसी भी कस्टम स्टाइल्स को कोड नहीं करूँगा। हमारे स्केलेटन ढांचे में, टैबलेट के लिए मीडिया क्वेरीज अनुभाग इस तरह दिखेगा (थोड़ा खाली):

नीचे दी गई इमेज से पता चलता है कि मूल्य निर्धारण तालिका "टैबलेट" स्क्रीन पर कैसे प्रदर्शित होती है:


चरण 4: पोर्ट्रेट मोबाइल स्क्रीन

ठीक है, इसलिए हमने बड़ी स्क्रीन के लिए मूल्य निर्धारण तालिका तैयार की है। अब हम पोर्ट्रेट मोबाइल स्क्रीन देखेंगे जो कि इस ट्यूटोरियल में चिंता करने जा रहे हैं। चूंकि यह लगभग 320px चौड़ा होगा, इसलिए हम स्क्रीन में एक भी पैकेज को पूरी तरह प्रदर्शित नहीं कर पाएंगे। हमें निम्नलिखित के आधार पर छोटी स्क्रीन के लिए एक अलग लेआउट की योजना बनाने की आवश्यकता होगी:

  • दो अलग पंक्तियों की बजाय मूल्य निर्धारण पैकेज की कीमत और शीर्षक को एक पंक्ति में बदलें।
  • सभी सुविधाओं को छुपाएं और फीचर्स नेविगेशन पैनल देखें।
  • व्यू फीचर्स बटन पर क्लिक करने के बाद एक बार CSS तकनीकों का उपयोग करके फीचर्स की सूची दिखाएं।

सबसे पहले हम चरण 1 में रखी गई मूल्य निर्धारण तालिका के लिए हमारी प्रारंभिक HTML संरचना पर नज़र डालें। क्लास plan_more अनुभाग को याद रखें और अधिक जो डिफ़ॉल्ट चौड़े स्क्रीन व्यू में छिपा हुआ है? हम इसे व्यू फीचर्स नेविगेशन के रूप में उपयोग करेंगे।

320px और 767px चौड़े के बीच स्क्रीन के लिए स्टाइल्स की जांच करें:

हम शीर्षक और मूल्य तत्वों के लिए कस्टम चौड़ाई निर्दिष्ट करते हैं और float : left सेट करते हैं दोनों वर्गों को एक पंक्ति में रूपांतरित करने के लिए। फिर हम डिस्प्ले असाइन करके व्यू फीचर्स सेक्शन दिखाते हैं: plan_more क्लास पर display:block करें। इसमें सुविधाओं को खोलने और बंद करने के लिए प्लस और माइनस आइकन होंगे।

एक बार जब उपयोगकर्ता प्लस आइकन पर क्लिक करता है तो हमें फीचर्स सूची को स्लाइड करना होगा और स्क्रीन में प्रदर्शित करना होगा। हालांकि यह jQuery का उपयोग करके आसानी से किया जा सकता है, हम स्क्रिप्ट से बचने के लिए एक CSS-आधारित समाधान की तलाश करने जा रहे हैं।

मैं इयान येट्स द्वारा प्रदर्शित CSS तकनीक का उपयोग करने जा रहा हूं  Quick Tip: Give Orman’s Navigation the :target Treatment दें। सबसे पहले हम उन्हें छिपाने के लिए सभी सुविधाओं की ऊंचाई 0 पर सेट करते हैं। फिर हम स्लाइडिंग प्रभाव प्राप्त करने के लिए कुछ ब्राउज़र विशिष्ट CSS संक्रमण कोड असाइन करते हैं।

एक बार प्लस बटन क्लिक करने के बाद हम url के भीतर fragment identifier का उपयोग कर लक्ष्य तत्व प्राप्त कर सकते हैं। हम ऊंचाई सेट करके क्लिक किए गए पैकेज पर विशेषताओं को प्रदर्शित करते हैं। सरल।

अब जब आप छोटी मोबाइल स्क्रीन पर स्विच करते हैं तो आपको प्रत्येक पैकेज के शीर्षक और मूल्य निर्धारण के साथ लेआउट मिलेगा। सुविधाओं को प्रदर्शित और छिपाने के लिए प्लस और माइनस बटन का उपयोग करें।

निम्न इमेज आपको दिखाती है कि जब आप नेविगेशन बटन का उपयोग करके उन्हें विस्तृत करते हैं तो विशेषताएं कैसे प्रदर्शित की जाती हैं:


चरण 5: लैंडस्केप मोबाइल

फिर, हम सामान्यीकृत कर रहे हैं, लेकिन हम मान लेंगे कि मोबाइल के लैंडस्केप लेआउट 480px और 767px के बीच निर्दिष्ट हैं। चूंकि हम कॉलम आधारित लेआउट का उपयोग कर रहे हैं, इसलिए हमारी मूल्य निर्धारण तालिका बिना किसी बदलाव किए मोबाइल परिदृश्य स्क्रीन में ठीक से प्रदर्शित होती है। जरा देखो तो:

जैसा कि आप देख सकते हैं, एक पैकेज पूरी चौड़ाई में प्रदर्शित होता है। हमें वास्तव में एक पैकेज के लिए ऐसी जगह की आवश्यकता नहीं है। यह एक और महत्वपूर्ण बात है जिसे आपको रेस्पॉन्सिव डिजाइन में विचार करने की आवश्यकता है। सबसे पहले हम यह सुनिश्चित करना चाहते हैं कि स्क्रॉल किए बिना सभी सामग्री ब्राउज़ की जा सके। फिर हमें ठोस उपयोगकर्ता अनुभव प्रदान करने के लिए लेआउट को अनुकूलित करने की आवश्यकता है।

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

हमने मूल्य निर्धारण पैकेज को 50% की चौड़ाई दी है और इसलिए हम डिफ़ॉल्ट लेआउट में एक पैकेज के बजाय दो पैकेज देख पाएंगे।

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

हम इस लेआउट में व्यू फीचर्स सेक्शन नहीं चाहते हैं। तो display:none अनुभाग को छिपाने के लिए plan_more क्लास पर कोई भी उपयोग नहीं किया जाता है।

फिर हमें स्वचालित रूप से प्रदर्शित करने के लिए सुविधाओं की आवश्यकता होती है। पिछले खंड में वर्णित CSS तकनीक का उपयोग करके सभी सुविधाओं को ऑटो ऊंचाई दी जाती है।

तो फिर! हमने विभिन्न स्क्रीन आकारों के साथ विभिन्न उपकरणों के लिए लेआउट डिज़ाइन पूरा कर लिया है। आपके पास ऐसा कुछ होना चाहिए जो इस तरह दिखता है:


<div> vs. <table>

आप यह नोटिस करेगा कि हमने वर्णन सूचियों के साथ एक div- आधारित लेआउट का उपयोग किया है, भले ही हम टैब्यूलर डेटा से निपट रहे हों। इस ट्यूटोरियल के लिए हम आसानी से रेस्पॉन्सिव टेबल डिज़ाइन के साथ चले गए थे, जैसे क्रिस कोयियर this article में प्रदर्शित होते हैं।

निश्चित रूप से, हमें डिज़ाइन को रेस्पॉन्सिव बनाने के बारे में सोचना चाहिए, लेकिन हमें डिज़ाइन में उपयोग किए जाने वाले डेटा के प्रकार पर भी विचार करना चाहिए। आम तौर पर, संबंधित डेटा तालिका पंक्तियों में प्रदर्शित होता है; हमें एक पंक्ति को पढ़कर किसी इकाई के बारे में जानकारी मिलती है। हालांकि, हमारे परिदृश्य में, संबंधित डेटा एक कॉलम के भीतर प्रदर्शित होता है। अगर हम एक टेबल का उपयोग करना चाहते थे तो क्रिस 'रेस्पॉन्सिव तकनीक का उपयोग करके इसे प्रदर्शित करें, हमें नीचे दिखाए गए जैसा लेआउट मिलेगा:

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


लपेटें

इस ट्यूटोरियल के दौरान हमने सभी प्रकार के उपकरणों के अनुरूप एक प्रतिक्रियाशील मूल्य निर्धारण तालिका कैसे बनाई। अपने रेस्पॉन्सिव मूल्य निर्धारण तालिकाओं के साथ पढ़ने और शुभकामनाएं के लिए धन्यवाद!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.