उत्तरदायी हेडर और लोगो - युक्तियाँ और नुकसान

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

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

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

पतली नवबंर

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

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

उदाहरण के लिए एक पूर्ण आकार के मॉनीटर और एक मोबाइल डिवाइस पर कार्टून काढ़ा लेआउट लें.

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

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

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

नेवबार के प्रत्येक लिंक में टेक्स्ट लिंक से संबंधित एक आइकन है। यह एक वाइडस्क्रीन मॉनिटर पर बहुत अच्छा लगता है, लेकिन यह छोटे स्क्रीन के लिए बहुत विस्तृत है.

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

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

प्रतीक चिह्न लोगो

अधिकांश लोगो ब्रांड का प्रतिनिधित्व करने के लिए कुछ पाठ और एक आइकन या ग्राफिक शामिल करते हैं। इसका मतलब आप हमेशा कर सकते हैं iconify (हाँ यह एक वास्तविक शब्द है) इस तरह के लोगो एक प्रतीक के नीचे इसके पूर्ण संस्करण के.

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

वेब डिज़ाइनर समाचार के लिए लोगो को देखें और देखें कि ब्राउज़र बदलते ही यह कैसे बदल जाता है.

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

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

इस संघनित लोगो तकनीक के लिए आपको हमेशा ग्राफिक्स पर निर्भर रहने की आवश्यकता नहीं है। यंग एंड हंग्री का हेडर लोगो के लिए चमकीले हरे रंग के टेक्स्ट का उपयोग करता है जो अंततः "Y & H" टेक्स्ट के लिए होता है।.

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

फुलस्क्रीन पृष्ठभूमि को संभालना

कई लैंडिंग पृष्ठ अधिक ध्यान खींचने के लिए पूर्ण स्क्रीन पृष्ठभूमि का उपयोग करते हैं। यह एक शक्तिशाली तकनीक है, लेकिन अक्सर बड़े मॉनिटर पर सबसे अच्छा काम करता है.

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

Cap Radio Raffle अपने होम पेज पर इस तकनीक का उपयोग करता है। पृष्ठभूमि छवि केंद्र बिंदु को ध्यान में रखता है हर समय, चाहे स्क्रीन कितनी भी आकार की हो.

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

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

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

नेविगेशन को सरल बनाएं

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

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

कई लोग हैमबर्गर मेनू के खिलाफ तर्क देते हैं लेकिन मैं इसे लंबे नौसेना मेनू के लिए एक आवश्यक वस्तु के रूप में स्वीकार करता हूं। यह बस काम करता है, और "मेनू बटन" के रूप में अधिकांश स्मार्टफोन उपयोगकर्ताओं द्वारा व्यापक रूप से समझा जाता है.

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

CyberChimps के लिए नेविगेशन संरचना पृष्ठ के शीर्ष पर नीचे स्लाइड करने के लिए फिर से व्यवस्थित हो जाती है। मेनू ऊपर से गिरता है लिंक के लिए बड़े ब्लॉक तत्व.

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

अपना खुद का बनाओ

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

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

• एक बेसिक मोबाइल CSS उत्तरदायी नेविगेशन मेनू बनाएँ (Teamtreehouse.com)
• उत्तरदायी वेबसाइट हैडर के लिए सर्वश्रेष्ठ अभ्यास (Ux.stackexchange.com)
• मैं अपनी हेडर छवि को कैसे उत्तरदायी बना सकता हूं? (Stackoverflow.com)