वेब डिज़ाइन में प्रगतिशील वृद्धि के लिए सर्वोत्तम अभ्यास

कई तेजी से बदलते भागों के साथ वेबसाइटों के निर्माण का शिल्प अविश्वसनीय रूप से जटिल है। वेब डिज़ाइन समुदाय का लक्ष्य है जटिलता कम, तथा त्रुटि की संभावना को कम करें निर्माण प्रक्रिया के प्रत्येक चरण में.

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

प्रगतिशील वृद्धि को समझना आसान है, लेकिन इसे सीधे अपने डिजाइन कार्य पर लागू करना आसान नहीं है। मैं कुछ कवर करना चाहूंगा वास्तविक दुनिया की परियोजनाओं में प्रगतिशील वृद्धि के लिए सर्वोत्तम अभ्यास सेवा मेरे डिज़ाइनर अपने वर्कफ़्लो के बारे में अधिक निरंतरता से सोचने में मदद करते हैं.

1. प्रगतिशील प्रगति को समझना

प्रगतिशील वृद्धि के सिद्धांत की सिफारिश की एक साधारण वेबसाइट से शुरू करें जो सभी ब्राउज़रों में काम करता है, इसे बनाता है हर आगंतुक के लिए सुलभ. फिर जब भी संभव हो सुविधाएँ जोड़ें.

यह सुशोभित गिरावट के विपरीत है जिसमें डिफ़ॉल्ट रूप से सभी विशेषताएं शामिल हैं, फिर कुछ काम नहीं होने पर अपमानित करता है.

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

इस सूची के अलावा लेख का तर्क है कि प्रगतिशील वृद्धि है सामग्री से पहले साथ में शैलियों और गतिशील घटकों को बाद में जोड़ा गया. सिमेंटिक HTML में सामग्री को किसी और चीज़ से पहले दिया जाना चाहिए.

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

यहां प्रगतिशील वृद्धि की मुख्य विशेषताओं का एक सामान्य तरीका है, जिसे आपको ध्यान में रखना चाहिए:

शब्दार्थ मार्कअप सभी सामग्री के लिए
उपयोगकर्ताओं के ब्राउज़र प्राथमिकताएँ सम्मान की जरूरत है
सामग्री और बुनियादी कार्यक्षमता होनी चाहिए सभी उपयोगकर्ताओं के लिए उपलब्ध है
विनीत जावास्क्रिप्ट केवल लोड किया जाता है वातावरण में जो इसका समर्थन कर सकता है

सामने के अंत के विकास में तकनीकी बाधाएं मुख्य रूप से ब्राउज़र संगतता द्वारा निर्धारित की जाती हैं। प्रगतिशील वृद्धि आपको मूल बातें वापस दिलाती है कि कैसे नंगे-हड्डी सरलतम वेबपेज की तरह लग सकता है। वहां से, आप कर सकते हैं अधिक उन्नत सुविधाओं के लिए योजना, CSS3 के गुणों की तरह.

लेकिन उन ब्राउज़रों के बारे में क्या है जो आधुनिक CSS3 का समर्थन नहीं करते हैं? यह वह जगह है जहां कैन आई यूज जैसी साइटें चलन में आती हैं। आपको यह तय करना चाहिए कि कौन सी सुविधाएँ लागू करने योग्य हैं, और निर्णय आधारित हैं अपनी वेबसाइट के लक्षित दर्शकों पर.

2. स्टाइलिस्टिक्स में सब्सिडी

अधिकांश ब्राउज़र आज आपकी ज़रूरत के सभी बुनियादी गुणों का समर्थन करते हैं। परंतु उन्नत CSS3 अभी भी विरासत उपयोगकर्ताओं के लिए एक समस्या है, और प्रगतिशील वृद्धि एक समाधान प्रदान करती है.

इन नई सुविधाओं को बनाए रखने के लिए फॉलबैक विधियों की तलाश करने के बजाय, पहले खुद के साथ चिंता करें उचित लेआउट संरचनाएं.

