फ़ाउंडेशन

मज़बूत बुनियाद

अच्छे 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 को शिप करने के लिए, मॉड्यूल/नोमॉड्यूल पैटर्न का इस्तेमाल किया जा सकता है. इससे ज़्यादा आधुनिक ब्राउज़र पर कम पेलोड और पुराने ब्राउज़र को फ़ॉलबैक का अनुभव देने के लिए, ज़्यादा मज़बूत सुविधाएं मिलती हैं. इसमें, प्रॉमिस, क्लास, ऐरो फ़ंक्शन, और const और let जैसी JavaScript की नई सुविधाएं मिलने की गारंटी भी होती है. ये सुविधाएं, ES मॉड्यूल के साथ काम करने वाले ब्राउज़र के लिए उपलब्ध होती हैं.

आप अपनी बेहतर बेसलाइन बनाने के लिए, कई तरह की सुविधाओं को एक साथ पहचान भी सकते हैं. BBC News की टीम ने इस गेम को 'कट्टिंग द मस्टर्ड' नाम दिया है. इसकी मदद से सभी लोगों को खास अनुभव दिया जा सकता है और किसी सुविधा की पहचान कर लिए जाने के बाद ही इसका अनुभव बेहतर बनाया जा सकता है.

डिवाइस का पता लगाने से बचें

उपयोगकर्ता-एजेंट स्ट्रिंग के आधार पर सहायता से जुड़े अनुमान लगाने के बजाय, आपको सीधे तौर पर सुविधा से जुड़ी सहायता की जांच करनी चाहिए.

उपयोगकर्ता-एजेंट स्ट्रिंग कभी भी पूरी तरह से भरोसेमंद नहीं रही हैं. वे "सही अनुमान" लगाने के लिए हर ब्राउज़र, ऑपरेटिंग सिस्टम, और डिवाइस के संयोजन की सटीक जानकारी पर भरोसा करते हैं. इसके बावजूद, उन पर उपयोगकर्ता के झूठे नाम से मेल भेजने का खतरा ज़्यादा होता है. उदाहरण के लिए, मोबाइल ब्राउज़र पर डेस्कटॉप साइट के रीडायरेक्ट का इस्तेमाल करना उतना ही आसान होता है जितना कि डेस्कटॉप की उपयोगकर्ता-एजेंट स्ट्रिंग को स्पूफ़ करना.

इसके अलावा, ब्राउज़र अपनी उपयोगकर्ता-एजेंट स्ट्रिंग को फ़्रीज़ करने पर काम कर रहे हैं. सुविधा की पहचान के लिए उपयोगकर्ता-एजेंट स्ट्रिंग के साथ, इसे बंद करने की वजह खास तौर पर बताई गई है. इससे किसी उपयोगकर्ता और डिवाइस को पहचानने में पहले के मुकाबले कहीं ज़्यादा भरोसा करना आसान हो गया है.

कॉन्टेंट पहले

वेब डिज़ाइन करने का एक और सिद्धांत है: सबसे पहले अपने कॉन्टेंट से शुरुआत करें. उदाहरण के लिए, किसी स्टॉक की कीमतों के ग्राफ़ के साथ रीयल-टाइम स्टॉक टिकर, इसके मुख्य में है. इसमें, कुछ समय के लिए स्टॉक की कीमतें बताई गई होती हैं. ऐसा भी हो सकता है कि इस पर साइट रीफ़्रेश करने वाला लिंक मौजूद हो.

इसके बाद, उसे JavaScript की मदद से बेहतर बनाया जा सकता है और टाइमर पर टेबल की वैल्यू को अपडेट करने के अनुरोध फ़ेच किए जा सकते हैं. इसके अलावा, रीयल-टाइम पुश-आधारित अपडेट देने के लिए सॉकेट की मदद से, अनुरोध को भी फ़ेच किया जा सकता है. नतीजों का ग्राफ़ बनाने के लिए, इसे फिर से बेहतर बनाया जा सकता है. जैसे, सीएसएस, SVG या कैनवस. हालांकि, मुख्य बातें कॉन्टेंट से शुरू होती हैं.

ओरिजनल डिज़ाइन

  • उपयोगकर्ता अनुभव पर फ़ोकस करने वाले कंस्ट्रेंट के तौर पर मोबाइल.
  • डिज़ाइन करने की प्रोसेस में कॉन्टेंट और मुख्य फ़ंक्शन पर ज़ोर देना.
  • उपलब्ध होने पर, ऐडवांस फ़ंक्शन की मदद से इसे लगातार बेहतर बनाना.

