पेज बिल्डर सैंडविच

PBS Pro प्राप्त करें

ब्लॉग

  • अच्छी ग्राहक सहायता प्रदान करने का रहस्य

    हर सुबह काम पर जाते समय, मुझे एक बरिस्ता मिलता है जो कल्पनीय सबसे खराब पोकर फेस के साथ मुझे मेरी कॉफी थमाता है। यह हम दोनों के लिए एक दैनिक नियम बन चुका है।

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

    अब, ऑनलाइन सहायता समुदाय में भी इस बरिस्ता के समकक्ष लोग मौजूद हैं।

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

    हाँ, अच्छी ग्राहक सेवा आपके व्यवसाय के विकास की कुंजी है। लेकिन सिर्फ ग्राहक सहायता होना ही काफी नहीं है।

    आपको अच्छी सेवा (यदि उत्कृष्ट नहीं तो) प्रदान करनी होगी जिससे आपके ग्राहकों को अपनी अहमियत का अहसास हो, क्योंकि वे वास्तव में महत्वपूर्ण हैं। आखिरकार, उन्हीं की वजह से आपका व्यवसाय अस्तित्व में है।

    हालाँकि, हर कोई यह नहीं समझता कि ग्राहक सेवा का केवल बिना गुणवत्ता के प्रदान किया जाना ही पर्याप्त नहीं है।

    वास्तव में, भले ही यह तय माना जाता हो कि कंपनियों के पास सपोर्ट टीमें होती हैं, फिर भी हाल के आंकड़े दर्शाते हैं कि 68% ग्राहक किसी कंपनी का साथ इसलिए छोड़ देते हैं क्योंकि उन्हें लगता है कि कंपनी को उनकी परवाह नहीं है (जबकि होनी चाहिए)।

    लेकिन वास्तव में अच्छी ग्राहक सहायता किस बात से तय होती है, और आप इसे कैसे बनाए रखते हैं?

    एक सपोर्ट विशेषज्ञ से दूसरे विशेषज्ञ के नाते, यहाँ अपने ग्राहकों को — और फलस्वरूप, अपने व्यवसाय को — खुश रखने के कुछ प्रमुख कारक दिए गए हैं।

    1. नकारात्मक प्रतिक्रिया का लाभ उठाएं

    चाहे टेक उद्योग हो या कोई अन्य क्षेत्र, आपको अपने उत्पाद के बारे में किसी न किसी तरह से प्रतिक्रिया हमेशा मिलती रहेगी। लेकिन ध्यान रखें: उनमें से सभी बातें ऐसी नहीं होंगी जो आप सुनना चाहते हैं।

    और आपको इसके लिए तैयार रहना होगा।

    तैयारी से भी बढ़कर, आपको यह करने की आवश्यकता है कि नकारात्मक प्रतिक्रिया को स्वीकार करें और उसका लाभ उठाएं।

    देर-सवेर, आपके पास शिकायतों, सुविधाओं के अनुरोधों और असंतोषजनक टिप्पणियों की भरमार होगी।

    उन पर ध्यान दें।

    आपके पास आने वाली हर एक टिप्पणी को सुनना और उसके प्रति खुला नज़रिया रखना बेहद महत्वपूर्ण है– चाहे वह सकारात्मक हो या अन्य। ये टिप्पणियाँ दर्शाती हैं कि आपके उत्पाद या सेवा में क्या कमी है, जिससे आपको अपने दर्शकों या बाज़ार की ज़रूरतों को पूरा करने का अवसर मिलता है।

    उदाहरण के लिए, यदि आपको अपने यूज़र इंटरफ़ेस को नेविगेट करने में कठिनाई होने के बारे में कई शिकायतें मिलती हैं, तो इसका अर्थ है कि आपको अपना यूज़र इंटरफ़ेस बदलना होगा।

    यदि एक महीने में यह तीसरी बार है कि आपको अपने उत्पाद के खराब प्रदर्शन के बारे में शिकायत मिली है, तो शायद अपनी टीम के साथ मिलकर चर्चा करना और उक्त प्रदर्शन संबंधी समस्या को हल करने को प्राथमिकता देना एक अच्छा विचार होगा।

    दूसरे शब्दों में, नकारात्मक प्रतिक्रिया अच्छी होती है। ये आपके उत्पाद को और बेहतर बनाने के अवसर हैं; अपने ग्राहकों की अस्वीकृति से सीख लेने के अवसर हैं। इससे आपके व्यवसाय और आपके उत्पाद को और आगे बढ़ने में मदद मिलेगी, और ऐसा जितना अधिक होगा, आप और आपके ग्राहक दोनों उतने ही अधिक खुश होंगे।

    2. उन्हें बताएं कि आप भी एक इंसान हैं

    एक चीज़ जो मुझे वास्तव में परेशान करती है, वह है रूखे ई-मेल मिलना जो ऑटो-जेनरेटेड उत्तरों जैसे प्रतीत होते हैं।

    बड़ी कंपनियाँ आमतौर पर वास्तविक ऑटो-जेनरेटेड प्रतिक्रियाओं और बॉट्स पर निर्भर करती हैं, लेकिन ऐसा इसलिए है क्योंकि उनके ब्रांड बाज़ार में पहले से ही अच्छी तरह स्थापित और विश्वसनीय हैं।

    अब, यदि आप हमारी तरह हैं, जहाँ वास्तविक लोग ग्राहक सहायता प्रदान करते हैं, तो अपने दर्शकों को यह बताना महत्वपूर्ण है कि आप भी एक इंसान हैं- कि वे आपसे संपर्क कर सकते हैं, मदद माँग सकते हैं, और उन्हें एक वास्तविक उत्तर मिल सकता है जो किसी कॉपी-पेस्ट किए गए, पहले से तैयार उत्तर जैसा न लगे।

    वन-ऑन-वन ई-मेल सहायता के लिए, मेरी एक सलाह यह है कि अपने ग्राहक से कभी भी ऐसी कोई बात न कहें जो आप असल ज़िंदगी में नहीं कहेंगे। इसका मतलब है कि अब “अभिवादन!” या “उत्तर में देरी के लिए हम विनम्रतापूर्वक क्षमा चाहते हैं” जैसे वाक्यांशों का उपयोग बंद करने का समय आ गया है।

    व्यक्तिगत रूप से, मुझे लगता है कि अत्यधिक औपचारिकता से यह आभास होता है कि आप सहायता इसलिए नहीं दे रहे हैं क्योंकि आपको परवाह है– बल्कि आप सहायता केवल इसलिए दे रहे हैं क्योंकि यह आपका काम है और आपको ऐसा करना पड़ता है।

    और यह बिल्कुल भी सही नहीं है।

    इसलिए जब तक कि यह कंपनी की नीति में न लिखा हो, अपने ग्राहकों को यह अहसास कराने का प्रयास ज़रूर करें कि वे आपसे बात कर सकते हैं। यह कि आप वास्तव में मदद करने के लिए मौजूद हैं, न कि केवल इसलिए रोबोटिक उत्तर दे रहे हैं क्योंकि कोई अन्य व्यक्ति आपको इसके लिए पैसे दे रहा है।

    3. उन्हें कभी अधर में न छोड़ें

    यह बात तो बिल्कुल स्पष्ट और स्वाभाविक है।

    अपने ग्राहक को उसकी समस्या के समाधान—या कम से कम किसी त्वरित उपाय—के बिना कभी भी, बिल्कुल कभी भी अधर में न छोड़ें।

    हालाँकि कभी-कभी, बिना सीधे समाधान वाली समस्याओं से बचना नामुमकिन हो सकता है। उदाहरण के लिए, मान लें कि कोई ग्राहक किसी ऐसी सुविधा के बारे में पूछता है जिसके बारे में आप जानते हैं कि वह जल्द जारी नहीं होने वाली है।

    आप क्या कहेंगे?

    “क्षमा करें, हमारे पास वह सुविधा नहीं है। अलविदा।

    सादर,
    सपोर्ट”

    खैर… इससे तो बिल्कुल बात नहीं बनेगी।

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

    “अधिक रंग उपलब्ध होते ही हम आपसे फिर संपर्क करेंगे!” और अपनी बात पर अमल करें।

    4. त्वरित उत्तर महत्वपूर्ण हैं- लेकिन साथ ही प्रभावी होना भी उतना ही जरूरी है

    हाँ, अपने ग्राहकों को यथाशीघ्र उत्तर देना महत्वपूर्ण है। लेकिन सिर्फ कोई जवाब भेज देना ही काफी नहीं है।

    आपके उत्तरों में सार होना चाहिए, और उन्हें वर्तमान समस्या के लिए आपके ग्राहकों को एक समाधान या विकल्प प्रदान करना चाहिए (बिंदु #3 देखें)। एक के बिना दूसरा अधूरा है।

    हाँ, आपके ग्राहक जल्दी में हैं – लेकिन उन्हें अधूरा या लापरवाह उत्तर देना उतना ही बुरा है जितना कि कोई उत्तर न देना (और शायद यह उससे भी बदतर साबित हो, क्योंकि एक बार जब आप “भेजें” बटन दबा देते हैं, तो वापस लौटने का कोई रास्ता नहीं होता)।

    5. ऐसे वादे करने से बचें जिन्हें आप पूरा नहीं कर सकते

    “चिंता न करें। हम इसे आपके लिए एक घंटे में ठीक कर देंगे!”

    यदि आपको इससे अधिक समय लगता है, तो आपकी और आपकी कंपनी दोनों की साख दांव पर लग जाती है।

    शुरुआत में भले ही यह आपके ग्राहकों को अच्छा लगे, लेकिन वादे पर खरा न उतरने से अधिक नुकसानदेह प्रतिक्रिया हो सकती है।

    यदि आप जानते हैं कि समस्या ठीक करने में आपको 24 घंटे लगेंगे, तो ईमानदार रहें, और उन्हें बता दें। वे जल्दबाजी में तैयार किए गए ऐसे उत्पाद की तुलना में, जो मुश्किल से काम करता हो, थोड़ा समय लेने वाले ठीक से काम करने वाले उत्पाद से अधिक संतुष्ट होंगे।

    निष्कर्ष

    तो अच्छी ग्राहक सहायता प्रदान करने का रहस्य क्या है? इसे कभी कम मत आंकिए।

    आपके ग्राहक आपकी प्रेरक शक्ति हैं, और अत्यंत महत्वपूर्ण हैं।

    उनके साथ वैसा ही व्यवहार करें।

    और अगली बार जब आप अच्छी ग्राहक सहायता में निवेश करने को लेकर अनिच्छुक दिखें, तो नील पटेल के इन शब्दों को याद रखें:

    “समझदार व्यवसाय मालिक जानते हैं कि खोया हुआ हर ग्राहक संबंध, चाहे वह किसी प्रतिस्पर्धी के कारण हो या अन्यथा, उन्हें हर साल औसतन $289 की चपत लगाता है।

    और यदि आप सोच रहे हैं कि आप नए ग्राहकों से उस नुकसान की भरपाई कर सकते हैं, तो दोबारा सोचें। सच तो यह है कि एक नए ग्राहक को जोड़ने में मौजूदा ग्राहक को बनाए रखने की तुलना में छह से सात गुना अधिक खर्च आता है।”

  • Page Builder Sandwich 2017: एक वर्ष की समीक्षा

    2017 में, हमने Page Builder Sandwich के फीचर्स का विस्तार करना शुरू किया। यह साल हमारे लिए एक बहुत बड़ी छलांग थी, और हम इससे ज़्यादा खुश नहीं हो सकते थे।

    हमें अपने उपयोगकर्ताओं के साथ-साथ WordPress के अपने दोस्तों से भी ढेर सारी प्रतिक्रियाएँ और समर्थन मिले हैं। और इसी वजह से, हम कुछ बड़ा बनाने में सक्षम हुए, कुछ ऐसा जिसने आपको हमारे साथ मिलकर अद्भुत चीजें बनाने का अवसर दिया।

    So without further ado, let’s look back at Page Builder Sandwich’s 2017. Here are our favorite updates and releases from this year.

    Parallax Scrolling

    Parallax Scrolling is a background effect that gives your page a a 3D layered look while you scroll.  We made adding this effect easy for our users- simply select the Parallax Scrolling option in your row’s background to add the parallax effect.

    Video Backgrounds

    Parallax Scrolling की तरह ही, Page Builder Sandwich आपको केवल Vimeo या YouTube लिंक कॉपी-पेस्ट करके, या मैन्युअल रूप से वीडियो अपलोड करके आकर्षक Video Backgrounds जोड़ने की सुविधा देता है।

    Ken Burns Backgrounds

    क्या आपने गौर किया है कि अधिकांश वृत्तचित्रों (डॉक्यूमेंट्रीज) में ऐतिहासिक फुटेज कैसे दिखाए जाते हैं? स्क्रीन पर एक छवि कैसे दिखाई जाती है, जो धीरे-धीरे ज़ूम इन होती है? इसे केन बर्न्स (Ken Burns) प्रभाव कहा जाता है। और हाँ, Page Builder Sandwich ने इसे भी 2017 में जारी किया था।

    Blank Page Template

    क्या आप एक नए सिरे से शुरुआत करना चाहते हैं? Page Builder Sandwich आपकी मदद के लिए तैयार है। हमने 2017 में Blank Page Template भी जारी किया, जो आपको पूरी तरह से खाली कैनवास पर अपनी वेबसाइट डिज़ाइन करने की सुविधा देता है।

    Full Page Templates

    Page Builder Sandwich released its very first set of Page Templates in January 2017. Niche-based and professionally designed, these templates also allow for manual editing so you can customize them the way you’d like.

    Mobile Responsiveness

    2017 वह वर्ष था जब हमने अपने फीचर्स की सूची में Mobile Responsiveness को शामिल किया था। अब आप अपनी वेबसाइट को मोबाइल के माध्यम से भी बिना किसी रुकावट के देख सकते हैं।

    All 800+ Google Fonts

    हमने आपको सभी 800+ Google Fonts के साथ अपनी वेबसाइट को और अधिक आकर्षक व लचीला बनाने की क्षमता दी।

    200% Performance Increase

    Bigger, better, faster. Page Builder Sandwich increased its performance by 200% in 2017.

    What’s in Store for 2018?

    Page Builder Sandwich वास्तव में उपयोगकर्ता के अनुकूल, सहज और वास्तविक फ्रंट-एंड पेज बिल्डर रहा है। जैसे-जैसे आप लोग अपनी ज़रूरतें साझा करते हैं, आपको वेबपेज बनाने का सबसे बेहतरीन अनुभव देने का हमारा दृष्टिकोण और बढ़ता जाता है।

    आपके विचारों से हमने 2018 के लिए कुछ और भी बेहतर बनाया है!

    Frontly Builder is the next step in our evolution and we’re at the final stages of development!

    Leave us your email to get first dibs on updates!

    ’til relaunch

    आप लोगों के समर्थन के बिना हम यहाँ तक नहीं पहुँच पाते, इसलिए इस 2017 में हमारे साथ रहने वाले सभी लोगों को बहुत-बहुत धन्यवाद! 2018 में और भी शानदार चीज़ें बनाने की शुभकामनाएँ। हम आपसे वहीं मिलेंगे!

    शुभकामनाएँ,
    The Page Builder Sandwich Team

  • हमने EDD से Freemius पर स्विच क्यों किया

    हमने EDD से Freemius पर स्विच क्यों किया

    When Page Builder Sandwich was launched in 2016, we were using Easy Digital Downloads. In 2017, we moved to Freemius. Here’s why we switched:

    EDD क्या है और हमने इसे क्यों चुना?

    Easy Digital Downloads (EDD) वर्डप्रेस के लिए एक लोकप्रिय सेल्फ़-होस्टेड ईकॉमर्स / WooCommerce विकल्प है। आउट ऑफ द बॉक्स, आप EDD का उपयोग करके वास्तव में वर्डप्रेस उत्पाद नहीं बेच सकते हैं, लेकिन इसका सॉफ्टवेयर लाइसेंसिंग एक्सटेंशन इसे प्लगइन्स बेचने के लिए एकदम सही बनाता है। यह एक्सटेंशन लाइसेंस कुंजियों के निर्माण और सत्यापन को भी संभालता था।

    EDD ने इसलिए भी अच्छा काम किया क्योंकि इसने ग्राहकों को सीधे वेबसाइट से हमारा उत्पाद खरीदने की अनुमति दी, साथ ही उन्हें अपना खाता पृष्ठ भी दिया जहाँ वे लॉग इन कर सकते हैं और अपना खरीदारी इतिहास देख सकते हैं।

    Since it worked well, and since we’re a big fan of Pippin Williamson, this was Sandwich’s first option.

    Freemius की तुलना में यह कैसे काम करता है, और हमने कब स्विच किया?

    2016 में, Freemius के मुख्य डेवलपर और सह-निर्माता वोवा फेल्डमैन (Vova Feldman) ने हमें Freemius का एक विवरण ईमेल किया, जिसमें बताया गया कि यह एक ईकॉमर्स समाधान से कहीं अधिक है — यह एनालिटिक्स और इनसाइट्स समाधान, एक मार्केटिंग ऑटोमेशन टूल, और बिल्ट-इन सपोर्ट टूल जैसी अन्य सुविधाएँ प्रदान करता है ताकि ग्राहक वर्डप्रेस डैशबोर्ड से सीधे आपसे संपर्क कर सकें।

    शुरुआत में, हमने केवल ‘Freemius Insights’ — जो Freemius की सुविधाओं में से एक है — क्योंकि हम एनालिटिक्स के बारे में उत्सुक थे। इसने वास्तव में हमें उन सामान्य कारणों को समझने में मदद की कि उस समय लोग हमारे प्लगइन को क्यों अनइंस्टॉल कर रहे थे।

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

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

    एनालिटिक्स के अलावा, Freemius प्लेटफ़ॉर्म इस तरह बनाया गया था कि आप अपने वर्डप्रेस उत्पादों को अधिक प्रभावी ढंग से बेचने के लिए इसका आसानी से उपयोग कर सकें!

    पक्ष और विपक्ष पर विचार करने के बाद, हम जनवरी 2017 में Freemius पर चले गए। यहाँ कारण बताया गया है:

    Freemius ग्राहकों को सीधे उनके वर्डप्रेस डैशबोर्ड पर आपका उत्पाद खरीदने की सुविधा देता है

    Instead of being redirected to an external website, Freemius allows customers to purchase straight from their WordPress Dashboard. This made huge impact on sales of course! Generally, the fewer things the user has to do to purchase something, the more likely it is that they actually make the purchase.

    EDD के साथ, सैंडविच (Sandwich) में रुचि रखने वाले लोगों को लाइसेंस कुंजी खरीदने के लिए अपने पेज निर्माण अनुभव से बाहर निकलकर किसी बाहरी वेबसाइट पर जाना पड़ता था। अंततः खरीदारी करने से पहले वे कई क्लिकों — और कई अन्य भटकावों — से गुज़रते थे।

    इसके विपरीत, Freemius के साथ ग्राहक सीधे अपने स्वयं के वर्डप्रेस डैशबोर्ड से खरीदारी करते हैं जबकि वे सैंडविच आज़मा रहे होते हैं — खरीदारी के लिए किसी भिन्न साइट पर जाने की आवश्यकता नहीं होती।

    इस पूरी सुविधा ने ग्राहकों के लिए खरीदारी को दस गुना अधिक सुगम और आसान बना दिया, जिससे बिक्री में उल्लेखनीय वृद्धि हुई।

    डेवलपर्स भी आपकी सफलता में रुचि रखते हैं

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

    लेकिन यहाँ ध्यान देने योग्य महत्वपूर्ण बात यह है कि उनका बिजनेस मॉडल आपके वर्डप्रेस उत्पाद की सफलता के इर्द-गिर्द घूमता है।

    वोवा और उनकी टीम बहुत सहयोगी हैं। उन्होंने हमें अधिक राजस्व कैसे उत्पन्न करें, अपने प्लगइन को कैसे बेहतर बनाएँ, और अपने लाभ के लिए Freemius का उपयोग कैसे करें, इस पर अपने सुझाव और तरकीबें दीं। जानकारी के प्रति उनकी उदारता ने सैंडविच के विकास में योगदान दिया।

    निष्कर्ष: यदि आप एक वर्डप्रेस उत्पाद लेखक हैं जो मुद्रीकरण करना चाहते हैं, तो Freemius सबसे सही विकल्प है।

    Page Builder Sandwich का उद्देश्य पेज निर्माण के माध्यम से सहजता और उपयोगकर्ता अनुभव को बढ़ाना है। Freemius भी यही करता है: यह ग्राहकों और विक्रेताओं दोनों के लिए अनुभव को प्रभावी ढंग से सुगम बनाता है।

    2017 में Freemius पर स्विच करने के बाद से, हमारे ग्राहक अधिक खुश हैं, अनइंस्टॉल दर कम हुई है, और कुल मिलाकर बेहतर बिक्री हुई है। यदि आप अपने वर्डप्रेस प्लगइन्स या थीम का मुद्रीकरण करना चाहते हैं, तो Freemius निश्चित रूप से सबसे अच्छा विकल्प है।

    इसकी सुविधाएँ प्रतिस्पर्धियों से बेहतर हैं। इसने सुधार के लिए बेहतर निर्णय लेने में हमारी मदद की। उनकी टीम उत्कृष्ट सहायता प्रदान करती है। यदि आप एक वर्डप्रेस उत्पाद लेखक हैं, तो हम आशा करते हैं कि आप भी Freemius के साथ उसी प्रभाव का अनुभव करेंगे जैसा हमने किया था।

  • हम बहुत जल्द कुछ बड़ा लॉन्च करने जा रहे हैं।

    In a few short months, we’ll be relaunching as Frontly Builder.

    फ़िलहाल, इस पर अभी भी काफ़ी काम चल रहा है। लेकिन फिर भी, हम आप सभी को यह दिखाने के लिए बेहद उत्साहित हैं कि हम क्या कर रहे हैं। यहाँ, हम बात करेंगे कि हम यह बदलाव क्यों कर रहे हैं, Frontly कैसे PBS से अलग होने वाला है, और आपको किन चीज़ों पर ध्यान देने की ज़रूरत है।

    Page Builder Sandwich से Frontly Builder तक

    Before the idea of Sandwich, we noticed a little pattern with page builders everywhere: A lot of them were difficult to use.

    For example, some of these builders would have you go through numerous pop-ups and other settings if you want to add something as simple as an image, a row, a button.

    And if you wanted to change a column’s settings, clicking on the edit button takes you to yet another pop-up that requires you to input settings like size and margins through dropdown options that aren’t very flexible.

    It was frustrating because we knew that page builders should exist to make things easier for users, not the other way around.

    Other wordpress page builders
    Other WordPress Page Builders

    This is how we came up with Page Builder Sandwich.

    We wanted to introduce a builder that was going to maximize users’ experience when creating webpages, allowing them to create awesome things the fast and easy way.

    We received lots of great feedback that allowed Sandwich to evolve. And the more our audience grew, the more suggestions we received on how we could further improve the plugin.

    We were in a state of constant development, and we loved it.

    Page Builder Sandwich has true front-end power, and so will Frontly Builder.

    TRUE Frontend पर चलने के अर्थ को नए सिरे से परिभाषित करना

    Sandwich का विकास निरंतर था।

    Apart from the feedback (both negative— things we could work on; and positive ones— which we knew we had to retain), Sandwich’s capacity to grow increased, too. We kept finding more and more ideas and solutions to further improve PBS.

    And the more wants and needs from PBS arose, the more our code’s main foundation got tweaked.

    अपनी सभी पसंदीदा टॉपिंग्स वाले एक असली सैंडविच की कल्पना करें।

    ज़रूर, इसका स्वाद बहुत बढ़िया होगा, लेकिन यह आपके मुँह में कैसे समाएगा? यह अपने मुख्य उद्देश्य को कैसे पूरा करेगा— यानी खाए जाना?

    This is kind of what happened with PBS. We realized that so much more could be done with it with an even more efficient, stronger foundation. That we could take it further.

    जैसा कि हमने बताया, Page Builder Sandwich निरंतर विकास की स्थिति में है।

    Frontly is the next step to that evolution.

    You’ll still get an awesome support team, theme and plugin compatibility, and more.

    LIKE US ON FACEBOOK to see the logo!

    यह Page Builder Sandwich के लिए अलविदा नहीं है।

    It’s a hello to Frontly.

    So what makes Frontly different from Page Builder Sandwich?

    We’ve been working really hard to maximize Frontly’s development. The goal now is to make it an insanely better version of PBS — to embody what it means to operate on true front-end.

    Right now, we’re focusing on further improving Frontly’s UX and UI. We’ve worked on giving it a smoother look, a more user-friendly experience, and features that’ll let you build professional-looking websites in even less effort and less time.

    Questions on Frontly?

    We have a short FAQ post you can check out. Add a comment below so we can add your questions to our list!

    यह बहुत जल्द आ रहा है।

    While we’re crazy excited to show you guys what we’ve come up with, we wanna make sure everything is just right for you. So leave us your email to get first dibs on updates, tips and trick, and big promos on the release date.

    We are relaunching as Frontly Builder.

    Leave your email so you don’t miss out.

     

  • Frontly Builder: अक्सर पूछे जाने वाले सवाल

    A few months ago, we announced the launch Frontly Builder, a bigger, better front-end page builder with increased performance and awesome new stuff. Think of it as a new and improved version of Page Builder Sandwich.

    इस पर अभी काम चल रहा है, लेकिन यह बहुत जल्द आ रहा है। इस बीच, हमें पूरा यकीन है कि आप लोगों के मन में Frontly को लेकर कुछ सवाल होंगे। तो यहाँ सभी के लिए एक संक्षिप्त FAQ है!

    What will happen to my PBS-run site?/Will I lose everything I’ve built using PBS?/Will the Frontly update destroy my website?

    • No, definitely not! Everything you’ve made using Page Builder Sandwich will remain intact, and nothing will change.

    I purchased Page Builder Sandwich before the Frontly release. What do I do?

    • The only thing you have to do is… nothing. For current PBS users, Frontly will be released as an “update”. You’ll just be upgraded to a “better” version of PBS- Frontly.

    Will I have to repurchase Frontly?

    • No. If you’ve purchased PBS before the Frontly release, you don’t need to purchase anything. As mentioned, everything will be released as an “update” for old users, so you won’t have to lift a finger or shell anything out- we’ve sorted everything out for you guys. ?

    अभी के लिए बस इतना ही! अगर आप लोगों के पास और सवाल हैं, तो नीचे हमें कमेंट करके बताएं ताकि हम उन्हें FAQ की इस सूची में जोड़ सकें।

    हमें उम्मीद है कि आप Frontly को लेकर उतने ही उत्साहित हैं जितने कि हम! वहाँ मिलते हैं। ?

    अपडेट्स सबसे पहले पाने के लिए हमें अपना ईमेल दें!

  • #PBSUpdate: फुल पेज, नीश-आधारित टेम्पलेट्स

    PBS Version 4.0 has been our biggest update yet, and with its release, we’ve included a new game-changing feature, the Full Page, Niche-Based Templates.

    The Full Page Templates are a set of 10 professionally designed, niche-based templates. They’re ready to use upon downloading PBS, and can be used as is, or may be tweaked to fit your taste.

    Use as a Starting Point for Your Page

    टेम्पलेट्स का उपयोग वेबपेज बनाने के सबसे कुशल तरीकों में से एक है। साइट डिज़ाइन और लेआउट से संबंधित समस्याओं के त्वरित समाधान के रूप में इन्हें अक्सर पेश किया जाता है, जो उपयोगकर्ता को चुनने के लिए कई (आमतौर पर अलग-अलग थीम वाले) विकल्प प्रदान करते हैं। संस्करण 4.0 अपडेट के साथ, Page Builder Sandwich ने आखिरकार अपना स्वयं का एक सेट जारी कर दिया है।

    A screenshot of one of our templates, the PBS Farm Template

    The Benefits

    PBS के फुल पेज टेम्पलेट्स को आपके वेबपेज को स्क्रैच से डिज़ाइन करने के बोझ को कम करने के लिए तैयार किया गया है। प्रत्येक टेम्पलेट को एक विशिष्ट क्षेत्र (niche) को ध्यान में रखकर डिज़ाइन किया गया है, जिसमें प्रत्येक में ऐसे तत्व शामिल हैं जो किसी विशेष उद्योग के लिए उपयुक्त हैं। उदाहरण के लिए, होटल टेम्पलेट में Google मानचित्र, संपर्क फ़ॉर्म और आपके होटल की सुविधाओं को प्रदर्शित करने के लिए डिज़ाइन किए गए अनुभाग जैसी सुविधाएं शामिल हैं। दूसरी ओर, फ़ैशन टेम्पलेट में एक हिंडोला (carousel) शामिल है जहाँ आप अपने नवीनतम उत्पादों को उनकी कीमतों के साथ नीचे प्रदर्शित कर सकते हैं।

    Tweak, Tweak, Tweak

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

    A section of the PBS Farm Template with tweaked colors and different photo that may cater to a different niche

    The 10 templates we currently have available (we’ll be releasing more soon!) are themed according to the following common niches and industries:

    1. Hotel Template

    • For hotels, spas, or similar business.
    • Includes video background hero header, carousel testimonials, contact form, Google Map, and more.

    2. Law/Corporate Template

    • For law firms and other corporate businesses.
    • Includes about us section, carousel testimonials, meet the team section, and more.

    3. Fashion Template

    • Use for online clothing stores and other e-commerce sites. Includes featured products carousel, call–to–action buttons, latest blogpost previews, and more.
    • Includes featured products carousel, call–to–action buttons, latest blogpost previews, and more.

    4. Farm Template

    • Ideal for subscription e–commerce sites.
    • Includes promo header, call–to–action buttons, subscription plan sections, and more.

    5. Restaurant Template

    • Perfect for restaurants and other delivery service businesses.
    • Includes hero header with space for delivery numbers, menu section, business hours section, and more.

    6. Concert Template

    • Ideal for concerts and other big events or gatherings.
    • Includes countdown, video background, affiliates section, prices section, subscription button, and more.

    7. Forum Template

    • Use for communities, small organizations, and more.Includes call-to-action buttons, about section, count up, meet the team section, and more.
    • Includes call-to-action buttons, about section, count up, meet the team section, and more.

    8. Portfolio Template

    • For photography or art portfolios, and more.
    • Includes iconified skillset section, gallery, social media buttons, and more.

    9. Industrial Template

    • Use for industrial or manufacturing businesses, and more.
    • Includes hero header with video background, about us/featured product sections, carousel testimonials, and more.

    10. Wedding Template

    • Perfect for weddings and other small intimate events.
    • Includes hero header with video background, photo gallery, RSVP section, Google Map, and more.

    Some samples of PBS’ Full Page Templates: the Law, Forum, and Hotel Templates

    The Future of Full Page Templates

    हालाँकि हमारे पास इस समय 10 टेम्पलेट उपलब्ध हैं, लेकिन हम वर्तमान में और अधिक बनाने की प्रक्रिया में हैं। बेशक, हम चाहते हैं कि सभी सामान्य क्षेत्रों और उद्योगों को शामिल किया जाए, लेकिन यदि आपके पास कोई सुझाव है, तो बेझिझक हमें संदेश भेजें।

    साइट निर्माण की शुभकामनाएँ!

  • हमने अपने प्लगइन के प्रदर्शन को 200% कैसे बढ़ाया

    पिछले 2 फरवरी, 2017 को, एन टेलर ने CodeInWP में 12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right लेख लिखा था। हम एक साल से भी अधिक समय से Page Builder Sandwich में लगातार सुधार कर रहे हैं: हम अपना शोध करते हैं, अपने ग्राहकों की बात सुनते हैं, इसलिए हमने सोचा था कि Page Builder Sandwich CodeInWP के “Who Got it Right” लेख में जगह बना लेगा। हालांकि, परफॉर्मेंस की वजह से ऐसा नहीं हो पाया। ?

    इसलिए हमने एन से इसके बारे में पूछा, और उन्होंने उत्तर दिया:

    …मैंने इसके मुफ़्त वर्शन को थोड़ा आज़माया। यह काफी आशाजनक लगता है: बहुत सारे मॉड्यूल, काफी सहज यूआई (UI), बेहतरीन WYSIWYG अनुभव, सब कुछ आसानी से ड्रैग हो जाता है। हालाँकि, जब मेरे पेज पर लगभग 10 मॉड्यूल थे, तो धीमी संपादन गति (editing speed) के कारण इसके साथ काम जारी रखना कठिन हो गया…

    तो उनके अनुसार, Page Builder Sandwich में परफॉर्मेंस संबंधी समस्याएं हैं। और चूँकि हम हमेशा फीडबैक पर ध्यान देते हैं, हमने इसकी जांच की।

    परफॉर्मेंस की टेस्टिंग

    हमें PBS के परफॉर्मेंस की जांच करने के लिए एक तरीके की आवश्यकता थी; चूँकि PBS मुख्य रूप से जावास्क्रिप्ट (Javascript) के माध्यम से ब्राउज़र पर चलता है, इसलिए Chrome का Timeline profiler इस काम के लिए सबसे सही टूल था। टाइमलाइन प्रोफाइलर यह पहचान और माप सकता है कि रनटाइम के दौरान वेबपेज में कौन सी प्रक्रियाएं हो रही हैं, जो स्पीड बॉटलनेक का पता लगाने के लिए बिल्कुल उपयुक्त है।

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

    जैसे ही हमने रिकॉर्ड बटन दबाया, हमने स्क्रीन पर लगभग 2 सेकंड तक माउस घुमाया, फिर स्टॉप बटन दबा दिया।  प्रोफाइलर से प्राप्त परिणामी टाइमलाइन यहाँ दी गई है:

    और देखिए! यह परफॉर्मेंस बॉटलनेक्स से पूरी तरह भरा हुआ है!

    ग्राफ़ में बहुत कुछ हो रहा है, लेकिन सबसे स्पष्ट समस्या यह है कि इसमें बहुत सारे बैंगनी क्षेत्र हैं (जो कि नहीं होने चाहिए)। इसके अलावा, ये बैंगनी क्षेत्र दिखने में काफी चौड़े हैं, और ऐसा लगता है कि वे सभी ग्राफ़ के चरम स्तर (peak) को छू रहे हैं। आप यह भी देखेंगे कि ग्राफ़ हमेशा भरा हुआ रहता है, और बैंगनी क्षेत्र लगभग कभी भी शून्य तक नहीं आते हैं। ऐसा लगता है जैसे ब्राउज़र हमेशा कुछ न कुछ करने में व्यस्त रहता है, और लगभग कभी आराम नहीं करता।

    लेकिन उन सभी बैंगनी क्षेत्रों का वास्तव में क्या मतलब है?

    प्रोफाइलर से हमें पता चला कि इन्हें रिफ्लो (reflows) कहा जाता है। Google डेवलपर साइट:

    दस्तावेज़ में तत्वों (elements) की स्थितियों और ज्यामिति (geometries) की पुनर्गणना करने की वेब ब्राउज़र प्रक्रिया का नाम रिफ्लो है.. रिफ्लो ब्राउज़र में उपयोगकर्ता को ब्लॉक करने वाला एक ऑपरेशन (user-blocking operation) है।

    तो इसका मतलब यह है कि PBS में माउस को इधर-उधर घुमाने से ढेरों रिफ्लो ट्रिगर होते हैं। इससे भी बुरी बात यह है कि प्रत्येक रिफ्लो ब्राउज़र को थोड़ी देर के लिए रोक देता है ताकि वह अपनी गणना पूरी कर सके। अधिक रिफ्लो का अर्थ है अधिक बार ब्राउज़र का रुकना, और अनुभव और भी अधिक झटकेदार (janky) हो जाता है। सरल शब्दों में कहें तो, बहुत सारे बैंगनी क्षेत्र = खराब।

    तो यह साबित हुआ कि एन सही थीं: हमारे पास वास्तव में एक बहुत बड़ा परफॉर्मेंस बॉटलनेक था, इसलिए हमारी टीम इसे तुरंत ठीक करने के काम में जुट गई।

    हमारी रिफ्लो / जेंक (Jank) समस्या का समाधान

    किसी भी अन्य चीज़ से पहले, हमें यह जानने के लिए कुछ शोध करने की आवश्यकता थी कि वास्तव में इस रिफ्लो का कारण क्या है। हमें पता चला कि जाहिर तौर पर, जावास्क्रिप्ट में बहुत सी सामान्य चीजें ब्राउज़र को रिफ्लो करने के लिए उकसा सकती हैं।

    लगभग कोई भी फ़ंक्शन जिसका उपयोग आप DOM एलिमेंट की चौड़ाई, ऊँचाई या स्थिति प्राप्त करने के लिए कर सकते हैं, रिफ्लो को ट्रिगर कर सकता है। पॉल आयरिश ने जावास्क्रिप्ट के उन सभी प्रॉपर्टीज़ और फ़ंक्शन्स की एक विस्तृत सूची लिखी है जो ऐसा कर सकते हैं। बुरी खबर यह है कि Page Builder Sandwich इनमें से कई प्रॉपर्टीज़ और फ़ंक्शन्स का उपयोग करता है, और वे सभी रिफ्लो का कारण बनते हैं:

    • elem.getBoundingClientRect()
    • window.getComputedStyle()
    • window.scrollY
    • और भी बहुत कुछ…

    समाधान #1: अत्यधिक संसाधन लेने वाली रिफ्लो प्रक्रियाओं को कैश (Cache) करना

    सबसे स्पष्ट समाधान उन प्रॉपर्टीज़ और फ़ंक्शन्स का उपयोग न करना है। हालाँकि, PBS उन पर काफी निर्भर करता है और हम उनके बिना काम नहीं चला सकते।

    हमारे पास जो समाधान बचा है वह यह है कि उन फ़ंक्शन्स के कॉल्स को जितना संभव हो उतना कम किया जाए। यहाँ कठिन बात यह थी कि हमने PBS के विभिन्न हिस्सों में उन प्रॉपर्टीज़ और फ़ंक्शन्स का कई बार उपयोग किया था, और अधिकांश समय, हमने एक ही DOM एलिमेंट पर कई बार उनका उपयोग किया था। इसे ठीक करने के लिए, हमने प्रत्येक समस्याग्रस्त प्रॉपर्टी/फ़ंक्शन के लिए अपना खुद का कैशिंग तंत्र बनाया।

    उदाहरण के लिए, getBoundingClientRect  फ़ंक्शन हमें DOM एलिमेंट का वर्तमान टॉप, लेफ्ट, चौड़ाई, ऊँचाई, राइट और बॉटम पिक्सेल माप देता है। हम PBS में एलिमेंट की आउटलाइन कहाँ खींचनी है, इसकी गणना करने के लिए हर समय इस फ़ंक्शन का उपयोग करते हैं। इसके लिए हमने जो कैशिंग फ़ंक्शन बनाया है, वह यहाँ है:

    // Cache: Our client rects are kept here, we can use this to clear them later.
var elemsWithBoundingRects = [];

window.pbsGetBoundingClientRect = function( element ) {

	// Check if we already got the client rect before.
	if ( ! element._boundingClientRect ) {

		// If not, get it then store it for future use.
		element._boundingClientRect = element.getBoundingClientRect();
		elemsWithBoundingRects.push( element );
	}
	return element._boundingClientRect;
};
​

    getBoundingClientRect  को कॉल करने के बजाय, अब हमने pbsGetBoundingClientRect  का उपयोग किया। अब हर बार जब क्लाइंट रेक्ट (client rect) की क्वेरी की जाती है, तो हम उस मान को भविष्य के संदर्भ के लिए संग्रहीत कर लेते हैं, जिससे रिफ्लो ट्रिगर्स की संख्या सीमित हो जाती है।

    जब संग्रहीत क्लाइंट रेक्ट अमान्य हो जाते हैं, तो हमें कैश को साफ़ करने के तरीके की भी आवश्यकता थी। जब उपयोगकर्ता पेज को स्क्रॉल करता है या स्क्रीन में तत्वों को जोड़ता/बदलता/हटाता है, तो संग्रहीत क्लाइंट रेक्ट के मान बदल जाते हैं। इसलिए हमने एक कैश क्लियरिंग फ़ंक्शन बनाया जिसे हम जब भी नए क्लाइंट रेक्ट मानों की आवश्यकता हो, कॉल कर सकते हैं:

    var clearClientRects = function() {
	var i;
	for ( i = 0; i < elemsWithBoundingRects.length; i++ ) {
		if ( elemsWithBoundingRects[ i ] ) {
			elemsWithBoundingRects[ i ]._boundingClientRect = null;
		}
	}
	elemsWithBoundingRects = [];
};​

    हमने अन्य भारी फ़ंक्शन कॉल्स के लिए भी यही कैशिंग तंत्र लागू किया जिनका हम आमतौर पर उपयोग करते हैं।

    समाधान #2: FastDom का उपयोग करके Reads और Writes को एक साथ समूहीकृत करना

    समाधान #1 को लागू करने से PBS का परफॉर्मेंस बढ़ा, लेकिन यह पर्याप्त नहीं था।

    थोड़ा और गूगल करने पर, हमें ‘layout thrashing’ की रोकथाम पर विल्सन पेज का एक लेख मिला। विल्सन कहते हैं:

    लेआउट थ्रैशिंग (रिफ्लो) तब होती है जब जावास्क्रिप्ट बार-बार DOM में तेज़ी से लिखता (writes) है और फिर पढ़ता (reads) है, जिससे डॉक्यूमेंट में रिफ्लो होता है।

    जाहिर तौर पर, विशिष्ट रिफ्लो-ट्रिगर करने वाली प्रॉपर्टीज़ और फ़ंक्शन्स पर अपने कॉल्स को सीमित करना ही पर्याप्त नहीं है। जब आप DOM पर लगातार कई “reads” और “writes” करते हैं, तो यह ब्राउज़र रिफ्लो को भी ट्रिगर करता है। यहाँ सीधे विल्सन की साइट से एक विशिष्ट परिदृश्य दिया गया है:

    // Read
var h1 = element1.clientHeight;

// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';

// Read (triggers reflow)
var h2 = element2.clientHeight;

// Write (invalidates layout)
element2.style.height = (h2 * 2) + 'px';

// Read (triggers reflow)
var h3 = element3.clientHeight;

// Write (invalidates layout)
element3.style.height = (h3 * 2) + 'px';

// Document reflows at end of frame​

    ऊपर दिया गया उदाहरण 3 रिफ्लो को ट्रिगर करता है क्योंकि लिखने (write) के बाद पूरे पेज के आयाम अमान्य हो जाते हैं। इसके लिए सुझाया गया समाधान कोड को पुनर्व्यवस्थित करके सभी reads और writes को एक साथ बंच (एकत्र) करना है ताकि पूरी प्रक्रिया केवल 1 ब्राउज़र रिफ्लो को ही ट्रिगर करे:

    // Read
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;

// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';

// Document reflows at end of frame​

    ऊपर दिया गया स्निपेट समस्या को ठीक करना आसान दिखाता है। लेकिन वास्तव में, PBS में, रिफ्लो ट्रिगर करने वाली चीज़ों को पढ़ना और लिखना PBS के लाइफ़-साइकिल के दौरान कई अलग-अलग जगहों पर और अलग-अलग समय पर होता है। जावास्क्रिप्ट कोड की हज़ारों पंक्तियों को फिर से व्यवस्थित करना संभव नहीं है।

    सौभाग्य से हमारे लिए, विल्सन ने अपने लेख में एक समाधान भी प्रदान किया था। उन्होंने उन reads और writes को एक साथ बंच करने में मदद के लिए एक छोटी यूटिलिटी स्क्रिप्ट बनाई, जिसे FastDom कहा जाता है।

    Page Builder Sandwich का कुछ कोड यहाँ दिया गया है जो FastDom का उपयोग करता है और इसमें हमारा उपरोक्त समाधान #1 भी शामिल है:

    // Bunch together the reads from other threads.
fastdom.measure( function() {

	// Use our cached client rect.
	var rect = window.pbsGetBoundingClientRect( elem );

	// Bunch together the writes from other threads.
	fastdom.mutate( function() {
		elem.style.top = ( rect.top + window.pbsScrollY() ) + 'px';
		elem.style.height = rect.height + 'px';
		elem.style.left = rect.left + 'px';
		elem.style.width = rect.width + 'px';
	}.bind( this ) );
}.bind( this ) );​

    FastDom यह करता है कि यह सभी fastdom.measure  कॉल्स और सभी fastdom.mutate  कॉल्स को एक साथ समूहीकृत करता है और उन्हें एसिंक्रोनस रूप से निष्पादित करता है, जिससे ब्राउज़र में सभी रिफ्लो को कम करने के लिए सभी reads और writes प्रभावी रूप से एक साथ आ जाते हैं।

    समाधान #3: स्टाइल ऑब्जेक्ट्स को एक्सेस करना महंगा (Costly) है

    हमें jsPerf की मदद से यह भी पता चला कि कुछ स्टाइल-प्राप्त करने वाले फ़ंक्शन्स दूसरों की तुलना में तेज़ थे।

    PBS में, हमें आमतौर पर किसी एलिमेंट की किसी विशिष्ट स्टाइल का वर्तमान मान प्राप्त करने की आवश्यकता होती है। उदाहरण के लिए, हम सामान्यतः टॉप मार्जिन प्राप्त करने के लिए इसका उपयोग करते हैं:

    var styles = window.getComputedStyle( elem );
var marginTop = styles.marginTop;​

    लेकिन, हमें पता चला कि ऐसा करना कहीं अधिक तेज़ है:

    var marginTop = elem.style.marginTop;​

    हालाँकि, elem.style.marginTop  और getComputedStyle  बहुत भिन्न हैं। पहला हमें केवल एलिमेंट की इनलाइन स्टाइलिंग देता है, और किसी भी स्टाइलशीट को ध्यान में नहीं रखता है; और दूसरा इनलाइन स्टाइल और स्टाइलशीट दोनों को ध्यान में रखता है।

    इतना ही नहीं, getComputedStyle  परिणाम कैश होने के बावजूद भी यह बहुत धीमा था। जैसा कि सामने आया, स्टाइल ऑब्जेक्ट को स्वयं एक्सेस करना ही धीमी प्रक्रिया है।

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

    var marginTop = elem.style.marginTop;
if ( ! marginTop ) {
	var styles = window.getComputedStyle( elem );
	marginTop = styles.marginTop;
}​

    कोड सुधारों के परिणाम

    हमारे उपरोक्त 3 समाधानों में बहुत सारे शोध, परीक्षण और वास्तविक कार्यान्वयन की आवश्यकता पड़ी (और हमारे Fonts फीचर को रिलीज़ होने में देरी हुई), लेकिन अंत में यह सब सार्थक रहा।

    स्क्रीन पर 2 सेकंड के लिए माउस को ले जाने के हमारे शुरुआती परीक्षण पर वापस आते हैं। यहाँ पुरानी अप्रिय/झटकेदार टाइमलाइन दी गई है:

    और परफॉर्मेंस सुधारों के बाद हमारी नई टाइमलाइन इस तरह दिखती है:

    जैसा कि आप देख सकते हैं, ग्राफ़ में बैंगनी क्षेत्र कम हैं। और ब्राउज़र द्वारा की जा रही प्रक्रियाओं की मात्रा में एक उल्लेखनीय अंतर है। नीचे दी गई आयताकार पट्टियाँ भी पतली हैं, जिसका अर्थ है कि प्रक्रियाएं पहले की तुलना में तेज़ी से चल रही हैं।

    यदि आप पुराने और नए ग्राफ़ में ऊँचे/चौड़े बैंगनी क्षेत्रों की मात्रा की तुलना करें, तो हमें आश्चर्यजनक रूप से 200% परफॉर्मेंस वृद्धि देखने को मिल रही है! हम हर स्तर पर परफॉर्मेंस में सुधार भी देख रहे हैं। बिल्कुल भी बुरा नहीं है!

    मुख्य बातें और सीख

    सच कहें तो, एन द्वारा इसका उल्लेख किए जाने से पहले हमें नहीं लगा था कि PBS में परफॉर्मेंस संबंधी समस्याएं थीं। मुख्य रूप से इसलिए क्योंकि हम डेवलपमेंट-केंद्रित मशीनों का उपयोग कर रहे थे और परफॉर्मेंस बॉटलनेक्स इतने स्पष्ट नहीं थे। पीछे मुड़कर देखें, तो परफॉर्मेंस की जांच करना सर्वोच्च प्राथमिकताओं में से एक होना चाहिए था। लेकिन कम से कम अब, वर्शन 4.3 के अनुसार इसका ध्यान रख लिया गया है। ?

    जो लोग अपने वर्डप्रेस प्लगइन के परफॉर्मेंस में सुधार करना चाहते हैं, खासकर यदि आप भी भारी जावास्क्रिप्ट का उपयोग कर रहे हैं, तो इस अनुभव से मेरे प्रमुख सुझाव यहाँ दिए गए हैं:

    1. रिफ्लो को ट्रिगर करने वाले प्रॉपर्टीज़/फ़ंक्शन्स के कॉल्स को सीमित/कैश करें। इसे एक गाइड के रूप में उपयोग करें: What forces layout/reflow. The comprehensive list.
    2. DOM स्टाइल्स के “reads” और “writes” को एक साथ समूहीकृत करें। इसे अपने लिए करने हेतु FastDom का उपयोग करें।
    3. Chrome के Timeline profiler का उपयोग करें, और सुनिश्चित करें कि आपके पास कम से कम रिफ्लो (बैंगनी चीजें) हों।

  • पैरालैक्स इफ़ेक्ट, वीडियो बैकग्राउंड और केन बर्न्स इफ़ेक्ट कैसे जोड़ें

    Page Builder Sandwich में एक ऐसी सुविधा है जिसे हम सामूहिक रूप से फैंसी बैकग्राउंड इफेक्ट्स (Fancy Background Effects) कहना पसंद करते हैं। ये तीन प्रकार के हैं: पैरालैक्स इफेक्ट (Parallax Effect), वीडियो बैकग्राउंड (Video Backgrounds), और केन बर्न्स इफेक्ट (Ken Burns Effect)।

    What are the different Fancy Background Effects?

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

    द पैरालैक्स इफेक्ट (The Parallax Effect)

    अपने पेज पर पैरालैक्स इफेक्ट को लागू करने से आपके बैकग्राउंड को गहराई का अहसास मिलता है, जिससे स्क्रॉल करते समय आपकी साइट के कुछ तत्व “उभर कर सामने आते” हैं। यहाँ पैरालैक्स बैकग्राउंड के साथ और बिना पैरालैक्स बैकग्राउंड वाले पेज का एक उदाहरण दिया गया है।

    With Parallax Scrolling

    The background image scrolls at a different rate as the rest of the elements in the page.

    Without Parallax Scrolling

    The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

    Video Backgrounds

    वीडियो बैकग्राउंड आपको स्थिर छवियों के बजाय बैकग्राउंड पर लूपिंग वीडियो लगाने की अनुमति देते हैं। PBS के वीडियो बैकग्राउंड की सबसे अच्छी बात यह है कि जब पूछा जाए तो आप बस अपना मनचाहा YouTube या Vimeo लिंक पेस्ट कर सकते हैं, और हम इसे आपके लिए एक वीडियो बैकग्राउंड में बदल देंगे। इसके लिए आप अपने खुद के वीडियो भी अपलोड कर सकते हैं।

    वीडियो बैकग्राउंड के कुछ नमूने जिन्हें आप देख सकते हैं:

    The Ken Burns Effect

    Ken Burns, who popularized the Ken Burns effect in film.

    In documentaries, do you ever notice when they show photos that slowly zoom into detail? That’s called the Ken Burns Effect. You can access these effects on Page Builder Sandwich, too.

    How do I add the Fancy Background Effects?

    आप निम्नलिखित चरणों के माध्यम से सभी फैंसी बैकग्राउंड इफेक्ट्स पा सकते हैं:

    Step 1: Choose a row you’d like to add an effect on. Click on this row’s settings button (the gear icon on the left). This will open the Properties Inspector.

    Step 2: Once the Properties Inspector pops up, scroll down a bit until you find the option called “Fancy Background Effects”.

    Step 3: Once you’ve found it, you’ll see that you can click a dropdown button and select which background effect you’d like on your row.

    Step 4: Depending on which Fancy Background Effect you choose, you can adjust each effect’s settings. For example, for the Parallax effect, you can adjust its height and position.

    और आपका काम पूरा हो गया! इसके बाद, आपको अपनी साइट पर अपने फैंसी बैकग्राउंड इफेक्ट्स पूरी तरह से दिखाई देने चाहिए।

    Have you used PBS’ Fancy Backgrounds yet?

    क्या कोई अन्य बैकग्राउंड इफेक्ट्स हैं जिन्हें आप सुझाव देना चाहेंगे कि हम अपनी सुविधाओं में जोड़ें? या इन इफेक्ट्स में से किसी एक के साथ बनाई गई अपनी PBS साइट हमें दिखाएं? हमें नीचे टिप्पणी अनुभाग में बताएं!

  • पैरलैक्स स्क्रॉलिंग: यह क्या है?

    The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.

    पैरलैक्स स्क्रॉलिंग की परिभाषा

    Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.

    Without Parallax Scrolling

    The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.

    With Parallax Scrolling

    The background image scrolls at a different rate as the rest of the elements in the page.

    पैरलैक्स स्क्रॉलिंग का उपयोगकर्ताओं पर प्रभाव

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

    वेब डिज़ाइन के क्षेत्र में, नाइकी (Nike) को अक्सर 2011 में पैरलैक्स स्क्रॉलिंग का उपयोग करने वाले पहले लोगों में से एक माना जाता है। तब से, “पैरलैक्स स्क्रॉलिंग” (जिसे कभी-कभी “पैरलैक्स बैकग्राउंड” भी कहा जाता है) शब्द डिजाइनरों और डेवलपर्स दोनों के बीच एक सामान्य शब्द बन गया है, जिसकी लोकप्रियता लगातार बढ़ रही है।

    Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
    in slightly varying speeds, as compared to Mario and the other characters in the foreground.

    उपयोगकर्ता के लिए इसमें क्या है

    इस प्रभाव की सबसे बड़ी खासियत यह है कि यह उपयोगकर्ताओं को आपकी वेबसाइट से जुड़ने के लिए प्रेरित करता है, जिससे उपयोगकर्ता का जुड़ाव और आकर्षण दोनों बढ़ जाते हैं। और, जब सही तरीके से किया जाए, तो पैरलैक्स स्क्रॉलिंग सबसे सरल वेबसाइटों में भी जान फूंक सकती है। इसका उपयोग शानदार आख्यान (नैरेटिव्स) बनाने के लिए भी किया जा सकता है जो तुरंत साइट के सभी दर्शकों को आकर्षित कर लेते हैं।

    अपना काम हमारे साथ साझा करें!

    तो आप सब क्या सोचते हैं? क्या आपने अभी तक PBS v4 से नवीनतम पैरलैक्स बैकग्राउंड सुविधा का उपयोग किया है? क्या यह आपके फायदे के लिए काम कर रहा है? बेझिझक अपने काम का लिंक हमें दें, या नीचे टिप्पणी अनुभाग में कुछ सुझाव छोड़ें।

    साइट निर्माण की शुभकामनाएँ!

  • 4 वेबसाइट डिज़ाइन संबंधी गलतियाँ जिनसे आपको 2018 में बचना चाहिए

    If there’s one thing you need to remember when building a website, it’s to never take good design for granted.

    As we’ve mentioned in a previous article, a site visitor’s first impression on your website can make or break you in just a matter of seconds.

    In other words, if they don’t like what they see within that timeframe, chances are they’re going to close their browser windows and direct their attention elsewhere.

    Fortunately, there are a lot of ways to prevent this from happening; one of them is to familiarize yourself with good web design practices. And the good news is you don’t need to be a professional web designer in order to do so.

    Because while it’s true that not everyone has a good eye for design, preventing bad design becomes easier once you know what to avoid.

    इसके साथ ही, सुनिश्चित करें कि आप वेब डिज़ाइन की इन 4 सामान्य गलतियों को ध्यान में रखें। इस तरह, जब आप आखिरकार अपनी वेबसाइट बनाना शुरू करेंगे, तो आपको एक कम बात की चिंता करनी होगी।

    गलती #1: 3 से अधिक फ़ॉन्ट का उपयोग करना

    A rule of thumb when designing websites? Try not to have too much visual elements going on within your space. Having more than 3 fonts on your site design is a surefire way to break this one rule. It’ll also overwhelm your site visitors.

    अपनी वेबसाइट के फ़ॉन्ट को न्यूनतम 3 तक रखना पेशेवरों द्वारा अपनाई जाने वाली एक सामान्य डिज़ाइन पद्धति है। इसके अलावा, यह आपकी साइट की पठनीयता और निरंतरता के स्तर को बढ़ाता है, जो आपकी साइट के ट्रैफ़िक की सफलता के लिए महत्वपूर्ण हैं।

    DON’T DO THIS:

    Don’t use more than 3 fonts and try to avoid “fancy fonts” as much as possible. These tend to make your site look unprofessional and outdated.

    DO THIS:

    Use only 2 fonts, or a maximum of 3 if you have to. Notice how the page below looks clean and sleek, all while keeping readability and consistency all throughout the design.

    Try comparing the differences between this example and the previous one. The example below with only two fonts is a website that your visitors will likely take seriously.  This previous one above with the overwhelming amount of fonts isn’t.

    Mistake #2: Failing to Use White Space

    White space is one of the most important aspects of web design. But what is it?

    Put simply, white space is literally the empty space between elements in a composition.

    In other words, it’s negative space. This pertains to anything on your website that isn’t filled with text, photos, or other design elements.

    Now, the problem arises when website owners want to fill all of the white space in, which is an absolute no-no.

    White space matters because it gives your site visitors and readers some breathing space when going through your site. Just how it was mentioned in the first design mistake to avoid, overwhelming your website with too much design elements is more than enough reason for your site visitors to leave and for your traffic to decrease significantly. It also makes for poorly executed design.

    DON’T DO THIS:

    In the example below, take a look at how the text is nearing the edges of the purple section’s margin. Notice as well how all elements leave almost zero room for white space.

    DO THIS INSTEAD:

    Give your site readers some room to breathe. If adding in long paragraphs is unavoidable, just remember to always take the rules of spacing into account—they’re pretty easy to remember anyway ?.  It will leave your page looking cool, crisp, and professional.

    Mistake #3: Designing Websites With Zero Flow in Your Site’s Content

    It’s important to pay attention as to how  information on your website is presented. Moreover, site content should generally follow a logical flow, taking the site viewer’s intuition into consideration.

    हमारा क्या मतलब है, यह देखने के लिए नीचे दिए गए दो उदाहरण देखें।

    DON’T DO THIS:

    Unless you’re a graphic designer by profession, it’s probably not a good idea to experiment with the standard flow of your website’s sections.

    Below, you can see that the site’s design lacks both visual and logical flow; everything is all over the place. You don’t want your audience having a hard time navigating through your site, either. This is another surefire way to do it.

    DO THIS INSTEAD:

    Notice how the sections of the website flow depending on what actions the visitor is most likely to take.

    डिज़ाइन सहज है और इसमें एक तार्किक प्रवाह है: सबसे पहले, संगठन अपना परिचय देता है और दर्शकों को बुनियादी बातों से अवगत कराता है; जैसे कि यह किस बारे में है और यह क्या करता है। दूसरा, यह विश्वसनीयता स्थापित करने के लिए विश्वसनीय आंकड़े जोड़ता है। अंत में, वेबसाइट दर्शकों को अपने संपर्क नंबर और कार्यक्रमों की एक सूची देती है, जिससे उन्हें कार्रवाई करने के लिए प्रेरित किया जा सके।

    Mistake #4: Trying to Fit in Every Bit of Information Onto Your Website

    जहाँ खाली जगह होनी चाहिए वहाँ अनावश्यक टेक्स्ट का ढेर लगाना आपके दर्शकों को दूर भगा सकता है। याद रखें कि केवल महत्वपूर्ण विवरण ही रखें।

    Studies find that readers only visit 20% of your webpage; everyone else outside that percentage will probably just scroll through your site.

    DON’T DO THIS.

    Don’t overwhelm your visitors with inconsistent, giant walls of text, especially if it means having to sacrifice your website design’s cohesiveness and structure.

    DO THIS INSTEAD:

    Keep your copy short and concise, and take out chunks of unecessary text if you can help it. Only keep vital information that your site visitors absolutely need to know.

    Conclusion

    Website design is important, and can be a huge deciding factor in whether or not you gain site traffic.

    याद रखें कि इसे हल्के में न लें। रिसर्च के लिए हमेशा समय दें, और मार्गदर्शन के लिए डिज़ाइन से जुड़े लेख देखें। इससे पहले कि आपको पता चले, आप अपनी साइट के ट्रैफ़िक को ऊपर जाते हुए देखेंगे। ? शुभकामनाएँ!

    Design in less time!

    Check out how much faster Page Builder Sandwich let you design your web pages.

    Try Live Preview

    This week’s useful resource:

    CANVA has hundreds of resources that you can access on their website. Apart from useful and easy-to-follow design tips, they also have photo editing tools, graphs, and a wide range of useful resources you can use for your creative projects.

    अपने अगले डिज़ाइन प्रोजेक्ट के लिए Canva की इस बेहतरीन कलर गाइड को देखें।

    Canva Design Wiki

    अपनी रचनात्मकता को उजागर करें।

    कैनवा कलर गाइड देखें