रिअॅक्टिव्ह वेब डिझाईनः वेब अ‍ॅप्स बनवण्याचे रहस्य जे आश्चर्यकारक वाटते

गेल्या वर्षात मी काही विकसकांद्वारे वापरल्या जाणार्‍या दोन सूक्ष्म तंत्रे पाहिल्या आहेत ज्या वेब अॅपला अत्यधिक प्रतिक्रियाशील आणि निर्दोष वाटल्यापासून वेब अॅप घेतात.

माझा विश्वास आहे की या तंत्रांना त्यास नावाची आवश्यकता आहे हे पुरेसे महत्वाचे आहे: रिअॅक्टिव वेब डिझाइन.

थोडक्यात, प्रतिक्रियात्मक वेब डिझाइन तंत्रज्ञानाचा एक संचा आहे ज्याचा वापर नेटवर्क गती किंवा विलंब किंवा पर्वा न करता उपयोगकर्ता इनपुटला नेहमीच वेगवान आणि प्रतिसाद देणारी साइट तयार करण्यासाठी केला जाऊ शकतो.

वेब विकसक आणि फ्रेमवर्क लेखक म्हणून, माझा असा विश्वास आहे की आम्ही तयार केलेल्या प्रत्येक गोष्टीमध्ये हे नमुने डीफॉल्ट बनवण्याचे मार्ग शोधणे हे यूएक्सवरील यूएक्स सुधारण्यासाठी आणि कार्यक्षमतेने सुधारित करणे हे प्रथम प्राधान्य आहे.

तंत्र 1: सांगाड्याच्या पडद्यासह त्वरित भार

चांगले वापरल्यास, हे तंत्र जवळजवळ कधीच लक्षात येत नाही, परंतु साइटच्या कामगिरीवर त्याचा मोठा परिणाम होतो.

विशेष म्हणजे तंत्र जवळजवळ सर्व नेटिव्ह अ‍ॅप्सद्वारे वापरले जाते आणि भयानक नेटवर्कवर देखील त्यांना खूप प्रतिक्रियाशील वाटते, परंतु हे वेबवर कधीही वापरले जात नाही!

संधी या मार्गावर आहे!

थोडक्यात, सांगाडा पडदे हे सुनिश्चित करतात की जेव्हा जेव्हा वापरकर्त्याने कोणतेही बटण किंवा दुवा टॅप केला, तेव्हा पृष्ठ वापरकर्त्यास त्या नवीन पृष्ठामध्ये स्थानांतरित करून आणि त्यानंतर सामग्री उपलब्ध झाल्यावर त्या पृष्ठावर सामग्री लोड करून तत्काळ प्रतिक्रिया देते.

जेव्हा आपण प्रथम प्रथम ते उघडता तेव्हा फेसबुक स्केलेटन स्क्रीन वापरुन कार्यप्रदर्शन सुधारित करते

स्केलेटन पडदे हे एक महत्त्वाचे परफॉरमन्स तंत्र आहे कारण ते अनुप्रयोगांना अधिक वेगाने जाणवते आणि नाटकीयरित्या वापरकर्त्याच्या क्षमतेची संख्या कमी करते जेथे आश्चर्यचकित होते:

काय चाललंय? हे देखील लोड होत आहे? मी ते बरोबर टॅप केले?

फ्लिपकार्ट.कॉम या वेबसाइटचा एक दुर्मिळ उदाहरण आहे जो या दृष्टिकोनाचा उपयोग करतो. श्रेण्यांद्वारे ब्राउझ करणे किंवा उत्पादनांवर टॅप करणे यामुळे विजेचा वेगवान वेगवान वाटतो, वास्तविक परिणाम लोड होण्यास काही सेकंद लागतात तरीही:

फ्लिपकार्ट डॉट कॉमचा स्क्रीन कॅप्चर अँड्रॉइडवर स्टँडअलोन मोडमध्ये होम स्क्रीनवरुन लाँच झाला

जेव्हा या तंत्राचा उत्कृष्ट वापर केला जातो तेव्हा थंबनेल किंवा लेखाच्या शीर्षकांसारखी सामग्री आधीपासूनच उपलब्ध कामगिरी सुधारण्यासाठी पुन्हा वापरली जाऊ शकते, यामुळे भार खरोखरच झटपट जाणवेल.

app.jalantikus.com स्केलेटन पडदे नमुना वापरते आणि संक्रमणे दरम्यान शीर्षक आणि लघुप्रतिमा पुन्हा वापरते

सांगाड्याच्या पडद्यासह साइट्सची चाचणी घेत आहे

साइट हे तंत्रज्ञानाचा वापर किती चांगल्या प्रकारे करतात हे तपासणे सोपे आहे: नेटवर्क शक्य तितक्या मंद करण्यासाठी Chrome नेटवर्क इम्यूलेशनचा वापर करा आणि नंतर साइटच्या आसपास क्लिक करा. जर हे चांगले करत असेल तर साइटला अद्याप आपल्या इनपुटला चपखल आणि प्रतिसाद वाटेल.

Chrome नेटवर्क इम्यूलेशनमध्ये सर्वात कमी वेगाने समर्थित समर्थित

तंत्र 2: घटकांवर पूर्वनिर्धारित आकारांद्वारे "स्थिर भार"

वेबसाइट वापरण्याचा प्रयत्न करीत असताना एखादी वेबसाइट उडी मारत असताना आपल्याला ही भावना जाणवते? आपण फक्त एक लेख वाचण्याचा प्रयत्न करीत आहात आणि मजकूर फिरत राहिला आहे? यालाच आपण “अस्थिर भार” म्हणतो आणि आम्हाला ते आगीत जळण्याची गरज आहे.

