मोबाइल स्क्रीन परिचय, टिप्स और उदाहरणों के लिए उत्तरदायी वेब लेआउट

यह लेख हमारा हिस्सा है "वेब उत्तरदायी डिज़ाइन श्रृंखला" - सभी प्लेटफार्मों के उपयोगकर्ताओं के लिए वेबसाइट बनाने में आपकी सहायता करने के लिए टूल, संसाधन और ट्यूटोरियल शामिल हैं. यहां क्लिक करे एक ही श्रृंखला से अधिक लेख देखने के लिए.

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

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

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

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

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

मोबाइल के लिए डिज़ाइन क्यों?

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

जब आप विशिष्ट स्क्रीन रिज़ॉल्यूशन के लिए कोडिंग शुरू करते हैं, तो आप बहुत से स्टाइलशीट से निपटने के लिए समाप्त हो जाते हैं। CSS3 में मीडिया प्रश्नों का उपयोग चित्र और परिदृश्य दृश्य दोनों के लिए iPhone-विशिष्ट लेआउट बनाने के लिए किया जा सकता है। चूंकि आप पिक्सेल घनत्व को पूर्व निर्धारित कर सकते हैं, इसलिए मोबाइल के लिए किसी भी HTML टेम्पलेट को फिर से बनाना आसान है.

(छवि स्रोत: bradfrostweb)

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

आपको अपनी वेबसाइट को हर ब्राउज़र पर चलने वाले हर एक डिवाइस पर 100% काम करने की संभावना नहीं होगी। लेकिन आप स्क्रीन की औसत चौड़ाई के आधार पर बहुमत को लक्षित कर सकते हैं। पुराने iPhone मॉडल 320 × 480 डिस्प्ले रिज़ॉल्यूशन का उपयोग करते हैं जो इतना अविश्वसनीय नहीं है। अगर आप इसे फिट कर सकते हैं तो मैं न्यूनतम चौड़ाई 240px या इससे भी कम समय के लिए शूट करूंगा.

डिफ़ॉल्ट ज़ूम को निकालना

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

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

इस के रूप में जाना जाता है viewport मेटा टैग जो सामग्री के भीतर कुछ कस्टम चर सेट करता है। Apple के पास कुछ अन्य मेटा टैग्स के बारे में एक प्रलेखन पृष्ठ है, जिस पर आपको गौर करना चाहिए, हालाँकि ये विशेष रूप से iOS पर वेबसाइटों की ओर तैयार हैं। प्रारंभिक-पैमाना मान महत्वपूर्ण है क्योंकि यह आपकी वेबसाइट को पूर्ण 100% ज़ूम में डिफॉल्ट करता है.

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

गतिशील छवि स्केलिंग

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

img अधिकतम-चौड़ाई: 100%;

CSS के लिए मानक नियम सभी छवियों के लिए अधिकतम-चौड़ाई की संपत्ति को लागू करना है। चूंकि वे हमेशा 100% पर सेट होंगे, आप कभी भी विकृतियों को नोटिस नहीं करेंगे। जब उपयोगकर्ता आपकी छवि से छोटी अपनी ब्राउज़र विंडो को फिर से आकार देता है, तो यह स्वचालित रूप से 100% चौड़ाई को फिर से समायोजित कर देगा। समस्या यह है कि इंटरनेट एक्सप्लोरर इस संपत्ति को समझ नहीं सकता है, इसलिए आपको आईई-विशिष्ट स्टाइलशीट का उपयोग करने के लिए एक साथ रखना होगा चौड़ाई: 100%;.

यदि आप जावास्क्रिप्ट या jQuery प्लग इन का उपयोग करते हैं तो लचीले चित्र भी संभव हैं। वहाँ वास्तव में कुछ स्मार्ट डेवलपर्स हैं जिन्होंने अविश्वसनीय संवेदनशील छवि सामग्री के निर्माण के लिए समय दिया है। यह धागा स्टैक ओवरफ्लो में कई में से एक है जो IE6 / 7 बग को हल करने के लिए अभी तक एक सुविधाजनक दृष्टिकोण प्रदान करता है.

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

