रिएक्टिव वेब डिज़ाइन: अद्भुत महसूस करने वाले वेब ऐप बनाने का रहस्य

पिछले वर्ष में मैंने कुछ डेवलपर्स द्वारा उपयोग की जा रही दो सूक्ष्म तकनीकों का अवलोकन किया जो एक वेब ऐप को धीमा और जानदार महसूस करने से लेकर अत्यधिक प्रतिक्रियाशील और पॉलिश करने तक ले जाती हैं।

मेरा मानना ​​है कि ये तकनीक काफी महत्वपूर्ण हैं कि उन्हें एक नाम की आवश्यकता है: रिएक्टिव वेब डिज़ाइन।

सारांश में, प्रतिक्रियाशील वेब डिज़ाइन उन तकनीकों का एक सेट है, जिनका उपयोग उन साइटों के निर्माण के लिए किया जा सकता है जो नेटवर्क गति या विलंब की परवाह किए बिना उपयोगकर्ता इनपुट के लिए हमेशा तेज़ और उत्तरदायी महसूस करते हैं।

वेब डेवलपर्स और फ्रेमवर्क लेखकों के रूप में, मेरा मानना ​​है कि हमारे द्वारा बनाई गई हर चीज में इन पैटर्नों को डिफ़ॉल्ट बनाने के तरीके ढूंढना यूएक्स में सुधार और वेब पर कथित प्रदर्शन के लिए सर्वोच्च प्राथमिकता है।

तकनीक 1: कंकाल स्क्रीन के साथ त्वरित भार

जब अच्छी तरह से उपयोग किया जाता है, तो यह तकनीक लगभग कभी ध्यान नहीं दी जाती है, लेकिन किसी साइट के कथित प्रदर्शन पर बहुत अधिक प्रभाव पड़ता है।

दिलचस्प बात यह है कि तकनीक का उपयोग लगभग सभी नेटिव ऐप्स द्वारा किया जाता है और उन्हें भयानक नेटवर्क पर भी बहुत प्रतिक्रियाशील महसूस करता है, लेकिन वेब पर इसका उपयोग कभी नहीं किया जाता है!

इस तरह से अवसर निहित है!!

संक्षेप में, कंकाल की स्क्रीन यह सुनिश्चित करती है कि जब भी उपयोगकर्ता किसी बटन या लिंक पर टैप करता है, तो पृष्ठ उपयोगकर्ता को उस नए पृष्ठ पर स्थानांतरित करके तुरंत प्रतिक्रिया करता है और फिर सामग्री के उपलब्ध होने पर उस पृष्ठ पर सामग्री लोड हो जाती है।

जब आप पहली बार इसे खोलते हैं तो फेसबुक एक कंकाल स्क्रीन का उपयोग करता है

कंकाल स्क्रीन एक प्रमुख कथित प्रदर्शन तकनीक है क्योंकि वे अनुप्रयोगों को बहुत तेज़ी से महसूस करते हैं, नाटकीय रूप से उन क्षणों की संख्या को कम करते हैं जहां उपयोगकर्ता को छोड़ दिया जाता है:

क्या हो रहा है? क्या यह लोडिंग भी है? क्या मैंने इसे ठीक से टैप किया?

Flipkart.com एक वेबसाइट का एक दुर्लभ उदाहरण है जो इस दृष्टिकोण का उपयोग करता है। श्रेणियों के माध्यम से ब्राउज़ करना या उत्पादों पर टैप करना इसलिए हल्का महसूस होता है, तब भी जब वास्तविक परिणाम लोड होने में कुछ सेकंड लगते हैं:

एंड्रॉइड पर स्टैंडअलोन मोड में होम स्क्रीन से फ्लिपकार्ट डॉट कॉम का एक स्क्रेंकेचर शुरू किया गया

जब इस तकनीक का सबसे अच्छा उपयोग किया जाता है, तो सामग्री जो पहले से ही उपलब्ध है जैसे कि थंबनेल या लेख के शीर्षक फिर से कथित प्रदर्शन को बेहतर बनाने के लिए फिर से उपयोग किया जा सकता है, जिससे लोड वास्तव में तत्काल महसूस होता है।

app.jalantikus.com स्केलेटन स्क्रीन पैटर्न का उपयोग करता है और संक्रमणों में शीर्षक और थंबनेल का पुन: उपयोग करता है

कंकाल स्क्रीन के साथ परीक्षण साइटों

यह परीक्षण करना कि साइटें इस तकनीक का कितनी अच्छी तरह उपयोग करती हैं, यह आसान है: नेटवर्क को धीमा करने के लिए Chrome नेटवर्क अनुकरण का उपयोग करें और फिर किसी साइट पर क्लिक करें। यदि यह अच्छी तरह से कर रहा है, तो साइट अभी भी आपके इनपुट के लिए तड़क-भड़क और उत्तरदायी महसूस करेगी।

Chrome नेटवर्क अनुकरण में सबसे धीमी गति समर्थित है

तकनीक 2: तत्वों पर पूर्वनिर्धारित आकारों के माध्यम से "स्थिर भार"

