उत्तरदायी मीडिया क्वेरी डिज़ाइन

वेबमास्टर स्तर: मध्यम / उच्च

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

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

1. किसी भी रिज़ॉल्यूशन के साथ स्क्रीन पर पृष्ठों का स्पष्ट प्रदर्शन;
2. किसी भी उपकरण पर सामग्री के एक समूह को देखने की क्षमता;
3. खिड़की के आकार की परवाह किए बिना कोई क्षैतिज स्क्रॉल बार नहीं।

सामग्री, नेविगेशन और छवि स्केल के स्थान को बदल देता है - Chromebook

कार्यान्वयन

आरंभ करने के लिए, सामग्री का शब्दार्थ मार्कअप यदि आवश्यक हो तो पृष्ठों के पुन: लेआउट को सरल करता है। स्टाइलशीट का उपयोग करके, हमने एक रबर लेआउट बनाया। यह हमारे लक्ष्य की ओर पहला कदम है। कंटेनरों के लिए width विशेषता के बजाय, हमने max-width निर्दिष्ट करना शुरू कर दिया। height विशेषता को min-height विशेषता के साथ बदल दिया गया है ताकि बड़े फ़ॉन्ट या बहु-पंक्ति पाठ कंटेनर की सीमाओं का उल्लंघन न करें। रबड़ कॉलम को तोड़ने से निश्चित-चौड़ाई वाली छवियों को रोकने के लिए, निम्नलिखित सीएसएस नियम लागू होता है:

 img { max-width: 100%; } 

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

देखने के क्षेत्र

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

ब्राउज़र को अधिक पढ़ने योग्य मोड में बदलने के लिए, आपको व्यूपोर्ट मेटा तत्व का उपयोग करना होगा:

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

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

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

 @media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ } 

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

 @media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ } 

सामग्री की व्यवस्था और छवियों के पैमाने - संस्कृति संस्थान

मीडिया क्वेरी उदाहरण

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

विशिष्ट स्क्रीन रिज़ॉल्यूशन पर ध्यान केंद्रित करने के बजाय, हमने नियंत्रण बिंदुओं की एक अपेक्षाकृत विस्तृत श्रृंखला निर्धारित की है। यदि स्क्रीन रिज़ॉल्यूशन 1024 पिक्सेल से अधिक है, तो पृष्ठ 12 कॉलम की ग्रिड पर अपने मूल रूप में प्रदर्शित होता है। यदि यह 801 और 1024 पिक्सेल के बीच है, तो पृष्ठ का थोड़ा संकुचित संस्करण रबर लेआउट के लिए प्रदर्शित होता है।

केवल 800 पिक्सेल से कम स्क्रीन रिज़ॉल्यूशन वाले गैर-कोर सामग्री को पृष्ठ के नीचे प्रदर्शित किया जाएगा:

 @media screen and (max-width: 800px) { /* specific CSS */ } 

स्मार्टफ़ोन के लिए नवीनतम मीडिया क्वेरी है:

 @media screen and (max-width: 479px) { /* specific CSS */ } 

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

इन सरल चालों ने विभिन्न प्रकार के उपकरणों को देखने के लिए साइट को अनुकूलित करना संभव बना दिया।

सामग्री का स्थान बदलना, एक बड़ी छवि को हटाना - Google के बारे में

निष्कर्ष

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

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

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

Google पर उत्तरदायी वेब डिज़ाइन के अन्य उदाहरण:

• www.google.ru/about/?hl=ru
• www.google.ru/goodtoknow/
• www.google.com/culturalinstitute
• www.google.com/intl/ru/chrome/devices
• picasa.google.com

लेखक: रूपर्ट ब्रेनेनी , एडवर्ड जंग , मैट ज़्यूरर , Google वेबमास्टर टीम।