CDS की वेबसाइट को हमारे पॉल लुइस ने खुद तैयार किया था. इस वेबसाइट ने कॉन्फ़्रेंस में आने वाले लोगों को एक बेहतरीन मोबाइल वेब अनुभव देने का तरीका बताया.
पर्दे के पीछे की गतिविधियों वाले वीडियो
शानदार वह सुविधा है जो अलग-अलग मोबाइल ब्राउज़र पर चलती है. इसमें ब्राउज़र के लेआउट और पेंट साइकल का सबसे सही तरीके से इस्तेमाल किया जा रहा है.
वेब प्लैटफ़ॉर्म की नई सुविधाओं का इस्तेमाल किया गया
- सर्विस वर्कर
- मेनिफ़ेस्ट
- थीम का रंग
पैटर्न
- कार्ड खर्च किए जा रहे हैं
- रिस्पॉन्सिव ग्रिड
- मटीरियल डिज़ाइन
स्रोत कोड
इंटरव्यू
डेवलेपमेंट
जब पॉल ने साइट बनाने का फ़ैसला किया, तो उनकी प्राथमिकता थी प्रोग्रेसिव एन्हैंसमेंट को अपनाना. डेस्कटॉप के लिए डिज़ाइन करने के बजाय, उन्होंने सबसे पहले इसे छोटी स्क्रीन के लिए बनाया. इसके बाद, उन्होंने बड़ी स्क्रीन पर इसका इस्तेमाल किया. इससे आपको धीरे-धीरे बेहतर अनुभव मिलेगा. इसके लिए बहुत से मीडिया क्वेरी की ज़रूरत थी, लेकिन ब्रेकपॉइंट के बीच में छोटे-छोटे बदलावों पर नज़र रखने की थोड़ी आज़ादी भी थी. स्क्रीन के अलग-अलग साइज़ पर नज़र रखने से उसे यह पता चला कि कॉन्टेंट कहां टूट सकता है, ताकि वह इस समस्या को तुरंत ठीक कर सके.
पीई का एक और अहम पहलू यह है कि जितना हो सके, पुराने सिस्टम के साथ काम करने की सुविधा. पॉल ने Flexbox पर फ़्लोट का इस्तेमाल करने का विकल्प चुना है, क्योंकि उन्हें लगा कि इससे उन ब्राउज़र की संख्या बढ़ जाएगी जिन पर साइट काम करेगी. साइट के खास लेआउट के लिए, यह कोई समस्या नहीं थी. अगर उन्हें Flexbox की ज़रूरत है, तो वे इसे अपने साथ जोड़ने के लिए पीई (प्रॉडक्ट एक्सपर्ट) का इस्तेमाल करते.
कार्ड को बड़ा और छोटा करने की सुविधा, साइट के लिए एक बड़ी चुनौती थी. इसके लिए ऐनिमेशन बनाने के नए तरीके के बारे में सोचने की ज़रूरत थी. पॉल ने एक ऐसी रणनीति तैयार की जिसे उन्होंने FLIP कहा है. इसमें ऐनिमेशन के एलिमेंट को उनकी आखिरी स्थिति में सेट करना शामिल है. इसके बाद, बदलाव करने और अपारदर्शिता जैसी प्रॉपर्टी को कंपोज़िटर-फ़्रेंडली प्रॉपर्टी के तौर पर लागू किया जाता है, ताकि बदलावों को पहले जैसा किया जा सके और एलिमेंट को उसकी शुरुआती पोज़िशन पर वापस लाया जा सके. आखिर में, ऐसा करने के बाद, ट्रांसफ़ॉर्म और ओपैसिटी पर ट्रांज़िशन चालू करें और उन बदलावों को हटाएं. इससे एलिमेंट एक बार फिर अपनी आखिरी पोज़िशन पर आ जाते हैं! पॉल मानते हैं कि यह उम्मीद के मुताबिक नहीं है, लेकिन यह बहुत अच्छा काम करता है और इससे आपकी परफ़ॉर्मेंस बेहतर होती है.
परफ़ॉर्मेंस
मैं पॉल लुइस को परफ़ॉर्मेंस गुरु के तौर पर जानती हूं, इसलिए मुझे हैरानी नहीं हुई कि साइट बनाते समय पावरफ़ॉर्मेंस सबसे ज़रूरी चीज़ होती है. स्पीड इंडेक्स की वैल्यू सबसे कम पाने के लिए, उन्होंने बहुत ज़्यादा WebPageTest पर निर्भर रहे. YouTube एम्बेड किए बिना, पॉल ने इसे एक केबल कनेक्शन पर 1,000 से कम करने में मैनेज किया. इसका मतलब था कि ज़्यादातर उपयोगकर्ता एक सेकंड से कम समय में ही पहली बार रेंडर कर पाएंगे.
इसे पाने के लिए, ज़्यादातर काम Grunt टास्क में किया गया. इससे इमेज को ज़्यादा से ज़्यादा जोड़ने, छोटा करने, और कंप्रेस करने में मदद मिली. साइट, पेज लोड होने के बाद ग़ैर-ज़रूरी इमेज को भी हटा देती है, ताकि वास्तविक कॉन्टेंट को स्क्रीन पर ज़्यादा तेज़ी से रेंडर किया जा सके.
पेज लोड होने के समय को और बेहतर बनाने के लिए, पॉल ने सर्विस वर्कर को काम पर लगा दिया. चाहे आप ऑनलाइन हों या न हों, इससे कैश मेमोरी की मदद से पेज विज़िट किया जा सकता है. इससे, सही तरीके से इंटरनेट कनेक्शन होने पर भी आपको कॉन्टेंट दिखेगा (यह कॉन्फ़्रेंस वाई-फ़ाई पर बहुत ज़रूरी है!). उन्होंने बताया कि CDS की साइट, इस नई सुविधा का इस्तेमाल करने वाली पहली प्रोडक्शन साइटों में से एक है, जिसमें पॉल को “शुरुआती तौर पर मिलने वाली समस्याएं” का सामना करना पड़ा. उन्होंने मुझे बताया कि इससे उनकी परफ़ॉर्मेंस में काफ़ी बढ़ोतरी हुई. असल में, अब वे इसे हर उस साइट पर ले जा रहे हैं जिसे उन्होंने बनाया है!
बेशक परफ़ॉर्मेंस का मतलब सिर्फ़ यह नहीं है कि कोई साइट कितनी अच्छी तरह लोड होती है, बल्कि यह भी कि वह कितनी अच्छी तरह से चलती है. पॉल को पता था कि ऐनिमेशन एक चुनौती देने वाले हैं. इसलिए, उन्होंने फ़्लिप किया. इसके अलावा, उन्होंने यह पक्का करने के लिए अपने रास्ते अलग कर दिए कि टच इनपुट या स्क्रोलिंग के दौरान कुछ न हो. साइट बहुत जटिल नहीं है, इसके बावजूद उन्होंने बिल्ड के लिए RAIL करने के तरीके में बदलाव किया (उन्हें असल में ज़्यादा समय नहीं इस्तेमाल करना पड़ा), और इससे बहुत मदद मिली!
डिज़ाइन
साइट को एक ही व्यक्ति ने नकली बनाया था, इसलिए इसका मतलब यह हुआ कि पॉल उस प्रोजेक्ट के डिज़ाइनर और डेवलपर थे. इस वजह से, दोनों 'टीम' में एक-दूसरे की समस्याओं के बारे में काफ़ी समझ विकसित हुई. उन्हें डेस्कटॉप को डेवलपमेंट तरीके से डिज़ाइन करना पसंद है, जिसका इस्तेमाल वे डेवलपमेंट के दौरान करते हैं. इससे उन्हें यह समझने में मदद मिलती है कि प्रोजेक्ट में क्या करने की ज़रूरत है. इसके बाद, पॉल मोबाइल व्यू पर चले जाते हैं और इससे उन्हें चीज़ों को बेहतर बनाने में मदद मिलती है. इसके बाद, डेस्कटॉप वर्शन की जानकारी दिखती है, क्योंकि इंफ़ॉर्मेशन आर्किटेक्चर और प्राथमिकता को अपडेट करने की ज़रूरत होगी.
सभी चीज़ें आसानी से नहीं हुईं. उस समय, मटीरियल डिज़ाइन के दिशा-निर्देश में कॉन्टेंट के लिए साइट बनाने का तरीका नहीं बताया गया था. इसलिए, कुछ चीज़ें ऐसी थीं जिन्हें वे कम कर पाए. डिज़ाइन में भी, उस शेड्यूल और सेशन की जानकारी को शामिल नहीं किया गया जो जुड़ती थी. आखिर में, UX का मतलब था कि लोग शेड्यूल में जाकर इस बात से निराश हो जाएंगे कि उन्हें सीधे सेशन की जानकारी नहीं मिल पाएगी.
ऐसा कहकर, मुझे लगता है कि पॉल ने मटीरियल डिज़ाइन को एक कॉन्टेंट साइट पर लाने का ज़बरदस्त काम किया है. मुझे उसके विज़ुअल और मोशन से बहुत खुशी हुई. यह यूनीक मटीरियल डिज़ाइन को महसूस करता है. साथ ही, इसकी जानकारी और लुक, इंटरैक्शन और हैरारकी को बढ़ावा देता है.
पुष्टि हो गई
- वेब डेवलपर को बॉयलरप्लेट और प्रेरणा देने वाली चीज़ों के तौर पर काम करने के लिए, पूरी साइट को GitHub (> 200 स्टार) पर रिलीज़ कर दिया गया है.
- वेब प्लैटफ़ॉर्म के सबसे नए और सबसे बेहतर वर्शन को शामिल किया गया है: सर्विस वर्कर, वेब मेनिफ़ेस्ट और डाइनैमिक थीम कलर. इसका कुल असर कुछ ऐसा है जो Android डिवाइस पर चलाने पर यह प्लैटफ़ॉर्म के साथ वाकई जुड़ा हुआ महसूस होता है. अगर इसे उपयोगकर्ता की होम स्क्रीन पर जोड़ा जाए, तो यह काफ़ी हद तक किसी ऐसे ऐप्लिकेशन जैसा लगता है जिसे वे इस्तेमाल कर सकते हैं. यह वाकई शानदार है.
- ~73.7k पेज व्यू, साइट के सब-सेक्शन पर ~73.7k क्लिक का मतलब है कि लोगों ने असल में इसे इस्तेमाल किया और उसमें दिलचस्पी दिखाई. यह उम्मीद से ज़्यादा है.
कुल मिलाकर, आज के वेब डेवलपर और एक बहुत ही सफल कॉन्फ़्रेंस वेबसाइट के लिए एक बहुत बड़ी प्रेरणा.