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