साइट का मोबाइल संस्करण: कैसे करें? अनुकूली डिजाइन

इंटरनेट

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

इसलिए, मोबाइल संस्करण के लिए साइट को अनुकूलित करने के चार मुख्य तरीके हैं।

साइट के मोबाइल संस्करण को कैसे बनाना है

विधि एक - उत्तरदायी डिजाइन।

अनुकूली पैटर्न परिवर्तन का सुझाव देते हैंस्क्रीन के आकार के आधार पर साइट की तस्वीरें। एक नियम के रूप में, वे मानक 1600, 1500, 1280, 1100, 1024 और 980 पिक्सल पर सेट हैं। कार्यान्वयन के लिए CSS3 मीडिया क्वेरी का उपयोग किया जाता है। साइट का डिज़ाइन स्वयं नहीं बदलता है।

इस विधि के फायदों में शामिल हैं:

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

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

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

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

वेबसाइट डिजाइन

विधि दो - साइट का एक अलग संस्करण

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

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

लेकिन यहां कुछ कमीएं आईं:

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

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

उत्तरदायी पैटर्न

तीसरा तरीका - आरएसएस डिजाइन

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

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

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

गूगल मोबाइल साइट

मोबाइल साइट बनाने का सबसे सस्ता तरीका

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

के लिए विशेष टेम्पलेट्स (प्लगइन्स) डाउनलोड करेंउत्तरदायी डिजाइन। उदाहरण के लिए, डब्ल्यूपी मोबाइल डिटेक्टर, वर्डप्रेस मोबाइल पैक, डब्ल्यूपीएसएमर्ट मोबाइल और अन्य। वे फोन में साइट को सही ढंग से प्रदर्शित करने में मदद करेंगे, और आपको मोबाइल संस्करण में पेज को बेहतर तरीके से अनुकूलित करने के लिए क्या किया जाना चाहिए, इस पर कई सुझाव प्राप्त होंगे।

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

इस विधि के साथ, विज्ञापन और पॉप-अप बैनर अधिकतर कट ऑफ हो जाएंगे, लेकिन पृष्ठ जल्दी से लोड हो जाएगा और बिना "लेटे"।

साइट एंड्रॉइड के मोबाइल संस्करण

मोबाइल संस्करण बनाने के सिद्धांत

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

कंप्यूटर से साइट का मोबाइल संस्करण

हम सभी अनावश्यक हटा देते हैं

Minimalism - के लिए क्या प्रयास करना चाहिएसाइट के मोबाइल संस्करण के डेवलपर। कल्पना करें कि रंग, बटन, बैनर के साथ भरने वाली जानकारी को समझना कितना मुश्किल है, और जिसे सही सामग्री की तलाश में अंतहीन रूप से स्क्रॉल करना पड़ता है। मोबाइल डिजाइन सरल और साफ होना चाहिए। अंतरिक्ष को विभाजित करने के लिए 2-3 रंग चुनें (उदाहरण के लिए, ब्रांडेड)। यह बेहतर है अगर उनमें से एक सफेद है। छोटी स्क्रीन के स्थान को स्पष्ट और पठनीय क्षेत्रों में विभाजित करें। वर्चुअल कुंजी दिखाई देनी चाहिए, ताकि उपयोगकर्ता स्पष्ट रूप से जानता है कि कहां क्लिक करना है, और देखा - यहां उत्पाद है, यहां डेटा भरने का फॉर्म है, यहां वितरण और भुगतान की जानकारी दी गई है।

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

संरेखण

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

संघ

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

और डिस्कनेक्शन

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

सूचियों

वैसे, सूचियों के बारे में। उनमें से दो हैं - वर्णानुक्रम या अन्य क्रम में और प्रतिस्थापन के साथ तय। उनकी पसंद इस बात पर निर्भर करती है कि क्या सूचीबद्ध किया जाएगा।

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

स्वत: पूर्ण

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

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

सब कुछ पढ़ा जाता है, सब कुछ देखा जाता है

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

कुछ आंकड़े

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

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

इन नंबरों के बारे में सोचो। क्या यह आपके संसाधन को अनुकूलित करने के लिए समझ में आता है? बेशक, हाँ। इसके अलावा, जब तक इस बाजार में इतनी खाली जगह है, तब तक आप अपने स्वयं के सेगमेंट पर कब्जा कर सकते हैं।

मुफ्त में मोबाइल साइट

मोबाइल संस्करण कहां है?

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

मोबाइल संस्करण के बिना मौजूद नहीं हो सकता है:

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

समापन के बजाय

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

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

यह दृष्टिकोण न केवल मौजूदा ग्राहकों की वफादारी को बनाए रखने में मदद करेगा बल्कि नए आगंतुकों को आकर्षित करने का अवसर भी प्रदान करेगा।