मोबाइल ब्राउज़र के लिए वेब पेजों को डिजाइन करने के लिए टिप्स?

Question

मैं विशेष रूप से मोबाइल ब्राउज़र पर लक्षित एक वेब ऐप डिज़ाइन करने में अपनी शुरुआत कर रहा हूं। जबकि मैंने सी #/एएसपी.नेट में पहले वेब पेज लिखे हैं, मैंने कभी भी सीमित स्क्रीन रीयल एस्टेट और मोबाइल ब्राउज़र के अन्य idiosyncrasies के लिए कुछ भी नहीं किया है। तो मैं यहां कुछ पॉइंटर्स ढूंढ रहा हूं:

• मुझे किस डिजाइन विचारों का ध्यान रखना चाहिए (स्पष्ट रूप से छोटी स्क्रीन से अलग)?
• सी # में कौन सी उपयोगी विशेषताएं हैं जो मोबाइल क्लाइंट के लिए अच्छा प्रभाव डाल सकती हैं?
• आप कैसे विभिन्न मोबाइल ब्राउज़र के लिए अपेक्षाकृत समान उपयोगकर्ता अनुभव देना सुनिश्चित करते हैं?
• आपके पास कोई अन्य सुझाव है?

धन्यवाद!

Answer 1

क्या डिजाइन संबंधी मैं ( स्पष्ट रूप से छोटे स्क्रीन को छोड़ कर) के खाते में ले रही है होना चाहिए?

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

डिज़ाइन के अभिविन्यास के बारे में सोचें, यदि डिवाइस परिदृश्य और क्षैतिज देखने का समर्थन करता है।

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

यूआई अप खट्टा प्रभाव का उपयोग कर रहे हैं, तो सबसे मोबाइल उपकरणों बहुत अच्छी तरह से (जैसे jQuery द्वारा प्रदान होते हैं) को प्रभाव प्रदर्शित नहीं करते ...

अंत में परीक्षण, परीक्षण, परीक्षण! आपके द्वारा किए जा सकने वाले कई वास्तविक मोबाइल उपकरणों पर परीक्षण करें, और जब आप पूर्ण किए जाते हैं तो अनुकरणकर्ताओं (जैसे BlackBerrys या iPhone के लिए) का उपयोग करने पर विचार करें, जबकि यह आपको डिवाइस का उपयोग करने का अनुभव प्रदान नहीं करेगा, इसे किसी भी प्रतिपादन को दिखाना चाहिए समस्या का।

Answer 2

शायद स्पष्ट है लेकिन सुनिश्चित करें कि आप एक bespoke हैंडहेल्ड स्टाइलशीट को परिभाषित करते हैं।

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" /> 

आधुनिक स्मार्टफोन (जैसे iPhone) जबकि सामान्य साइटों निरंतर ज़ूम इन और आउट बेहतर एक समर्पित मोबाइल एप्लिकेशन के लिए बचा जाता है संभाल कर सकते हैं। हालांकि, उपयोगकर्ता लैपटॉप/डेस्कटॉप का उपयोग करके ऐप तक पहुंचने के लिए दो संस्करणों को डिजाइन करने लायक है।

Answer 3

एक अच्छा मोबाइल डिवाइस अनुभव बनाना ज्यादातर यूआई के बारे में है, न कि बैक एंड एप्लिकेशन।

• एक मोबाइल डिवाइस शैली पत्रक का उपयोग करें (media="handheld"link तत्व पर विशेषता)
• संभव के रूप में कुछ HTTP-अनुरोध है: एक एकल फाइल में
  • कम्प्रेस सभी स्क्रिप्ट और स्टाइलशीट (के लिए एक .js, एक के लिए।सीएसएस, कि है)
  • के रूप में संभव
• मन में स्पर्श उपकरणों और गैर-टच डिवाइस के बीच मतभेद बटन के आकार रखें (कुछ चित्र के रूप में, उदाहरण के लिए)
• सामग्री की मात्रा से सावधान रहें आप एक पेज में फिट बैठते हैं।

Answer 4

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

एक निश्चित करोड़ *** ed.com, कारणों की एक जोड़ी के लिए अनुकूलित जो अविश्वसनीय रूप से क्रुद्ध करनेवाला ....

Answer 5

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

Answer 6

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