पृष्ठ लोड होताच स्लेट डॉट कॉमची सामग्री अत्यंत आक्रमकतेने उडी मारते. आपण ज्या नेटवर्कवर आहात हे हळुहळु तेवढे जास्त वेळ जंप होईल.

अस्थिर भार वेबसाइटना परस्परसंवाद करण्यास कठीण बनवतात आणि त्यांना… चांगले… अस्थिर बनवतात!

अस्थिर साइट ब्राउझ करणे मला भूकंप दरम्यान फिरताना वाटेल असे वाटेल याबद्दलची माझी आठवण येते

अस्थिर लोड पृष्ठामध्ये एम्बेड केलेल्या प्रतिमा आणि जाहिरातींमुळे होते परंतु कोणत्याही आकाराच्या माहितीचा समावेश नाही. डीफॉल्टनुसार ब्राउझरला एकदा ते लोड झाल्यानंतरच त्याचे आकार माहित असते, म्हणूनच प्रतिमा लोड झाल्यावर, धन्यवाद! संपूर्ण पृष्ठ खाली सरकते .

हे प्रतिबंधित करण्यासाठी, पृष्ठावरील सर्व टॅगमध्ये त्यामध्ये असलेल्या प्रतिमेचे परिमाण सक्रियपणे समाविष्ट केले पाहिजे.

बर्‍याच प्रकरणांमध्ये विशिष्ट पृष्ठांवर वापरल्या जाणार्‍या प्रतिमा नेहमीच एकसारख्या असतात आणि म्हणून त्यांचा आकार फक्त एचटीएमएल टेम्पलेटमध्ये समाविष्ट केला जाऊ शकतो, परंतु काही बाबतींत प्रतिमांचा आकार डायनॅमिक असतो आणि म्हणूनच प्रतिमा अपलोड केली असता टेम्पलेट केल्यावर त्यांचे आकार मोजले पाहिजे. जेव्हा ते तयार होते तेव्हा HTML मध्ये.


जाहिरातींबाबतही असेच होते, बहुतेक वेळेस जेव्हा ते अस्थिर बोजा पडतात तेव्हा दोषी असतात. जेथे जेथे शक्य असेल तेथे एक डिव्ह तयार करा ज्यामध्ये एक जाहिरात असेल आणि आपल्या टेम्पलेटमध्ये ही जाहिरात किती मोठी असेल याबद्दल आपल्या चांगल्या अंदाजासह आकार आकारास येईल.

लक्षात घ्या की अस्थिर भार हळूहळू नेटवर्कवर सर्वात वाईट आहेत कारण जेव्हा आपण अचानक सामग्री उंचावते तेव्हा आपण वाचनात प्रवेश केला आहे आणि आपण सुरक्षित आहात याची आपल्याला खात्री कधीच नसते.

हे सर्व एकत्र ठेवत आहे

पारंपारिक आणि प्रतिक्रियात्मक वेब डिझाइनमधील फरक दर्शविण्यासाठी मी रिएक्टिव्ह.सर्गे.शेश येथे एक लहान डेमो साइट तयार केली आहे.

पारंपारिक लेख लोड करणे

हे किती आळशी वाटते आणि सामग्री उडी किती निराशाजनक आहे हे लक्षात घ्या. विशेष म्हणजे स्क्रीन टॅप करताना आणि प्रतिक्रिय न पाहता मोबाइल डिव्हाइसवर हे तीव्रतेच्या ऑर्डर अधिक त्रासदायक वाटतात.

प्रतिक्रियाशील वेब डिझाइनसह लेख लोड करीत आहे

प्रतिक्रियात्मक रचनेमुळे लोड त्वरित जाणवते आणि मागील चिन्ह आणि लेखाचे शीर्षक एकाधिक वेळा टॅप करताना साइट प्रतिक्रियाशील राहते

लपेटणे

नेटवर्क हळुहळु होण्याऐवजी, जेव्हा नेटवर्कमध्ये पृष्ठ संक्रमण संक्रमित होते आणि पृष्ठे विस्तारित कालावधीसाठी उडी मारतात तेव्हा वापरकर्त्याचा अनुभव तितका वाईट होतो.

रीएक्टिव्ह वेब डिझाइनद्वारे आम्ही आमच्या अनुभवांना धीमे आणि वेदनादायक नेटवर्कवर देखील स्नॅपी आणि प्रतिसाद (“रिस्पॉन्सिव्ह डिझाइन” नाव आधीच घेतलेले आहे, डोहो!) बनवू शकतो.

मला गुंतवणूकी आणि महसूल यासारख्या केपीआय वर कथित कामगिरीच्या परिणामावरील समुदायाकडील डेटा ऐकायला आवडेल!

याव्यतिरिक्त, मी सांगाडा पडदे आणि स्थिर भार डीफॉल्ट कसे करावे हे विचारात घेण्यासाठी फ्रेमवर्क आणि लायब्ररीच्या लेखकांना प्रोत्साहित करतो, ज्यास यशाचा खड्डा देखील म्हटले जाते.

याबद्दल आपल्याकडे विचार असल्यास, कृपया मला @owenCm ट्वीट करा आणि जर तुम्हाला याचा आनंद मिळाला असेल तर कृपया एक ♥ द्या!

पी.एस. मोबाईल डिव्हाइसवर संपूर्ण गौरवासाठी डेमो साइट रिएक्टिव्ह.सर्गे.शॅश असल्याचे सुनिश्चित करा.