वेबसाइट पर एबव द फ़ोल्ड क्या है

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

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

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

एबव द फ़ोल्ड कंटेंट क्यों मायने रखता है?

पढ़ने के व्यवहार पर रिसर्च लगातार दिखाती है कि विज़िटर पेज के ऊपरी हिस्से के कंटेंट के साथ ज़्यादा समय बिताते हैं। कंटेंट जितना नीचे होता है, उतने कम विज़िटर उस तक पहुंचते हैं। यह ध्यान की कमी नहीं है। यह सीमित समय का समझदार जवाब है। विज़िटर जल्दी तय करते हैं कि पेज पढ़ने लायक है या नहीं, और यह फ़ैसला पहले दिखने वाले सेक्शन में ही हो जाता है।

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

एबव द फ़ोल्ड में क्या होना चाहिए?

एबव द फ़ोल्ड वाले इलाक़े में जगह कम है और दांव ऊंचा है। वहां दिखने वाले हर एलिमेंट को विज़िटर के काम आकर या पेज का लक्ष्य आगे बढ़ाकर अपनी जगह कमानी चाहिए।

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

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

एबव द फ़ोल्ड में वह कुछ भी नहीं होना चाहिए जो जगह घेरे लेकिन विज़िटर की समझ या फ़ैसले में योगदान न दे। बिना जानकारी वाली बड़ी सजावटी इमेज, लोडिंग में देरी करने वाले घूमते बैनर, या परिचय के टेक्स्ट के ऐसे ब्लॉक जिन्हें विज़िटर को मुद्दे तक पहुंचने से पहले स्क्रॉल करना पड़े, ये सब पेज की सबसे कीमती जगह बर्बाद करते हैं।

मोबाइल पर एबव द फ़ोल्ड कैसे अलग है?

मोबाइल पर एबव द फ़ोल्ड वाला इलाक़ा डेस्कटॉप से काफ़ी छोटा होता है। पोर्ट्रेट मोड में फ़ोन की स्क्रीन करीब 600 से 800 पिक्सल ऊंचाई दिखाती है। डेस्कटॉप मॉनिटर 900 से 1200 पिक्सल दिखा सकता है। एक ही डिज़ाइन डेस्कटॉप पर एबव द फ़ोल्ड में दो या तीन सेक्शन दिखा सकता है, जबकि मोबाइल पर सिर्फ़ एक हेडलाइन और एक इमेज।

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

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

क्या एबव द फ़ोल्ड पेज स्पीड पर असर डालता है?

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

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

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

क्या एबव द फ़ोल्ड SEO पर असर डालता है?

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

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

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

WEMASY एबव द फ़ोल्ड डिज़ाइन कैसे संभालता है

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

क्या-क्या शामिल है, यह WEMASY वेबसाइट बिल्डर पर देखें या प्राइसिंग पेज पर प्लान देखें।

अक्सर पूछे जाने वाले सवाल