पुनरावर्ती वेब डिज़ाइन: क्या यह प्रत्येक डिवाइस पर समान मात्रा में डेटा डाउनलोड करता है?


11

मैं अपने ब्लॉग और वेबसाइट को कभी भी बढ़ते मोबाइल उपयोगकर्ताओं और टैबलेट उपयोगकर्ताओं को समायोजित करने के लिए वर्डप्रेस पर नया स्वरूप देना चाहता हूं।

मैं उत्तरदायी डिजाइन के बारे में भी सुन रहा हूं। मैं जानना चाहता हूं कि क्या एक उत्तरदायी वेब डिज़ाइन कंप्यूटर स्क्रीन पर समान डेटा डाउनलोड करता है और साथ ही एक मोबाइल डिवाइस भी?

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

जवाबों:


8

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

इस मॉडल में, आप ग्राहक को सटीक एचटीएमएल भेजते हैं चाहे स्क्रीन छोटी हो या बड़ी। हालांकि, अगर संसाधनों (छवियों मुख्य रूप से) सीएसएस में संदर्भित कुछ स्क्रीन संकल्प के लिए प्रदर्शित नहीं होते हैं, वे कर सकते हैं डाउनलोड नहीं किया जा। उदाहरण के लिए, बड़ी स्क्रीन के लिए आप high-res.pngअपने सीएसएस में और छोटी स्क्रीन के लिए उपयोग कर सकते हैं low-res.png- वेब क्लाइंट केवल सक्रिय शैली में छवि डाउनलोड करने के लिए चुन सकता है। (कम से कम एक महत्वपूर्ण ग्राहक के लिए @ DBUK की टिप्पणी देखें, जो वर्तमान में दोनों को डाउनलोड करता है! उम्मीद है कि क्लाइंट स्मार्ट हो जाएंगे!)

यह तकनीक आपके मामले में समझ में आ सकती है, या एक अलग मोबाइल साइट बनाने के लिए अधिक समझ में आ सकती है।

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

मोबाइल उपकरणों में धीमे प्रोसेसर, कम मेमोरी और धीमी कनेक्शन दर (उन सभी "सत्य" हर साल कम सच हो जाते हैं, btw होते हैं) - आप प्रदर्शन कारणों से कड़ाई से एक अलग मोबाइल साइट भेजना चाह सकते हैं।

मैं उद्यम करता हूँ, सामान्य रूप से, अधिक स्थैतिक, पाठ्य सामग्री और साइट संचालित सामग्री (यानी एक ब्लॉग), बेहतर मौका वहाँ मौजूदा HTML और उत्तरदायी डिजाइन का उपयोग होता है। अधिक इंटरएक्टिव, मल्टी-मीडिया और उपयोगकर्ता द्वारा संचालित साइट (यानी एक स्टोर), बेहतर मौका आपको विभिन्न प्रकार के उपयोगकर्ताओं के लिए अलग-अलग साइटों को सिलाई करना चाहिए।

इसके अलावा, यह मत भूलो कि इस दिन और उम्र में, यह भी सवाल है कि मोबाइल का अनुभव साइट या ऐप होना चाहिए या नहीं ।


मुझे लगता है, कष्टप्रद, चित्र अभी भी डाउनलोड किए जाएंगे। Cloudfour द्वारा परीक्षण एक उदाहरण है - cloudfour.com/examples/mediaqueries/image-test
DBUK

@DBUK सुधार के लिए धन्यवाद - मैं इस पोस्ट के पिछले संपादनों में "बनाम डाउनलोड नहीं कर सकता" को "डाउनलोड नहीं करेगा" बताते हुए इंतजार कर रहा था। अधिक सटीक होने के लिए मेरा उत्तर अपडेट किया गया।
पीटोरिपेटर

