फिक्सिंग के लिए एक व्यापक गाइड Responsive 2023 में डिजाइन मुद्दे

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

इसकी अवधारणा responsive डिजाइन सरल है, लेकिन इसकी बहुत ही सरलता लोगों को इतनी आसानी से गलतियाँ करने के लिए प्रेरित करती है। वर्षों के अनुभव वाले डिजाइनर के लिए डिजाइन करने के आदी हो गए हैं desktop, और इसलिए वे आम तौर पर a . के आधार पर एक डिज़ाइन की योजना बनाएंगे desktop लेआउट।

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

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

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

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

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

1. "मोबाइल फर्स्ट" नैतिक है

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

सबसे अच्छा तरीका शारीरिक रूप से कम से कम तीन (और 11 तक) विभिन्न लेआउट डिजाइन करना है। जिन न्यूनतम लोगों पर आप विचार कर सकते हैं उनमें शामिल हैं:

• Desktop
• लैंडस्केप मोबाइल
• पोर्ट्रेट मोबाइल

यदि आप थोड़ा और संपूर्ण बनना चाहते हैं, तो आपको इस पर भी विचार करना चाहिए:

• लैंडस्केप टैबलेट
• पोर्ट्रेट टैबलेट

और पूरी सूची, यदि आप पूरी तरह से पूर्ण होना चाहते हैं:

• विशाल Desktop
• साधारण Desktop
• बड़ी लैंडस्केप गोली
• बड़ी पोर्ट्रेट टैबलेट
• छोटी लैंडस्केप गोली
• छोटा पोर्ट्रेट टैबलेट
• बड़े लैंडस्केप मोबाइल
• बड़े पोर्ट्रेट मोबाइल
• छोटा लैंडस्केप मोबाइल
• छोटा पोर्ट्रेट मोबाइल
• छोटे / पहनने योग्य

इतनी सारी संभावनाओं के साथ, यह स्पष्ट है कि एक आलसी "एक आकार-फिट-सभी" दृष्टिकोण इतना आकर्षक क्यों है, लेकिन यह भी स्पष्ट है कि इसे बर्बाद करने के कई तरीके क्यों हैं।

2। उस फैलाव पृष्ठ पाद लेख आया

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

3। अस्पष्ट उपकरणों पर कुछ मामूली झगड़े स्वीकार करें

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

4। आप ऐसी सामग्री छिपा सकते हैं जो कोर संदेश में योगदान नहीं करती है

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

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

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

5। आप वैकल्पिक पृष्ठभूमि का उपयोग कर सकते हैं

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

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

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

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

6। मैन्युअल रूप से पतन क्रम को नियंत्रित करें (या सामग्री के भीतर स्थानिक संदर्भों से बचें)

यह एक जटिल समस्या है। किसी साइट का पतन क्रम उस क्रम पर निर्भर करता है जिसमें divs स्टैक्ड होते हैं। आपको अपने divs को सही क्रम में स्टैक करने की आवश्यकता है ताकि वे सही क्रम में ढल जाएं।

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

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

7। आपको अलग-अलग लेआउट के लिए अलग-अलग फ़ॉन्ट आकार की आवश्यकता हो सकती है

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

8. इसका उपयोग करना सबसे अच्छा है responsive छवियों

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

हेडर इमेज सौजन्य से आर्टुर मार्टिनोव्स्की