बेहतर उपयोगिता के लिए मोबाइल वेब डिजाइन 10 युक्तियाँ

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

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

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

1. स्क्रीन रिज़ॉल्यूशन पर निर्णय लें

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

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

2. छोटे भागों में वेब पेजों को तोड़ना

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

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

सीबीएस न्यूज

पेड़ पकड़ने वाला

3. डिजाइन को सरल बनाएं

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

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

सर्वश्रेष्ठ खरीद

यूट्यूब

4. पूरी वेबसाइट देखने का विकल्प

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

एक उदाहरण के रूप में, Ars Technica के हेडिंग पर रखी मानक वेबसाइट पर उनका लिंक बटन है। जबकि शांगरी-ला के पास फुलर पर अपनी पूरी वेबसाइट लिंक है.

आर्स टेक्नीका

शांग्री - ला

5. नेविगेशन प्लेसमेंट

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

डी एंड जी

राजनीतिक चालबाज़ी करनेवाला मनुष्य

दैनिक भविष्यफल

6. टेक्स्ट लिंक का उपयोग करें

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

एक सूची के अलावा

रेडिट

7. चयनित लिंक के बीच अंतर करें

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

अव्यवस्थित दस्ते

डीज़ल

8. शेष लिंक

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

फ़्लिकर

ट्विटर

9. उपयोगकर्ता पाठ प्रविष्टि को कम करें

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

नीचे हमारे नमूने के लिए, Fedex ने चेकलिस्ट और ड्रॉप डाउन मेनू का उपयोग किया। जबकि Tumblr ने आपको ड्रॉप डाउन मेनू का उपयोग करके अपनी भाषा का चयन किया.

Fedex

Tumblr

10. कोई चबूतरे या जलपान नहीं

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

संक्षेप में

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

क्या आपके पास कोई पसंदीदा मोबाइल साइट है जो वास्तव में आपको प्रेरित करती है? क्या आप अपने मोबाइल वेब डिज़ाइन के कुछ टिप्स साझा कर सकते हैं? हमें बताऐ!

आगे की पढाई

1. प्रतिक्रियात्मक वेब डिज़ाइन (Alistapart.com)
2. अपनी साइट को मोबाइल फ्रेंडली बनाएं (Thinkvitamin.com)
3. W3C mobileOK परीक्षक (W3.org)
4. iPhone सिम्युलेटर