उत्तरदायी वेब डिज़ाइन प्रश्न

Question

मैं उत्तरदायी वेब डिज़ाइन (आरडब्ल्यूडी) पर पढ़ रहा हूं और इस अवधारणा के आस-पास अपने दिमाग को लपेटने की कोशिश कर रहा हूं।

क्या उत्तरदायी वेब डिज़ाइन वास्तव में जिस तरह से हमें मोबाइल विकास के लिए जाना चाहिए? मुझे 1 साइट रखने का विचार पसंद है जो डेस्कटॉप, लैपटॉप, टैबलेट और मोबाइल फोन जैसे कई अलग-अलग उपकरणों पर काम करना चाहिए।

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

आरडब्ल्यूडी सस्ता फोन कैसे संभालता है? फ़ोन जो वास्तव में स्मार्ट फोन नहीं हैं? क्या होता है यदि कोई फोन आरडब्ल्यूडी को संभाल नहीं सकता है, तो क्या?

मोबाइल फोन पर प्रदर्शित होने के लिए 20 कॉलम के साथ आप अपना डेटा ग्रिड कैसे प्राप्त करते हैं जिसमें विस्तृत स्क्रीन नहीं है? और पेजिंग?

यह इस तरह की चीजें है कि मुझे नहीं पता कि आरडब्ल्यूडी मेरे लिए है या नहीं? मुझे बस फोन की स्क्रीन के बोर्डर्स में सामग्री प्राप्त करने के लिए सबकुछ खराब करने की बजाय साफ-सुथरा साइट पसंद है।

ट्विटर बूटस्ट्रैप के अलावा, किसी भी अन्य सभ्य आरडब्ल्यूडी ढांचे पर विचार करने के लिए? मैंने कुछ सभ्य ढांचे के बारे में सुना है।

Answer 1

यह वास्तव में एक बड़ा सवाल है। संक्षेप में यह आमतौर पर इस प्रकार काम करता है:

1. सभी सामग्री और सुविधाओं के साथ मोबाइल साइट बनाएं।
2. सामग्री को पुन: स्वरूपित करने के लिए मीडिया प्रश्न/जावास्क्रिप्ट का उपयोग करें क्योंकि यह व्यापक हो जाता है, या तो तरल पदार्थ या ब्रेकपॉइंट्स या दोनों के साथ।
3. किसी भी सुविधाओं है कि अपने डेस्कटॉप संस्करण पर ही कर रहे हैं जोड़े (आदर्श कोई नहीं होगा)

आप अतिरिक्त सामग्री आदि लोड करने के लिए ajax का उपयोग कर सकते आमतौर पर आप एक ही सामग्री होने होगी हालांकि अगर जरूरत (आपके आगंतुकों का 30-40% क्यों उनसे छिपी हुई चीजें चाहते हैं?)

आप आमतौर पर स्मार्ट फ़ोन पर ध्यान केंद्रित कर रहे हैं, पुराने फोन नहीं जिनके पास आधुनिक वेब ब्राउज़र नहीं हैं।

विनिर्देशों के लिए, उदा। 20 कॉलम के साथ ग्रिड, यह मुश्किल है।

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

पेजिंग आमतौर पर एक अनंत स्क्रॉल के रूप में किया जाता है - उदा। ऐप्पल का मेल ऐप

जहां तक ​​ढांचे चलते हैं, वहां कोई भी ऐसा नहीं है जो आपके लिए सब कुछ हल करेगा। ज़र्ब फाउंडेशन और बूटस्ट्रैप का ग्रिड पहलू उपयोगी है, लेकिन यह सब कुछ सुस्त रूप से काम नहीं करेगा।

Answer 2

वैसे यह एक तकनीक और सर्वोत्तम अभ्यास का संग्रह है, फिर कुछ ऐसा जो आपके लिए सक्रिय रूप से कुछ करता है।

उत्तरदायी (वेब) डिज़ाइन बनाना मतलब है आगंतुक/उपयोगकर्ता किसी भी डिवाइस का उपयोग करने के लिए सबसे अच्छा अनुभव का उपयोग करने का मतलब है।

लेकिन स्क्रीन आकार और इनपुट डिवाइस के संयोजन के साथ आपको अपनी सामग्री (वेबपृष्ठ, वेबपैप, ऐप) कैसे डिज़ाइन करना है ताकि आपके पास सबसे अच्छा अनुभव अनुभव हो, जो आपको अपने विशेष उपयोग केस के लिए समझने की आवश्यकता है।

तकनीकें हैं कि आप कैसे पता लगा सकते हैं कि आपके उपयोगकर्ता के लिए कौन से तत्व महत्वपूर्ण हैं और आपको उन्हें कैसे प्रदर्शित करना चाहिए, लेकिन कोई सामान्य नियम नहीं है जिस पर तत्वों को उस स्थान पर होना चाहिए। (हमेशा नियम हैं जो सत्य हैं, लेकिन समय के साथ स्वाद और परिवर्तन का कुछ मामला भी है)

तो प्रतिक्रिया डिजाइन कैसे करें? सबसे पहले आपको यह पता लगाना होगा कि आपकी सामग्री के कौन से तत्व महत्वपूर्ण हैं और यदि इन तत्वों का महत्व उपयोग मामले से अलग है (क्या आपने कभी सोचा है कि डेस्कटॉप उपयोगकर्ता शायद उसी पृष्ठ/ऐप से अन्य सूचनाओं की अपेक्षा कर रहा है फिर एक मोबाइल उपयोगकर्ता)

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

और वहां हमारे पास पहले से ही एक और समस्या है। स्टाइलस के साथ उपयोग की जाने वाली टेबल के बारे में क्या है? टचस्क्रीन वाले लैपटॉप के बारे में क्या? उन्हें कैसे ध्यान में रखा जाए? यह कुछ भी है जो आपके ऊपर है, क्योंकि समय के साथ उपकरणों का उपयोग किया जाता है।

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

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

Answer 3

सस्ता फोन "संभाल" करने के लिए स्मार्ट नहीं फोन, आप @media handheld and (orientation: portrait) { ... } का उपयोग कर सकते हैं यदि स्मार्टफोन, जो "हैंडहेल्ड" हैं, वे "हैंडहेल्ड" की जांच करने पर सच हो जाएंगे लेकिन वे नहीं करते हैं। तो यदि आप पुराने हैंडहेल्ड उपकरणों के लिए अनुकूलित करना चाहते हैं, तो आप मीडिया को संभाले जा सकते हैं।

यह भी ध्यान दें कि @media screen and ... या ऐसी कोई क्वेरी पुराने, गैर-स्मार्ट-फ़ोन को लक्षित नहीं करेगी क्योंकि वे "मीडिया स्क्रीन" नहीं हैं।

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

Answer 4

बूटस्ट्रैप में आपका उत्तरदायी वेब डिज़ाइन (आरडब्ल्यूडी) समाधान। यदि आप अपनी वेबसाइट में 20 ग्रिड सिस्टम चाहते हैं, तो आप इस लिंक का उपयोग कर कस्टमाइज़ बूटस्ट्रैप सीएसएस का उपयोग कर सकते हैं: http://getbootstrap.com/customize/। इस तरह आप साइट को मोबाइल व्यू में कनवर्ट करते हैं। मेरे बिंदु के अनुसार यह आपकी समस्या को हल करने का सबसे अच्छा तरीका है।