शब्दार्थ HTML और CSS मार्कअप लिखें जो यथासंभव सक्रिय ब्राउज़रों में काम करता है (IE5 समर्थन जैसे प्राचीन ब्राउज़रों के लिए समर्थन आवश्यक नहीं है).

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

कुछ डेवलपर्स सामग्री कॉलम पसंद करेंगे (.तरल पदार्थ) पहले HTML में दिखाई देते हैं। यह वह जगह है जहां प्रगतिशील वृद्धि खेल में आती है, और वैकल्पिक सीएसएस समाधान व्यवहार्य हो जाते हैं.

आपके HTML के दो प्राथमिक लक्ष्य इस प्रकार हैं:

पूरी तरह से शब्दार्थ और मान्य कोड
ए लगातार अनुभव सभी के लिए

इन लक्ष्यों को प्राप्त करने का सबसे सीधा तरीका है कुछ भी नहीं से शुरू करो तथा पेश करना, सबसे प्रगतिशील वृद्धि अधिवक्ताओं के रूप में यह सिफारिश करेंगे.

यदि आपका कोड CSS से अक्षम और सक्षम दोनों के साथ अच्छा है, तो यह सभी के लिए एक उचित समाधान प्रदान करता है.

यह भी गौर करने लायक है किस बिंदु पर आप किसी चीज़ के लिए समर्थन छोड़ते हैं. Microsoft ने IE6 के लिए पहले ही प्रमुख समर्थन छोड़ दिया है, इसलिए उस ब्राउज़र को चलाने वाले उपयोगकर्ता आपके समय के लायक नहीं हो सकते हैं.

लेकिन अभी भी एक बड़ा सवाल है: यदि कोई ब्राउज़र मेरे आधुनिक CSS का समर्थन नहीं करता है, तो मुझे क्या करना चाहिए?

आप बस काम करता है कि कोड लिखें के बिना यह, और आधुनिक सीएसएस को एक प्रगतिशील वृद्धि के रूप में मानते हैं। यह प्रगतिशील वृद्धि पद्धति की सुंदरता है.

आपको कमियों की आवश्यकता नहीं है, क्योंकि आप कर रहे हैं मूल रूप से यह मानते हुए कि कुछ भी डिफ़ॉल्ट रूप से समर्थित नहीं है.

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

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

हाँ, यह बदसूरत है, और हाँ, ऐसा लगता है कि हमने प्रगति के बीस साल खो दिए हैं ... लेकिन यह काम करता है.

3. जावास्क्रिप्ट को संभालना

यह ध्यान देने योग्य है कि प्रत्येक जावास्क्रिप्ट मुद्दा जिसे आप विकास प्रक्रिया के दौरान टकरा सकते हैं, मुश्किल और अद्वितीय है। जब आप प्रगतिशील वृद्धि के साथ एक नई परियोजना का निर्माण करते हैं, तो आपको अपनी सभी आवश्यक जेएस-आधारित सुविधाओं को सूचीबद्ध करना चाहिए, और विचार करना चाहिए कि वे कैसे हो सकते हैं जावास्क्रिप्ट के बिना काम करते हैं.

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

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

यहाँ एक और उदाहरण है। मान लें कि आपके पास एक लिंक है जो सामग्री को गतिशील रूप से लोड करता है। href मान रिक्त है, क्योंकि सब कुछ जावास्क्रिप्ट के माध्यम से loadDefault () विधि से लोड होता है.

इसके बजाय, यह निर्धारित करना बुद्धिमानी होगी href के लिए संपत्ति एक अलग पृष्ठ पर इंगित करें जहां सामग्री स्वाभाविक रूप से लोड हो सकती है, लेकिन आगंतुक केवल उस पेज को देखता है जब जावास्क्रिप्ट अक्षम होता है.

प्रगतिशील वृद्धि जावास्क्रिप्ट से अधिक है, लेकिन हर साल आगे वेब विकास के साथ, इसमें कोई संदेह नहीं है कि जावास्क्रिप्ट एक महत्वपूर्ण भूमिका निभाता है.

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