एक मोबाइल पहले कैसे रखें, प्रदर्शन उन्मुख वर्डप्रेस थीम [भाग 1]

एक मोबाइल पहले कैसे रखें, प्रदर्शन उन्मुख वर्डप्रेस थीम [भाग 1]

एक मोबाइल पहले कैसे रखें, प्रदर्शन उन्मुख वर्डप्रेस थीम [भाग 1]
СОДЕРЖАНИЕ
02 июня 2020

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


तथापि। भले ही यह सरल है, यह आसान से बहुत दूर है, और खासकर यदि आप चाहते हैं कि आपका विषय मोबाइल-अनुकूलित हो.

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

यह दो-भाग वाला गाइड आपको 10 चरणों में प्रक्रिया से गुजरेगा, सबसे महत्वपूर्ण चीजों को सूचीबद्ध करते हुए, मोबाइल बनाते समय सबसे पहले, प्रदर्शन पर केंद्रित वर्डप्रेस थीम.

भाग 2 के लिए, यहाँ देखें: मोबाइल सबसे पहले कैसे रखें, प्रदर्शन उन्मुख वर्डप्रेस थीम [भाग 2]

1. सामग्री पहले आती है

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

भले ही आधुनिक उपकरण 1136 × 640 पिक्सेल (iPhone 5s) तक ग्राफिक्स प्रदर्शित करने में सक्षम हों, लेकिन यह न भूलें कि स्क्रीन अभी भी केवल चार इंच के पार है। यह काम करने के लिए बहुत सारी अचल संपत्ति नहीं है.

करने लायक चीजें:

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

2. छवियों का अनुकूलन

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

विशिष्ट चीजें जो आप कर सकते हैं:

  • आलसी लोड कार्यक्षमता को एकीकृत करने पर विचार करें। अपने आप में, आलसी लोडिंग महान है (केवल छवियों को लोड करना जब आगंतुक उन्हें स्क्रॉल करता है)। लेकिन समस्या यह है कि अंतिम उपयोगकर्ता स्वयं अंतिम साइट पर कुछ आलसी लोड प्लगइन्स स्थापित करने का अंत कर सकते हैं। इससे आप जो भी पहले से ही विषय में एकीकृत हैं, उसमें हस्तक्षेप कर सकते हैं। यदि आप जोखिम उठाना चाहते हैं, हालांकि, jQuery और इसके समाधान जैसे कार्य के माध्यम से कार्यक्षमता को संभव बनाना सबसे अच्छा होगा आलसी लोड प्लगइन. वर्डप्रेस प्लगइन्स इस लाइब्रेरी का भी उपयोग करते हैं, इसलिए जब आप दो अलग-अलग स्क्रिप्टों को एक ही परिणाम प्राप्त करने की कोशिश कर रहे हैं, तो आप गलत होने की संभावना को कम कर रहे हैं। इसके अलावा, अपनी थीम की सेटिंग में आलसी लोड को निष्क्रिय करना संभव बनाएं.
  • आकार और गुणवत्ता के लिए छवियों का अनुकूलन करें। छवियाँ आमतौर पर औसत साइट के लिए बैंडविड्थ की खपत के बहुमत के लिए होती हैं, इसलिए थीम निर्माता के रूप में, आपको यह सुनिश्चित करने की आवश्यकता है कि आपकी छवियां यथासंभव अनुकूलित हैं। ऐसा करने के लिए आप दो काम कर सकते हैं: (1) सुनिश्चित करें कि चित्र आयाम में बड़े नहीं हैं जितना कि उन्हें होना चाहिए (# 3 देखें) – यहां एक अतिरिक्त पिक्सेल और बहुत जल्दी जोड़ सकते हैं, (2) अनुकूलन एक उपकरण के माध्यम से सभी छवियों की तरह Optimole या TinyPNG जनता को थीम जारी करने से पहले.
  • जब भी संभव हो आइकन फोंट का उपयोग करें। किसी भी डिज़ाइन में आइकन सहित पुराने स्कूल को केवल फ़ोटोशॉप में उन्हें बनाना था, सब कुछ पीएनजी या जीआईएफ में बदलना और इसे रोल आउट करना था। आजकल हालांकि, यह समाधानों का सबसे अधिक अनुकूलित नहीं है। जैसे टूल के साथ बहुत बढ़िया, हम अपने डिजाइनों को खूबसूरती से तैयार किए गए सैकड़ों फोंट के साथ समृद्ध कर सकते हैं, जबकि एक ही समय में प्रदर्शन को बहुत सभ्य रखते हैं.

3. डिजाइन रेटिना-तैयार (उच्च-डीपीआई स्क्रीन के लिए अनुकूलित) करें

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

दो मुख्य शॉर्टकट हैं जिन्हें आप उच्च-डीपीआई अनुकूलन में ले जा सकते हैं:

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

अंत में, आपको अपने विषय में फ़ेविकॉन का भी ध्यान रखना चाहिए (और संभवतः उपयोगकर्ता को उन्हें बदलने की अनुमति भी देनी चाहिए, लेकिन यह एक और बात है).

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

कुछ फ़ेविकॉन आकार वाले आईओएस को खोजने की उम्मीद है: 76 × 76, 120 × 120, 152 × 152। यहाँ एक है Apple.com पर पूरी सूची.

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

4. दोहन के लिए ऑप्टिमाइज़ करें

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

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

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

5. विषय को उत्तरदायी बनाना यह सब मायने नहीं रखता है

आइए इस गाइड के पहले भाग को सबसे आम गलती के साथ समाप्त करें जिसे लोग मोबाइल के लिए थीम डिजाइन करते समय करते हैं। गलती उत्तरदायी डिजाइनों को अंतिम गेम के रूप में मान रही है.

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector