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