इन सिद्धांतों को मिलाकर, हमें एक नई चीज़ मिलती है: मूल डिज़ाइन. जेन सिमंस, डिज़ाइनिंग इंट्रिंसिक लेआउट के बारे में बात करती हैं. वे यूज़र इंटरफ़ेस डिज़ाइन और बनाने के लिए, ग्रिड, फ़्लेक्सबॉक्स, फ़्लो लेआउट, और राइटिंग मोड जैसे आधुनिक सीएसएस टूल के इस्तेमाल के बारे में बता रही हैं. इन टूल की मदद से वे कहती हैं:

इस लेआउट को भी, कॉन्टेंट और डिज़ाइन के हिसाब से बनाया जा सकता है.

जेन सिमंस

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

Intrinsic लेआउट, कंट्रोल से जुड़ी बातचीत को पूरी तरह से वेब पर उपलब्ध कराते हैं. यही वजह है कि यह एक परिभाषा देता है. वेब पर कंट्रोल करने का मतलब यह नहीं है कि आपकी साइट पर आने वाले हर व्यक्ति को डिवाइस, स्क्रीन का साइज़, रंग या फ़ॉन्ट या लेआउट या क्षमताओं को बोलकर तय किया जाए. वेब पर कंट्रोल का मतलब है ऐसे नियमों को लिखने का तरीका जिन्हें ब्राउज़र आपके अनुभव को इकट्ठा करने के लिए इस्तेमाल करेगा. इससे आपके प्रोग्रेसिव वेब ऐप्लिकेशन में हर उपयोगकर्ता के लिए एक अलग नियम बनाया जाएगा.

वेब परफ़ॉर्मेंस

वेब परफ़ॉर्मेंस, हमारे PWA का आखिरी लेकिन सबसे अहम प्लैटफ़ॉर्म है. उपयोगकर्ताओं का अनुभव बेहतरीन होना ज़रूरी है; इससे हर तरह से ज़्यादा कन्वर्ज़न मिलेंगे.

वेब परफ़ॉर्मेंस में कई चरण शामिल हैं:

  • उपयोगकर्ताओं को ध्यान में रखकर बनाई गई मुख्य मेट्रिक को समझें.
  • हर मेट्रिक के लिए लक्ष्य सेट करें.
  • हमारे PWA का आकलन करें.
  • हमारे कोड या सर्वर में तकनीक और सबसे सही तरीके लागू करके, मेट्रिक को बेहतर बनाएं.
  • फिर से मापें.
  • उपयोगकर्ता के संदर्भ के आधार पर, हर उपयोगकर्ता के लिए लाइव अनुभव को बेहतर बनाएं.

आज-कल वेब परफ़ॉर्मेंस मेट्रिक से पता चलता है कि आपका कॉन्टेंट स्क्रीन पर कितनी तेज़ी से दिख रहा है. साथ ही, यह भी पता चलता है कि आपकी वेबसाइट कितनी इंटरैक्टिव है और उपयोगकर्ता उसे कितनी अच्छी तरह से समझते हैं.

वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी

वेब परफ़ॉर्मेंस में सफलता का आकलन करने के लिए, पिछले एक दशक से हम अलग-अलग मेट्रिक का इस्तेमाल कर रहे हैं. फ़िलहाल, सुझाई गई मेट्रिक का एक सेट वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी प्रोजेक्ट में शामिल किया गया है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक, तीन मुख्य चीज़ों पर फ़ोकस करती हैं. ये मेट्रिक, वेब परफ़ॉर्मेंस और लोगों के अनुभव पर असर डालती हैं:

  • Loading
  • इंटरैक्टिव
  • विज़ुअल स्टैबिलिटी (लेआउट की स्थिरता)

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी की मेट्रिक का एक सेट, जिसमें वेबसाइट की परफ़ॉर्मेंस के नतीजे दिखते हैं.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक की मदद से, एक नज़र में देखा जा सकता है कि वेब परफ़ॉर्मेंस और उपयोगकर्ता अनुभव में आपका PWA कितना अच्छा या बुरा है.

PWA फ़ाउंडेशन

उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, यह ज़रूरी है कि आपके PWA में रिस्पॉन्सिव डिज़ाइन, मोबाइल, और सबसे पहले इस्तेमाल की जाने वाली जानकारी के मामले में एक अच्छी बुनियाद हो. साथ ही, इसमें मूल डिज़ाइन और वेब परफ़ॉर्मेंस की जानकारी भी हो.

रिसॉर्स