Chrome Dev Summit कुछ हफ़्ते पहले खत्म हो गया था. यहां इस इवेंट की रिपोर्ट की सीरीज़ की पहली रिपोर्ट दी गई है. इस इवेंट में मोबाइल और क्रॉस-डिवाइस डेवलपमेंट पर ज़्यादा ध्यान दिया गया था. इसलिए, हम इस विषय से शुरुआत करेंगे!
पॉल किनलन की ओर से लिखी गई मोबाइल वेब ऐप्लिकेशन के लिए सबसे अच्छे UX पैटर्न
टॉप 1,000 साइटों के मोबाइल-फ़्रेंडली होने के विश्लेषण के बाद, हमें कुछ समस्याएं मिलीं: 53% साइटें अब भी सिर्फ़ डेस्कटॉप पर काम करती हैं, 82% साइटों में मोबाइल डिवाइस पर इंटरैक्टिविटी से जुड़ी समस्याएं हैं, और 64% साइटों पर ऐसा टेक्स्ट है जिसे पढ़ने में लोगों को समस्या होगी.
मोबाइल वेब पर बेहतर अनुभव पाने के लिए, कुछ अहम बातें
- हमेशा व्यूपोर्ट तय करें
- कॉन्टेंट को व्यूपोर्ट में फ़िट करना
- फ़ॉन्ट का साइज़, पढ़ने लायक रखें
- वेब फ़ॉन्ट के इस्तेमाल को सीमित करना
- टैप टारगेट का साइज़ और स्पेस सही तरीके से तय करना
- इनपुट एलिमेंट के लिए सिमेंटिक टाइप का इस्तेमाल करना
PageSpeed Insights ने हाल ही में, आपकी साइट को मोबाइल-फ़्रेंडली बनाने के लिए, यूज़र एक्सपीरियंस (UX) का विश्लेषण करने की सुविधा लॉन्च की है. इससे आपको अपनी साइट के मोबाइल यूज़र एक्सपीरियंस से जुड़ी आम समस्याओं का पता लगाने में मदद मिलेगी. इसे आज़माएं!
स्लाइड: मोबाइल वेब ऐप्लिकेशन के लिए सबसे अच्छे UX पैटर्न
एक से ज़्यादा डिवाइसों पर सुलभता से जुड़ी सुविधाओं के बारे में एलिस बॉक्सहॉल की बात
उपयोगकर्ता कई तरह के डिवाइसों से आपकी साइटों और सेवाओं को ऐक्सेस करेंगे. इन डिवाइसों पर, सुलभता से जुड़ी कई तरह की ज़रूरतें हो सकती हैं. सही सिमेंटिक एलिमेंट और सही ARIA रोल का इस्तेमाल करके, ब्राउज़र और सहायक टेक्नोलॉजी को अपने पेज को बेहतर तरीके से समझने में मदद मिलती है.
Slides: एक से ज़्यादा डिवाइसों पर सुलभता
सुलभता से जुड़ी समस्याओं को समझने और उन्हें हल करने के मुख्य तरीके
- पक्का करें कि उपयोगकर्ता को सिर्फ़ कीबोर्ड से अच्छा अनुभव मिले
- सही एलिमेंट और ARIA की मदद से, अपने इंटरफ़ेस के सेमेटिक्स को एक्सप्रैस करें
- जांच करने के लिए, डेस्कटॉप पर ChromeVox और Android पर TalkBack का इस्तेमाल करें.
- सुलभता के लिए डेवलपर टूल का Chrome एक्सटेंशन आज़माएं
- इंटरनेट का इस्तेमाल करने वाले लोगों की संख्या लगातार बढ़ रही है. ऐसे में, अपनी साइटों को सभी के लिए उपलब्ध कराना ज़रूरी हो गया है
Chrome वेबव्यू का इस्तेमाल करके मोबाइल ऐप्लिकेशन बनाना, मैट गुआंट
हम सभी जानते हैं कि वेबव्यू के लिए डेवलपर को पहले किन समस्याओं का सामना करना पड़ा था: सीमित HTML5 सुविधाएं, डीबगिंग टूल नहीं, और बिल्ड टूल नहीं. Android 4.4 (KitKat) में Chromium के साथ काम करने वाले वेबव्यू की सुविधा लॉन्च होने के बाद, डेवलपर के पास वेबव्यू का इस्तेमाल करके बेहतरीन नेटिव ऐप्लिकेशन बनाने के लिए, कई नए टूल उपलब्ध हैं.
वेबव्यू, Chrome के लिए इस्तेमाल किए जाने वाले टूल की मदद से, रिमोट डीबगिंग की पूरी सुविधा देता है. Grunt की मदद से, अपने भरोसेमंद वेब डेवलपमेंट वर्कफ़्लो का इस्तेमाल किया जा सकता है. साथ ही, Gradle की मदद से, उसे अपने नेटिव स्टैक टूल में इंटिग्रेट किया जा सकता है. JavaScript से अपने नेटिव कोड की जांच करने के लिए, Chrome DevTools का इस्तेमाल करने का एक बेहतर तरीका है.
स्लाइड: Chrome वेबव्यू का इस्तेमाल करके मोबाइल ऐप्लिकेशन बनाना
वेबव्यू डेवलपमेंट से जुड़ी अहम बातें
- नई सुविधाएं ज़रूरी नहीं हैं, बल्कि टूल ही ज़रूरी हैं. इनका इस्तेमाल करके, अब अपने वर्कफ़्लो को तेज़ किया जा सकता है
- नेटिव यूज़र इंटरफ़ेस (यूआई) को एमुलेट करने की कोशिश न करें. हालांकि, यह पक्का करें कि वेब कॉन्टेंट से जुड़ी कुछ जानकारी हटा दी गई हो.
- ज़रूरत पड़ने पर, सुविधाओं के नेटिव तरीके का इस्तेमाल करें. उदाहरण के लिए, बड़ी फ़ाइलों के लिए XHR के बजाय DownloadManager का इस्तेमाल करें.
क्रॉस-डिवाइस वर्ल्ड के लिए अपने वर्कफ़्लो को ऑप्टिमाइज़ करना, मैट गौंट
अगर हमें डेस्कटॉप, मोबाइल, टैबलेट, पहने जाने वाले डिवाइसों, और अन्य फ़ॉर्म फ़ैक्टर के लिए डेवलप करना है, तो अपने वर्कफ़्लो को ऑप्टिमाइज़ कैसे किया जा सकता है, ताकि आपका काम आसानी से हो जाए? LiveReload, Grunt, Yeoman, और हाल ही में लॉन्च किए गए Mini Mobile Device Lab की मदद से, कई डिवाइसों पर तुरंत बदलाव किए जा सकते हैं. आखिर में, अगर आपके पास वह हार्डवेयर नहीं है जिसकी आपको जांच करनी है, तो कुछ कंपनियां उसे क्लाउड के ज़रिए उपलब्ध कराती हैं.
स्लाइड: क्रॉस-डिवाइस वर्ल्ड के लिए अपने वर्कफ़्लो को ऑप्टिमाइज़ करना
खास बातें
- आने वाले समय में, हमें ज़्यादा डिवाइसों के लिए काम करना होगा
- Grunt और Yeoman की मदद से, अपने वर्कफ़्लो को सही तरीके से सेट अप करना
- Mini Mobile Device Lab की मदद से, अलग-अलग ब्राउज़र और डिवाइसों पर टेस्टिंग को आसान बनाएं
- एम्युलेटर चुनते समय, Chrome DevTools एम्युलेटर, स्टॉक एम्युलेटर, Saucelabs, Browserstack, और appexperience जैसे क्लाउड-आधारित एम्युलेटर, और तीसरे पक्ष के एम्युलेटर Genymotion का इस्तेमाल करें
- मोबाइल टेस्टिंग का मतलब सिर्फ़ वाई-फ़ाई कनेक्शन पर टेस्टिंग करने से ज़्यादा है. नेटवर्क की धीमी स्पीड का अनुकरण करने के लिए, प्रॉक्सी का इस्तेमाल करें
नेटवर्क कनेक्टिविटी: जेक आर्किबाल्ड के मुताबिक, यह ज़रूरी नहीं
इस बातचीत से हमें कई बातें पता चलीं: प्रज़ेंटेशन के दौरान, जैक जूते नहीं पहनते; Business Kinlan की नई किताब जल्द ही रिलीज़ होने वाली है; ब्राउज़र वेंडर, ऑफ़लाइन सुविधा को गंभीरता से ले रहे हैं. साथ ही, जल्द ही आपके पास ऐसे टूल होंगे जिनसे आपको ऑफ़लाइन होने पर भी बेहतर अनुभव मिल सकेगा.
ServiceWorker की मदद से, हमें आसानी से ऑफ़लाइन काम करने वाले ऐप्लिकेशन बनाने में मदद मिलेगी. साथ ही, हमें AppCache से जुड़ी समस्याओं का सामना नहीं करना पड़ेगा. पॉलीफ़िल का इस्तेमाल करके, एपीआई के साथ प्रयोग भी किया जा सकता है.
स्लाइड: नेटवर्क कनेक्टिविटी: ज़रूरी नहीं
ServiceWorker की मदद से
- प्रगतिशील बेहतर बनाने की सुविधा के अगले वर्शन में, हम नेटवर्क को बेहतर बनाने की संभावित सुविधा के तौर पर देखते हैं
- ServiceWorker की मदद से, नेटवर्क अनुरोधों को पूरी तरह से कंट्रोल किया जा सकता है. साथ ही, उन्हें स्क्रिप्ट किया जा सकता है और डीबग किया जा सकता है
- अगर आपके पास ऑफ़लाइन अनुभव है, तो उसे दिखाने से पहले नेटवर्क के बंद होने का इंतज़ार न करें. ऐसा करने में काफ़ी समय लग सकता है