मज़बूत बुनियाद
बेहतर PWA बनाने के लिए, एक मज़बूत फ़ाउंडेशन होना ज़रूरी है. इस फ़ाउंडेशन को लागू करने के लिए, आपको वेब की सीमाओं के हिसाब से डिज़ाइन और कोड बनाना होगा. इसके लिए, इन सिद्धांतों का इस्तेमाल करें:
- फ़ोकस करने की समस्या के तौर पर मोबाइल का इस्तेमाल करें. पक्का करें कि आपके डिज़ाइन के हर व्यू में सिर्फ़ ज़रूरी कॉन्टेंट और इंटरैक्शन पर फ़ोकस किया गया हो.
- डिज़ाइन की प्रोसेस में कॉन्टेंट और मुख्य फ़ंक्शन पर ज़ोर दें.
- ज़रूरत पड़ने पर, धीरे-धीरे बेहतर बनाएं. सबसे आसान और ज़्यादातर उपलब्ध टूल का इस्तेमाल करके, कॉम्पोनेंट का मुख्य कॉन्टेंट और फ़ंक्शन बनाएं. इसे आसानी से ऐक्सेस करने लायक बनाएं. इसके बाद, उन बेहतर सुविधाओं को टेस्ट करें जिनका आपको इस्तेमाल करना है और उनसे अपने कॉम्पोनेंट को बेहतर बनाएं.
- उपयोगकर्ता के हिसाब से वेब की परफ़ॉर्मेंस की मेट्रिक पर फ़ोकस करके, तेज़ और अच्छा उपयोगकर्ता अनुभव दें. साथ ही, असल उपयोगकर्ता की मेट्रिक पाएं और अपने सभी उपयोगकर्ताओं के लिए परफ़ॉर्मेंस को बेहतर बनाएं. भले ही, उनके नेटवर्क कनेक्शन, इनपुट टाइप, सीपीयू या जीपीयू की क्षमता कुछ भी हो.
इन सिद्धांतों का पालन करके और मॉडर्न पैटर्न और वेब सुविधाओं को बेहतर बनाकर, असल में स्वाभाविक डिज़ाइन की मदद से, बेहतरीन और तेज़ अनुभव तैयार किया जा सकता है. ऐसे डिज़ाइन जो पिक्सल के बजाय, सीमाओं के हिसाब से काम करते हैं. इनकी मदद से, हर उपयोगकर्ता आपके कॉन्टेंट और मुख्य फ़ंक्शन को उसी तरह ऐक्सेस कर सकता है जो उसके ब्राउज़िंग कॉन्टेक्स्ट के हिसाब से सबसे सही हो.
प्रतिक्रियाशील वेब डिज़ाइन
ईथन मार्कोट के साल 2010 में 'अ लिस्ट अपार्ट' लेख, रिस्पॉन्सिव वेब डिज़ाइन, डिज़ाइनर, और डेवलपर को ऐसे अनुभव देने के लिए बढ़ावा दिया गया जो ऐसे यूज़र इंटरफ़ेस बनाते हैं जो स्क्रीन के साइज़ और डिवाइस की सभी रेंज में काम करते हैं.
हालांकि, समय के साथ इसे मोबाइल, टैबलेट, और डेस्कटॉप साइज़ में छोटा कर दिया गया. साथ ही, इन साइज़ की चौड़ाई पर iOS स्क्रीन साइज़ का काफ़ी असर पड़ा. आधुनिक सीएसएस और रिस्पॉन्सिव डिज़ाइन के मूल मकसद पर फिर से ध्यान देने से, हम स्क्श्वी साइटों को फिर से स्क्श्वी बना सकते हैं.
रिस्पॉन्सिव वेब डिज़ाइन में तीन तकनीकी चीज़ें शामिल हैं:
- फ़्लूइड ग्रिड
- फ़्लेक्सिबल मीडिया
- मीडिया क्वेरी
एथन का मानना है कि ये तकनीकी ज़रूरतें काफ़ी नहीं हैं. आगे की कार्रवाई के लिए, अलग तरीके से सोचने की ज़रूरत है.
मोबाइल उपयोगकर्ता का मिथक
रिस्पॉन्सिव डिज़ाइन के शुरुआती दिनों में, साइटों को आसानी से डिज़ाइन करने के नाम पर कई अनुमान लगाए गए थे. उदाहरण के लिए, फ़ोन के मामले में छोटे अनुभव, 320 पिक्सल चौड़ाई वाले, सामान्य अनुभव, टैबलेट के लिए थे. साथ ही, उनकी चौड़ाई 1024 पिक्सल थी और डेस्कटॉप के मामले में इससे ज़्यादा बड़ा था. छोटी स्क्रीन पर टच की सुविधाएं थीं, लेकिन बड़ी स्क्रीन पर नहीं. फ़ोन का इस्तेमाल करने वाले लोग जल्दी में होते हैं और उनका ध्यान भटकता रहता है. इसलिए, उन्हें "कम बैटरी खर्च करने वाला" अनुभव चाहिए.
इनमें से कोई भी बात सही नहीं है. ये मोबाइल के बारे में गलत धारणाएं हैं. इन धारणाओं के पीछे यह मानना है कि उपयोगकर्ता की ज़रूरतें, स्क्रीन साइज़ या डिवाइस के टाइप के आधार पर अलग-अलग होती हैं. यह जांच के दौरान सही नहीं पाया गया.
उदाहरण के लिए, सोशल नेटवर्क का कोई PWA, जिसे आज ही मोबाइल और डेस्कटॉप पर इंस्टॉल किया जा सकता है. डेस्कटॉप पर, कई उपयोगकर्ता काम करते समय स्क्रीन के एक तरफ़ फ़ीड के साथ एक छोटी विंडो रख सकते हैं. ऐसे में, उपलब्ध चौड़ाई की वजह से यह मान लेना कि वे मोबाइल डिवाइस का इस्तेमाल कर रहे हैं, गलत होगा.
अब ब्राउज़र का टैब बंद है और पीडब्ल्यूए में अलग-अलग तरह की चुनौतियों का सामना करना पड़ रहा है. जैसे, मिनी-मोड और फ़ोल्ड किए जा सकने वाले डिवाइसों पर काम करना.
मिनी मोड
डेस्कटॉप डिवाइस पर PWA इंस्टॉल होने पर, विंडो असल में छोटी हो सकती है, लेकिन ब्राउज़र की विंडो से छोटी हो सकती है, लेकिन मोबाइल व्यूपोर्ट से छोटी हो सकती है. यह वेब पर एक नई सुविधा है: हम मिनी-मोड की सुविधा दे सकते हैं. यह एक ऐसी विंडो है जो 200x100 सीएसएस पिक्सल तक छोटी हो सकती है.
इन दिनों PWA बनाते समय, इस बात का ध्यान रखना चाहिए कि मिनी-मोड में क्या ऑफ़र किया जाए. इसके लिए, रिस्पॉन्सिव वेब डिज़ाइन का इस्तेमाल किया जा सकता है. जैसे, म्यूज़िक प्लेयर के सिर्फ़ कंट्रोल बटन, डैशबोर्ड की जानकारी या क्विक ऐक्शन.
डेस्कटॉप पर, किसी PWA को उससे भी छोटी विंडो में रेंडर किया जा सकता है जो आपने ब्राउज़र के लिए डिज़ाइन की है. यह आपके रिस्पॉन्सिव वेब डिज़ाइन के लिए, एक नया ब्रेकपॉइंट जोड़ता है: मिनी-मोड.
फ़ोल्ड किए जा सकने वाले और हाइब्रिड डिवाइस
फ़ोल्ड किए जा सकने वाले और हाइब्रिड डिवाइस भी इन दिनों आम हैं:
- छोटे क्लैमशेल फ़ोन.
- फ़ोल्ड किए जा सकने वाले ऐसे डिवाइस जिनका इस्तेमाल फ़ोन या टैबलेट के तौर पर किया जा सकता है.
- ऐसे लैपटॉप जिन्हें टैबलेट में बदला जा सकता है.
- ऐसे टैबलेट जो कीबोर्ड और ट्रैकपैड के साथ लैपटॉप की तरह काम कर सकते हैं.
- इसके बाद, हब की मदद से फ़ोन को डेस्कटॉप में बदला जा सकता है.
हर वेबसाइट के लिए यह समस्या होती है. हालांकि, प्रोग्रेसिव वेब ऐप्लिकेशन की मदद से, ऐप्लिकेशन इंस्टॉल होने के दौरान विंडो को कंट्रोल किया जा सकता है और उसकी ज़िम्मेदारी ली जा सकती है. इसलिए, आपका डिज़ाइन इस बात पर आधारित होना चाहिए कि हर कॉन्टेक्स्ट में आपको बेहतरीन अनुभव मिले.
सब कुछ पहले
लेकिन आपको कहां से शुरू करना चाहिए? मोबाइल फ़र्स्ट, कॉन्टेंट फ़र्स्ट, ऑफ़लाइन फ़र्स्ट? वेब के लिए डिज़ाइन करते समय, कौनसा फ़ॉर्मैट इस्तेमाल करना चाहिए? इसका जवाब है, हां, सबसे पहले. mobile first शब्द की उसी समय से कई तरह से व्याख्या की गई है जब से ल्यूक व्रोब्लेस्की ने इसे पहली बार 2009 में बनाया था: वेब पर प्लैटफ़ॉर्म-विशिष्ट यूआई और UX पैटर्न की नकल करने से लेकर, वेब ऐप्लिकेशन बनाने से पहले मोबाइल ऐप्लिकेशन बनाने से लेकर, कम से कम चौड़ाई वाली मीडिया क्वेरी का इस्तेमाल करने और इसे एक दिन के रूप में इस्तेमाल करने तक. हालांकि, इसका मूल मकसद यह है: मोबाइल आपको फ़ोकस करने के लिए मजबूर करता है. जैसा कि लूक ने कहा:
मोबाइल डिवाइसों के लिए, सॉफ़्टवेयर डेवलपमेंट टीमों को ऐप्लिकेशन में सिर्फ़ सबसे ज़रूरी डेटा और कार्रवाइयों पर फ़ोकस करना होता है. 320 x 480 पिक्सल की स्क्रीन में, ग़ैर-ज़रूरी एलिमेंट के लिए जगह नहीं होती. आपको प्राथमिकता तय करनी होगी. इसलिए, जब कोई टीम मोबाइल फ़र्स्ट डिज़ाइन करती है, तो नतीजा ऐसा अनुभव होता है जो उन मुख्य टास्क पर फ़ोकस करता है जिन्हें उपयोगकर्ता पूरा करना चाहते हैं. इसमें, डेस्कटॉप से ऐक्सेस की जाने वाली आज की वेबसाइटों में मौजूद, ग़ैर-ज़रूरी लिंक और इंटरफ़ेस के ग़ैर-ज़रूरी कॉम्पोनेंट नहीं होते. इससे उपयोगकर्ताओं को अच्छा अनुभव मिलता है और कारोबार को भी फ़ायदा होता है.
ल्यूक व्रोब्लेव्स्की
अपनी वेबसाइट के हर व्यू को सिर्फ़ उन ज़रूरी कामों पर फ़ोकस करें जो कोई उपयोगकर्ता वहां पूरा करना चाहता है. इस आइडिया में और कॉन्टेंट सिर्फ़ इसलिए न जोड़ें कि उनके पास स्क्रीन पर ज़्यादा रीयल एस्टेट है.
दूसरे सिद्धांत के बारे में रिस्पॉन्सिव वेब डिज़ाइन में बताया गया है: "अलग-अलग अनुभवों का ग्रेडिएंट." आपका लक्ष्य यह नहीं होना चाहिए कि हर उपयोगकर्ता को एक जैसा और पिक्सल-परफ़ेक्ट अनुभव मिले. ऐसा करना मुमकिन नहीं है.
अपने वेब अनुभवों को किसी तय चीज़ के तौर पर देखने के बजाय, इसे सुझावों का एक सेट मानें. इसका इस्तेमाल उपयोगकर्ता का डिवाइस, अपने मौजूदा संदर्भ के हिसाब से सबसे अच्छा अनुभव देने के लिए करेगा. ऐसा करने के लिए, प्रगतिशील बेहतर बनाने की सुविधा को अपनाना होगा.
प्रोग्रेसिव एन्हैंसमेंट
प्रोग्रेसिव इंहांसमेंट एक पैटर्न है. इसकी मदद से, ऐसा कोड लिखा जा सकता है जो हर जगह काम करता है. यह कोड, स्टैंडर्ड एचटीएमएल, सीएसएस, और JavaScript से शुरू होता है. साथ ही, एपीआई उपलब्ध न होने पर, उस पर सही फ़ॉलबैक के साथ सुविधाओं की लेयर जोड़ता है.
इसे बेहतर कैसे बनाया जा सकता है? सुविधा की पहचान करने का पैटर्न एक ऐसा तरीका है जिसमें किसी सुविधा के काम करने की जांच की जाती है और जांच के नतीजों के आधार पर कार्रवाई की जाती है. ऐसा करने के लिए, वेब प्लैटफ़ॉर्म में पहले से मौजूद कई टूल और तरीके इस्तेमाल किए जा सकते हैं.
@supports का इस्तेमाल करके, देखें कि ब्राउज़र पर सीएसएस की किसी सुविधा का इस्तेमाल किया जा सकता है या नहीं. साथ ही, नतीजे के आधार पर नियम लागू करें.
यह सीएसएस प्रॉपर्टी और वैल्यू, दोनों पर लागू होता है. अगर किसी प्रॉपर्टी का इस्तेमाल किया जा सकता है और वैल्यू नहीं डाली जा सकती, तो उस प्रॉपर्टी की तरह ही काम करने वाली प्रॉपर्टी भी काम नहीं करेगी. JavaScript कोड, CSSSupportsRule की मदद से इसे ऐक्सेस कर सकता है.
वेब प्लैटफ़ॉर्म की ज़्यादातर नई सुविधाएं, मौजूदा ऑब्जेक्ट से जुड़ी होती हैं. इसलिए, ऑब्जेक्ट स्टाइल का पता लगाने में 'सुविधा', JavaScript में अच्छी तरह से काम करती है. इसी तरह, एलिमेंट पर प्रॉपर्टी या तरीकों की जांच करने जैसी अन्य लुकअप भी अच्छी तरह से काम करेंगी.
मॉडर्न JavaScript को शिप करने के लिए, module/nomodule पैटर्न का इस्तेमाल किया जा सकता है. इससे, ज़्यादा मॉडर्न ब्राउज़र को छोटे पेलोड के साथ ज़्यादा बेहतर सुविधाएं दी जा सकती हैं. साथ ही, पुराने ब्राउज़र के लिए फ़ॉलबैक अनुभव भी दिया जा सकता है. इससे, ES मॉड्यूल के साथ काम करने वाले ब्राउज़र के लिए, JavaScript की नई सुविधाओं का नया बेसलाइन मिलता है. जैसे, प्रॉमिस, क्लास, ऐरो फ़ंक्शन, और const और let.
बेहतर बेसलाइन बनाने के लिए, कई तरह की सुविधाओं का पता लगाने की सुविधा का इस्तेमाल भी किया जा सकता है. बीबीसी न्यूज़ टीम ने इसे 'बेहतर अनुभव देना' नाम दिया है. इससे, सभी को बुनियादी सुविधाएं दी जा सकती हैं. साथ ही, किसी खास सुविधा के लिए तय किए गए थ्रेशोल्ड तक पहुंचने के बाद ही, उस सुविधा को बेहतर बनाया जा सकता है.
डिवाइस की पहचान से बचना
आपको User-Agent स्ट्रिंग के आधार पर, सहायता से जुड़ी अनुमान लगाने के बजाय, सीधे तौर पर सुविधा के साथ काम करने की जांच करनी चाहिए.
उपयोगकर्ता-एजेंट स्ट्रिंग कभी भी पूरी तरह से भरोसेमंद नहीं रही हैं. "सही अनुमान लगाने" के लिए, ये एल्गोरिदम हर ब्राउज़र, ऑपरेटिंग सिस्टम, और डिवाइस के कॉम्बिनेशन के बारे में काफ़ी जानकारी रखते हैं. इसके बावजूद, उपयोगकर्ताओं को धोखाधड़ी का शिकार बनाया जा सकता है. उदाहरण के लिए, मोबाइल ब्राउज़र पर डेस्कटॉप साइट के रीडायरेक्ट, डेस्कटॉप उपयोगकर्ता-एजेंट स्ट्रिंग को धोखाधड़ी के मकसद से इस्तेमाल करने जितना ही आसान होते हैं.
इसके अलावा, ब्राउज़र अपनी उपयोगकर्ता-एजेंट स्ट्रिंग को फ़्रीज़ करने के लिए काम कर रहे हैं. सुविधा की पहचान के लिए उपयोगकर्ता-एजेंट स्ट्रिंग को खास तौर पर बंद करने की वजह बताई गई है. इसकी वजह से अब किसी उपयोगकर्ता और डिवाइस की पहचान करने के मुकाबले, इन पर पहले के मुकाबले ज़्यादा भरोसा किया जा सकता है.
कॉन्टेंट को प्राथमिकता देना
वेब के लिए डिज़ाइन करने का एक और सिद्धांत यह है: अपने कॉन्टेंट से शुरू करें. उदाहरण के लिए, रीयल-टाइम स्टॉक टिकर, स्टॉक की कीमतों के ग्राफ़ के साथ, स्टॉक की टेबल होती है. इसमें किसी समयावधि के दौरान स्टॉक की कीमत की जानकारी होती है. साथ ही, इसमें साइट को रीफ़्रेश करने का लिंक भी हो सकता है.
इसके बाद, इसे JavaScript और फ़ेच अनुरोधों के साथ बेहतर बनाया जा सकता है, ताकि टाइमर पर टेबल की वैल्यू अपडेट की जा सकें. इसके अलावा, रीयल-टाइम में पुश-आधारित अपडेट देने के लिए, इसे सॉकेट के साथ बेहतर बनाया जा सकता है. नतीजों को ग्राफ़ में दिखाने के लिए, इसे फिर से बेहतर बनाया जा सकता है. ऐसा सीएसएस, एसवीजी या कैनवस की मदद से किया जा सकता है. हालांकि, कॉन्टेंट से ही मुख्य बात शुरू होती है.
इंट्रिंसिक डिज़ाइन
- उपयोगकर्ता अनुभव को सीमित करने के लिए मोबाइल.
- डिज़ाइन की प्रक्रिया में कॉन्टेंट और मुख्य फ़ंक्शन पर ज़ोर देना.
- जहां उपलब्ध हो वहां बेहतर सुविधाओं के साथ लगातार बेहतर हो रहा है.
इन सिद्धांतों के साथ मिलकर, हमें एक नई चीज़ मिलती है: मूल डिज़ाइन. इंटिग्रिथ लेआउट डिज़ाइन करना शीर्षक वाले अपने टॉक में, जेन सिमंस ने यूज़र इंटरफ़ेस डिज़ाइन और बनाने के लिए, CSS के आधुनिक टूल इस्तेमाल करने के बारे में बताया है. इन टूल में, ग्रिड, फ़्लेक्सबॉक्स, फ़्लो लेआउट, और लिखने के मोड शामिल हैं. इन टूल की मदद से, वे ये काम कर सकती हैं:
आपके पास हमारे कॉन्टेंट और डिज़ाइन के हिसाब से लेआउट बनाने का विकल्प है.
जेन सिमंस
इस नई सीएसएस की मदद से, डिज़ाइनर लेआउट पर कुछ कंट्रोल वापस पा सकते हैं. हालांकि, ऐसा वेब डिज़ाइन के नए सिद्धांतों के मुताबिक करते हैं. स्क्रीन के तय साइज़ के आधार पर तय किए गए फ़ॉर्म बनाने के बजाय, कॉन्टेंट के लिए नियम तय किए जा सकते हैं. इसके लिए, कॉन्टेंट की इंटिग्रिटी प्रॉपर्टी (जैसे कि कॉन्टेंट कितना छोटा या बड़ा हो सकता है, टेक्स्ट का साइज़, और उपलब्ध जगह वगैरह) पर एक साथ टैप करके लेआउट बनाया जाता है. इनकी मदद से, अपने डिज़ाइन को बेहतर बनाया जा सकता है. ऐसा इसलिए, क्योंकि ये आपके कॉन्टेंट के साथ इंटरैक्ट करते हैं. इसके लिए, आपको हर पिक्सल की जगह को कंट्रोल करने की ज़रूरत नहीं होती.
इंट्रिन्सिक लेआउट, वेब पर कंट्रोल के बारे में बातचीत को पूरा करते हैं और उसे परिभाषित करते हैं. वेब पर कंट्रोल का मतलब यह नहीं है कि आपकी साइट पर आने वाले हर व्यक्ति के लिए, डिवाइसों या स्क्रीन के साइज़ या रंगों या फ़ॉन्ट या लेआउट या सुविधाओं को तय किया जाए. वेब पर कंट्रोल करने का मतलब है, ऐसे नियम लिखना जिनका इस्तेमाल ब्राउज़र आपके अनुभव को बेहतर बनाने के लिए करेगा. साथ ही, आपके प्रगतिशील वेब ऐप्लिकेशन में हर उपयोगकर्ता के लिए, इसे यूनीक तरीके से बनाएगा.
वेब परफ़ॉर्मेंस
हमारे PWA के लिए, वेब परफ़ॉर्मेंस सबसे अहम है. उपयोगकर्ताओं को बेहतर अनुभव देना ज़रूरी है. इससे हर तरह से ज़्यादा कन्वर्ज़न मिलेंगे.
वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, ये काम करने होंगे:
- उपयोगकर्ता पर आधारित मुख्य मेट्रिक को समझें.
- हर मेट्रिक के लिए लक्ष्य सेट करें.
- हमारे PWA का आकलन करें.
- अपने कोड या सर्वर में तकनीक और सबसे सही तरीकों को स्टैटिक तौर पर लागू करके, अपनी मेट्रिक को बेहतर बनाना.
- फिर से मेज़र करें.
- उपयोगकर्ता के संदर्भ के आधार पर, हर उपयोगकर्ता के अनुभव को लाइव तौर पर बेहतर बनाएं.
वेब परफ़ॉर्मेंस मेट्रिक से यह रिकॉर्ड किया जाता है कि स्क्रीन पर आपका कॉन्टेंट कितनी तेज़ी से दिखता है. साथ ही, यह यह भी मेज़र करता है कि आपकी वेबसाइट कितनी इंटरैक्टिव है और उपयोगकर्ता उस अनुभव को कैसे देखते हैं.
Core Web Vitals
पिछले एक दशक से, हम वेब परफ़ॉर्मेंस को मेज़र करने के लिए अलग-अलग मेट्रिक का इस्तेमाल कर रहे हैं. फ़िलहाल, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के तौर पर सुझाई गई मेट्रिक का सेट, परफ़ॉर्मेंस और उपयोगकर्ता अनुभव पर असर डालने वाले तीन मुख्य पहलुओं पर फ़ोकस करता है:
- लोडिंग—इसे सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) से दिखाया जाता है.
- इंटरैक्टिविटी—इसे पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) से दिखाया जाता है.
- विज़ुअल स्टैबिलिटी—इसका पता कुल लेआउट शिफ़्ट (सीएलएस) से चलता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी की मदद से, एक नज़र में यह देखा जा सकता है कि परफ़ॉर्मेंस और उपयोगकर्ता अनुभव के हिसाब से, आपका PWA कितना अच्छा या खराब है.
PWA की बुनियादी बातें
यह ज़रूरी है कि आपके सभी उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, यह ज़रूरी है कि आपके PWA में रिस्पॉन्सिव डिज़ाइन, मोबाइल, और सबसे पहले सभी के लिए मज़बूत आधार हो. इसके अलावा, इंटरनल डिज़ाइन और वेब परफ़ॉर्मेंस के लिए भी यह ज़रूरी है.