जब उत्तरदायी डिजाइन गलत हो जाता है (और इसे कैसे ठीक करें)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8। उत्तरदायी छवियों का उपयोग करना सबसे अच्छा है

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

हेडर इमेज सौजन्य से

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।