टचिंग डिज़ाइन्स

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

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

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

कस्टम सीएसएस लेआउट

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

(इमेज सोर्स: पेपरसन)

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

अतिरिक्त सामग्री चालू / बंद करें

बड़े कंटेंट ब्लॉक के उदाहरणों में वेब फॉर्म, डायनेमिक मेनू, इमेज स्लाइडर्स और इसी तरह के अन्य विचार शामिल हैं। इन तत्वों को पूरी तरह से हटाने के बजाय क्योंकि लेआउट छोटा हो जाता है, बस उन्हें एक में क्यों नहीं छिपाएं “कम से कम” सामग्री div? संपादन करने के लिए आप या तो CSS या JavaScript का उपयोग कर सकते हैं, लेकिन अंततः आपको टॉगल बटन बनाने के लिए कुछ JS कोड की आवश्यकता होगी.

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

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

मीडिया क्वेरी का उपयोग करना

यदि एक मोबाइल स्क्रीन आपके 2 या 3-कॉलम लेआउट को तोड़ देगी, तो आप एक-दूसरे के ऊपर खड़ी सामग्री क्षेत्रों में से प्रत्येक के साथ समाप्त हो जाएंगे। पूरी साइट पर खून बहता दिखाई देगा और प्रतिष्ठित ब्लॉक क्षेत्रों के बिना बहुत भ्रमित हो सकता है। एक बेहतर विचार प्रत्येक स्तंभ पर नीचे की सीमा को जोड़ना है, केवल मोबाइल उपकरणों के लिए, जैसे बाहरी स्टाइलशीट का उपयोग करना mobile.css.

इन नई शैलियों के साथ आपकी सामग्री को विभाज्य खंडों में विभाजित किया गया है। ऊपर मीडिया विशेषता विशेष रूप से परिदृश्य दृश्य में पुराने iPhone उपकरणों को लक्षित करने के लिए डिज़ाइन की गई है। लेकिन यह 480 पिक्सल से छोटे स्क्रीन वाले डिवाइस पर भी लागू होगा। अपने लाभ के लिए इसका उपयोग करें ताकि आप यह निर्धारित कर सकें कि लेआउट किस बिंदु पर है “टुकड़े टुकड़े हो जाना”.

डिवाइस ओरिएंटेशन का पता लगाने के लिए कुछ और विकल्प हैं जिनका आप उपयोग कर सकते हैं। CSS मीडिया पर यह शानदार गाइड आपको कुछ विचार दे सकता है। इसके अतिरिक्त नई मोबाइल परियोजना 320 और ऊपर मोबाइल सीएसएस के लिए एक बॉयलरप्लेट प्रदान करता है @media शैलियों। ये सीधे एक ही mobile.css फ़ाइल में शामिल किए जा सकते हैं और कई अलग-अलग उपकरणों के लिए नियम लागू कर सकते हैं.

 / * स्मार्टफ़ोन (चित्र और परिदृश्य) ----------- * / @मीडिया केवल स्क्रीन और (न्यूनतम-डिवाइस-चौड़ाई: 320px) और (अधिकतम-डिवाइस-चौड़ाई: 480px) / * शैलियाँ * / / * स्मार्टफ़ोन (परिदृश्य) ----------- * / @मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई: 321px) / * शैलियाँ * / / * स्मार्टफ़ोन (चित्र) ---- ------- * / @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई: 320px) / * शैलियाँ * / / * iPads (चित्र और परिदृश्य) ----------- * / @ मीडिया केवल स्क्रीन और (न्यूनतम-डिवाइस-चौड़ाई: 768px) और (अधिकतम-डिवाइस-चौड़ाई: 1024px) / * स्टेंसिल *

(स्रोत: हार्डबेड्ड CSS3 मीडिया क्वेरी)

सहायक उपकरण

कंकाल - उत्तरदायी मोबाइल डिजाइन के लिए सुंदर बॉयलरप्लेट
अनुकूली से पूरी तरह उत्तरदायी जा रहे हैं

शोकेस: सुंदर उत्तरदायी डिजाइन

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

चाँद को लटकाना