क्या आपके पास " उत्तरदायी वेबसाइट " है? यह एक ऐसी साइट है जो विज़िटर के डिवाइस और स्क्रीन आकार के आधार पर बदलती है। उत्तरदायी वेब डिजाइन अब एक उद्योग का सबसे अच्छा अभ्यास है। Google द्वारा इसकी अनुशंसा की जाती है और वेब पर लाखों साइटों पर मिलती है। हालांकि, ऐसी वेबसाइट होने के बीच एक बड़ा अंतर है जो अलग-अलग स्क्रीन आकारों पर "फिट बैठता है" और ऐसी साइट है जो वास्तव में उत्तरदायी है।
मैं नियमित रूप से कंपनियों को अपनी वेबसाइट को फिर से डिजाइन करता हूं और अपने नए मोबाइल-अनुकूल डिज़ाइन के गुणों को विस्तारित करने के लिए एक प्रेस विज्ञप्ति को दबाता हूं। जब मैं उन साइटों पर जाता हूं, जो मुझे अक्सर मिलता है वह एक लेआउट है जो वास्तव में विभिन्न स्क्रीन पर फिट होने के लिए स्केल और बदलता है, लेकिन यह तब तक है जब तक वे प्रतिक्रिया का विचार लेते हैं। यह पर्याप्त नहीं है। एक वास्तव में उत्तरदायी वेबसाइट एक छोटी या बड़ी स्क्रीन फिट करने के लिए बस पैमाने से अधिक है। इन साइटों पर, आपको निम्नलिखित महत्वपूर्ण लक्षण भी मिलेंगे।
1. अनुकूलित प्रदर्शन
कोई भी वेबसाइट लोड होने की प्रतीक्षा करना पसंद नहीं करता है, और जब कोई ऐसे कनेक्शन के साथ मोबाइल डिवाइस का उपयोग कर रहा है जो आदर्श से कम हो सकता है, तो साइट को जल्दी से लोड करने की आवश्यकता और भी महत्वपूर्ण है।
तो आप अपनी साइट के प्रदर्शन को कैसे अनुकूलित करते हैं? यदि आप एक नया साइट रीडिज़ाइन के हिस्से के रूप में शुरू कर रहे हैं, तो आपको उस परियोजना के हिस्से के रूप में प्रदर्शन बजट बनाने के लिए एक बिंदु बनाना चाहिए। यदि आप किसी मौजूदा साइट के साथ काम कर रहे हैं और स्क्रैच से शुरू नहीं कर रहे हैं, तो पहला कदम यह है कि आप आज कहां खड़े हैं, यह देखने के लिए अपनी साइट के प्रदर्शन का परीक्षण करना है।
एक बार जब आपकी आधार आधार पर प्रदर्शित हो जाती है, तो आप डाउनलोड की गति को बढ़ाने के लिए आवश्यक सुधार करना शुरू कर सकते हैं। शुरू करने के लिए एक महान जगह शायद आपकी साइट की छवियों के साथ है। धीमी लोडिंग साइटों की बात आने पर बहुत बड़ी छवियां # 1 अपराधी हैं, इसलिए वेब डिलीवरी के लिए आपकी छवियों को अनुकूलित करने से वास्तव में आपकी साइट को प्रदर्शन दृष्टिकोण से मदद मिल सकती है।
हकीकत यह है कि बेहतर वेबसाइट प्रदर्शन और तेज़ डाउनलोड गति एक लाभ है कि सभी आगंतुकों की सराहना होगी। आखिरकार, किसी ने कभी शिकायत नहीं की है कि एक साइट "बहुत तेज़" लोड हो गई है, लेकिन यदि साइट को लोड करने में बहुत लंबा समय लगता है, तो यह पूरी तरह से लोगों को दूर कर देगा कि क्या यह प्रतिक्रियात्मक रूप से उनकी स्क्रीन पर "फिट बैठता है" या नहीं।
2. स्मार्ट सामग्री पदानुक्रम
जब एक बड़ी स्क्रीन पर एक वेबसाइट प्रदर्शित होती है, तो आप पर्याप्त स्क्रीन रीयल एस्टेट उपलब्ध होने के कारण विभिन्न तरीकों से सामग्री को प्रस्तुत करने में सक्षम होते हैं। आप अक्सर स्क्रीन पर महत्वपूर्ण संदेशों और छवियों, समाचार अपडेट, घटना की जानकारी, और साइट नेविगेशन को फिट कर सकते हैं। यह एक आगंतुक को पूरे पृष्ठ की सामग्री को आसानी से और तेज़ी से स्कैन करने की अनुमति देता है और यह तय करता है कि उनके लिए क्या महत्वपूर्ण है।
यह परिदृश्य बहुत नाटकीय रूप से बदलता है जब आप उस साइट डिज़ाइन को लेते हैं और इसे छोटे स्क्रीन डिवाइस जैसे सेल फ़ोन के रूप में बदलते हैं। अचानक आप पहले से मौजूद स्क्रीन रीयल एस्टेट के एक अंश के साथ काम कर रहे हैं। इसका मतलब है कि आपको यह तय करने की ज़रूरत है कि साइट पर पहले क्या दिखाई देगा, इसका क्या पालन करेगा, आदि। सब कुछ एक बार में देखा जा रहा है, तो आपके पास केवल एक या दो चीजें दिखाने की जगह है (जिनमें से एक नेविगेशन है)। इसका मतलब है कि पदानुक्रम के फैसले किए जाने की जरूरत है। दुर्भाग्य से, अक्सर यह निर्धारित करता है कि स्क्रीन पर पहले क्या आता है, और फिर दूसरा, इत्यादि जिस तरह से पृष्ठ को कोड किया गया है। यह सबसे आसान है, जब एक उत्तरदायी साइट बनाते हैं, स्क्रीन पर पहले कोड में जो कुछ भी पहले प्रदर्शित होता है, उसके बाद कोड में दूसरा आइटम और आगे भी होता है। दुर्भाग्यवश, एक डिवाइस पर सबसे महत्वपूर्ण क्या हो सकता है वह दूसरे पर महत्वपूर्ण नहीं हो सकता है। वास्तव में उत्तरदायी साइट समझती है कि विभिन्न स्थितियों के आधार पर सामग्री का पदानुक्रम बदलना चाहिए और यह कहां प्रदर्शित होता है इसके बारे में स्मार्ट होना चाहिए।
सीएसएस लेआउट तकनीकों में सुधार, सीएसएस ग्रिड लेआउट, फ्लेक्सबॉक्स, और अधिक सहित, वेब डिज़ाइनर और डेवलपर्स को HTML कोड में सामग्री क्षेत्रों के सटीक क्रम से हम्स्ट्रंग होने की बजाय, समझदारी से सामग्री डालने की बात आती है। इन नई लेआउट तकनीकों का लाभ लेना डिवाइस परिदृश्य के रूप में और भी महत्वपूर्ण हो जाएगा, और हमारी साइट के उपयोगकर्ताओं की जरूरतों का विकास जारी है।
3. अनुभव जो खाते में एक डिवाइस की ताकत और कमजोरियों को खाते हैं
उपकरणों के विषय पर रहना - प्रत्येक डिवाइस जो आपकी साइट पर जाने के लिए उपयोग कर सकती है, उस प्लेटफॉर्म के निहित शक्तियों और कमजोरियों दोनों में है। एक महान उत्तरदायी साइट विभिन्न उपकरणों की क्षमताओं और सीमाओं को समझती है और उन अनुकूलित अनुभवों को बनाने के लिए उनका उपयोग करती है जो उस पल में किसी भी डिवाइस का उपयोग कर सकते हैं।
उदाहरण के लिए, एक सेल फोन में कई सुविधाएं शामिल होती हैं जिन्हें आप पारंपरिक डेस्कटॉप कंप्यूटर में नहीं ढूंढ पाएंगे। जीपीएस एक मोबाइल केंद्रित फीचर का एक उदाहरण है (हां, आप डेस्कटॉप पर सामान्य स्थान जानकारी भी प्राप्त कर सकते हैं, लेकिन डिवाइस जीपीएस अधिक सटीक है)। आपकी साइट जीपीएस की जानकारी का उपयोग किसी व्यक्ति को बहुत ही विस्तृत और विशिष्ट चरण-दर-चरण दिशा की जानकारी या विशेष ऑफ़र के आधार पर स्मार्ट रूप से भेजने के लिए कर सकती है, जहां वे उस समय हैं।
अभ्यास में इस प्रिंसिपल का एक और उदाहरण एक ऐसी साइट होगी जो समझती है कि आप किस प्रकार के स्क्रीन डिस्प्ले का उपयोग कर रहे हैं और उस डिस्प्ले के लिए उपयुक्त छवियों को भेजता है। यदि आपके पास उच्च पिक्सेल घनत्व वाली स्क्रीन है, तो आप उस स्क्रीन पर उच्च गुणवत्ता वाली छवियां भेजने का निर्णय ले सकते हैं। ये वही छवियां कम सक्षम स्क्रीन पर व्यर्थ होंगी, हालांकि, और अतिरिक्त गुणवत्ता खो जाएगी जबकि अतिरिक्त फ़ाइल आकार को वास्तविक कारण के लिए डाउनलोड नहीं किया जाएगा।
वास्तव में बहुत ही उत्तरदायी साइटें संपूर्ण उपयोगकर्ता अनुभव और उस अनुभव को तैयार करने के लिए काम करती हैं जो न केवल डिवाइस प्रकार या उसकी स्क्रीन का आकार, बल्कि हार्डवेयर के अन्य महत्वपूर्ण पहलुओं के आधार पर भी अनुभव करती है।
4. संदर्भ के साथ सामग्री
प्रारंभ में, उत्तरदायी वेब डिज़ाइन को साइट के लेआउट के विचार के कारण अलग-अलग स्क्रीन आकारों के जवाब के कारण इसका नाम प्राप्त हुआ, लेकिन आप केवल स्क्रीन आकार की तुलना में बहुत अधिक प्रतिक्रिया दे सकते हैं। किसी डिवाइस की ताकत और कमजोरियों का उपयोग करने के पिछले उदाहरण पर बिल्डिंग, आप उन वेबसाइटों का उपयोग कर सकते हैं, साथ ही तिथि और समय जैसे अन्य डेटा, वास्तव में वेबसाइट अनुभव को अनुकूलित करने के लिए।
एक बड़े व्यापार शो कार्यक्रम के लिए एक वेबसाइट की कल्पना करो। जबकि एक उत्तरदायी वेबसाइट विभिन्न स्क्रीन के साथ साइट के पृष्ठों के लेआउट को बदलने के लिए बदल जाएगी, आप यह निर्धारित करने के लिए तारीख का उपयोग भी कर सकते हैं कि कौन सी सामग्री प्रदर्शित करने के लिए सबसे महत्वपूर्ण है। यदि यह घटना से पहले समय की अवधि है, तो आप संभवतः पंजीकरण जानकारी प्रदर्शित करना चाहते हैं। यदि, हालांकि, वास्तव में घटना उस समय हो रही है, पंजीकरण सबसे महत्वपूर्ण सामग्री नहीं हो सकता है। इसके बजाए, आप घटनाओं के दिन के शेड्यूल को और अधिक महत्वपूर्ण मान सकते हैं क्योंकि यह उस उपयोगकर्ता की तत्काल जरूरतों के लिए अधिक प्रासंगिक है।
चीजों को और कदम उठाते हुए, आप यह निर्धारित करने के लिए डिवाइस के जीपीएस में टैप कर सकते हैं कि वे वास्तव में व्यापार शो में कहां हैं। आप उन्हें अपने स्थान के आधार पर इंटरैक्टिव सामग्री दे सकते हैं, उन्हें आस-पास के बूथ या सत्र शुरू करने के बारे में दिखा सकते हैं।
5. अभिगम्यता
अंतिम उदाहरण हम देखेंगे कि साइट विज़िटर की ज़रूरतों को वास्तव में कैसे प्रतिक्रिया दे सकती है, वेबसाइट पहुंच के बारे में सोचना है । अक्षमता वाले लोगों सहित वेबसाइटों को जितना संभव हो सके उतने लोगों द्वारा उपयोग किया जा सकता है। आपकी वेबसाइट किसी ऐसे व्यक्ति द्वारा उपयोग की जा सकती है जिसे अपनी सामग्री तक पहुंचने के लिए स्क्रीन रीडर या अन्य सहायक सॉफ़्टवेयर की आवश्यकता होती है। इस तरह, आपकी साइट उनकी ज़रूरतों का जवाब दे रही है क्योंकि आपने यह सुनिश्चित किया है कि अनुभव, अक्षम विकलांग आगंतुकों के लिए अलग है, अभी भी उपयुक्त है।
जितना संभव हो उतना डेटा पॉइंट्स का जवाब देकर, न केवल स्क्रीन आकार, एक वेबसाइट सिर्फ "मोबाइल फ्रेंडली" से कहीं अधिक हो सकती है। यह वाक्यांश के हर भाव में वास्तव में उत्तरदायी अनुभव बन सकता है।