यह मेरे लिए नया है तो यकीन है कि अगर यह केवल iPhone है। वेब पर कुछ भी सरल क्यों नहीं है :(
DBUK

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

तो इस समस्या के चारों ओर एक मोबाइल पहला दृष्टिकोण मिलेगा, जैसे सबसे कम रिज़ॉल्यूशन के लिए डिफ़ॉल्ट शैली और सभी बड़े डेस्कटॉप के लिए मीडिया प्रश्नों का उपयोग करना?
DBUK

1

उत्तरदायी डिज़ाइन को प्रत्येक डिवाइस पर समान मात्रा में डेटा डाउनलोड नहीं करना चाहिए क्योंकि सभी डिवाइसों में समान मल्टीमीडिया आवश्यकताएं नहीं होती हैं। मोबाइल साइटों को डेस्कटॉप और लैपटॉप / टैबलेट के लिए साइटों की तुलना में लो-रेस छवियों का उपयोग करना चाहिए और प्रकृति में कम चित्रमय होना चाहिए। और यदि आप अपने मोबाइल और नियमित साइटों को संयोजित करना चाहते हैं, तो आपको इसे ध्यान में रखना होगा, अन्यथा आपकी साइट बहुत उत्तरदायी नहीं है, क्या यह है?

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


1

मुझे लगता है कि बहुत सी कंपनियों को अपनी साइटों को अपडेट करने में लंबा समय लगेगा, नरक, तालिकाओं का उपयोग करते हुए अभी भी कुछ हैं। उत्तरदायी, और मोबाइल पहला दृष्टिकोण, निश्चित रूप से पल के buzzwords हैं।

जैसा कि ऊपर पोस्टर में उल्लेख किया गया है, आपको अपने मोबाइल फोन / कम रिज़ॉल्यूशन वाले उपकरणों के लिए लो-रेस छवियों का उपयोग करना चाहिए। मीडिया के प्रश्न आपको सभी निम्न संकल्पों को लक्षित करने में मदद करेंगे। हालांकि, मैंने सुना है कि मोबाइल सफारी डिस्प्ले को नजरअंदाज करेगा: कोई भी नियम और छवियों के डेस्कटॉप संस्करणों को भी डाउनलोड नहीं करेगा। इसके अलावा, यदि आप उत्तरदायी छवि मार्ग पर जाते हैं, तो यह मोबाइल प्रोसेसर पर बहुत दबाव डालता है - प्रति 1pixel 3bytes ... मुझे लगता है। अतिरिक्त सामग्री डाउनलोड होने के आस-पास बहुत सारे समाधान हैं - कुछ काफी हैक - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbddoN21YZ29WRVdlckE&hl=en_US#gid=0

उत्तरदायी वेब डिज़ाइन के डाउनसाइड पर कुछ जानकारी के लिए http://www.webdesignshock.com/responsive-design-problems/ देखें । हालांकि उस ब्लॉग पोस्ट को बंद मत करो। एक पुस्तक के अलावा इस विषय पर एक शानदार पुस्तक लिखी गई - http://www.abookapart.com/products/responsive-web-design । यह निश्चित रूप से ई-बुक संस्करण को हथियाने के लायक है।


क्या आप 1kb स्टेटमेंट प्रति 3kb पर विस्तृत कर सकते हैं? मैं यह नहीं देखता कि कैसे जावास्क्रिप्ट का उपयोग करके एक पूर्ण छवि प्राप्त की जाए, यदि स्क्रीन रिज़ॉल्यूशन 480px से अधिक है तो इसका प्रभाव होगा। इसके अलावा, आपको display: noneमोबाइल उपयोगकर्ताओं से छवियों को छिपाने के लिए कभी भी उपयोग नहीं करना चाहिए । यह सिर्फ बुरा अभ्यास है।
लेजे मेजेस्टे

"कुछ नेटवर्क ऑपरेटर, उदाहरण के लिए, छवियों को संपीड़ित करने से पहले वे मोबाइल डिवाइस पर हवा में चले जाते हैं" - w3.org/TR/mobile-bp इसका मतलब यह होगा कि मोबाइल को 3bytes की कीमत पर उन्हें (?) को अनसुना करना होगा? प्रति पिक्सेल (@ 24 बिट आरजीबी जैसे जेपीजी)? उफ़ मैं ऊपर kb डाल, लानत है। यह विशुद्ध रूप से एक सीएसएस दृष्टिकोण से है, जिसमें मोबाइल सभी छवियों को डाउनलोड कर रहा है। मोबाइल और डेस्कटॉप, और जावास्क्रिप्ट समाधानों को ध्यान में नहीं रखा गया है।
DBUK
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.