आप जानते हैं कि जब आप इसका उपयोग करने का प्रयास कर रहे हैं, तो यह महसूस करना कि कोई वेबसाइट कहां से कूद रही है? आप सिर्फ एक लेख पढ़ने की कोशिश कर रहे हैं और पाठ चारों ओर घूम रहा है? इसे हम एक "अस्थिर भार" कहते हैं, और हमें इसे आग से जलाना होगा।

पृष्ठ लोड होते ही slate.com सामग्री बहुत आक्रामक रूप से चारों ओर कूद जाती है। जिस नेटवर्क पर आप धीमे चल रहे हैं, वह लंबे समय के लिए कूदता है।

अस्थिर भार वेबसाइटों को इंटरैक्ट करने के लिए कठिन बनाते हैं, और उन्हें ... अच्छा ... अस्थिर महसूस करते हैं!

एक अस्थिर साइट को ब्राउज़ करना मुझे हमेशा याद दिलाता है कि मैं कैसे कल्पना करता हूं कि भूकंप के दौरान घूमना कैसा लगेगा

अस्थिर लोड छवियों और विज्ञापनों के कारण होते हैं जो एक पृष्ठ पर एम्बेड किए जाते हैं, लेकिन किसी भी जानकारी को शामिल नहीं करते हैं। डिफ़ॉल्ट रूप से ब्राउज़र केवल लोड होने के बाद ही इन का आकार जानता है, इसलिए जैसे ही कोई छवि लोड होती है, THUN.!, पूरा पृष्ठ नीचे, स्लाइड करता है।

इसे रोकने के लिए, किसी पृष्ठ पर सभी टैगों को निश्चित रूप से उस छवि के आयामों को शामिल करना होगा जिसमें वे शामिल होंगे।

कई मामलों में कुछ पृष्ठों पर उपयोग की जाने वाली छवियां हमेशा एक ही आकार की होती हैं और इसलिए उनका आकार बस HTML टेम्पलेट में शामिल किया जा सकता है, लेकिन कुछ मामलों में छवियों का आकार गतिशील होता है और इस प्रकार उनके आकार की गणना तब की जानी चाहिए जब छवि अपलोड हो जाती है HTML में जब इसे बनाया जाता है।


विज्ञापनों के लिए भी यही सच है, जब अक्सर अस्थिर भार की बात होती है। जहां भी संभव हो, एक ऐसा तलाक बनाएं जिसमें एक विज्ञापन शामिल होगा, और आपके टेंपलेटिंग सेट में यह आपके सबसे अच्छे अनुमान के साथ आकार में होगा कि यह विज्ञापन कितना बड़ा होगा।

ध्यान दें कि अस्थिर भार उनके धीमे नेटवर्क पर सबसे खराब होते हैं क्योंकि आप अचानक पढ़ने की सामग्री में बस गए हैं जब यह अचानक कूदता है, और आप कभी भी सुनिश्चित नहीं हो सकते कि आप सुरक्षित हैं।

यह सब एक साथ डालें

मैं पारंपरिक और प्रतिक्रियाशील वेब डिज़ाइन के बीच के अंतर को प्रदर्शित करने के लिए reactive.surge.sh पर एक छोटी डेमो साइट का निर्माण करता हूँ।

पारंपरिक लेख लोड हो रहा है

ध्यान दें कि यह कितना सुस्त लगता है और सामग्री कूदने में कितनी निराशा होती है। दिलचस्प बात यह है कि मुझे स्क्रीन को टैप करने और प्रतिक्रिया नहीं देखने पर मोबाइल उपकरणों पर अधिक परिमाण के इस आदेश का पता चलता है।

प्रतिक्रियाशील वेब डिजाइन के साथ एक लेख लोड हो रहा है

प्रतिक्रियाशील डिज़ाइन के साथ लोड तुरंत महसूस होता है और बैक आइकन और लेख शीर्षक को कई बार टैप करने पर साइट प्रतिक्रियाशील रहती है

समेट रहा हु

नेटवर्क जितना धीमा होता है, उपयोगकर्ता का अनुभव उतना ही खराब होता जाता है, जब पेज नेटवर्क पर ब्लॉक हो जाता है और पेज विस्तारित अवधि के लिए इधर-उधर हो जाते हैं।

प्रतिक्रियाशील वेब डिज़ाइन के साथ हम अपने अनुभव को धीमा और संवेदनशील महसूस कर सकते हैं ("उत्तरदायी डिज़ाइन" जैसा कि एक नाम पहले से ही लिया गया था, धीमे और दर्दनाक नेटवर्क पर भी।)

मुझे KPI पर सगाई और राजस्व जैसे कथित प्रदर्शन के प्रभाव के बारे में समुदाय के डेटा के बारे में सुनना बहुत पसंद है!

इसके अतिरिक्त, मैं फ्रेमवर्क और लाइब्रेरी लेखकों को प्रोत्साहित करता हूं कि यह विचार करने के लिए कि कंकाल की स्क्रीन कैसे बनाई जाए और डिफ़ॉल्ट को लोड किया जाए, जिसे सफलता का गड्ढा भी कहा जाता है।

यदि आपके पास इस बारे में कोई विचार है, तो कृपया मुझे @owencm ट्वीट करें, और यदि आपको यह पसंद आया तो कृपया इसे ♥ दें!

अनुलेख इसकी पूर्ण महिमा के लिए एक मोबाइल डिवाइस पर डेमो साइट reactive.surge.sh को देखना सुनिश्चित करें!